gistfile1.txt

// Object containing budget categories and their initial budgets
const categoryWiseBudget = {
    "Groceries": 2000,
    "Entertainment": 500,
    "Rent": 2000,
    "Utilities": 500,
    "Health": 2000,
    "Education": 1500,
    "Miscellaneous": 500
};

// Object to track expenses per category
const categoryWiseExpense = {};

// Initialize income, expense, and transactions
let income = 0, expense = 0;
const transactions = [];

function initialise () {
    for (category in categoryWiseBudget) {
        categoryWiseExpense[category] = 0
    }

    const addIncomeForm = document.getElementById('add-income-form')
    const incomeInput = document.getElementById('income')
    const totalIncome = document.getElementById('total-income')
    const budgetSummary  = document.getElementById('budget-summary')
    const balance = document.getElementById('balance')
    const categorySelect = document.getElementById('category')
    const descriptionInput = document.getElementById('description')
    const amountInput = document.getElementById('amount')
    const addTransaction = document.getElementById('add-transaction-btn')
    const transactionList = document.getElementById('transactions')

    for (const category in categoryWiseBudget) {
        categorySelect.innerHTML += `<option value="${category}">${category}</option>`
    }

    addTransaction.addEventListener('click', () => {
        const amount = Number(amountInput.value)
        categoryWiseExpense[categorySelect.value] += amount
        expense += amount
        const transaction = {
            category: categorySelect.value,
            description: descriptionInput.value,
            amount: amountInput.value
        }
        transactions.push(transaction)
        displaySummary()
    })

    addIncomeForm.addEventListener('submit', (event) => {
        event.preventDefault()

        income = incomeInput.value
        displaySummary()
    })

    function displaySummary() {
        totalIncome.innerHTML = `<b>Total Income: $${income}</b>`

        budgetSummary.innerHTML = ''
        for (category in categoryWiseBudget) {
            const budget = categoryWiseBudget[category]
            const expenses = categoryWiseExpense[category]
            const balance = budget - expenses
            const color = balance < 0 ? 'negative' : 'positive'
            budgetSummary.innerHTML += `<ul>
                <li><b>${category}</b></li>
                <li><div>Budget:</div><div>$${budget}</div></li>
                <li><div>Expenses:</div><div>$${expenses}</div></li>
                <li class="${color}"><div>Balance:</div><div>$${balance}</div></li>
            </ul>`
        }

        const totalBalance = income - expense
        const color = totalBalance < 0 ? 'negative' : 'positive'
        balance.innerHTML = `<div class="${color}">Balance: $${totalBalance}</div>`

        transactionList.innerHTML = ''
        for (const transaction of transactions) {
            transactionList.innerHTML += `<li>
                <label>${transaction.category}</label>
                <div>${transaction.description}</div>
                <b class="negative">$${transaction.amount}</b>
            </li>`
        }
    }
    displaySummary()
}