script.js

let categoryTotals = {};
let total = 0;
let chart;

// Load expenses when page opens
window.onload = function () {

    loadExpenses();

};

// FETCH ALL EXPENSES
function loadExpenses() {

    fetch(`http://localhost:8080/expenses/${currentUserId}`)

    .then(response => response.json())

    .then(data => {

        let table = document.querySelector("#expenseTable tbody");

        table.innerHTML = "";

        total = 0;

        categoryTotals = {};

        data.forEach(expense => {

            addRow(
                expense.id,
                expense.amount,
                expense.category,
                expense.expenseDate
            );

        });

    });

}

// ADD EXPENSE
function addExpense(event) {

    event.preventDefault();

    let amount = document.getElementById("amount").value;

    let category = document.getElementById("category").value;

    let date = document.getElementById("date").value;

    let expense = {

        amount: amount,
        category: category,
        expenseDate: date,
        userId: currentUserId

    };

    fetch("http://localhost:8080/expenses", {

        method: "POST",

        headers: {
            "Content-Type": "application/json"
        },

        body: JSON.stringify(expense)

    })

    .then(response => response.json())

    .then(data => {

        loadExpenses();

        document.getElementById("amount").value = "";

        document.getElementById("category").value = "";

        document.getElementById("date").value = "";

    });

}

// ADD ROW TO TABLE
function addRow(id, amount, category, date) {

    let table = document.querySelector("#expenseTable tbody");

    let row = table.insertRow();

    row.insertCell(0).innerText = amount;

    row.insertCell(1).innerText = category;

    row.insertCell(2).innerText = date;

    let deleteCell = row.insertCell(3);

    let btn = document.createElement("button");

    btn.innerText = "X";

    btn.className = "btn btn-danger btn-sm";

    btn.onclick = function () {

        deleteExpense(id);

    };

    deleteCell.appendChild(btn);

    total += parseFloat(amount);

    document.getElementById("totalAmount").innerText = total;

    document.getElementById("count").innerText =
        table.rows.length;

    if (!categoryTotals[category]) {

        categoryTotals[category] = 0;

    }

    categoryTotals[category] += parseFloat(amount);

    updateChart();

}

// DELETE EXPENSE
function deleteExpense(id) {

    fetch(`http://localhost:8080/expenses/${id}`, {

        method: "DELETE"

    })

    .then(() => {

        loadExpenses();

    });

}

// UPDATE CHART
function updateChart() {

    let ctx = document
        .getElementById('expenseChart')
        .getContext('2d');

    if (chart) {

        chart.destroy();

    }

    chart = new Chart(ctx, {

        type: 'pie',

        data: {

            labels: Object.keys(categoryTotals),

            datasets: [{

                data: Object.values(categoryTotals)

            }]

        }

    });

}

// JQUERY WELCOME MESSAGE
$(document).ready(function () {

    $("h1").click(function () {

        alert("Welcome to Trackify 💼");

    });

});