Added Quiz App and Budget Tracker App

JS Projects/Budgetry - Expense Tracker App/budget.js

@@ -0,0 +1,102 @@
+let totalAmount = document.getElementById("total-amount");
+let userAmount = document.getElementById("user-amount");
+const checkAmountButton = document.getElementById("check-amount");
+const totalAmountButton = document.getElementById("total-amount-button");
+const productTitle = document.getElementById("product-title");
+const errorMessage = document.getElementById("budget-error");
+const productTitleError = document.getElementById("product-title-error");
+const productCostError = document.getElementById("product-cost-error");
+const amount =  document.getElementById("amount");
+const expenditureValue =  document.getElementById("expenditure-value");
+const balanceValue =  document.getElementById("balance-amount");
+const list = document.getElementById("list");
+let tempAmount =0;
+
+//set budget
+totalAmountButton.addEventListener("click",()=>{
+    tempAmount= totalAmount.value;
+
+    if(tempAmount=="" || tempAmount<0){
+        errorMessage.classList.remove("hide");
+    }
+    else
+    {
+        errorMessage.classList.add("hide");
+
+    amount.innerHTML=tempAmount;
+    //set balance
+    balanceValue.innerText= tempAmount-expenditureValue.innerText;
+    //clear input box
+    totalAmount.value="";
+    }
+});
+    //disable edit and delete button
+    const disableButtons = (bool)=> {
+        let editButtons = document.getElementsByClassName("edit");
+        Array.from(editButtons).forEach(element =>{
+            element.disabled = bool;
+        });
+    };
+    //modify list elements
+    const modifyElement=(element,edit=false)=>{
+        let parentDiv = element.parentElement;
+        let currentBalance =  balanceValue.innerText;
+        let currentExpense = expenditureValue.innerText;
+        let parentAmount = parentDiv.querySelector(".amount").innerText;
+        if(edit){
+            let parentText = parentDiv.querySelector(".product").innerText;
+            productTitle.value= parentText;
+            userAmount.value=parentAmount;
+            disableButtons(true);
+        }
+        balanceValue.innerText=parseInt(currentBalance)+ parseInt(parentAmount);
+        expenditureValue.innerText=parseInt(currentExpense)-parseInt(parentAmount);
+        parentDiv.remove();
+    };
+
+
+    //create Expense List
+    const listCreator =(expenseName, expenseValue) =>{
+        let subListContent = document.createElement("div");
+        subListContent.classList.add("sublist-content", "flex-space");
+        list.appendChild(subListContent);
+        subListContent.innerHTML = `<p class="product">${expenseName}</p><p class="amount">${expenseValue}</p>`;
+        let editButton = document.createElement("button");
+        editButton.classList.add("fa-solid","fa-pen-to-square","edit");
+        editButton.style.fontSize ="24px";
+        editButton.addEventListener("click", ()=>{
+            modifyElement(editButton,true);
+        });
+        let deleteButton =  document.createElement("button");
+        deleteButton.classList.add("fa-solid","fa-trash-can","delete");
+        deleteButton.style.fontSize= "24px";
+        deleteButton.addEventListener("click", ()=>{
+            modifyElement(deleteButton);
+        });
+        subListContent.appendChild(editButton);
+        subListContent.appendChild(deleteButton);
+        document.getElementById("list").appendChild(subListContent);
+    };
+
+    //adding expenses
+    checkAmountButton.addEventListener("click",()=>{
+
+        if(!userAmount.value || !productTitle.value){
+            productTitleError.classList.remove("hide");
+            return false;
+        }
+        //enable buttons
+        disableButtons(false);
+        //total expense
+        let expenditure = parseInt(userAmount.value);
+        let sum = parseInt(expenditureValue.innerText)+expenditure;
+        expenditureValue.innerText=sum;
+        //balance
+        const totalBalance =  tempAmount-sum;
+        balanceValue.innerText = totalBalance;
+        //add to list
+        listCreator(productTitle.value, userAmount.value);
+
+        productTitle.value="";
+        userAmount.value="";
+    });

