manual-testing-program/expense-tracker.html at main · intern2grow/manual-testing-program · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Buggy Expense Tracker</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="bg-light">
    <div class="container py-5">
        <h1 class="text-center mb-4">Expense Tracker</h1>

        <!-- Add Expense Form -->
        <div class="card p-3 mb-4">
            <div class="row g-2">
                <div class="col-md-4">
                    <input type="text" id="expenseName" class="form-control" placeholder="Expense name">
                </div>
                <div class="col-md-3">
                    <input type="number" id="expenseAmount" class="form-control" placeholder="Amount">
                </div>
                <div class="col-md-3">
                    <select id="expenseCategory" class="form-select">
                        <option value="Food">Food</option>
                        <option value="Transport">Transport</option>
                        <option value="Shopping">Shopping</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary w-100" id="addExpense">Add</button>
                </div>
            </div>
        </div>

        <!-- Filter -->
        <div class="mb-3">
            <label for="filterCategory" class="form-label">Filter by Category</label>
            <select id="filterCategory" class="form-select w-25">
                <option value="All">All</option>
                <option value="Food">Food</option>
                <option value="Transport">Transport</option>
                <option value="Shopping">Shopping</option>
                <option value="Other">Other</option>
            </select>
        </div>

        <!-- Expense List -->
        <ul class="list-group mb-3" id="expenseList"></ul>

        <!-- Total -->
        <div class="alert alert-info">
            Total Spent: $<span id="total">0</span>
        </div>
    </div>

    <script>
        let expenses = [];

        function renderExpenses() {
            const list = document.getElementById("expenseList");
            const filter = document.getElementById("filterCategory").value;
            list.innerHTML = "";

            expenses.forEach((exp, i) => {
                if (filter === "All" || exp.category !== filter) { // ❌ Bug: should be ===, not !==
                    const li = document.createElement("li");
                    li.className = "list-group-item d-flex justify-content-between align-items-center";
                    li.innerHTML = `
            ${exp.name} - $${exp.amount} <span class="badge bg-secondary">${exp.category}</span>
            <button class="btn btn-sm btn-danger" onclick="deleteExpense(${i})">X</button>
          `;
                    list.appendChild(li);
                }
            });
        }

        function updateTotal() {
            let total = 0;
            expenses.forEach(exp => {
                total = exp.amount; // ❌ Bug: overwrites instead of summing
            });
            document.getElementById("total").textContent = total;
        }

        function addExpense() {
            const name = document.getElementById("expenseName").value;
            const amount = parseFloat(document.getElementById("expenseAmount").value);
            const category = document.getElementById("expenseCategory").value;

            if (!name || isNaN(amount)) return;

            expenses.push({ name, amount, category });
            renderExpenses();
            updateTotal();

            document.getElementById("expenseName").value = "";
            document.getElementById("expenseAmount").value = "";
        }

        function deleteExpense(index) {
            expenses.splice(index - 1, 1); // ❌ Bug: wrong index removed
            renderExpenses();
            updateTotal();
        }

        document.getElementById("addExpense").addEventListener("click", addExpense);
        document.getElementById("filterCategory").addEventListener("change", renderExpenses);
    </script>
</body>

</html>