Merge pull request #2424 from Dkghuser/FID

[Updated] Personal Finance Dashboard: Comprehensive Financial Management Tool
iamrahulmahato · Nov 10, 2024 · 423b41c · 423b41c
2 parents 6b281ec + 7a51293
commit 423b41c
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 0 deletions.
diff --git a/Financial Insights Dashboard: Personal Finance Manager/app.js 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 = `<p>Monthly budget is set to $${monthlyBudget}.</p>`;
+
+    let totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0);
+    insightsDiv.innerHTML += `<p>Total spending so far: $${totalExpenses}</p>`;
+
+    if (totalExpenses > monthlyBudget) {
+        insightsDiv.innerHTML += `<p style="color:red;">Warning: You have exceeded your monthly budget!</p>`;
+    }
+}
+
+// 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
@@ -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
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Financial Insights Dashboard: Personal Finance Manager</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" defer></script>
+    <script type="module" src="chart.js" defer></script>
+    <script type="module" src="app.js" defer></script>
+</head>
+<body>
+
+    <header>
+        <h1>Personal Finance Dashboard: Comprehensive Financial Management Tool</h1>
+    </header>
+
+    <section id="budget-section">
+        <h2>Budgeting</h2>
+        <div>
+            <input type="number" id="budget-input" placeholder="Enter monthly budget">
+            <button onclick="setBudget()">Set Budget</button>
+        </div>
+        <div id="budget-progress">
+            <p>Budget Status:</p>
+            <canvas id="budgetChart"></canvas>
+        </div>
+    </section>
+
+    <section id="expense-section">
+        <h2>Expense Tracking</h2>
+        <input type="text" id="expense-category" placeholder="Category">
+        <input type="number" id="expense-amount" placeholder="Amount">
+        <button onclick="addExpense()">Add Expense</button>
+        <div>
+            <canvas id="expenseChart"></canvas>
+        </div>
+    </section>
+
+    <section id="savings-section">
+        <h2>Savings Goals</h2>
+        <input type="text" id="goal-name" placeholder="Goal">
+        <input type="number" id="goal-amount" placeholder="Amount">
+        <button onclick="setGoal()">Add Goal</button>
+        <canvas id="goalChart"></canvas>
+    </section>
+
+    <section id="investment-section">
+        <h2>Investment Tracking</h2>
+        <canvas id="investmentChart"></canvas>
+    </section>
+
+    <section id="insights">
+        <h2>Financial Insights</h2>
+    </section>
+
+</body>
+</html>
diff --git a/Financial Insights Dashboard: Personal Finance Manager/style.css b/Financial Insights Dashboard: Personal Finance Manager/style.css
@@ -0,0 +1,32 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f2f5;
+}
+
+header {
+    background-color: #3b5998;
+    color: white;
+    padding: 1rem;
+    text-align: center;
+}
+
+section {
+    padding: 2rem;
+    border-bottom: 1px solid #ccc;
+}
+
+h2 {
+    color: #3b5998;
+}
+
+input, button {
+    padding: 0.5rem;
+    margin: 0.5rem;
+}
+
+canvas {
+    max-width: 100%;
+    height: auto;
+}