Expense Tracker

			<!-- aria-live reads the new total after every change. -->
			<section class="summary" aria-label="Summary">
				<p class="total-label">Total spent</p>
				<p class="total" id="total" aria-live="polite"></p>
				<ul class="categories" id="categories"></ul>
			</section>

				<div class="field">
					<label for="amount">Amount (₦)</label>
					<!-- inputmode="decimal" shows a number keypad with a decimal point on phones. -->
					<input
						id="amount"
						type="number"
						inputmode="decimal"
						min="0.01"
						step="0.01"
						required
					/>
				</div>

				<div class="field">
					<label for="category">Category</label>
					<select id="category">
						<option>Food</option>
						<option>Transport</option>
						<option>Bills</option>
						<option>Fun</option>
						<option>Other</option>
					</select>
				</div>

/* A two-column grid: the description spans both, the rest share a row. */
.expense-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.field-wide {
	grid-column: 1 / -1;
}

/* Description and details on the left, amount and Delete on the right. */
.expense {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-top: 1px solid #e4e4e8;
}

// Intl formats numbers for a place: the naira sign, commas, and two decimals.
const naira = new Intl.NumberFormat("en-NG", {
	style: "currency",
	currency: "NGN",
});
const shortDate = new Intl.DateTimeFormat("en-NG", {
	day: "numeric",
	month: "short",
});

// Money is kept in kobo, as whole numbers. Adding whole numbers is always
// exact; adding decimals like 0.1 + 0.2 isn't.
function toKobo(nairaText) {
	return Math.round(Number(nairaText) * 100);
}

function formatKobo(kobo) {
	return naira.format(kobo / 100);
}

function renderSummary() {
	// reduce runs through the array, adding each amount to a running total.
	const total = expenses.reduce((sum, expense) => sum + expense.kobo, 0);
	totalDisplay.textContent = formatKobo(total);

	// Group totals by category: { Food: 450000, Transport: 120000 }.
	const byCategory = {};
	expenses.forEach((expense) => {
		byCategory[expense.category] = (byCategory[expense.category] ?? 0) + expense.kobo;
	});

	// Biggest spend first.
	const sorted = Object.entries(byCategory).sort((a, b) => b[1] - a[1]);
	categoryList.replaceChildren(
		...sorted.map(([category, kobo]) => {
			const item = document.createElement("li");
			item.textContent = `${category} ${formatKobo(kobo)}`;
			return item;
		}),
	);

form.addEventListener("submit", (event) => {
	event.preventDefault();
	const description = descriptionInput.value.trim();
	if (!description) return;

	// unshift adds to the start, so the newest expense shows first.
	expenses.unshift({
		id: Date.now(),
		description,
		kobo: toKobo(amountInput.value),
		category: categorySelect.value,
		date: new Date().toISOString(),
	});
	saveExpenses();
	render();
	form.reset();
	descriptionInput.focus();
});

expenseList.addEventListener("click", (event) => {
	const button = event.target.closest(".delete-button");
	if (!button) return;
	expenses = expenses.filter((expense) => expense.id !== Number(button.dataset.id));
	saveExpenses();
	render();
	descriptionInput.focus();
});