🚀 Full Application Development

// Expense Tracker Requirements CORE FEATURES: 1. Add new expense (amount, category, description, date) 2. View all expenses in a list 3. Delete an expense 4. Edit an existing expense 5. Calculate total spending CATEGORIES: - Food & Drinks (Mamak, McDonald's, etc.) - Transport (Grab, LRT, Bus) - Shopping (Shopee, Lazada, etc.) - Entertainment (Cinema, Games) - Bills (Phone, Internet) - Others DATA STORAGE: - Use localStorage to save data - Data persists after page reload DISPLAY: - Show expenses by date (newest first) - Show total spending - Show budget remaining - Color code: green (under budget), red (over budget)

// ===== DATA MODULE ===== // Handles all data operations const DataModule = { expenses: [], addExpense(expense) { this.expenses.push(expense); this.saveToStorage(); }, deleteExpense(id) { this.expenses = this.expenses.filter(exp => exp.id !== id); this.saveToStorage(); }, getTotalSpending() { return this.expenses.reduce((sum, exp) => sum + exp.amount, 0); }, saveToStorage() { localStorage.setItem('expenses', JSON.stringify(this.expenses)); }, loadFromStorage() { const data = localStorage.getItem('expenses'); if (data) this.expenses = JSON.parse(data); } }; // ===== UI MODULE ===== // Handles all user interface updates const UIModule = { displayExpenses(expenses) { // Code to display expenses in HTML }, updateTotal(total) { // Code to update total display }, showMessage(message, type) { // Code to show success/error messages } }; // ===== APP MODULE ===== // Coordinates everything const AppModule = { init() { DataModule.loadFromStorage(); this.setupEventListeners(); this.refreshDisplay(); }, setupEventListeners() { // Attach event listeners to buttons }, refreshDisplay() { UIModule.displayExpenses(DataModule.expenses); UIModule.updateTotal(DataModule.getTotalSpending()); } }; // Start the app AppModule.init();

// Manual Testing Checklist TEST CASES: ✓ Add expense with valid data → Should save and display ✓ Add expense with 0 amount → Should show error ✓ Add expense with negative amount → Should show error ✓ Delete expense → Should remove from list and update total ✓ Edit expense → Should update correctly ✓ Refresh page → Data should persist (localStorage) ✓ Add 100 expenses → Should still work smoothly ✓ Clear all data → Should reset properly EDGE CASES TO TEST: - Very large amounts (RM 999,999,999) - Very small amounts (RM 0.01) - Special characters in description - Empty category - Date in the future - Multiple rapid clicks on buttons

// 1. CONSOLE LOGGING console.log("Expense amount:", amount); console.log("Total expenses:", expenses); console.table(expenses); // Nice table view! // 2. DEBUGGER STATEMENT function addExpense(amount) { debugger; // Pauses execution here expenses.push(amount); } // 3. TRY-CATCH FOR ERROR HANDLING try { let data = JSON.parse(localStorage.getItem('expenses')); // Use data } catch (error) { console.error("Error loading data:", error); // Handle error gracefully } // 4. VALIDATE INPUT function addExpense(amount) { if (typeof amount !== 'number') { console.error("Amount must be a number!"); return false; } if (amount <= 0) { console.error("Amount must be positive!"); return false; } // Proceed... } // 5. BROWSER DEV TOOLS // - Use breakpoints in Sources tab // - Inspect elements in Elements tab // - View console errors in Console tab // - Check localStorage in Application tab

class Expense { constructor(id, amount, category, description, date) { this.id = id; this.amount = amount; this.category = category; this.description = description; this.date = date; } } class ExpenseTracker { constructor() { this.expenses = []; this.budget = 500; // Default RM 500 this.loadData(); } addExpense(amount, category, description) { const id = Date.now(); const date = new Date().toLocaleDateString('ms-MY'); const expense = new Expense(id, amount, category, description, date); this.expenses.push(expense); this.saveData(); return expense; } deleteExpense(id) { this.expenses = this.expenses.filter(exp => exp.id !== id); this.saveData(); } getTotalSpending() { return this.expenses.reduce((sum, exp) => sum + exp.amount, 0); } getBudgetRemaining() { return this.budget - this.getTotalSpending(); } getExpensesByCategory(category) { return this.expenses.filter(exp => exp.category === category); } saveData() { localStorage.setItem('expenses', JSON.stringify(this.expenses)); localStorage.setItem('budget', this.budget); } loadData() { const expenses = localStorage.getItem('expenses'); const budget = localStorage.getItem('budget'); if (expenses) this.expenses = JSON.parse(expenses); if (budget) this.budget = parseFloat(budget); } } // Usage const tracker = new ExpenseTracker(); tracker.addExpense(15, 'Food', 'Nasi Lemak at mamak'); tracker.addExpense(8, 'Transport', 'LRT to KLCC'); console.log('Total:', tracker.getTotalSpending()); console.log('Remaining:', tracker.getBudgetRemaining());