From 857ca08c98d0d643c8015b700138c3bfde753701 Mon Sep 17 00:00:00 2001 From: Zohaib Khan Date: Sun, 18 Jan 2026 11:43:59 +0500 Subject: [PATCH 1/2] Add expense tracker app project This commit adds a beginner-friendly Expense Tracker application built with HTML, CSS, and JavaScript. The project is organized inside the projects folder and demonstrates basic DOM manipulation and user input handling. --- projects/expense-tracker/README.md | 26 +++++++++++ projects/expense-tracker/app.js | 70 +++++++++++++++++++++++++++++ projects/expense-tracker/index.html | 25 +++++++++++ projects/expense-tracker/style.css | 68 ++++++++++++++++++++++++++++ 4 files changed, 189 insertions(+) create mode 100644 projects/expense-tracker/README.md create mode 100644 projects/expense-tracker/app.js create mode 100644 projects/expense-tracker/index.html create mode 100644 projects/expense-tracker/style.css diff --git a/projects/expense-tracker/README.md b/projects/expense-tracker/README.md new file mode 100644 index 0000000..806b60e --- /dev/null +++ b/projects/expense-tracker/README.md @@ -0,0 +1,26 @@ +# Expense Tracker 💰 + +A simple and lightweight **Expense Tracker** web application built using **HTML, CSS, and JavaScript**. This app allows users to add, view, and remove expenses while automatically calculating the total amount. All data is stored in the browser using **localStorage**, so expenses persist even after a page refresh. + +--- + +## Features + +- Add expenses with name and amount +- Display a list of all expenses +- Remove individual expenses +- Automatically calculate total expenses +- Data persistence using browser localStorage +- Responsive and clean UI + +--- + +## Technologies Used + +- HTML5 +- CSS3 +- JavaScript +- Browser Local Storage + +--- + diff --git a/projects/expense-tracker/app.js b/projects/expense-tracker/app.js new file mode 100644 index 0000000..2dda86b --- /dev/null +++ b/projects/expense-tracker/app.js @@ -0,0 +1,70 @@ +// Select elements +const form = document.querySelector("form"); +const inputs = document.querySelectorAll("input"); + +let expenses = JSON.parse(localStorage.getItem("expenses")) || []; + +// Create expense list container +const list = document.createElement("ul"); +const totalText = document.createElement("h3"); + +document.querySelector(".container").appendChild(list); +document.querySelector(".container").appendChild(totalText); + +// Render expenses +function renderExpenses() { + list.innerHTML = ""; + let total = 0; + + expenses.forEach((expense, index) => { + const li = document.createElement("li"); + li.style.display = "flex"; + li.style.justifyContent = "space-between"; + li.style.alignItems = "center"; + li.style.margin = "5px 0"; + + const text = document.createElement("span"); + text.textContent = `${expense.name} - Rs ${expense.amount}`; + + const removeBtn = document.createElement("button"); + removeBtn.textContent = "Remove"; + removeBtn.style.cursor = "pointer"; + + removeBtn.addEventListener("click", () => { + expenses.splice(index, 1); + renderExpenses(); + }); + + li.appendChild(text); + li.appendChild(removeBtn); + list.appendChild(li); + + total += expense.amount; + }); + + totalText.textContent = `Total Expense: Rs ${total}`; + localStorage.setItem("expenses", JSON.stringify(expenses)); +} + +// Add expense +form.addEventListener("submit", function (e) { + e.preventDefault(); + + const name = inputs[0].value.trim(); + const amount = Number(inputs[1].value); + + if (name === "" || amount <= 0) { + alert("Please enter valid expense details"); + return; + } + + expenses.push({ name, amount }); + + inputs[0].value = ""; + inputs[1].value = ""; + + renderExpenses(); +}); + +// Load saved data on refresh +renderExpenses(); diff --git a/projects/expense-tracker/index.html b/projects/expense-tracker/index.html new file mode 100644 index 0000000..a9d2c97 --- /dev/null +++ b/projects/expense-tracker/index.html @@ -0,0 +1,25 @@ + + + + + + Document + + + + +
+

Expense Tracker

+
+ + +
+ +
+
+
+ + + + + diff --git a/projects/expense-tracker/style.css b/projects/expense-tracker/style.css new file mode 100644 index 0000000..7971dc1 --- /dev/null +++ b/projects/expense-tracker/style.css @@ -0,0 +1,68 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; + outline: none; +} +body { + background-color: #fff; + height: 100dvh; + display: flex; + justify-content: center; + align-items: center; +} +.container { + width: 50dvw; + height: auto; + border: 1px solid red; + padding: 10px; + background-color: gray; +} +.container h1 { + text-align: center; + color: white; +} +.container form { + margin: 10px; +} +.container form input { + width: 100%; + height: 2rem; + padding: 20px 10px; + margin: 5px 0; + border: 1px solid red; + border-radius: 10px; +} +.container form #btn { + box-shadow: 0 5px 10px red; + margin-top: 10px; + border-radius: 10px; +} +.container form #btn button { + width: 100%; + height: 3rem; + border-radius: 10px; + border: 1px solid red; + cursor: pointer; +} +.container ul { + margin: 20px 0 10px 0; +} +.container ul li { + padding: 5px 10px; + list-style: none; + color: white; + font-size: 20px; + border-bottom: 2px solid red; +} +.container h3 { + font-size: 25px; + text-align: center; + color: white; +} +.container ul li button { + padding: 5px 10px; + border-radius: 10px; + border: 1px solid red; +} From 37297158187e1d72eceb2bd04eb7f8afff410a3a Mon Sep 17 00:00:00 2001 From: Zohaib Khan Date: Sun, 18 Jan 2026 11:52:49 +0500 Subject: [PATCH 2/2] Change title to 'Expense Tracker App' --- projects/expense-tracker/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/expense-tracker/index.html b/projects/expense-tracker/index.html index a9d2c97..f873c5d 100644 --- a/projects/expense-tracker/index.html +++ b/projects/expense-tracker/index.html @@ -3,7 +3,7 @@ - Document + Expense Tracker App