Expense Tracker App | SpeakJS | Page 1

peak crane Mar 9, 2024, 7:44 AM

I am new to JavaScript and I am making this project and there is a problem in it

  //index.js
  //index.js
import Expense from "./expense.js";

const screenArea = document.querySelector('.screen-area')
const expenseArray = []
const addButton = document.querySelector('.add');
const date = document.querySelector('.date');
const category = document.querySelector('.category');
const amount = document.querySelector('.amount');
const notes = document.querySelector('.notes')
const inputs = {
    date,
    category,
    amount,
    notes
}

addButton.addEventListener('click', () => {addExpense()});
//addButton.addEventListener('keydown', event => {if(event.key === 'Enter') {addExpense(expenseArray)}});
// addButton.addEventListener('keydown', (event) => {
//     if(event.key === 'enter') {
//         addExpense(expenseArray);
//     }
// });


function addExpense() {
    let expense = new Expense({
        expenseArray,
        screenArea,
        date: inputs.date.value,
        category: inputs.category.value,
        amount: inputs.amount.value,
        notes: inputs.notes.value,
    });
    expense.addExpense();
}

//expense.js
export default class Expense {
    constructor(config){
        this.date = config.date;
        this.category = config.category;
        this.amount = config.amount;
        this.notes = config.notes;
        this.screenArea = config.screenArea;
        this.expenseArray = config.expenseArray;
        this.updateExpenses(); // Call updateExpenses initially

        // Add event listener to the screenArea for click events on delete buttons
        this.screenArea.addEventListener('click', (event) => {
            if (event.target.classList.contains('delete')) {
                let index = parseInt(event.target.dataset.index);
                this.deleteExpense(index);
            }
        });
    }

    addExpense(){
        let expense = [this.date, this.category, this.amount, this.notes]
        this.expenseArray.push(expense);
        this.updateExpenses();
    }

    updateExpenses(){
        this.screenArea.innerHTML = '';
        this.expenseArray.forEach((expense, i) => {
            let Html = 
            `
            <p>${expense[0]}</p>
            <p>${expense[1]}</p>
            <p>${expense[2]}</p>
            <p>${expense[3]}</p>  
            <button class="delete" data-index="${i}">
                Delete
            </button>
            `;

            this.screenArea.innerHTML += Html;
        });
    }

    deleteExpense(i) {
        this.expenseArray.splice(i, 1);
        this.updateExpenses();
    }
}

The problem is with the working of the delete key
so this works, when I click the last expense it works good, but when I click something above the last expense, all the other expenses below it are deleted why is this, please help me solve this

#Expense Tracker App