Project 4:
Budget Tracker to Manage Expenses with JavaScript

Overview

In this project, we will build a simple but effective Budget Tracker using pure JavaScript. The goal is to help users track their income, expenses, and calculate the remaining balance.

This project will reinforce your understanding of objects, arrays, functions, and console I/O. We will simulate user interaction using the browser console or Node.js terminal.

Project Requirements

• Track income and expense entries.
• Store each entry with a description and amount.
• Calculate the total income, expenses, and balance.
• Allow listing all entries.
• Work entirely through JavaScript logic — no HTML/CSS.

Step-by-Step Implementation

1. Defining the Structure

We will start with a JavaScript object to store our income and expense entries.

const budgetTracker = {
  income: [],
  expenses: [],
};

2. Adding Income and Expense

We need functions to add income or expense entries. Each entry will include a description and amount.

function addIncome(description, amount) {
  budgetTracker.income.push({ description, amount });
}

function addExpense(description, amount) {
  budgetTracker.expenses.push({ description, amount });
}

Try This:

Question: What data structure is best for storing multiple records?

Answer: An array of objects works well when we need to keep track of multiple items, each with its own properties.

3. Calculating Totals

We now create helper functions to calculate total income, total expenses, and current balance.

function getTotalIncome() {
  return budgetTracker.income.reduce((sum, entry) => sum + entry.amount, 0);
}

function getTotalExpenses() {
  return budgetTracker.expenses.reduce((sum, entry) => sum + entry.amount, 0);
}

function getBalance() {
  return getTotalIncome() - getTotalExpenses();
}

Try This:

Question: What does reduce do here?

Answer: reduce is used to accumulate the total of all amounts in the income or expense array.

4. Displaying the Summary

Let’s create a function to log all data in a readable format.

function showSummary() {
  console.log("=== Income ===");
  budgetTracker.income.forEach(entry => {
    console.log(`${entry.description}: +${entry.amount}`);
  });

  console.log("\n=== Expenses ===");
  budgetTracker.expenses.forEach(entry => {
    console.log(`${entry.description}: -${entry.amount}`);
  });

  console.log("\n--- Totals ---");
  console.log("Total Income:", getTotalIncome());
  console.log("Total Expenses:", getTotalExpenses());
  console.log("Balance:", getBalance());
}

5. Complete Example

Here’s a full working example of the budget tracker in action:

// Step 1: Add Entries
addIncome("Salary", 5000);
addIncome("Freelance Project", 1500);
addExpense("Rent", 1200);
addExpense("Groceries", 400);
addExpense("Utilities", 300);

// Step 2: Show Summary
showSummary();

=== Income ===
Salary: +5000
Freelance Project: +1500

=== Expenses ===
Rent: -1200
Groceries: -400
Utilities: -300

--- Totals ---
Total Income: 6500
Total Expenses: 1900
Balance: 4600

Tips for Beginners

• Always use functions to encapsulate reusable logic.
• Use console.log() at each step to trace your code behavior.
• Work in small increments — test after each function you add.

Challenge

Can you add a feature to remove an income or expense item by its description?

This would require filtering the arrays and rebuilding them without the matching item.

Conclusion

This project helped you practice core JavaScript concepts like arrays, objects, functions, and iteration. It also built your logical thinking by constructing a real-world use case — tracking personal finances — entirely in code.