From a7bb3b5b703404241cbe678a0b3282f0e23d987d Mon Sep 17 00:00:00 2001 From: chamithu-vithanage Date: Sat, 26 Apr 2025 11:13:12 +0530 Subject: [PATCH 1/6] JS Add input validations --- package-lock.json | 4 ++-- src/script.js | 22 +++++++++++++++++++--- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index f381c35..14682d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "bug-hunt", + "name": "buget-tracker", "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "bug-hunt", + "name": "buget-tracker", "version": "1.0.0", "license": "ISC", "dependencies": { diff --git a/src/script.js b/src/script.js index 7ff5275..208eeb1 100644 --- a/src/script.js +++ b/src/script.js @@ -56,21 +56,37 @@ 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 = ""; + + init(); } // Generate unique ID From 77a94089c0077e523d8dd7a125fd32baa6eee886 Mon Sep 17 00:00:00 2001 From: chamithu-vithanage Date: Sat, 26 Apr 2025 11:30:55 +0530 Subject: [PATCH 2/6] JS Fix workflow issue --- .github/workflows/test.yaml | 2 +- src/script.js | 19 ++++++++++++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml index 2a1f079..8adceba 100644 --- a/.github/workflows/test.yaml +++ b/.github/workflows/test.yaml @@ -1,7 +1,7 @@ name: Test School Vanilla JS on: - pull_request_target:: + pull_request_target: types: [opened, synchronize, reopened] branches: ["main", "master"] diff --git a/src/script.js b/src/script.js index 208eeb1..0fa95a0 100644 --- a/src/script.js +++ b/src/script.js @@ -86,7 +86,9 @@ function addTransaction(e, descriptionEl, amountEl, categoryEl, dateEl) { categoryEl.value = "Other"; dateEl.value = ""; - init(); + console.log("Transaction added:", newTransaction); + + // init(); } // Generate unique ID @@ -110,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) @@ -122,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 From 4475ba4dd0fa5f7a3d755d4a9649cc2dadbd80b3 Mon Sep 17 00:00:00 2001 From: Resandu Marasinghe <100013605+ResanduMarasinghe@users.noreply.github.com> Date: Sat, 26 Apr 2025 06:22:52 +0000 Subject: [PATCH 3/6] Nothing changed --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 24e80d2..8022ffc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # SpendWise Budget Tracker 📊 -Track your income and expenses with this straightforward web application, built purely with HTML, CSS, and vanilla JavaScript. +Test Track your income and expenses with this straightforward web application, built purely with HTML, CSS, and vanilla JavaScript. --- From f2aa1b154dff064c524e35707bac76576f783cef Mon Sep 17 00:00:00 2001 From: Resandu Marasinghe <100013605+ResanduMarasinghe@users.noreply.github.com> Date: Sat, 26 Apr 2025 06:34:07 +0000 Subject: [PATCH 4/6] fix issue 3 to 9 --- README.md | 2 +- src/index.html | 3 +++ src/script.js | 22 ++++++++++------------ src/styles.css | 10 +++++++++- 4 files changed, 23 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 8022ffc..24e80d2 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # SpendWise Budget Tracker 📊 -Test Track your income and expenses with this straightforward web application, built purely with HTML, CSS, and vanilla JavaScript. +Track your income and expenses with this straightforward web application, built purely with HTML, CSS, and vanilla JavaScript. --- diff --git a/src/index.html b/src/index.html index 5d0f212..8357d2a 100644 --- a/src/index.html +++ b/src/index.html @@ -143,6 +143,7 @@

Manage Categories

+
@@ -187,5 +188,7 @@

Savings Goals

