sahandghavidel · dev-zohaibkhan · Jan 18, 2026 · Jan 18, 2026
diff --git a/projects/expense-tracker/README.md 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
@@ -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
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Expense Tracker App</title>
+    <!-- Custom Css link -->
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Expense Tracker</h1>
+      <form action="">
+        <input type="text" placeholder="Enter Expense Name" />
+        <input type="number" placeholder="Enter Amount" />
+        <div id="btn">
+          <button>Click</button>
+        </div>
+      </form>
+    </div>
+
+    <!-- Custom JavaScript link -->
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/projects/expense-tracker/style.css 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;
+}