Solution Files
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bonus Exercise 10 - Budget Tracker</title>
</head>
<body>
<h1>Bonus Exercise 10: Personal Budget Tracker</h1>
<script src="script.js"></script>
</body>
</html>script.js
// Create array of expense objects
const expenses = [
{
description: 'Groceries',
amount: 75.50,
category: 'Food',
date: '2024-01-15'
},
{
description: 'Bus ticket',
amount: 3.50,
category: 'Transport',
date: '2024-01-16'
},
{
description: 'Movie ticket',
amount: 12.00,
category: 'Entertainment',
date: '2024-01-17'
},
{
description: 'Electricity bill',
amount: 85.00,
category: 'Bills',
date: '2024-01-18'
},
{
description: 'Restaurant',
amount: 45.00,
category: 'Food',
date: '2024-01-19'
},
{
description: 'Netflix subscription',
amount: 15.99,
category: 'Entertainment',
date: '2024-01-20'
}
];
// Function to calculate total expenses
function calculateTotalExpenses(expensesArray) {
let total = 0;
for (let i = 0; i < expensesArray.length; i++) {
total += expensesArray[i].amount;
}
return total;
}
// Function to get expenses by category
function getExpensesByCategory(expensesArray, category) {
let total = 0;
expensesArray.forEach(expense => {
if (expense.category === category) {
total += expense.amount;
}
});
return total;
}
// Function to get highest expense
function getHighestExpense(expensesArray) {
let highest = expensesArray[0];
for (let i = 1; i < expensesArray.length; i++) {
if (expensesArray[i].amount > highest.amount) {
highest = expensesArray[i];
}
}
return highest;
}
// Display all expenses
document.write("<h2>All Expenses:</h2><ul>");
expenses.forEach(function(expense) {
document.write(`<li>${expense.description} - $${expense.amount.toFixed(2)} (${expense.category}) - ${expense.date}</li>`);
});
document.write("</ul>");
// Display total expenses
const totalExpenses = calculateTotalExpenses(expenses);
document.write(`<p><strong>Total Expenses: $${totalExpenses.toFixed(2)}</strong></p>`);
// Display expenses by category
const categories = ['Food', 'Transport', 'Entertainment', 'Bills'];
document.write("<h2>Expenses by Category:</h2><ul>");
categories.forEach(category => {
const categoryTotal = getExpensesByCategory(expenses, category);
if (categoryTotal > 0) {
document.write(`<li>${category}: $${categoryTotal.toFixed(2)}</li>`);
}
});
document.write("</ul>");
// Display highest expense
const highestExpense = getHighestExpense(expenses);
document.write(`<p><strong>Highest Expense: ${highestExpense.description} - $${highestExpense.amount.toFixed(2)}</strong></p>`);