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</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Expense Tracker</h1>
<div class="form-group">
<input type="text" id="expenseDescription" placeholder="Enter expense description">
<input type="number" id="expenseAmount" placeholder="Enter amount">
<button id="addExpenseBtn">Add Expense</button>
</div>
<div class="expense-list">
<h2>Expense List</h2>
<ul id="expenseList">
<!-- Expenses will be dynamically added here -->
</ul>
</div>
<div class="total-expenses">
<h2>Total Expenses: <span id="totalExpensesAmount">0</span></h2>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
.form-group {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.form-group input {
padding: 10px;
flex: 1;
margin-right: 10px;
}
.form-group button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
.expense-list {
margin-bottom: 20px;
}
.expense-list h2 {
margin: 0;
}
.expense-list ul {
list-style: none;
padding: 0;
}
.expense-list li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.expense-list li:last-child {
border-bottom: none;
}
.total-expenses h2 {
margin: 0;
text-align: right;
}
.total-expenses span {
font-weight: bold;
}
Java Script
document.addEventListener("DOMContentLoaded", () => {
const expenseList = document.getElementById("expenseList");
const expenseDescriptionInput = document.getElementById("expenseDescription");
const expenseAmountInput = document.getElementById("expenseAmount");
const addExpenseBtn = document.getElementById("addExpenseBtn");
const totalExpensesAmount = document.getElementById("totalExpensesAmount");
// Retrieve expenses from local storage or set an empty array
let expenses = JSON.parse(localStorage.getItem("expenses")) || [];
// Function to update the total expenses amount
function updateTotalExpenses() {
const totalExpenses = expenses.reduce((total, expense) => total + expense.amount, 0);
totalExpensesAmount.textContent = totalExpenses;
}
// Function to render the expense list
function renderExpenses() {
expenseList.innerHTML = "";
expenses.forEach((expense, index) => {
const li = document.createElement("li");
li.innerHTML = `
<span>${expense.description}</span>
<span>$${expense.amount}</span>
<button class="delete-btn" data-index="${index}">Delete</button>
`;
expenseList.appendChild(li);
});
updateTotalExpenses();
}
// Function to add a new expense
function addExpense() {
const description = expenseDescriptionInput.value.trim();
const amount = parseFloat(expenseAmountInput.value);
if (description === "" || isNaN(amount) || amount <= 0) {
return;
}
const newExpense = { description, amount };
expenses.push(newExpense);
localStorage.setItem("expenses", JSON.stringify(expenses));
renderExpenses();
// Clear input fields
expenseDescriptionInput.value = "";
expenseAmountInput.value = "";
}
// Function to delete an expense
function deleteExpense(index) {
expenses.splice(index, 1);
localStorage.setItem("expenses", JSON.stringify(expenses));
renderExpenses();
}
// Event listener for adding an expense
addExpenseBtn.addEventListener("click", addExpense);
// Event delegation for deleting an expense
expenseList.addEventListener("click", (event) => {
if (event.target.classList.contains("delete-btn")) {
const index = event.target.dataset.index;
deleteExpense(index);
}
});
// Initial rendering of expenses
renderExpenses();
});
** I can provide you with a simple Expense Tracker web application using HTML, CSS, and JavaScript. This application will allow users to add and manage their expenses. The data will be stored in the browser's local storage for simplicity.**
Top comments (0)