Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ const incomeInput = document.getElementById('income');
+ const housingInput = document.getElementById('housing');
+ const utilitiesInput = document.getElementById('utilities');
+ const transportationInput = document.getElementById('transportation');
+ const foodInput = document.getElementById('food');
+ const entertainmentInput = document.getElementById('entertainment');
+ const savingsInput = document.getElementById('savings');
+
+ const totalIncome = document.getElementById('total-income');
+ const totalExpenses = document.getElementById('total-expenses');
+ const netBalance = document.getElementById('net-balance');
+ const savingsRate = document.getElementById('savings-rate');
+
+ const calculateButton = document.getElementById('calculate');
+
+ const ctx = document.getElementById('budgetChart').getContext('2d');
+ let budgetChart;
+
+ calculateButton.addEventListener('click', function() {
+ const income = parseFloat(incomeInput.value) || 0;
+ const housing = parseFloat(housingInput.value) || 0;
+ const utilities = parseFloat(utilitiesInput.value) || 0;
+ const transportation = parseFloat(transportationInput.value) || 0;
+ const food = parseFloat(foodInput.value) || 0;
+ const entertainment = parseFloat(entertainmentInput.value) || 0;
+ const savings = parseFloat(savingsInput.value) || 0;
+
+ const totalExpensesValue = housing + utilities + transportation + food + entertainment;
+ const netBalanceValue = income - totalExpensesValue;
+ const savingsRateValue = ((savings / income) * 100) || 0;
+
+ totalIncome.textContent = `$${income.toFixed(2)}`;
+ totalExpenses.textContent = `$${totalExpensesValue.toFixed(2)}`;
+ netBalance.textContent = `$${netBalanceValue.toFixed(2)}`;
+ savingsRate.textContent = `${savingsRateValue.toFixed(1)}%`;
+
+ if (budgetChart) {
+ budgetChart.destroy();
+ }
+
+ budgetChart = new Chart(ctx, {
+ type: 'pie',
+ data: {
+ labels: ['Housing', 'Utilities', 'Transportation', 'Food', 'Entertainment', 'Savings'],
+ datasets: [{
+ label: 'Budget Breakdown',
+ data: [housing, utilities, transportation, food, entertainment, savings],
+ backgroundColor: [
+ '#4a90e2',
+ '#50e3c2',
+ '#f5a623',
+ '#7ed321',
+ '#bd10e0',
+ '#ff6b6b'
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ position: 'bottom'
+ }
+ }
+ }
+ });
+ });
+ });
