budget app of javascript

yassmittal · Dec 14, 2023 · 75bed75 · 75bed75
1 parent 9aec69f
commit 75bed75
Show file tree

Hide file tree

Showing 4 changed files with 439 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+RandomProjects
+S
+S.pub
diff --git a/JavascriptProjects/BudgetApp/index.html b/JavascriptProjects/BudgetApp/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Budget App</title>
+    <!-- Font Awesome Icons -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+    />
+    <!-- Google Fonts -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <!-- Stylesheet -->
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <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 Amount"
+            />
+            <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">
+              Values cannot be empty
+            </p>
+            <input
+              type="text"
+              class="product-title"
+              id="product-title"
+              placeholder="Enter Title of Product"
+            />
+            <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>
+      <!-- List -->
+      <div class="list">
+        <h3>Expense List</h3>
+        <div class="list-container" id="list"></div>
+      </div>
+    </div>
+    <!-- Script -->
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/JavascriptProjects/BudgetApp/script.js b/JavascriptProjects/BudgetApp/script.js
@@ -0,0 +1,210 @@
+const setBudgetBtn = document.querySelector("#total-amount-button");
+const totalAmountInput = document.querySelector("#total-amount");
+
+const productTitleInput = document.querySelector("#product-title");
+const productCostInput = document.querySelector("#user-amount");
+
+const totalAmountEl = document.querySelector("#amount");
+const totalExpenditureEl = document.querySelector("#expenditure-value");
+const balanceAmountEl = document.querySelector("#balance-amount");
+
+const budgetError = document.querySelector("#budget-error");
+const productTitleErr = document.querySelector("#product-title-error");
+
+const checkAmountBtn = document.querySelector("#check-amount");
+const listWrap = document.querySelector("#list");
+
+let totalExpense = 0;
+let balanceAmount = 0;
+
+let editing = false;
+
+let editinItemId;
+
+let expenseList = JSON.parse(localStorage.getItem("expenseListArr"))
+  ? JSON.parse(localStorage.getItem("expenseListArr"))
+  : [];
+
+let totalAmount = JSON.parse(localStorage.getItem("totalBudget"))
+  ? JSON.parse(localStorage.getItem("totalBudget"))
+  : 0;
+totalAmountEl.textContent = totalAmount;
+
+console.log(expenseList);
+
+expenseList.forEach((item) => {
+  listWrap.appendChild(
+    renderListHTML(item.productName, item.productPrice, item.id)
+  );
+});
+
+setFinalBudget();
+
+setBudgetBtn.addEventListener("click", (e) => {
+  e.preventDefault();
+  setBudget();
+});
+
+// console.log(JSON.parse(localStorage.getItem("expenseListArr")));
+
+checkAmountBtn.addEventListener("click", (e) => {
+  e.preventDefault();
+
+  if (editing) {
+    changeCurrentListItem(editinItemId);
+  } else {
+    setExpenseList(productTitleInput.value, productCostInput.value);
+    console.log(totalExpense);
+  }
+});
+
+function setBudget() {
+  if (totalAmountInput.value && totalAmountInput.value > 0) {
+    totalAmountEl.textContent = totalAmountInput.value;
+    removeHideIfPresent(budgetError);
+    totalAmount = parseInt(totalAmountInput.value);
+    localStorage.setItem("totalBudget", totalAmount);
+    setFinalBudget();
+  } else {
+    budgetError.classList.remove("hide");
+  }
+}
+
+function removeHideIfPresent(element) {
+  if (!element.classList.contains("hide")) {
+    element.classList.add("hide");
+  }
+}
+
+function setFinalBudget() {
+  totalExpense = 0;
+  expenseList.forEach((item) => {
+    totalExpense += parseInt(item.productPrice);
+  });
+
+  balanceAmount = totalAmount - totalExpense;
+
+  totalExpenditureEl.textContent = totalExpense;
+  balanceAmountEl.textContent = balanceAmount;
+}
+
+function setExpenseList(productTitle, productCost) {
+  if (expenseListVaidation(productTitle, productCost) == false) return;
+
+  const id = Date.now();
+  let listItem = renderListHTML(productTitle, productCost, id);
+
+  listWrap.appendChild(listItem);
+  fillExpenseListArr(productTitle, productCost, id);
+  setFinalBudget();
+  clearExpenseInputs();
+}
+
+function renderListHTML(productTitle, productCost, id) {
+  const listItem = document.createElement("div");
+
+  const deleteBtn = document.createElement("button");
+  deleteBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    deleteListItem(id);
+  });
+  deleteBtn.textContent = "delete";
+
+  const editBtn = document.createElement("button");
+  editBtn.textContent = "edit";
+
+  editBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+
+    editListItem(id);
+  });
+
+  listItem.textContent = `product Title: ${productTitle} , Product Cost : ${productCost}, Id: ${id}`;
+
+  listItem.append(deleteBtn, editBtn);
+  return listItem;
+}
+
+function fillExpenseListArr(productTitle, productCost, id) {
+  expenseList.push({
+    productName: productTitle,
+    productPrice: productCost,
+    id: id,
+  });
+  localStorage.setItem("expenseListArr", JSON.stringify(expenseList));
+}
+
+function clearExpenseInputs() {
+  productTitleInput.value = "";
+  productCostInput.value = "";
+}
+
+function expenseListVaidation(productTitle, productCost) {
+  if (
+    productTitle != null &&
+    productCost >= 0 &&
+    productCost != null &&
+    productCost != "" &&
+    productTitle != ""
+  ) {
+    removeHideIfPresent(productTitleErr);
+    return true;
+  } else {
+    productTitleErr.classList.remove("hide");
+    return false;
+  }
+}
+
+function deleteListItem(itemId) {
+  // console.log(expenseList)
+  expenseList = expenseList.filter((item) => {
+    return item.id != itemId;
+  });
+
+  localStorage.setItem("expenseListArr", JSON.stringify(expenseList));
+
+  console.log(expenseList);
+  listWrap.textContent = "";
+
+  expenseList.forEach((item) => {
+    listWrap.append(
+      renderListHTML(item.productName, item.productPrice, item.id)
+    );
+  });
+
+  setFinalBudget();
+}
+
+function editListItem(id) {
+  console.log(id);
+
+  const editItem = expenseList.find((item) => {
+    return item.id === id;
+  });
+
+  productTitleInput.value = editItem.productName;
+  productCostInput.value = editItem.productPrice;
+
+  editing = true;
+  editinItemId = id;
+}
+
+function changeCurrentListItem(id) {
+  const editItem = expenseList.find((item) => {
+    return item.id === id;
+  });
+
+  editItem.productName = productTitleInput.value;
+  editItem.productPrice = productCostInput.value;
+
+  localStorage.setItem("expenseListArr", JSON.stringify(expenseList));
+  listWrap.textContent = "";
+
+  expenseList.forEach((item) => {
+    listWrap.append(
+      renderListHTML(item.productName, item.productPrice, item.id)
+    );
+  });
+
+  setFinalBudget();
+}