Day 40

Project: Expense Tracker

30 min
JavaScript 100 Days

Abhi tak ke saare concepts use karke ek Expense Tracker banate hain — array methods, DOM manipulation, localStorage, aur event handling sab ek saath!

Data Structure & Logic

Expenses manage karne ki core logic.

expense.js
javascript
let expenses = JSON.parse(localStorage.getItem("expenses")) || [];

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

function addExpense(description, amount, category) {
  if (!description || isNaN(amount) || amount <= 0) {
    throw new Error("Valid description aur positive amount chahiye!");
  }
  
  const expense = {
    id: Date.now(),
    description,
    amount: parseFloat(amount),
    category,
    date: new Date().toLocaleDateString("en-PK")
  };
  
  expenses.push(expense);
  saveExpenses();
  return expense;
}

function deleteExpense(id) {
  expenses = expenses.filter(e => e.id !== id);
  saveExpenses();
}

function getTotal() {
  return expenses.reduce((sum, e) => sum + e.amount, 0);
}

function getByCategory(cat) {
  return expenses.filter(e => e.category === cat);
}

Render & UI

DOM update karo expenses ke saath.

render.js
javascript
function renderExpenses(list = expenses) {
  const container = document.getElementById("expenseList");
  const total = document.getElementById("total");
  
  container.innerHTML = list.map(e => `
    <div class="expense-item">
      <div>
        <strong>${e.description}</strong>
        <span class="category">${e.category}</span>
        <small>${e.date}</small>
      </div>
      <div>
        <span class="amount">Rs. ${e.amount.toLocaleString()}</span>
        <button onclick="deleteExpense(${e.id}); renderExpenses();">✕</button>
      </div>
    </div>
  `).join("");
  
  total.textContent = `Total: Rs. ${getTotal().toLocaleString()}`;
}

renderExpenses(); // initial render

🎯 Practice Challenge

Expense tracker mein: category filter dropdown add karo, monthly total chart (ASCII) banao, export to CSV feature add karo.