script.js

(function() {
        const STORAGE_KEY = 'expenses.v1';
        const form = document.getElementById('expense-form');
        const nameInput = document.getElementById('name');
        const amountInput = document.getElementById('amount');
        const descriptionInput = document.getElementById('description');
        const dateInput = document.getElementById('date');
        const editingIdInput = document.getElementById('editing-id');
        const tbody = document.getElementById('tbody');
        const totalEl = document.getElementById('total');
        const searchInput = document.getElementById('search');
        const filterDateInput = document.getElementById('filter-date');
        const submitBtn = document.getElementById('submit-btn');

        function loadExpenses() {
            try {
                const raw = localStorage.getItem(STORAGE_KEY);
                return raw ? JSON.parse(raw) : [];
            } catch (_) { return []; }
        }

        function saveExpenses(expenses) {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(expenses));
        }

        function formatDate(iso) {
            if (!iso) return '';
            const d = new Date(iso);
            const dd = String(d.getDate()).padStart(2, '0');
            const mm = String(d.getMonth() + 1).padStart(2, '0');
            const yyyy = d.getFullYear();
            return `${dd}-${mm}-${yyyy}`;
        }

        function render() {
            const q = searchInput.value.trim().toLowerCase();
            const filterDate = filterDateInput.value; 
            const expenses = loadExpenses();

            const filtered = expenses.filter(e => {
                const matchName = !q || e.name.toLowerCase().includes(q);
                const matchDate = !filterDate || e.date.startsWith(filterDate);
                return matchName && matchDate;
            });

            tbody.innerHTML = '';
            let total = 0;
            filtered.forEach(e => {
                total += Number(e.amount);
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${e.name}</td>
                    <td>₹${Number(e.amount).toFixed(2)}</td>
                    <td>${e.description || ''}</td>
                    <td>${formatDate(e.date)}</td>
                    <td class="actions">
                        <button class="btn small" data-action="edit" data-id="${e.id}">Edit</button>
                        <button class="btn small danger" data-action="delete" data-id="${e.id}">Delete</button>
                    </td>
                `;
                tbody.appendChild(tr);
            });
            totalEl.textContent = total.toFixed(2);
        }

        function resetForm() {
            form.reset();
            editingIdInput.value = '';
            submitBtn.textContent = 'Add Expense';
        }

        form.addEventListener('submit', function(ev) {
            ev.preventDefault();
            const name = nameInput.value.trim();
            const amount = parseFloat(amountInput.value);
            const description = descriptionInput.value.trim();
            const date = dateInput.value; // yyyy-mm-dd
            if (!name || isNaN(amount) || !date) return;

            const expenses = loadExpenses();
            const editingId = editingIdInput.value;

            if (editingId) {
                const idx = expenses.findIndex(e => e.id === editingId);
                if (idx !== -1) {
                    expenses[idx] = { id: editingId, name, amount, description, date };
                }
            } else {
                const id = crypto.randomUUID ? crypto.randomUUID() : String(Date.now());
                expenses.push({ id, name, amount, description, date });
            }

            saveExpenses(expenses);
            resetForm();
            render();
        });

        tbody.addEventListener('click', function(ev) {
            const target = ev.target;
            if (!(target instanceof HTMLElement)) return;
            const action = target.getAttribute('data-action');
            const id = target.getAttribute('data-id');
            if (!action || !id) return;

            const expenses = loadExpenses();
            if (action === 'delete') {
                const next = expenses.filter(e => e.id !== id);
                saveExpenses(next);
                render();
            } else if (action === 'edit') {
                const item = expenses.find(e => e.id === id);
                if (!item) return;
                nameInput.value = item.name;
                amountInput.value = String(item.amount);
                descriptionInput.value = item.description || '';
                dateInput.value = item.date;
                editingIdInput.value = item.id;
                submitBtn.textContent = 'Update Expense';
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        });

        searchInput.addEventListener('input', render);
        filterDateInput.addEventListener('input', render);

        
        dateInput.valueAsDate = new Date();
        render();
    })();