script.js

class ExpenseTracker {
    constructor() {
        this.expenses = this.loadExpenses();
        this.chart = null;
        this.initializeApp();
    }

    initializeApp() {
        this.bindEvents();
        this.setDefaultDate();
        this.updateDisplay();
        this.initializeChart();
    }

    bindEvents() {
        document.getElementById('expense-form').addEventListener('submit', (e) => {
            e.preventDefault();
            this.addExpense();
        });

        document.getElementById('filter-category').addEventListener('change', (e) => {
            this.filterExpenses(e.target.value);
        });

        this.addClearAllButton();
    }

    setDefaultDate() {
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('date').value = today;
    }

    addExpense() {
        const description = document.getElementById('description').value.trim();
        const amount = parseFloat(document.getElementById('amount').value);
        const category = document.getElementById('category').value;
        const date = document.getElementById('date').value;

        if (!description || !amount || !category || !date) {
            this.showNotification('Please fill in all fields', 'error');
            return;
        }

        if (amount <= 0) {
            this.showNotification('Amount must be greater than 0', 'error');
            return;
        }

        const expense = {
            id: Date.now(),
            description,
            amount,
            category,
            date,
            timestamp: new Date().toISOString()
        };

        this.expenses.unshift(expense);
        this.saveExpenses();
        this.updateDisplay();
        this.clearForm();
        this.showNotification('Expense added successfully!', 'success');


        document.getElementById('expense-form').classList.add('form-submitted');
        setTimeout(() => {
            document.getElementById('expense-form').classList.remove('form-submitted');
        }, 600);
    }

    deleteExpense(id) {
        if (confirm('Are you sure you want to delete this expense?')) {
            this.expenses = this.expenses.filter(expense => expense.id !== id);
            this.saveExpenses();
            this.updateDisplay();
            this.showNotification('Expense deleted successfully!', 'success');
        }
    }

    filterExpenses(category) {
        const filteredExpenses = category ? 
            this.expenses.filter(expense => expense.category === category) : 
            this.expenses;
        
        this.displayExpenses(filteredExpenses);
    }

    updateDisplay() {
        this.displayExpenses(this.expenses);
        this.updateStats();
        this.updateChart();
    }

    displayExpenses(expenses) {
        const expenseList = document.getElementById('expense-list');
        
        if (expenses.length === 0) {
            expenseList.innerHTML = `
                <div class="empty-state">
                    <p>No expenses found. ${this.expenses.length === 0 ? 'Add your first expense to get started!' : 'Try changing the filter.'}</p>
                </div>
            `;
            return;
        }

        expenseList.innerHTML = expenses.map(expense => `
            <div class="expense-item category-${expense.category}">
                <div class="expense-details">
                    <div class="expense-description">${expense.description}</div>
                    <div class="expense-meta">
                        <span class="expense-category">${this.getCategoryIcon(expense.category)} ${this.getCategoryName(expense.category)}</span>
                        <span>${this.formatDate(expense.date)}</span>
                    </div>
                </div>
                <div class="expense-amount">$${expense.amount.toFixed(2)}</div>
                <button class="delete-btn" onclick="expenseTracker.deleteExpense(${expense.id})">
                    Delete
                </button>
            </div>
        `).join('');
    }

    updateStats() {
        const totalExpenses = this.expenses.reduce((sum, expense) => sum + expense.amount, 0);
        const expenseCount = this.expenses.length;
        const avgExpense = expenseCount > 0 ? totalExpenses / expenseCount : 0;
        const topCategory = this.getTopCategory();

        document.getElementById('total-balance').textContent = totalExpenses.toFixed(2);
        document.getElementById('total-expenses').textContent = `$${totalExpenses.toFixed(2)}`;
        document.getElementById('expense-count').textContent = expenseCount;
        document.getElementById('avg-expense').textContent = `$${avgExpense.toFixed(2)}`;
        document.getElementById('top-category').textContent = topCategory;
    }

