Html code :
<html>
<head>
<title>Expense Tracker</title>
<link rel="stylesheet" type="text/css" href="[Link]" />
<header>
<h1>Expence Tracker</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>
</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 />
<select id="expense-category" required>
<option value="" disabled selected>Select
Category</option>
<option value="Food">Food</option>
<option value="Transport">Transport</option>
<option value="Entertainment">Entertainment</option>
<option value="Other">Other</option>
</select>
<input type="date" id="expense-date" required />
<button type="submit">Add Expense</button>
</form>
<div class="expense-table">
<table>
<thead>
<tr>
<th>Expense Name</th>
<th>Amount</th>
<th>Category</th>
<th>Date</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 class="filter">
<label for="filter-category">Filter by Category:</label>
<select id="filter-category">
<option value="All">All</option>
<option value="Food">Food</option>
<option value="Transport">Transport</option>
<option value="Entertainment">Entertainment</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<script src="[Link]"></script>
</body>
</html>
Css Code :
body {
font-family: Arial, sans-serif;
background-color: gray;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: rgb(223, 218, 218);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
form input,
form select,
form button {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
form button {
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
form button:hover {
background-color: #218838;
}
.expense-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.expense-table th,
.expense-table td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
.expense-table th {
background-color: #f8f8f8;
}
.total-amount {
text-align: right;
font-size: 18px;
}
.filter {
margin-bottom: 20px;
text-align: right;
}
.filter label {
margin-right: 10px;
}
.filter select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
header {
background-color: #333;
padding: 10px 0;
text-align: center;
color: white;
}
/* Navbar container */
nav {
background-color: #444;
display: flex;
justify-content: center;
padding: 10px 0;
}
/* Navbar links */
nav a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
display: block;
}
/* Navbar links on hover */
nav a:hover {
background-color: #575757;
}
Java Script Code :
[Link]("DOMContentLoaded", () => {
const expenseForm = [Link]("expense-form");
const expenseList = [Link]("expense-list");
const totalAmount = [Link]("total-amount");
const filterCategory = [Link]("filter-category");
let expenses = [];
[Link]("submit", (e) => {
[Link]();
const name = [Link]("expense-name").value;
const amount = parseFloat([Link]("expense-
amount").value);
const category = [Link]("expense-
category").value;
const date = [Link]("expense-date").value;
const expense = {
id: [Link](),
name,
amount,
category,
date
};
[Link](expense);
displayExpenses(expenses);
updateTotalAmount();
[Link]();
});
[Link]("click", (e) => {
if ([Link]("delete-btn")) {
const id = parseInt([Link]);
expenses = [Link](expense => [Link] !== id);
displayExpenses(expenses);
updateTotalAmount();
}
if ([Link]("edit-btn")) {
const id = parseInt([Link]);
const expense = [Link](expense => [Link] ===
id);
[Link]("expense-name").value =
[Link];
[Link]("expense-amount").value =
[Link];
[Link]("expense-category").value =
[Link];
[Link]("expense-date").value =
[Link];
expenses = [Link](expense => [Link] !== id);
displayExpenses(expenses);
updateTotalAmount();
}
});
[Link]("change", (e) => {
const category = [Link];
if (category === "All") {
displayExpenses(expenses);
} else {
const filteredExpenses = [Link](expense =>
[Link] === category);
displayExpenses(filteredExpenses);
}
});
function displayExpenses(expenses) {
[Link] = "";
[Link](expense => {
const row = [Link]("tr");
[Link] = `
<td>${[Link]}</td>
<td>$${[Link](2)}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>
<button class="edit-btn" data-id="$
{[Link]}">Edit</button>
<button class="delete-btn" data-id="$
{[Link]}">Delete</button>
</td>
`;
[Link](row);
});
}
function updateTotalAmount() {
const total = [Link]((sum, expense) => sum +
[Link], 0);
[Link] = [Link](2);
}
});