Simple JS Expense Tracker Code for Beginners

 

Simple JS Expense Tracker for Indian Students 2026 💸🇮🇳

Managing money as a student in 2026 is not easy. Between college fees, food, travel, OTT subscriptions, and weekend hangouts, expenses add up quickly. Instead of writing everything in a notebook, let’s build a simple JavaScript Expense Tracker that runs directly in your browser — no backend, no installation, just HTML + JS.

This project will teach you:

• DOM manipulation

• Event handling

• Arrays in JavaScript

• Basic calculations

Let’s build it step by step.

---

✅ Full Working Code (Copy & Paste)

Create a file named expense-tracker.html and paste this code:

<!DOCTYPE html>
<html>
<head>
    <title>Student Expense Tracker 2026</title>
    <style>
        body {
            font-family: Arial;
            max-width: 500px;
            margin: 30px auto;
        }
        input, button {
            padding: 8px;
            margin: 5px 0;
            width: 100%;
        }
        ul {
            padding: 0;
        }
        li {
            list-style: none;
            padding: 5px 0;
            border-bottom: 1px solid #ccc;
        }
        .total {
            font-weight: bold;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<h2>💰 Student Expense Tracker</h2>

<input type="text" id="expenseName" placeholder="Expense name (e.g. Food)">
<input type="number" id="expenseAmount" placeholder="Amount in ₹">
<button onclick="addExpense()">Add Expense</button>

<ul id="expenseList"></ul>

<p class="total">Total: ₹ <span id="totalAmount">0</span></p>

<script>
    let expenses = [];

    function addExpense() {
        const name = document.getElementById("expenseName").value;
        const amount = parseFloat(document.getElementById("expenseAmount").value);

        if (name === "" || isNaN(amount)) {
            alert("Please enter valid details!");
            return;
        }

        expenses.push({ name, amount });

        document.getElementById("expenseName").value = "";
        document.getElementById("expenseAmount").value = "";

        displayExpenses();
    }

    function displayExpenses() {
        const list = document.getElementById("expenseList");
        list.innerHTML = "";

        let total = 0;

        expenses.forEach(expense => {
            total += expense.amount;

            const li = document.createElement("li");
            li.textContent = expense.name + " - ₹ " + expense.amount;
            list.appendChild(li);
        });

        document.getElementById("totalAmount").textContent = total;
    }
</script>

</body>
</html>

---

▶️ How to Run in Browser

It’s super simple:

1. Open Notepad (or VS Code).

2. Paste the code above.

3. Click File → Save As.

4. Name it: expense-tracker.html

5. Make sure “Save as type” is All Files.

6. Double-click the file.

That’s it! It will open in Chrome, Edge, or any browser.

No installation. No server. Works offline.

---

🧠 How It Works (Simple Explanation)

1️⃣ We store expenses in an array:

let expenses = [];

Each expense is an object like:

{ name: "Food", amount: 200 }

---

2️⃣ When you click "Add Expense":

• It reads input values.

• Pushes them into the array.

• Clears the input fields.

• Calls displayExpenses().

---

3️⃣ The display function:

• Clears the old list.

• Loops through the array.

• Creates <li> elements dynamically.

• Calculates the total.

• Updates total amount on screen.

This is called DOM manipulation, and it’s one of the most important JS skills.

---

🚀 How You Can Improve It

Once this works, try adding:

• ❌ Delete button

• 💾 LocalStorage (so data stays after refresh)

• 📊 Monthly summary

• 🎨 Better design with CSS

---

🎯 Final Thoughts

This simple project is perfect for Indian college students learning JavaScript in 2026. It’s practical, beginner-friendly, and teaches real frontend development skills.

Don’t just copy it — modify it.

Change the design. Add features. Break it. Fix it.

That’s how real developers grow. 💪