    getTopCategory() {
        if (this.expenses.length === 0) return 'None';
        
        const categoryTotals = {};
        this.expenses.forEach(expense => {
            categoryTotals[expense.category] = (categoryTotals[expense.category] || 0) + expense.amount;
        });

        const topCategory = Object.keys(categoryTotals).reduce((a, b) => 
            categoryTotals[a] > categoryTotals[b] ? a : b
        );

        return this.getCategoryName(topCategory);
    }

    initializeChart() {
        const ctx = document.getElementById('expense-chart').getContext('2d');
        this.chart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: [],
                datasets: [{
                    data: [],
                    backgroundColor: [
                        '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4',
                        '#feca57', '#ff9ff3', '#54a0ff', '#5f27cd'
                    ],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            usePointStyle: true
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.parsed;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = ((value / total) * 100).toFixed(1);
                                return `${label}: $${value.toFixed(2)} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    }

    updateChart() {
        if (!this.chart) return;

        const categoryTotals = {};
        this.expenses.forEach(expense => {
            categoryTotals[expense.category] = (categoryTotals[expense.category] || 0) + expense.amount;
        });

        const labels = Object.keys(categoryTotals).map(cat => this.getCategoryName(cat));
        const data = Object.values(categoryTotals);

        this.chart.data.labels = labels;
        this.chart.data.datasets[0].data = data;
        this.chart.update();
    }

    getCategoryName(category) {
        const categories = {
            food: 'Food & Dining',
            transport: 'Transportation',
            shopping: 'Shopping',
            entertainment: 'Entertainment',
            bills: 'Bills & Utilities',
            health: 'Healthcare',
            education: 'Education',
            other: 'Other'
        };
        return categories[category] || category;
    }

    getCategoryIcon(category) {
        const icons = {
            food: '🍕',
            transport: '🚗',
            shopping: '🛍️',
            entertainment: '🎬',
            bills: '💡',
            health: '🏥',
            education: '📚',
            other: '📦'
        };
        return icons[category] || '📦';
    }

    formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString('en-US', {
            month: 'short',
            day: 'numeric',
            year: 'numeric'
        });
    }

    clearForm() {
        document.getElementById('expense-form').reset();
        this.setDefaultDate();
    }

    showNotification(message, type = 'success') {
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.textContent = message;
        
        Object.assign(notification.style, {
            position: 'fixed',
            top: '20px',
            right: '20px',
            padding: '15px 20px',
            borderRadius: '8px',
            color: 'white',
            fontWeight: '600',
            zIndex: '1000',
            animation: 'slideInRight 0.3s ease',
            backgroundColor: type === 'success' ? '#4caf50' : '#f44336'
        });

        document.body.appendChild(notification);

        setTimeout(() => {
            notification.style.animation = 'slideOutRight 0.3s ease';
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 300);
        }, 3000);
    }

    addClearAllButton() {
        const clearAllBtn = document.createElement('button');
        clearAllBtn.textContent = 'Clear All Expenses';
        clearAllBtn.className = 'btn';
        clearAllBtn.style.marginTop = '20px';
        clearAllBtn.style.background = 'linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)';
        
        clearAllBtn.addEventListener('click', () => {
            if (this.expenses.length === 0) {
                this.showNotification('No expenses to clear', 'error');
                return;
            }
            
            if (confirm('Are you sure you want to delete all expenses? This action cannot be undone.')) {
                this.expenses = [];
                this.saveExpenses();
                this.updateDisplay();
                this.showNotification('All expenses cleared!', 'success');
            }
        });

        document.querySelector('.stats-section').appendChild(clearAllBtn);
    }

    saveExpenses() {
        try {

        } catch (error) {
            console.error('Error saving expenses:', error);
        }
    }

    loadExpenses() {
        try {
            return [];
        } catch (error) {
            console.error('Error loading expenses:', error);
            return [];
        }
    }

    exportData() {
        const dataStr = JSON.stringify(this.expenses, null, 2);
        const dataBlob = new Blob([dataStr], {type: 'application/json'});
        const url = URL.createObjectURL(dataBlob);
        const link = document.createElement('a');
        link.href = url;
        link.download = 'expenses.json';
        link.click();
        URL.revokeObjectURL(url);
    }
}

const style = document.createElement('style');
style.textContent = `
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOutRight {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);

const expenseTracker = new ExpenseTracker();