2.21

Java Script

// Sample data for transactions
const transactions = [
    { amount: 50, category: 'Groceries' },
    { amount: 20, category: 'Entertainment' },
    // Add more transactions as needed
];

// Function to display transactions on the page
function displayTransactions() {
    const transactionList = document.getElementById('transaction-list');
    transactionList.innerHTML = '';

    transactions.forEach(transaction => {
        const transactionItem = document.createElement('div');
        transactionItem.classList.add('transaction-item');
        transactionItem.innerHTML = `<p>${transaction.category}: $${transaction.amount}</p>`;
        transactionList.appendChild(transactionItem);
    });

    // Calculate and display total expenditure
    const totalExpenditure = transactions.reduce((total, transaction) => total + transaction.amount, 0);
    document.getElementById('totalExpenditure').textContent = totalExpenditure;
}

// Function to show the "Add Transaction" modal
function showAddTransactionModal() {
    const modal = document.getElementById('addTransactionModal');
    modal.style.display = 'block';
}

// Function to close the "Add Transaction" modal
function closeAddTransactionModal() {
    const modal = document.getElementById('addTransactionModal');
    modal.style.display = 'none';
}

// Function to add a new transaction
function addTransaction() {
    const amount = parseFloat(document.getElementById('amount').value);
    const category = document.getElementById('category').value;

    if (!isNaN(amount) && category.trim() !== '') {
        transactions.push({ amount, category });
        displayTransactions();
        closeAddTransactionModal();
    } else {
        alert('请输入有效的金额和类别。');
    }
}

// Display initial transactions on page load
displayTransactions();