Monthly Budget Planner

Monthly Budget Planner

Name	Date	Item	Amount	Type	Action

Total Income: 0
Total Expense: 0

document.addEventListener('DOMContentLoaded', async () => { const nameField = document.getElementById('name'); nameField.addEventListener('input', async function () { const name = nameField.value; if (name) { // Fetch saved data for the user const response = await fetch(`/get-entries?name=${encodeURIComponent(name)}`); if (response.ok) { const entries = await response.json(); loadEntries(entries); } else { console.error('Failed to fetch entries.'); } } }); }); function loadEntries(entries) { budgetTable.innerHTML = ''; // Clear existing entries incomeTotal = 0; expenseTotal = 0; entries.forEach(entry => { const { name, date, item, amount, type } = entry; if (type === 'income') { incomeTotal += parseFloat(amount); chartData.income = incomeTotal; } else { expenseTotal += parseFloat(amount); chartData.expense = expenseTotal; } const row = document.createElement('tr'); row.innerHTML = ` ${name} ${date} ${item} ${parseFloat(amount).toFixed(2)} ${type} `; budgetTable.appendChild(row); }); totalIncome.textContent = incomeTotal.toFixed(2); totalExpense.textContent = expenseTotal.toFixed(2); chart.data.datasets[0].data = [chartData.income, chartData.expense]; chart.update(); }