diff --git a/Financial Insights Dashboard: Personal Finance Manager/app.js b/Financial Insights Dashboard: Personal Finance Manager/app.js new file mode 100644 index 00000000..08fcf21a --- /dev/null +++ b/Financial Insights Dashboard: Personal Finance Manager/app.js @@ -0,0 +1,52 @@ +import { renderCharts } from './chart.js'; + +// Initial values +let monthlyBudget = 0; +let expenses = []; +let savingsGoals = []; +let investments = [ + { name: 'Stocks', value: 5000 }, + { name: 'Bonds', value: 2000 }, + { name: 'Real Estate', value: 3000 } +]; + +// Budgeting function +window.setBudget = function() { + monthlyBudget = parseFloat(document.getElementById('budget-input').value) || 0; + renderCharts(expenses, monthlyBudget, savingsGoals, investments); +} + +// Expense Tracking function +window.addExpense = function() { + const category = document.getElementById('expense-category').value; + const amount = parseFloat(document.getElementById('expense-amount').value) || 0; + expenses.push({ category, amount }); + renderCharts(expenses, monthlyBudget, savingsGoals, investments); +} + +// Savings Goal function +window.setGoal = function() { + const name = document.getElementById('goal-name').value; + const amount = parseFloat(document.getElementById('goal-amount').value) || 0; + savingsGoals.push({ name, amount }); + renderCharts(expenses, monthlyBudget, savingsGoals, investments); +} + +// Financial Insights +function updateInsights() { + const insightsDiv = document.getElementById('insights'); + insightsDiv.innerHTML = `
Monthly budget is set to $${monthlyBudget}.
`; + + let totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0); + insightsDiv.innerHTML += `Total spending so far: $${totalExpenses}
`; + + if (totalExpenses > monthlyBudget) { + insightsDiv.innerHTML += `Warning: You have exceeded your monthly budget!
`; + } +} + +// Initialize charts and insights +document.addEventListener('DOMContentLoaded', () => { + renderCharts(expenses, monthlyBudget, savingsGoals, investments); + updateInsights(); +}); diff --git a/Financial Insights Dashboard: Personal Finance Manager/chart.js b/Financial Insights Dashboard: Personal Finance Manager/chart.js new file mode 100644 index 00000000..7d2eeb3e --- /dev/null +++ b/Financial Insights Dashboard: Personal Finance Manager/chart.js @@ -0,0 +1,55 @@ +// chart.js + +// Function to render all charts +function renderCharts(expenses, monthlyBudget, savingsGoals, investments) { + // Budget Chart + const budgetChart = new Chart(document.getElementById('budgetChart'), { + type: 'doughnut', + data: { + labels: ['Spent', 'Remaining'], + datasets: [{ + data: [expenses.reduce((sum, expense) => sum + expense.amount, 0), monthlyBudget - expenses.reduce((sum, expense) => sum + expense.amount, 0)], + backgroundColor: ['#FF6384', '#36A2EB'], + }] + } + }); + + // Expense Chart + const expenseChart = new Chart(document.getElementById('expenseChart'), { + type: 'pie', + data: { + labels: expenses.map(e => e.category), + datasets: [{ + data: expenses.map(e => e.amount), + backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'], + }] + } + }); + + // Savings Goal Chart + const goalChart = new Chart(document.getElementById('goalChart'), { + type: 'bar', + data: { + labels: savingsGoals.map(g => g.name), + datasets: [{ + data: savingsGoals.map(g => g.amount), + backgroundColor: '#4BC0C0', + }] + } + }); + + // Investment Chart + const investmentChart = new Chart(document.getElementById('investmentChart'), { + type: 'pie', + data: { + labels: investments.map(i => i.name), + datasets: [{ + data: investments.map(i => i.value), + backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], + }] + } + }); +} + +// Export the renderCharts function +export { renderCharts }; diff --git a/Financial Insights Dashboard: Personal Finance Manager/pfid.html b/Financial Insights Dashboard: Personal Finance Manager/pfid.html new file mode 100644 index 00000000..f34e15ba --- /dev/null +++ b/Financial Insights Dashboard: Personal Finance Manager/pfid.html @@ -0,0 +1,58 @@ + + + + + +Budget Status:
+ +