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

Continue the lesson path

Study next in this module

4 connected lessons

01Mini ProjectsBuild a JavaScript Employee Database Management App - Step by Step TutorialLearn to build an employee CRUD database app in JavaScript with add, edit, delete, search, sort, and localStorage persistence. Great intermediate JS project.02Mini ProjectsBuild a GitHub Profile Search App in JavaScript - Step by Step TutorialLearn to build a GitHub profile search app in JavaScript using the GitHub REST API, fetch, async/await, error handling, and dynamic profile card rendering.03Mini 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.04Mini ProjectsBuild a JavaScript Image Slider - Step by Step Project TutorialLearn to build an accessible image slider in JavaScript with keyboard navigation, auto-advance, fade transitions, caption overlay, and fullscreen mode.

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