engine.js

const display1El = document.querySelector('.d1');
const display2El = document.querySelector('.d2');
const display3El = document.querySelector('.d3');
const numbersEl = document.querySelectorAll('.number');
const operationsEl = document.querySelectorAll('.operation');
const equalEl = document.querySelector('.equals');
const clearAllEl = document.querySelector('.clear-all');
const clearLastEl = document.querySelector('.clear-last');


let dis1Num = '';
let dis2Num = '';
let resultNum = '';
let lastOperation = null;
let haveDot = false;

numbersEl.forEach (number => {
    number.addEventListener('click', (e)=>{
        if (e.target.innerText === '.' && !haveDot){
            haveDot = true;
        }else if(e.target.innerText === '.' && haveDot){
            return;
        }
        dis2Num += e.target.innerText;
        display2El.innerText = dis2Num;
    })
});

operationsEl.forEach(operation =>{
    operation.addEventListener ('click', (e)=>{
        if (!dis2Num) return;
        haveDot=false;
        const operationName = e.target.innerText;
        if(dis1Num && dis2Num && lastOperation){
            mathOperation();
        }else{
            result= parseFloat(dis2Num);
        }
        clearVar(operationName);
        lastOperation = operationName;
        console.log(result);
    }) 
});

function clearVar(name = " ") {
    dis1Num += dis2Num +" "+ name +" ";
    display1El.innerText = dis1Num;
    display2El.innerText = "";
    dis2Num="";
    display3El.innerText = result;
}

function mathOperation(){
    if (lastOperation === '/') {
        result = parseFloat(result) / parseFloat(dis2Num);
    }else if (lastOperation === 'X') {
        result = parseFloat(result) * parseFloat(dis2Num);
    }else if (lastOperation === '-') {
        result = parseFloat(result) - parseFloat(dis2Num);
    }else if (lastOperation === '+') {
        result = parseFloat(result) + parseFloat(dis2Num);
    }else if (lastOperation === '%') {
        result = (parseFloat(result) / parseFloat(dis2Num))* 100;
    }
}

equalEl.addEventListener("click", () => {
    if (!dis2Num || !dis1Num) return;
    haveDot = false;
    mathOperation();
    clearVar();
    display2El.innerText = result;
    display3El.innerText = "";
    dis2Num = result;
    dis1Num = "";
  });

  clearAllEl.addEventListener('click', (e) => {
    display1El.innerText = '0';
    display2El.innerText = '0';
    display3El.innerText = '0';
    dis1Num = '';
    dis2Num = '';
    result = '';

  })

clearLastEl.addEventListener('click', (e) => {
    display2El.innerText = '';
    dis2Num = '';
})

window.addEventListener('keydown', (e)=> {
if(
    e.key === '0' ||
    e.key === '1' ||
    e.key === '2' ||
    e.key === '3' ||
    e.key === '4' ||
    e.key === '5' ||
    e.key === '6' ||
    e.key === '7' ||
    e.key === '8' ||
    e.key === '9' ||
    e.key === '.' 
){
    clickButtonEl(e.key)
} else if(
    
    e.key === '+' ||
    e.key === '-' ||
    e.key === '/' ||
    e.key === '%' 
){
    clickOperation(e.key);
    
}
else if (e.key === '*'){
    clickOperation('X');
}
else if (e.key === 'Enter'|| e.key === '='){
    clickEqual();
}
});

function clickButtonEl(key){
    numbersEl.forEach(button =>{
        if(button.innerText === key){
            button.click();
        }
    })
}

function clickOperation(key){
    operationsEl.forEach(button =>{
        if(button.innerText === key){
            button.click();
        }
    })
}

function clickEqual(){
    equalEl.click();
}

if(numbersEl.click()){
}