script.js

// Declaring variable and DOCs
const balanceEl = document.querySelector('#balance')
const incomeAmountEl = document.querySelector('#income-amount')
const expenseAmountEl = document.querySelector('#expense-amount')
const transactionListEl = document.querySelector('#transaction-list')
const transactionFormEl = document.querySelector('#transaction-form')
const descriptionEl = document.querySelector('#description')
const amountEl = document.querySelector('#amount')

let transaction = JSON.parse(localStorage.getItem('transactions')) || []

//Creating removeTransaction function
const removeTransaction = (id) => {
    transaction = transaction.filter(item => item.id !== id)

    localStorage.setItem('transactions', JSON.stringify(transaction))
    updateTransaction()
    updateSummary()
}


//Creating createTransactionElement method
const createTransactionElement = (transaction) => {
    const li = document.createElement('li')
    li.classList.add('transaction');
    li.classList.add(transaction.amount > 0 ? 'income' : 'expense');

    li.innerHTML = `
        <span>${transaction.description}</span>
        <span>${transaction.amount}
            <button class='delete-btn' onclick = 'removeTransaction(${transaction.id})'>X</button>
        </span>
    `
    return li;
}

//Creating updateSummary function
const updateSummary = () => {
    const balance = transaction.reduce((acc,transaction) => acc + transaction.amount, 0);
    
    const income = transaction.filter((transaction) => transaction.amount > 0).reduce((acc,transaction) => acc + transaction.amount, 0);

    const expense = transaction.filter((transaction) => transaction.amount < 0).reduce((acc,transaction) => acc + transaction.amount, 0);

    //Update the UI
    balanceEl.textContent = formatCurrancy(balance)
    incomeAmountEl.textContent = formatCurrancy(income)
    expenseAmountEl.textContent = formatCurrancy(expense)
}

// Format currancy
function formatCurrancy(number){
    return new Intl.NumberFormat('en-US', {
        style:'currency',
        currency:'USD',
    }).format(number)
}

//Creating updateTransaction function
const updateTransaction = () => {
    transactionListEl.innerHTML = ''
    const sortedTransactions = [...transaction].reverse()

    sortedTransactions.forEach ((transaction) => {
        const transactionEl = createTransactionElement(transaction)
        transactionListEl.appendChild(transactionEl)
        
    })
}

// Creating addTransaction function
const addTransaction = (e) => {
    e.preventDefault();

    const description = descriptionEl.value.trim();
    const amount = parseFloat(amountEl.value);

    //Checking the field validation
    if(description !== '' && amount !== 0){
        transaction.push({
            id:Date.now(),
            description,
            amount,
        })
    }else {
        alert('please put a valid information')
    }


    localStorage.setItem('transactions', JSON.stringify(transaction))

    //Call the updateTransaction function to updating the transaction
    updateTransaction()

    //Call the updateSummary function to update the summary
    updateSummary();

    transactionFormEl.reset()
}

// addEventListners when form submit
transactionFormEl.addEventListener('submit', addTransaction)

// intial render
updateTransaction()
updateSummary()