Open In App

Build an Expense Tracker with HTML CSS and JavaScript

Last Updated : 23 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report
News Follow

Managing personal finances is essential for maintaining a healthy financial life. One effective way to achieve this is by keeping track of expenses. In this article, we’ll learn how to create a simple expense tracker using HTML, CSS, and JavaScript. By the end, you’ll have a functional web application that allows you to add and remove expenses, helping you gain better control over your spending.

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with concepts such as form handling, event handling, and DOM manipulation will be beneficial. You’ll also need a text editor and a web browser to run the code.

Approach:

  • Create the basic HTML file with a title, heading, form, and expense list container.
  • Apply basic CSS styles for a visually appealing look.
  • Capture the expense name, amount, category, and date from the form inputs.
  • Validate the inputs to ensure all fields are filled correctly.Create an expense object with the captured inputs.
  • Store the expense object in an array.
  • Loop through the expense array.
  • Create HTML elements to display each expense, including name, amount, category, date, and action buttons.
  • Implement a edit functionality to modify expenses.
  • Implement a delete functionality to remove expenses.
  • Implement filter functionality to filter the displayed expenses based on the selected category.

Example:

HTML
// index.html
<!DOCTYPE html>
<html>

<head>
    <title>Expense Tracker</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <div class="container">
        <h1>Expense Tracker</h1>
        <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>
            <input type="date" id="expense-date" required />
            <button type="submit">Add Expense</button>
        </form>
        <div class="expense-table">
            <table>
                <thead>
                    <tr>
                        <th>Expense Name</th>
                        <th>Amount</th>
                        <th>Category</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="expense-list"></tbody>
            </table>
            <div class="total-amount">
                <strong>Total:</strong> $<span id="total-amount">0</span>
            </div>
        </div>
        <div class="filter">
            <label for="filter-category">Filter by Category:</label>
            <select id="filter-category">
                <option value="All">All</option>
                <option value="Food">Food</option>
                <option value="Transport">Transport</option>
                <option value="Entertainment">Entertainment</option>
                <option value="Other">Other</option>
            </select>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>
CSS JavaScript

Output:

exp

Next Article

Similar Reads

three90RightbarBannerImg