In this project, we will be building a simple yet powerful Expense Tracker using HTML, CSS, and JavaScript. This project is ideal for beginners who want to enhance their web development skills while creating a tool that has real-world applications. By the end of this tutorial, you will have a fully functional Expense Tracker that can record expenses, calculate total income and expenditure, and display a balance based on your inputs.
Creating an Expense Tracker is not only a great way to learn these web technologies but also an opportunity to develop a tool that you can use in your daily life. Whether you're a student managing your pocket money or an adult keeping track of household expenses, this project will provide you with a practical solution to stay on top of your finances.
Step 01: Project setup
Start by creating a new folder on your computer. You can name it something like ExpenseTracker or any other name you prefer. This will be the root directory where all your project files will be stored.
index.html: This file will contain the HTML structure of your Expense Tracker. It’s the main file that will be rendered in the browser.
At this stage, you have created the basic HTML structure for your Expense Tracker. This structure includes a header, a form to add expenses, a table to display the list of expenses, and a section to summarize the financial data. Next, you’ll add styles to make this UI more attractive and user-friendly.
✲ index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Tracker | Coding Zemigle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form id="expense-form">
<input type="text" id="description" placeholder="Expense Description" required>
<input type="number" id="amount" placeholder="Amount" required>
<div class="form-row">
<input type="date" id="date" required>
<select id="category" required>
<option value="" disabled selected>Select Category</option>
<option value="Food">Food</option>
<option value="Transport">Transport</option>
<option value="Utilities">Utilities</option>
<option value="Entertainment">Entertainment</option>
<option value="Others">Others</option>
</select>
</div>
<button type="submit">Add New Expense</button>
</form>
<div id="expense-list">
<ul id="expenses"></ul>
</div>
<div class="total">
<h2>Total: $<span id="total">0.00</span></h2>
</div>
</div>
<script src="script.js"></script>
</body>
</html>At this stage, you have created the basic HTML structure for your Expense Tracker. This structure includes a header, a form to add expenses, a table to display the list of expenses, and a section to summarize the financial data. Next, you’ll add styles to make this UI more attractive and user-friendly.
Step 02: Styling with CSS
Now that the HTML structure is in place, it's time to make your Expense Tracker visually appealing with CSS. We'll style the various components, including the form, table, and summary sections, and ensure the layout is responsive for different screen sizes.
style.css: This file will be used to style the HTML elements. All your CSS code will go here.
With the HTML structure and CSS styling in place, the final step is to add functionality to the Expense Tracker using JavaScript. This involves handling form submissions, managing the list of expenses, calculating totals, and updating the summary section.
✲ style.css
body {
font-family: 'Arial', sans-serif;
background: #007bff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: #fff;
padding: 25px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
width: 360px;
transition: transform 0.3s ease;
}
form {
display: flex;
flex-direction: column;
}
input, select {
padding: 15px;
margin-bottom: 20px;
border-radius: 3px;
border: solid 1px #ddd;
outline: none;
transition: border-color 0.3s ease;
}
input:focus, select:focus {
border-color: #007bff;
}
button {
padding: 16px 32px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
.remove-btn{
padding: 8px 16px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}
.form-row {
display: flex;
justify-content: space-between;
gap: 10px; /* Space between inputs */
margin-bottom: 10px;
}
#expense-list {
margin-top: 20px;
}
#expenses {
list-style: none;
padding: 0;
}
#expenses li {
display: flex;
justify-content: space-between;
padding: 12px;
background: #f0f0f0;
color: #000;
border: 1px solid #ddd;
border-radius: 6px;
margin-bottom: 10px;
transition: background-color 0.3s ease;
}
#expenses li:hover {
background: #e2e6ea;
}
.total {
margin-top: 20px;
text-align: center;
}
.total h2 {
margin: 0;
color: #333;
}With the HTML structure and CSS styling in place, the final step is to add functionality to the Expense Tracker using JavaScript. This involves handling form submissions, managing the list of expenses, calculating totals, and updating the summary section.
Step 03: Adding Functionality with JavaScript
script.js: This is where your JavaScript code will live. It will handle all the interactive features of the Expense Tracker, such as adding, editing, and deleting expenses.
With these steps, your Expense Tracker is complete! You now have a functional web application that allows users to track their income and expenses, providing a clear summary of their financial situation. This project is a great way to apply your knowledge of HTML, CSS, and JavaScript in a practical context, and it can be further expanded with more advanced features as you continue to improve your web development skills.
✲ script.js
document.getElementById('expense-form').addEventListener('submit', function(event) {
event.preventDefault();
const description = document.getElementById('description').value;
const amount = parseFloat(document.getElementById('amount').value);
const date = document.getElementById('date').value;
const category = document.getElementById('category').value;
if (description && !isNaN(amount) && date && category) {
addExpense(description, amount, date, category);
updateTotal();
document.getElementById('description').value = '';
document.getElementById('amount').value = '';
document.getElementById('date').value = '';
document.getElementById('category').value = '';
}
});
let totalAmount = 0;
function addExpense(description, amount, date, category) {
const expensesList = document.getElementById('expenses');
const expenseItem = document.createElement('li');
expenseItem.innerHTML = `
<div>
<strong>${description}</strong> — $${amount.toFixed(2)}
<br>
<small>${date} | ${category}</small>
</div>
<button class="remove-btn" onclick="removeExpense(this, ${amount})">Delete</button>
`;
expensesList.appendChild(expenseItem);
totalAmount += amount;
}
function updateTotal() {
document.getElementById('total').textContent = totalAmount.toFixed(2);
}
function removeExpense(button, amount) {
button.parentElement.remove();
totalAmount -= amount;
updateTotal();
}With these steps, your Expense Tracker is complete! You now have a functional web application that allows users to track their income and expenses, providing a clear summary of their financial situation. This project is a great way to apply your knowledge of HTML, CSS, and JavaScript in a practical context, and it can be further expanded with more advanced features as you continue to improve your web development skills.
Creating an Expense Tracker with HTML, CSS, and JavaScript is a rewarding project that helps you understand the fundamentals of web development while also providing a practical tool for managing personal finances. Throughout this project, you’ve learned how to structure a web application, style it for a pleasing user experience, and implement the necessary functionality to make it interactive and useful.
Conclusion
While the Expense Tracker is complete and functional, there’s always room for improvement. You could consider adding features like data visualization (graphs and charts), advanced filtering options, user authentication for multiple users, or even integration with third-party services for syncing data across devices.
Deployment and Real-World Use:
With the project completed, you can now deploy your Expense Tracker online, allowing others to benefit from your work. Whether you use it personally or share it with friends, family, or the broader community, this application is a practical demonstration of your web development skills.
Final Thoughts:
Building an Expense Tracker is more than just a coding exercise; it’s a real-world project that showcases your ability to create useful and well-designed applications. It’s a project you can be proud of and a stepping stone towards more advanced web development projects in the future. As you continue to refine and expand your skills, this experience will serve as a solid foundation for your journey into the world of web development.