Web Development  

How to Build an Expense Tracker using JavaScript with Code

Introduction

Creating an expense tracker is a great way to learn how to use HTML, CSS, and JavaScript together. In this article, we will walk through building a simple yet functional expense tracker application that allows users to add, view, and delete expenses. By the end of this tutorial, you'll have a fully operational web application that can help manage personal finances.

Project Overview

The Expense Tracker will have the following features:

  • Input fields for adding expenses (name, amount, category).
  • A list displaying all expenses.
  • Total income and expenses summary.
  • Functionality to delete expenses.

Step 1. Set Up the HTML Structure

Create an HTML file named index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Expense Tracker</title>
</head>
<body>
    <div class="container">
        <h1>Expense Tracker</h1>
        <h4>Your Balance: <span id="balance">$0.00</span></h4>

        <h3>Add New Expense</h3>
        <form id="expense-form">
            <input type="text" id="expense-name" placeholder="Expense Name" required />
            <input type="number" id="expense-amount" placeholder="Amount" required />
            <select id="expense-category" required>
                <option value="" disabled selected>Select Category</option>
                <option value="Food">Food</option>
                <option value="Transport">Transport</option>
                <option value="Entertainment">Entertainment</option>
                <option value="Other">Other</option>
            </select>
            <button type="submit">Add Expense</button>
        </form>

        <h3>Transaction History</h3>
        <ul id="expense-list"></ul>
    </div>

    <script src="script.js"></script>
</body>
</html>
Markup

Step 2. Style the Application with CSS

Create a CSS file named style.css and add the following styles:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
}

input, select {
    margin-bottom: 10px;
    padding: 10px;
}

button {
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

#expense-list {
    list-style-type: none;
    padding-left: 0;
}

.expense-item {
    display: flex;
    justify-content: space-between;
}
CSS

Step 3. Add Functionality with JavaScript

Create a JavaScript file named script.js and add the following code:

const expenseForm = document.getElementById('expense-form');
const expenseList = document.getElementById('expense-list');
const balance = document.getElementById('balance');

let totalBalance = 0;

expenseForm.addEventListener('submit', function(e) {
    e.preventDefault();

    const name = document.getElementById('expense-name').value;
    const amount = parseFloat(document.getElementById('expense-amount').value);

    if (name && !isNaN(amount)) {
        addExpense(name, amount);
        updateBalance(amount);
        expenseForm.reset();
    }
});

function addExpense(name, amount) {
    const li = document.createElement('li');
    li.className = 'expense-item';

    li.innerHTML = `${name} - $${amount.toFixed(2)}
                    <button class="delete-btn">x</button>`;

    expenseList.appendChild(li);

    li.querySelector('.delete-btn').addEventListener('click', function() {
        removeExpense(li, amount);
    });
}

function updateBalance(amount) {
    totalBalance += amount;
    balance.innerText = `$${totalBalance.toFixed(2)}`;
}

function removeExpense(item, amount) {
    expenseList.removeChild(item);

    totalBalance -= amount;
    balance.innerText = `$${totalBalance.toFixed(2)}`;
}
JavaScript

Step 4. Running the Application

To run your Expense Tracker application:

  • Save all files in the same directory.
  • Open index.html in your web browser.

Output

When you open the application in your browser, you should see an interface that allows you to input expenses. After entering an expense name and amount and selecting a category, clicking "Add Expense" will display the transaction in the list below along with the updated balance.

Expense tracker in JavaScript with code

Conclusion

You have now built a simple but effective Expense Tracker using HTML, CSS, and JavaScript! This project not only helps you manage your finances but also enhances your understanding of web development concepts. Feel free to expand upon this project by adding features such as editing transactions or filtering by category.

Membership not found