Project: A School Budget

Store money as integer minor units when the currency has a fixed minor-unit scale. A class supplies budget can sum expenses and format the remaining amount without repeated floating-point decimal additions.

Before this topic, review Project: A School Quiz if its terms are unfamiliar.

This is JavaScript in a browser. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

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.

• 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.

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 });
}

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();
}

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

• 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.

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.

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.

Validate nonnegative integer amounts and choose a currency/rounding policy explicitly. localStorage does not provide secure accounting or multi-device synchronization.

Your task: Replace 2500,3000 with 2500,4000. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

An additional 1000 paise expense reduces the remaining rupee amount by 10.

Store money as integer minor units when the currency has a fixed minor-unit scale. A class supplies budget can sum expenses and format the remaining amount without repeated floating-point decimal additions.

Check your variation against this explanation: An additional 1000 paise expense reduces the remaining rupee amount by 10.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.