JavaScript Notes

Build a JavaScript Expense Tracker - Step by Step Project Tutorial

Learn to build an expense tracker in JavaScript with income/expense entries, balance calculation, category filtering, chart visualization, and localStorage.

What You'll Learn

How to distinguish income vs. expense entries with signed amounts
How to use Array.reduce() to calculate balance, total income, and total expenses
How to categorize transactions and filter by category
How to format currency using Intl.NumberFormat
How to persist transaction history with localStorage

Project Overview

An expense tracker records money going in (income) and out (expenses). It displays a running balance and a breakdown of all transactions. The core math is done with Array.reduce() — one of JavaScript's most powerful array methods.

Component Structure

How It Works — Flow Diagram

Step-by-Step Build

Step 1 — HTML Structure

html example

<div class="tracker">
  <h1>Expense Tracker</h1>

  <div class="summary-cards">
    <div class="card card-balance">
      <h3>Balance</h3>
      <p id="balance">$0.00</p>
    </div>
    <div class="card card-income">
      <h3>Income</h3>
      <p id="totalIncome">+$0.00</p>
    </div>
    <div class="card card-expense">
      <h3>Expenses</h3>
      <p id="totalExpense">−$0.00</p>
    </div>
  </div>

  <form id="txnForm" class="txn-form">
    <input type="text"   id="txnDesc"   placeholder="Description" required>
    <input type="number" id="txnAmount" placeholder="Amount (negative = expense)" step="0.01" required>
    <select id="txnCategory">
      <option value="Food">Food</option>
      <option value="Transport">Transport</option>
      <option value="Utilities">Utilities</option>
      <option value="Entertainment">Entertainment</option>
      <option value="Income">Income</option>
      <option value="Other">Other</option>
    </select>
    <button type="submit" class="btn-add">+ Add</button>
  </form>

  <h2>Transaction History</h2>
  <ul id="txnList" class="txn-list"></ul>
</div>

Step 2 — State

Example

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

Step 3 — Calculate Summary

Example

function calculateSummary() { const income = transactions .filter(t => t.amount > 0) .reduce((sum, t) => sum + t.amount, 0); const expense = transactions .filter(t => t.amount < 0) .reduce((sum, t) => sum + t.amount, 0); const balance = income + expense; // expense is already negative return { balance, income, expense }; }

Step 4 — Format Currency

js example

const fmt = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
});

function formatAmount(n) {
  return (n >= 0 ? "+" : "") + fmt.format(n);
}

Step 5 — Render

Example

Step 6 — Add Transaction

Example

document.getElementById("txnForm").addEventListener("submit", (e) => { e.preventDefault(); const desc = document.getElementById("txnDesc").value.trim(); const amount = parseFloat(document.getElementById("txnAmount").value); const category = document.getElementById("txnCategory").value; if (!desc || isNaN(amount)) return; transactions.push({ id: Date.now(), desc, amount, category }); saveTxns(); render(); e.target.reset(); });

Step 7 — Delete Transaction

Example

document.getElementById("txnList").addEventListener("click", (e) => { if (!e.target.classList.contains("btn-delete-txn")) return; const id = Number(e.target.dataset.id); transactions = transactions.filter(t => t.id !== id); saveTxns(); render(); });

Step 8 — Persistence

js example

function saveTxns() {
  localStorage.setItem("transactions", JSON.stringify(transactions));
}

Step 9 — Initialize

js example

render();

Console Output

Output

// Add income: Salary +3500
transactions = [{ id: 1749686400000, desc: "Salary", amount: 3500, category: "Income" }]
calculateSummary() → { balance: 3500, income: 3500, expense: 0 }
DOM: Balance $3,500.00 | Income +$3,500.00 | Expenses $0.00

// Add expense: Groceries −85
transactions = [..., { desc: "Groceries", amount: -85, category: "Food" }]
calculateSummary() → { balance: 3415, income: 3500, expense: -85 }
DOM: Balance $3,415.00 | Expenses −$85.00

// Delete Groceries
transactions = [Salary only]
calculateSummary() → { balance: 3500, income: 3500, expense: 0 }

Edge Cases to Handle

Situation	Expected Behavior
Amount of 0	Technically valid but possibly a user mistake — show warning
Non-numeric amount	`isNaN()` check blocks submission
Negative balance	Balance turns red
Empty transactions	Show "No transactions yet"
Page refresh	Data loads from `localStorage`

Challenge Yourself

Category pie chart — use Canvas API or a library to visualize spending by category
Monthly view — group and summarize transactions by month
CSV export — download all transactions as a spreadsheet
Budget limits — set a monthly budget cap per category with alerts
Multi-currency — add a currency selector with live exchange rates via an API

Best Practices

Use Array.reduce() for aggregation — don't maintain running totals manually
Always call both saveTxns() and render() after mutations
Show the transaction list in reverse chronological order (newest first)
Use Intl.NumberFormat for locale-correct currency formatting
Sign convention: positive = income, negative = expense — keep it consistent

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for Build a JavaScript Expense Tracker - Step by Step Project Tutorial.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, mini, projects, expense

Continue learning this concept

Mini ProjectsBuild a JavaScript Calculator - Step by Step Project TutorialLearn to build a fully functional calculator in JavaScript with operator logic, decimal support, keyboard input, and clean UI. Perfect beginner project.Mini ProjectsBuild a JavaScript Image Carousel - Step by Step Project TutorialLearn to build an auto-playing image carousel in JavaScript with prev/next buttons, dot indicators, touch swipe support, and smooth CSS transitions.Mini ProjectsBuild a JavaScript Counter Application - Step by Step Project TutorialLearn to build a counter app in JavaScript with increment, decrement, reset, min/max limits, and localStorage persistence. Great first JavaScript DOM project.Mini ProjectsBuild a JavaScript Digital Clock - Step by Step Project TutorialLearn to build a live digital clock in JavaScript using Date object, setInterval, 12/24-hour toggle, AM/PM display, and smooth CSS styling.Mini ProjectsBuild a Dynamic Resume Builder in JavaScript - Step by Step TutorialLearn to build an interactive resume builder in JavaScript that generates a live HTML preview as you fill out form fields, with print and PDF export support.Mini ProjectsBuild a JavaScript Email Validator - Step by Step Project TutorialLearn to build an email validator in JavaScript using regex, real-time feedback, common domain suggestions, and bulk validation. A great regex and DOM project.

PreviousBuild a JavaScript Employee Database Management App - Step by Step Tutorial NextBuild a GitHub Profile Search App in JavaScript - Step by Step Tutorial