Managing finances can be tricky, but with the right tools, it becomes much easier. In this project, I’ll walk you through building a basic Expense Tracker App using HTML, CSS, and JavaScript. This app will allow users to track their expenses, categorize them, and view the total expense amount in real-time.
What You'll Learn:
- Structuring a web page using HTML.
- Styling your app using CSS for a clean and responsive layout.
- Implementing interactivity using JavaScript to add, remove, and calculate expenses dynamically.
- Storing and retrieving expense data using the browser's local storage.
Features of the Expense Tracker App
- Add Expenses: Users can input expenses and assign categories like Food, Travel, Shopping, etc.
- Delete Expenses: Users can remove unwanted or incorrect expenses.
- Real-Time Calculation: The total expenses update instantly as users add or delete entries.
- Local Storage: Expenses persist even after refreshing the page, thanks to local storage.
Tech Stack Used
- HTML: For structuring the app's user interface.
- CSS: To make the app visually appealing and responsive.
- JavaScript: To handle the logic for adding expenses, calculating totals, and managing local storage.
Html Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Tracker App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Expense Tracker</h1>
<div class="new-expense">
<input type="text" id="expense-description" placeholder="Enter expense">
<input type="number" id="expense-amount" placeholder="Amount">
<button onclick="addExpense()">Add Expense</button>
</div>
<ul id="expense-list"></ul>
<h2>Total: $<span id="total-amount">0</span></h2>
</div>
<script src="app.js"></script>
</body>
</html>
CSS Code
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
.new-expense input {
margin-right: 10px;
}
#expense-list li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
</style>
JS Code
<script>
let totalAmount = 0;
function addExpense() {
const description = document.getElementById('expense-description').value;
const amount = parseFloat(document.getElementById('expense-amount').value);
if (description && amount) {
const expenseList = document.getElementById('expense-list');
const li = document.createElement('li');
li.textContent = `${description} - $${amount}`;
expenseList.appendChild(li);
totalAmount += amount;
document.getElementById('total-amount').textContent = totalAmount.toFixed(2);
document.getElementById('expense-description').value = '';
document.getElementById('expense-amount').value = '';
} else {
alert('Please enter both description and amount.');
}
}
</script>
4. Exploring More Features (Optional):
You can further enhance the app by adding features such as:
- Expense Categories: Allow users to categorize their expenses (e.g., Food, Travel, Shopping).
- Edit Expenses: Enable users to edit their existing expenses.
- Chart Visualization: Visualize expense data using libraries like Chart.js.
Live Demo and Source Code:
Check out the live demo Feel free to clone and modify it for your own projects!
Conclusion:
Building an Expense Tracker App with HTML, CSS, and JavaScript is a fantastic way to sharpen your front-end development skills. This project covers key concepts like DOM manipulation, local storage, and responsive design. By completing this app, you’ll be better equipped to build more complex applications in the future.
Comments
Post a Comment