+ + \ No newline at end of file diff --git a/src/script.js b/src/script.js index 0fa95a0..1c1fe56 100644 --- a/src/script.js +++ b/src/script.js @@ -138,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"; @@ -424,8 +425,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; @@ -452,18 +453,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", - `` - ); + 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; } }); diff --git a/src/styles.css b/src/styles.css index 520c53a..f682a4a 100644 --- a/src/styles.css +++ b/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 */ From f714a92d9ab1bd86c4331cc08b7cd6f213ef3659 Mon Sep 17 00:00:00 2001 From: Resandu Marasinghe <100013605+ResanduMarasinghe@users.noreply.github.com> Date: Sat, 26 Apr 2025 06:38:29 +0000 Subject: [PATCH 5/6] fix 1 and 2 --- src/script.js | 78 ++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 59 insertions(+), 19 deletions(-) diff --git a/src/script.js b/src/script.js index 1c1fe56..3228f07 100644 --- a/src/script.js +++ b/src/script.js @@ -56,20 +56,51 @@ let transactions = getTransactionsFromStorage(); function addTransaction(e, descriptionEl, amountEl, categoryEl, dateEl) { e.preventDefault(); - // Input validation + // Enhanced input validation const description = descriptionEl.value.trim(); - const amount = parseFloat(amountEl.value); + const amountStr = amountEl.value.trim(); const category = categoryEl.value; const date = dateEl.value; - if (!description || isNaN(amount) || !category || !date) { - alert("Please fill in all fields with valid data."); + // Validate all inputs thoroughly + if (!description) { + alert("Please enter a description for the transaction."); + descriptionEl.focus(); return; } - // const description = descriptionEl.value; - // const category = categoryEl.value; - // const date = dateEl.value; + if (!amountStr) { + alert("Please enter an amount for the transaction."); + amountEl.focus(); + return; + } + + const amount = parseFloat(amountStr); + if (isNaN(amount)) { + alert("Please enter a valid number for the amount."); + amountEl.focus(); + return; + } + + if (amount === 0) { + alert("Amount cannot be zero. Please enter a non-zero value."); + amountEl.focus(); + return; + } + + if (!category) { + alert("Please select a category for the transaction."); + categoryEl.focus(); + return; + } + + if (!date) { + alert("Please select a date for the transaction."); + dateEl.focus(); + return; + } + + // Create transaction object const newTransaction = { id: generateID(), description, @@ -78,17 +109,20 @@ function addTransaction(e, descriptionEl, amountEl, categoryEl, dateEl) { date, }; + // Add to transactions array transactions.push(newTransaction); updateLocalStorage(); + // Reset form with improved user experience descriptionEl.value = ""; amountEl.value = ""; categoryEl.value = "Other"; - dateEl.value = ""; + dateEl.valueAsDate = new Date(); // Reset to today's date instead of clearing + + // Focus on the description field for the next entry + descriptionEl.focus(); console.log("Transaction added:", newTransaction); - - // init(); } // Generate unique ID @@ -112,9 +146,6 @@ 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) => acc + amount, 0); const income = amounts @@ -127,9 +158,7 @@ function updateValues(balanceEl, incomeEl, expenseEl) { 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)}`; + expenseEl.textContent = `-Rs ${Math.abs(expense).toFixed(2)}`; } // Add transactions to DOM @@ -297,14 +326,16 @@ function generateReport() { .filter((t) => t.amount > 0) .reduce((acc, t) => acc + t.amount, 0); + // Fix: Filter for negative amounts for expenses const totalExpense = transactions - .filter((t) => t.amount > 0) - .reduce((acc, t) => acc + t.amount, 0); + .filter((t) => t.amount < 0) + .reduce((acc, t) => acc + Math.abs(t.amount), 0); const balance = totalIncome - totalExpense; + // Consistent decimal formatting for all monetary values reportText += `Total Income: Rs ${totalIncome.toFixed(2)}\n`; - reportText += `Total Expense: Rs ${Math.abs(totalExpense).toFixed(2)}\n`; + reportText += `Total Expense: Rs ${totalExpense.toFixed(2)}\n`; reportText += `Balance: Rs ${balance.toFixed(2)}\n\n`; // Category breakdown @@ -312,12 +343,21 @@ function generateReport() { const categorySummary = {}; + // Initialize all categories with zero + transactions.forEach((t) => { + if (t.amount < 0 && !categorySummary[t.category]) { + categorySummary[t.category] = 0; + } + }); + + // Sum expenses by category transactions.forEach((t) => { if (t.amount < 0) { categorySummary[t.category] += Math.abs(t.amount); } }); + // Format and display each category for (const category in categorySummary) { reportText += `${category}: Rs ${categorySummary[category].toFixed(2)}\n`; } From 28baf25dbf469f184800386cc24273d2d544ef87 Mon Sep 17 00:00:00 2001 From: Resandu Marasinghe <100013605+ResanduMarasinghe@users.noreply.github.com> Date: Sat, 26 Apr 2025 06:54:32 +0000 Subject: [PATCH 6/6] fixed some random things --- src/index.html | 2 +- src/script.js | 16 ++++++++++------ src/styles.css | 2 +- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index 8357d2a..fcbd648 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - Buget Tracker + Budget Tracker diff --git a/src/script.js b/src/script.js index 3228f07..5baed0c 100644 --- a/src/script.js +++ b/src/script.js @@ -146,19 +146,23 @@ function removeTransaction(id) { function updateValues(balanceEl, incomeEl, expenseEl) { const amounts = transactions.map((transaction) => transaction.amount); - const total = amounts.reduce((acc, amount) => acc + amount, 0); - + // Calculate income (sum of all positive amounts) const income = amounts .filter((amount) => amount > 0) .reduce((acc, amount) => acc + amount, 0); + // Calculate expenses (sum of all negative amounts as a positive number) const expense = amounts .filter((amount) => amount < 0) - .reduce((acc, amount) => acc - amount, 0); + .reduce((acc, amount) => acc + Math.abs(amount), 0); + + // Calculate balance as income minus expenses + const balance = income - expense; - balanceEl.textContent = `Rs ${total.toFixed(2)}`; - incomeEl.textContent = `+Rs ${income.toFixed(2)}`; - expenseEl.textContent = `-Rs ${Math.abs(expense).toFixed(2)}`; + // Update UI elements with formatted values + balanceEl.textContent = `Rs ${balance.toFixed(2)}`; + incomeEl.textContent = `+Rs ${income.toFixed(2)}`; + expenseEl.textContent = `-Rs ${expense.toFixed(2)}`; } // Add transactions to DOM diff --git a/src/styles.css b/src/styles.css index f682a4a..6d3ff56 100644 --- a/src/styles.css +++ b/src/styles.css @@ -115,7 +115,7 @@ header { width: 95%; max-width: 1200px; margin: 0 auto; - /* Bug #23: display should flex */ + display: flex; /* Adding display flex to properly structure the layout */ flex-wrap: wrap; gap: 20px; }