JS Projects/Budgetry - Expense Tracker App/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400;500;700&family=Open+Sans:wght@500&family=Varela+Round&display=swap" rel="stylesheet">
+    <title>Expense Tracker</title>
+</head>
+<body>
+    <header>
+        <div class="header">Your Inventory</div>
+    </header>
+    <div class="wrapper">
+        <div class="container">
+            <div class="sub-container">
+                <!-- Budget -->
+                <div class="total-amount-container">
+                    <h3>Budget</h3>
+                    <p class="hide error" id="budget-error">Value cannot be empty or negative</p>
+                    <input type="number" id="total-amount" placeholder="Enter total budget">
+                    <button class="submit" id="total-amount-button">Set Budget</button>
+                </div>
+                <!-- Expenditure -->
+               <div class="user-amount-container">
+                    <h3>Expenses</h3>
+                    <p class="hide error" id="product-title-error">Value cannot be empty or negative</p>
+                    <input type="text" class="product-title" id="product-title" placeholder="Enter Product title">
+                    <input type="number" id="user-amount" placeholder="Enter Cost of Product">
+                    <button class="submit" id="check-amount">Check Amount</button>
+                </div>
+            </div>
+            <!-- Output -->
+            <div class="output-container flex-space">
+                <div>
+                    <p>Total Budget</p>
+                    <span id="amount">0</span>
+                </div>
+                <div>
+                    <p>Expenses</p>
+                    <span id="expenditure-value">0</span>
+                </div>
+                <div>
+                    <p>Balance</p>
+                    <span id="balance-amount">0</span>
+                </div>
+            </div>
+        </div>
+        <div class="list">
+            <h3>Expense List</h3>
+            <div class="list-container" id="list"></div>
+        </div>
+    </div>
+    <script src="budget.js"></script>
+</body>
+</html>

JS Projects/Budgetry - Expense Tracker App/style.css

@@ -0,0 +1,158 @@
+*{
+    padding:0;
+    margin:0;
+    box-sizing: border-box;
+    font-family: 'Varela Round', sans-serif;
+}
+body{
+    background-color: #9a9b9c7a;
+}
+.header{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 2.5em;
+    margin-bottom: 1em;
+    font-size: 28px;
+    font-weight: bold;
+}
+.wrapper{
+    width:90%;
+    font-size:15px;
+    max-width: 45rem;
+    margin: 1rem auto;
+}
+.container{
+    width:100%;
+}
+.sub-container{
+    width:100%;
+    display:grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3em;
+}
+.flex{
+    display: flex;
+    align-items: center;
+}
+.flex-space{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.wrapper h3{
+    color: #363d55;
+    font-weight: bold;
+    margin-bottom: 0.7em;
+}
+.container input{
+    display: block;
+    width:100%;
+    padding: 0.8em;
+    font-size: 14px;
+    border: 1px solid #d0d0d0;
+    border-radius: 0.3em;
+    color:#414a67;
+    outline: none;
+    font-weight: 400;
+    margin-bottom: 0.9em;
+}
+.container input:focus{
+    border-color:rgb(36, 127, 212);
+}
+.total-amount-container, .user-amount-container{
+    background-color: #ffffff;
+    padding: 1.5em;
+    border-radius: 0.4em;
+    box-shadow: 0 0.6em 1.2em rgba(28,0,80,0.06);
+}
+
+.output-container{
+    background-color: rgb(36, 127, 212);
+    color: #ffffff;
+    border-radius: 0.3em;
+    box-shadow: 0 0.6em 1.2em rgba(28,0,80,0.06);
+    font-weight: 500;
+    margin: 2em 0;
+    padding:1.2em;
+}
+.output-container p{
+    font-weight: 500;
+    margin-bottom:0.5em;
+}
+.output-container span{
+    display: block;
+    text-align: center;
+    font-weight: 400;
+}
+.submit{
+    font-size: 1em;
+    margin-top: 0.8em;
+    background-color:rgb(36, 127, 212) ;
+    border:none;
+    outline: none;
+    color: #ffffff;
+    border-radius: 0.4em;
+    padding: 0.5em 0.8em;
+    cursor:pointer;
+}
+.submit:hover{
+    background-color: rgb(14, 71, 124) ;
+}
+.list{
+    background-color: #ffffff;
+    padding: 1.5em;
+    box-shadow: 0 0.6em 1.2em rgba(28,0,80,0.06);
+    border-radius: 0.3em;
+}
+.sublist-content{
+    width:100%;
+    border-left: 0.3em solid rgb(36, 127, 212);
+    margin-bottom:0.6em;
+    padding: 0.5em 0;
+}
+.product{
+    font-weight: 500;
+    margin-left: 1.5em;
+    color: #363d55;
+}
+.amount{
+    color: #363d55;
+    margin-left: 20%;
+}
+.icons-container{
+    width: 5em;
+    margin: 1.2em;
+    align-items: center;
+}
+.product-title{
+    margin-bottom: 1em;
+}
+.hide{
+    display:none;
+}
+.error{
+    color:rgb(231, 52, 52)
+}
+.edit{
+    margin-left: auto;
+}
+.edit, .delete{
+    background: transparent;
+    cursor:pointer;
+    margin-right: 1.5em;
+    border:none;
+    color:rgb(36, 127, 212);
+}
+.edit:hover, .delete:hover{
+    color:rgb(14, 71, 124);
+}
+@media screen and (max-width:600px){
+    .wrapper{
+        font-size: 14px;
+    }
+    .sub-container{
+        grid-template-columns: 1fr;
+    }
+}