💰

Expense Tracker

Web DevBeginner

JavaScriptlocalStorage

💡 Overview

A genuinely useful app you might actually keep using — and a great way to practice working with an array of objects, filtering, and simple calculations (sums, totals).

✅ Features to Build

0/4 done

🧭 Step-by-Step Guide

Build a form with amount, category (dropdown), and date inputs.

On submit, push a new expense object {amount, category, date} into an array, and re-render the list.

Calculate and display the sum of all expenses in the current array.

Add a category filter dropdown that only shows matching expenses.

Save the expenses array to localStorage (as JSON) so data isn't lost on refresh.

🚀 Starter Code

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

function addExpense(amount, category, date) {
  expenses.push({ amount, category, date });
  localStorage.setItem('expenses', JSON.stringify(expenses));
  renderExpenses();
}

💡 Pro Tip

Store amounts as numbers, not strings — a very common bug in this project is expenses 'adding' like text (e.g., '10' + '20' becoming '1020' instead of 30) because the input value wasn't converted with Number().

← Back to all Projects