Project/output.html at main · Sandhiya48/Project · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Total Amounts</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        h1 {
            color: #333;
        }
        button {
            background-color: #28a745;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #218838;
        }
        .total {
            font-size: 18px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Total Amounts</h1>
    <button id="total-income-button">Total Income</button>
    <button id="total-expenses-button">Total Expenses</button>
    <button id="total-savings-button">Total Savings</button>

    <div class="total" id="total-amount"></div>

    <script>
      async function fetchTotal(type) {
    const token = localStorage.getItem('token');
    if (!token) {
        alert('No token found. Please log in first.');
        return;
    }

    try {
        const response = await fetch(`http://localhost:5500/api/transactions/total-${type.toLowerCase()}`, {
            headers: {
                'Authorization': `Bearer ${token}`,
            },
        });

        if (response.ok) {
            const data = await response.json();
            const total = data[`total${type}`]; // Extract the correct total from the response
            document.getElementById('total-amount').textContent = `${type}: $${total}`;
        } else {
            const errorData = await response.json();
            alert(`Failed to fetch total ${type.toLowerCase()}: ${errorData.message}`);
        }
    } catch (error) {
        console.error('Error fetching total:', error);
        alert('Error fetching total. Please check the console for details.');
    }
}

document.getElementById('total-income-button').addEventListener('click', () => fetchTotal('Income'));
document.getElementById('total-expenses-button').addEventListener('click', () => fetchTotal('Expenses'));
document.getElementById('total-savings-button').addEventListener('click', () => fetchTotal('Savings'));

    </script>

</body>
</html>