💰 Day 27 — Mini Project: Expense Tracker

Hi Guys, Welcome to Day 27 of JavaScript Advanced! Today we build a practical, real-world project: a fully-functional Expense Tracker using JavaScript, DOM manipulation, LocalStorage, ES6 functions, and smart UI logic. This is one of the most common interview-level projects used to test JS clarity, data handling, logic building, and storage mastery.

---

📌 1. What We Are Building

An Expense Tracker helps users add, manage, and monitor daily expenses. It’s the perfect project to test:

• Input validation
• Dynamic DOM updates
• LocalStorage persistence
• Filtering & total calculation
• Delete & transaction management

This project will include:

• User input for title, amount, type
• Dynamic expense list
• Total expense calculator
• Data stored permanently in LocalStorage
• Delete individual entries

This is a resume-worthy mini-project used in many trainee interviews.

---

📦 2. Project Folder Structure

expense-tracker/
│── index.html
│── style.css
└── app.js

Simple, clean structure — perfect for Blogger, GitHub Pages, or your portfolio.

---

🧱 3. HTML UI Structure

  
Expense Tracker
  
  

    
    
    
  

  
Transaction History
  


  
Total: ₹ 0

Minimal UI but functional. You can always style it more beautifully later.

---

⚙ 4. JavaScript Logic Explained Step-By-Step

✔ Get DOM Elements

const title = document.getElementById("title");
const amount = document.getElementById("amount");
const addBtn = document.getElementById("add");
const list = document.getElementById("list");
const total = document.getElementById("total");

✔ Load saved expenses on startup

We store data inside LocalStorage using JSON.

let expenses = JSON.parse(localStorage.getItem("expenses")) || [];
render();

✔ Adding a new expense

addBtn.addEventListener("click", () => {
  if (title.value === "" || amount.value === "") {
    alert("Please fill all fields");
    return;
  }

  const expense = {
    id: Date.now(),
    title: title.value,
    amount: Number(amount.value)
  };

  expenses.push(expense);
  save();
  render();

  title.value = "";
  amount.value = "";
});

✔ Save to LocalStorage

function save(){
  localStorage.setItem("expenses", JSON.stringify(expenses));
}

✔ Render expenses dynamically

function render(){
  list.innerHTML = "";
  let sum = 0;

  expenses.forEach(exp => {
    sum += exp.amount;

    const li = document.createElement("li");
    li.innerHTML = `
      ${exp.title} - ₹${exp.amount}
      
    `;
    list.appendChild(li);
  });

  total.textContent = sum;
}

✔ Delete function

function removeExpense(id){
  expenses = expenses.filter(exp => exp.id !== id);
  save();
  render();
}

---

🎨 5. CSS Styling (Simple but clean)

body {
  font-family: Poppins;
  background:#fafafa;
}

.container {
  width: 360px;
  background:#fff;
  margin:auto;
  padding:20px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

input, button {
  padding:10px;
  margin:5px;
}

button {
  background:#fbc02d;
  color:#fff;
  border:0;
  border-radius:6px;
  cursor:pointer;
}

li {
  display:flex;
  justify-content:space-between;
  margin-bottom:10px;
}

---

🧠 6. Advanced Features to Add (Optional for Resume)

• Filter by date range
• Category selection (Food, Travel, Bills, etc.)
• Export as CSV
• Monthly analytics dashboard
• Dark mode toggle
• Bar chart using Chart.js
• Editable transactions
• Expense limits + color warnings

Adding these features makes your project ready for real-life usage and portfolio demonstration.

---

📊 7. Full Project Code (Combined)

You can run the entire project inside the iframe below

---

📝 8. Practical Tasks

1. Add “Edit expense” feature.
2. Separate “Income” and “Expense” types.
3. Create a “Monthly Summary” section.
4. Add charts using canvas or Chart.js.
5. Make UI fully responsive for mobile.

---

🎯 9. Project Summary

You have built a fully dynamic Expense Tracker using vanilla JavaScript — no frameworks. You learned how to:

• Handle user inputs
• Manipulate the DOM dynamically
• Store data with LocalStorage
• Delete + recalculate totals
• Write clean modular JS code

This is a strong project for resumes and interviews. Your logic skills improve significantly by building such apps.

← Prev Next →