Build a Personal Finance Tracker with JavaScript

Most people have no idea where their money goes. A personal finance tracker fixes that: you record income and expenses, see totals by category, and watch your balance over the month. Building one in JavaScript is a perfect beginner project — it is just forms, lists, and a little arithmetic, but the result is something you will actually use.

Start with the data model. Every transaction is a small object:

// one transaction, stored in an array
const transactions = [
  { id: 1, type: "expense", category: "Food", amount: 250, date: "2026-11-12" },
  { id: 2, type: "income", category: "Salary", amount: 30000, date: "2026-11-01" },
];

function getBalance() {
  return transactions.reduce((sum, t) =>
    t.type === "income" ? sum + t.amount : sum - t.amount, 0);
}

The UI is a form (type, category, amount, date), a list of transactions, and three numbers at the top: total income, total expenses, and balance. Add a category breakdown — sum expenses by category and show them as simple bars — and you have a genuinely useful tool. Save everything in localStorage so your data survives a refresh.

Build it in layers. First, adding and listing transactions. Then the totals and the category breakdown. Then delete and edit. Then a monthly filter, so you can compare November with October. A chart library like Chart.js can turn the category breakdown into a pie chart in about ten lines, but start with plain bars — a div with a width percentage is a chart.

The mistakes to avoid: storing money as floats is fine for a toy, but round to two decimals when displaying, or 0.1 + 0.2 will surprise you. Validate the form — an empty amount or a negative number should show an error, not a broken total. And keep one source of truth: every number on the page should be computed from the same transactions array, never stored separately.

A tracker is only useful if you open it, so keep the friction low: one form, one click to add, and a clear balance at the top. Pair the habit with reading — if you want to go deeper into managing money as an Indian reader, this guide to the best personal finance books for Indians covers budgeting, saving, SIPs and investing, with a sensible reading order: https://skilllibrary.shop/pages/blog/personal-finance-books-india.html

Start today: build the form and the list in one HTML file, add three expenses from this week, and look at the total. That single number — what you actually spent — is the most useful thing a beginner project can show you.