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:
<!-- 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 >
|
/* 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 );
} h 1 {
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 ;
} |
// 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: