Merge pull request #2076 from Jivanjamadar/feature

Feature: Add-on of ExpenseTracker web application project folder on main repository
iamrahulmahato · Nov 4, 2024 · 33de5a6 · 33de5a6
2 parents f183a86 + 3bc55a6
commit 33de5a6
Show file tree

Hide file tree

Showing 5 changed files with 442 additions and 0 deletions.
diff --git a/ExpenseTracker_App/README.md b/ExpenseTracker_App/README.md
@@ -0,0 +1,50 @@
+# Expense Tracker Web Application 💵
+
+A responsive web-based expense tracking application that helps users manage their monthly expenses with visual representations and budget monitoring system.
+
+## Features
+
+- 📊 Set and track monthly budget limits
+- 💰 Add and delete expenses with dates
+- 📈 Visual representation of expenses through charts
+- 🚨 Alert system for budget limit exceeded
+- 📱 Responsive design for both desktop and mobile devices
+- 📊 Daily expense trend visualization
+- 💵 Real-time calculation of remaining budget
+
+## Technologies Used 👨🏻‍💻
+
+- HTML5
+- CSS3
+- JavaScript (Vanilla)
+- Chart.js for data visualization
+
+## Installation and Setup ⬇
+
+1.**Clone the repository:**
+
+2.**Navigate to the project directory:**
+
+3.**Open the index.html File:**
+Open index.html in your preferred web browser
+
+### Browser Support 🌐
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+### Preview of webapp:
+![expense-tracker](demo.png)
+
+
+## Usage
+1. Open the application in your preferred web browser.
+2. Set your monthly budget limit in the "Set Monthly Limit" input field and click "Set Limit".
+3. Fill in the details for each expense and click "Add Expense" to record them.
+4. Monitor your current spending status in the status container.
+5. Manage your expenses using the provided delete functionality.
+6. Keep track of your budget with real-time alerts.
+
+### Happy Coding!
+Jivan Jamdar 🤓
diff --git a/ExpenseTracker_App/demo.png b/ExpenseTracker_App/demo.png
diff --git a/ExpenseTracker_App/src/index.html b/ExpenseTracker_App/src/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Expense Tracker</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <header>
+        <div class="Header">
+                Track your expenses with whole clarity
+        </div>
+    </header>
+    <div class="container">
+        <h1>Expense Tracker</h1>
+
+        <!-- Monthly Limit Section -->
+        <div class="limit-container">
+            <input type="number" id="monthlyLimit" placeholder="Set Monthly Limit">
+            <button id="setLimit">Set Limit</button>
+        </div>
+
+        <!-- Current Status Section -->
+        <div class="status-container">
+            <div class="status-item">
+                <h3>Monthly Limit:</h3>
+                <p id="limitAmount">₹0.00</p>
+            </div>
+            <div class="status-item">
+                <h3>Total Expenses:</h3>
+                <p id="totalExpenses">₹0.00</p>
+            </div>
+            <div class="status-item">
+                <h3>Remaining:</h3>
+                <p id="remainingAmount">₹0.00</p>
+            </div>
+        </div>
+
+        <!-- Add Expense Form -->
+        <div class="form-container">
+            <input type="text" id="expenseName" placeholder="Expense Name">
+            <input type="number" id="expenseAmount" placeholder="Amount">
+            <input type="date" id="expenseDate">
+            <button id="addExpense">Add Expense</button>
+        </div>
+
+        <!-- Expenses List -->
+        <div class="expense-list">
+            <h2>Expenses</h2>
+            <ul id="expensesList"></ul>
+        </div>
+
+        <!-- Chart -->
+        <div class="chart-container">
+            <canvas id="expenseChart"></canvas>
+        </div>
+    </div>
+    <footer>
+        <div>
+            <p 
+            style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: 20px; 
+            ">Created by Jivan with ❤</p>
+        </div>
+    </footer>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/ExpenseTracker_App/src/script.js b/ExpenseTracker_App/src/script.js
@@ -0,0 +1,141 @@
+// Budget and Expense Data
+let monthlyLimit = 0;
+let expenses = [];
+
+// DOM Elements
+document.getElementById('setLimit').addEventListener('click', setMonthlyLimit);
+document.getElementById('addExpense').addEventListener('click', addExpense);
+
+// Set Monthly Limit
+function setMonthlyLimit() {
+    const limitInput = document.getElementById('monthlyLimit');
+    monthlyLimit = parseFloat(limitInput.value) || 0;
+    limitInput.value = '';
+    updateUI();
+}
+
+// Add Expense
+function addExpense() {
+    const name = document.getElementById('expenseName').value;
+    const amount = parseFloat(document.getElementById('expenseAmount').value);
+    const date = document.getElementById('expenseDate').value;
+
+    if (name && amount && date) {
+        expenses.push({ name, amount, date });
+
+        // Clear input fields
+        document.getElementById('expenseName').value = '';
+        document.getElementById('expenseAmount').value = '';
+        document.getElementById('expenseDate').value = '';
+
+        updateUI();
+        checkLimitExceeded();
+    } else {
+        alert('Please fill all fields');
+    }
+}
+
+// Check if limit is exceeded
+function checkLimitExceeded() {
+    const totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0);
+    if (totalExpenses > monthlyLimit && monthlyLimit > 0) {
+        showAlert(`You've exceeded your monthly limit of ₹${monthlyLimit.toFixed(2)}!`);
+    }
+}
+
+// Show Alert
+function showAlert(message) {
+    const alertDiv = document.createElement('div');
+    alertDiv.className = 'alert';
+    alertDiv.innerHTML = `
+        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
+        ${message}
+    `;
+    document.body.appendChild(alertDiv);
+
+    // Remove the alert after 5 seconds
+    setTimeout(() => {
+        alertDiv.style.display = 'none';
+    }, 5000);
+}
+
+// Update UI
+function updateUI() {
+    // Update status displays
+    document.getElementById('limitAmount').textContent = `₹${monthlyLimit.toFixed(2)}`;
+
+    const totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0);
+    document.getElementById('totalExpenses').textContent = `₹${totalExpenses.toFixed(2)}`;
+
+    const remaining = monthlyLimit - totalExpenses;
+    document.getElementById('remainingAmount').textContent = `₹${remaining.toFixed(2)}`;
+
+    // Update expenses list
+    renderExpensesList();
+
+    // Update chart
+    updateChart();
+}
+
+// Render Expenses List
+function renderExpensesList() {
+    const expensesList = document.getElementById('expensesList');
+    expensesList.innerHTML = expenses.map((expense, index) => `
+        <li>
+            ${expense.name} - ₹${expense.amount.toFixed(2)} - ${expense.date}
+            <button class="delete-btn" onclick="deleteExpense(${index})">Delete</button>
+        </li>
+    `).join('');
+}
+
+// Delete Expense
+function deleteExpense(index) {
+    expenses.splice(index, 1);
+    updateUI();
+}
+
+// Update Chart
+function updateChart() {
+    const ctx = document.getElementById('expenseChart').getContext('2d');
+
+    // Group expenses by date
+    const expensesByDate = {};
+    expenses.forEach(expense => {
+        if (expensesByDate[expense.date]) {
+            expensesByDate[expense.date] += expense.amount;
+        } else {
+            expensesByDate[expense.date] = expense.amount;
+        }
+    });
+
+    // Destroy previous chart if it exists
+    if (window.myChart) {
+        window.myChart.destroy();
+    }
+
+    // Create new chart
+    window.myChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: Object.keys(expensesByDate),
+            datasets: [{
+                label: 'Daily Expenses',
+                data: Object.values(expensesByDate),
+                borderColor: '#45a049',
+                fill: false
+            }]
+        },
+        options: {
+            responsive: true,
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    title: {
+                        display: true,
+                        text: 'Amount (₹)'
+                    }
+                }
+            }
+        }
+    });
+}