jwdrhgkwegrkhtgrkhlsgb

src/index.html

@@ -143,6 +143,7 @@ <h3>Manage Categories</h3>
             <div class="tabs">
               <button class="tab-btn active"
                 data-tab="transactions">Transactions</button>
+              <button class="tab-btn" data-tab="goals">Goals</button>
             </div>
 
             <div class="tab-content active" id="transactions-tab">
@@ -187,5 +188,7 @@ <h3>Savings Goals</h3>
     </div>
 
     <script type="module" src="script.js"></script>
+    <script src="utilities/setGoalsScript.js"></script>
+    <script type="module" src="utilities/generateReport.js"></script>
   </body>
 </html>

src/script.js

@@ -56,21 +56,39 @@ let transactions = getTransactionsFromStorage();
 function addTransaction(e, descriptionEl, amountEl, categoryEl, dateEl) {
   e.preventDefault();
 
+  // Input validation
+  const description = descriptionEl.value.trim();
   const amount = parseFloat(amountEl.value);
-
-  const description = descriptionEl.value;
   const category = categoryEl.value;
   const date = dateEl.value;
 
+  if (!description || isNaN(amount) || !category || !date) {
+    alert("Please fill in all fields with valid data.");
+    return;
+  }
+  // const description = descriptionEl.value;
+  // const category = categoryEl.value;
+  // const date = dateEl.value;
+
   const newTransaction = {
+    id: generateID(),
     description,
     amount,
     category,
     date,
   };
 
-  transaction.push(newTransaction);
+  transactions.push(newTransaction);
   updateLocalStorage();
+
+  descriptionEl.value = "";
+  amountEl.value = "";
+  categoryEl.value = "Other";
+  dateEl.value = "";
+
+  console.log("Transaction added:", newTransaction);
+
+  // init();
 }
 
 // Generate unique ID
@@ -94,9 +112,10 @@ function removeTransaction(id) {
 function updateValues(balanceEl, incomeEl, expenseEl) {
   const amounts = transactions.map((transaction) => transaction.amount);
 
-  const total = amounts.reduce((acc, amount) => {
-    return (acc = amount);
-  }, 0);
+  // const total = amounts.reduce((acc, amount) => {
+  //   return (acc = amount);
+  // }, 0);
+  const total = amounts.reduce((acc, amount) => acc + amount, 0);
 
   const income = amounts
     .filter((amount) => amount > 0)
@@ -106,9 +125,11 @@ function updateValues(balanceEl, incomeEl, expenseEl) {
     .filter((amount) => amount < 0)
     .reduce((acc, amount) => acc - amount, 0);
 
-  balanceEl.textContent = `Rs ${total}`;
-  incomeEl.textContent = `+Rs ${income}`;
-  expenseEl.textContent = `-Rs ${Math.abs(expense)}`;
+    balanceEl.textContent = `Rs ${total.toFixed(2)}`;
+    incomeEl.textContent = `+Rs ${income.toFixed(2)}`;
+    expenseEl.textContent = `-Rs ${Math.abs(expense).toFixed(2)}`;  // balanceEl.textContent = `Rs ${total}`;
+  // incomeEl.textContent = `+Rs ${income}`;
+  // expenseEl.textContent = `-Rs ${Math.abs(expense)}`;
 }
 
 // Add transactions to DOM
@@ -117,7 +138,8 @@ function addTransactionDOM(transaction, transactionListEl) {
 
   const item = document.createElement("li");
 
-  item.className = transaction.category === "income" ? "expense" : "income";
+  // Fix incorrect class assignment - base it on amount instead of category name
+  item.className = transaction.amount < 0 ? "expense" : "income";
 
   const detailsDiv = document.createElement("div");
   detailsDiv.className = "details";
@@ -148,6 +170,10 @@ function addTransactionDOM(transaction, transactionListEl) {
   deleteBtn.className = "delete-btn";
   deleteBtn.textContent = "×";
 
+  // deleteBtn.addEventListener("click", () => {
+  //   removeTransaction(transaction.id);
+  // });
+
   item.appendChild(detailsDiv);
   item.appendChild(amountSpan);
   item.appendChild(deleteBtn);
@@ -157,6 +183,10 @@ function addTransactionDOM(transaction, transactionListEl) {
 
   // Don't change the following line
   deleteBtn = transactionListEl.lastElementChild.querySelector(".delete-btn");
+
+  deleteBtn.addEventListener("click", () => {
+    removeTransaction(transaction.id);
+  });
 }
 
 function createChart(chartContainer) {
@@ -403,8 +433,8 @@ function deleteCategory(categoryName) {
 
     // Update transactions with this category to "Other" or first available category
     const defaultCategory = "Other";
-    const transactions = getTransactionsFromStorage();
-
+
+    // Use the global transactions variable instead of redeclaring it
     transactions.forEach((transaction) => {
       if (transaction.category === categoryName) {
         transaction.category = defaultCategory;
@@ -431,18 +461,15 @@ function updateCategoryDropdowns(categoryDropdowns) {
     const currentValue = dropdown.value;
     dropdown.innerHTML = "";
 
-    // Add all categories
+    // Add all categories without unnecessary formatting
     categories.forEach((category) => {
-      dropdown.insertAdjacentHTML(
-        "beforeend",
-        `<option value="${category.toLowerCase()}">${category}</option>`
-      );
+      const option = document.createElement("option");
+      option.value = category;
+      option.textContent = category;
+      dropdown.appendChild(option);
     });
 
-    if (
-      currentValue &&
-      dropdown.querySelector(`option[value="${currentValue}"]`)
-    ) {
+    if (currentValue && dropdown.querySelector(`option[value="${currentValue}"]`)) {
       dropdown.value = currentValue;
     }
   });

src/styles.css

@@ -120,6 +120,14 @@ header {
   gap: 20px;
 }
 
+/* Enhancing UI structure by defining a grid layout for the main container */
+.main-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+  gap: 20px;
+}
+
 .dashboard {
   flex: 1;
   min-width: 300px;
@@ -287,8 +295,8 @@ select {
 
 .tab-content.active {
   display: block;
-  /* Bug #24: overflow-y should be set to auto */
   height: 370px;
+  overflow-y: auto;
 }
 
 /* Transaction List */