Day 40 Project: Expense Tracker
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.
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.
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.