index.js

const operation = document.querySelector('.operation')
const numbers = document.querySelectorAll('.num')
const operators = document.querySelectorAll('.op')
const equals = document.querySelector('.eq')
const reset = document.querySelector('.res')
const deleteElement = document.querySelector('.del')
let result = 0

numbers.forEach(number => {
    number.addEventListener("click",() => {
        operation.textContent += number.innerText
    })
})

operators.forEach(operator => {
    operator.addEventListener('click', () => {
        operation.textContent += operator.textContent
    })
})

deleteElement.addEventListener('click', () => {
    operation.textContent = operation.textContent.slice(0, -1)
})

equals.addEventListener('click', () => {
    try {
        result = eval(operation.textContent)
        operation.textContent = result
    }
    catch {
        operation.textContent = "Erreur"
    }
})

reset.addEventListener('click', () => {
    operation.textContent = ""
    result = 0
})

// -------------------- the result using a map
/*
equals.addEventListener('click', () => {
    //etape 1
    const expr = operation.textContent
    const numbers = expr.split(/[\+\-\*\/]/).map(Number)
    const operators = expr.match(/[\+\-\*\/]/g)
    //etape 2
    result = numbers[0]

    for (let i = 0; i < operators.length; i++) {
        switch (operators[i]) {
            case '+': result += numbers[i+1]
                break
            case '-': result -= numbers[i+1]
                break
            case '*': result *= numbers[i+1]
                break
            case '/': result /= numbers[i+1]
                break
            default: result = "Erreur"
        }
    }
    operation.textContent = result
})
*/