Build an Expense Tracker with JavaScript

📋 What You'll Need

A text editor
A web browser
No installs or accounts needed

Plan the data structure

Each expense is a simple object. We store an array of these in localStorage.

// Each expense looks like this:
const expense = {
  id:       Date.now(),          // unique ID
  title:    'Coffee',
  amount:   3.50,
  category: 'Food',
  date:     '2026-08-09'
};

// All expenses stored as a JSON string in localStorage:
// localStorage.setItem('expenses', JSON.stringify([expense1, expense2, ...]));

Build the HTML form and layout

Create index.html with a form to add expenses and containers for the summary and list.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Expense Tracker</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<?php require_once __DIR__ . '/../promo_banner.php'; ?>

  <div class="app">
    <h1>💰 Expense Tracker</h1>

    <div class="summary">
      <div class="summary-card total">
        <div class="label">Total Spent</div>
        <div class="amount" id="totalAmount">₹0.00</div>
      </div>
      <div class="summary-card">
        <div class="label">This Month</div>
        <div class="amount" id="monthAmount">₹0.00</div>
      </div>
      <div class="summary-card">
        <div class="label">Entries</div>
        <div class="amount" id="totalCount">0</div>
      </div>
    </div>

    <form class="add-form" onsubmit="addExpense(event)">
      <input type="text"   id="title"    placeholder="What did you spend on?" required />
      <input type="number" id="amount"   placeholder="Amount (₹)" step="0.01" min="0" required />
      <select id="category">
        <option>Food</option>
        <option>Transport</option>
        <option>Shopping</option>
        <option>Entertainment</option>
        <option>Bills</option>
        <option>Health</option>
        <option>Other</option>
      </select>
      <input type="date"   id="date" required />
      <button type="submit">Add Expense</button>
    </form>

    <div id="expenseList"></div>
  </div>
  <script src="app.js"></script>
</body>
</html>

Write the core JavaScript logic

Create app.js to handle add, delete, save, and render operations.

// app.js

const CATEGORY_ICONS = {
  Food: '🍔', Transport: '🚗', Shopping: '🛍️',
  Entertainment: '🎬', Bills: '📄', Health: '💊', Other: '📦'
};

function getExpenses() {
  return JSON.parse(localStorage.getItem('expenses') || '[]');
}

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

function addExpense(e) {
  e.preventDefault();
  const expense = {
    id:       Date.now(),
    title:    document.getElementById('title').value.trim(),
    amount:   parseFloat(document.getElementById('amount').value),
    category: document.getElementById('category').value,
    date:     document.getElementById('date').value
  };
  const expenses = getExpenses();
  expenses.unshift(expense);  // add to start so newest shows first
  saveExpenses(expenses);
  e.target.reset();
  render();
}

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

Render the list and update the summary

Display all expenses and recalculate totals every time data changes.

function render() {
  const expenses = getExpenses();
  const now = new Date();
  const thisMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;

  const total = expenses.reduce((s, e) => s + e.amount, 0);
  const monthTotal = expenses
    .filter(e => e.date.startsWith(thisMonth))
    .reduce((s, e) => s + e.amount, 0);

  document.getElementById('totalAmount').textContent = `₹${total.toFixed(2)}`;
  document.getElementById('monthAmount').textContent = `₹${monthTotal.toFixed(2)}`;
  document.getElementById('totalCount').textContent  = expenses.length;

  const list = document.getElementById('expenseList');
  if (expenses.length === 0) {
    list.innerHTML = '<p class="empty">No expenses yet. Add one above!</p>';
    return;
  }

  list.innerHTML = expenses.map(e => `
    <div class="expense-item">
      <div class="expense-icon">${CATEGORY_ICONS[e.category] || '📦'}</div>
      <div class="expense-info">
        <div class="expense-title">${e.title}</div>
        <div class="expense-meta">${e.category} · ${e.date}</div>
      </div>
      <div class="expense-right">
        <div class="expense-amount">₹${e.amount.toFixed(2)}</div>
        <button class="delete-btn" onclick="deleteExpense(${e.id})">✕</button>
      </div>
    </div>
  `).join('');
}

// Set today's date as default and render on load
document.getElementById('date').value = new Date().toISOString().split('T')[0];
render();

Total Spent: ₹2,340.00    This Month: ₹1,200.00    Entries: 8

🍔 Coffee · Food · 2026-08-09          ₹80.00   ✕
🚗 Uber to office · Transport · 2026-08-09  ₹200.00  ✕
🛍️ New headphones · Shopping · 2026-08-08  ₹1,500.00 ✕

Add the CSS

Style the tracker with a clean card layout.

/* style.css */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #f8fafc; min-height: 100vh; padding: 30px 16px; }
.app { max-width: 600px; margin: 0 auto; }
h1 { text-align: center; font-size: 1.6rem; font-weight: 800; color: #0f172a; margin-bottom: 24px; }

.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.summary-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 16px; text-align: center; }
.summary-card.total { border-color: #F59C0D; background: #fff7ed; }
.summary-card .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b; margin-bottom: 6px; }
.summary-card .amount { font-size: 1.3rem; font-weight: 800; color: #0f172a; }
.summary-card.total .amount { color: #F59C0D; }

.add-form { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 20px; margin-bottom: 20px; display: grid; gap: 10px; }
.add-form input, .add-form select { padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 0.9rem; color: #0f172a; }
.add-form button { padding: 11px; background: #F59C0D; color: #fff; border: none; border-radius: 8px; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.add-form button:hover { background: #e08b00; }

.expense-item { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; }
.expense-icon { font-size: 1.6rem; flex-shrink: 0; }
.expense-info { flex: 1; }
.expense-title { font-weight: 700; color: #0f172a; font-size: 0.95rem; }
.expense-meta { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
.expense-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.expense-amount { font-weight: 800; color: #0f172a; font-size: 1rem; }
.delete-btn { background: none; border: none; color: #94a3b8; font-size: 0.9rem; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.delete-btn:hover { background: #fee2e2; color: #ef4444; }
.empty { text-align: center; color: #94a3b8; padding: 40px; font-size: 0.9rem; }

💡 Tip: localStorage holds about 5MB — enough for thousands of expense entries. To export your data, add a button that calls JSON.stringify(getExpenses()) and triggers a file download using a Blob URL.

🎉 You Did It!

Your expense tracker saves data permanently in the browser — close the tab, reopen it, and your expenses are still there. No server, no database, no cost. Add a chart with Chart.js to visualise spending by category.

Browse More Tutorials

💰 Build an Expense Tracker with JavaScript

🎯 What You'll Build

📋 What You'll Need

Plan the data structure

Build the HTML form and layout

Write the core JavaScript logic

Render the list and update the summary

Add the CSS

🎉 You Did It!

💰 Build an Expense Tracker with JavaScript

🎯 What You'll Build

📋 What You'll Need

Plan the data structure

Build the HTML form and layout

Write the core JavaScript logic

Render the list and update the summary

Add the CSS

🎉 You Did It!

Found something wrong?

Thanks — got it!