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 form input, validate it, create an expense object, and store it in an array.
- Dynamically loop through the expense array and create HTML elements to display expenses.
- Implement a delete functionality to remove expenses from the array and update the rendered list.
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 /> <button type="submit"> Add Expense </button> </form> <div class="expense-table"> <table> <thead> <tr> <th>Expense Name</th> <th>Amount</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> <script src="script.js"></script> </body> </html> |
CSS
/* style.css */body { font-family: Arial, sans-serif; margin: 20px; } .container { max-width: 800px; margin: 0 auto; background-color: #f9f9f9; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } h1 { text-align: center; margin-bottom: 20px; } form { display: flex; justify-content: center; margin-bottom: 20px; } input[type="text"], input[type="number"] { padding: 10px; border: 1px solid #ccc; border-radius: 4px; outline: none; } input[type="text"]::placeholder, input[type="number"]::placeholder { color: #999; } button { padding: 10px 20px; background-color: #4caf50; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } .expense-table { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } table { width: 100%; border-collapse: collapse; } thead th { background-color: #f2f2f2; padding: 10px; text-align: left; } tbody td { padding: 10px; border-top: 1px solid #ddd; } .delete-btn { color: red; cursor: pointer; } .total-amount { padding: 10px; text-align: right; background-color: #f2f2f2; } |
Javascript
// script.js // Get form, expense list, and total amount elements const expenseForm = document.getElementById("expense-form"); const expenseList = document.getElementById("expense-list"); const totalAmountElement = document.getElementById("total-amount"); // Initialize expenses array from localStorage let expenses = JSON.parse(localStorage.getItem("expenses")) || []; // Function to render expenses in tabular form function renderExpenses() { // Clear expense list expenseList.innerHTML = ""; // Initialize total amount let totalAmount = 0; // Loop through expenses array and create table rows for (let i = 0; i < expenses.length; i++) { const expense = expenses[i]; const expenseRow = document.createElement("tr"); expenseRow.innerHTML = ` <td>${expense.name}</td> <td>$${expense.amount}</td> <td class="delete-btn" data-id="${i}">Delete</td> `; expenseList.appendChild(expenseRow); // Update total amount totalAmount += expense.amount; } // Update total amount display totalAmountElement.textContent = totalAmount.toFixed(2); // Save expenses to localStorage localStorage.setItem("expenses", JSON.stringify(expenses)); } // Function to add expense function addExpense(event) { event.preventDefault(); // Get expense name and amount from form const expenseNameInput = document.getElementById("expense-name"); const expenseAmountInput = document.getElementById("expense-amount"); const expenseName = expenseNameInput.value; const expenseAmount = parseFloat(expenseAmountInput.value); // Clear form inputs expenseNameInput.value = ""; expenseAmountInput.value = ""; // Validate inputs if (expenseName === "" || isNaN(expenseAmount)) { alert("Please enter valid expense details."); return; } // Create new expense object const expense = { name: expenseName, amount: expenseAmount, }; // Add expense to expenses array expenses.push(expense); // Render expenses renderExpenses(); } // Function to delete expense function deleteExpense(event) { if (event.target.classList.contains("delete-btn")) { // Get expense index from data-id attribute const expenseIndex = parseInt(event.target.getAttribute("data-id")); // Remove expense from expenses array expenses.splice(expenseIndex, 1); // Render expenses renderExpenses(); } } // Add event listeners expenseForm.addEventListener("submit", addExpense); expenseList.addEventListener("click", deleteExpense); // Render initial expenses on page load renderExpenses(); |
Output:
expense tracker
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
