theScript.js

const display = document.querySelector('.display');
const displaytop = document.querySelector('.displaytop');
const clear = document.querySelector('.clear');
const del = document.querySelector('.delete');
const equal = document.querySelector('.equal');
const operators = document.querySelectorAll('.operation');
const numbers = document.querySelectorAll('.number');

let prev = '';
let current = '';
let previousOperation = '';
let dot = false;
let result = null;
display.innerText = '0';

numbers.forEach((number) => {
    number.addEventListener('click', (e) => {
        if (e.target.innerText === '.' && !dot) {
            dot = true;
        } else if (e.target.innerText === '.' && dot) {
            return;
        }
        current += e.target.innerText;
        display.innerText = current;
    });
});

function clearVar(symbol = '') {
    prev += `${current} ${symbol} `;
    displaytop.innerText = prev;
    display.innerText = '';
    current = '';
}

function operations() {
    if (previousOperation === 'x') {
        result = parseFloat(result) * parseFloat(current);
    } else if (previousOperation === '+') {
        result = parseFloat(result) + parseFloat(current);
    } else if (previousOperation === '-') {
        result = parseFloat(result) - parseFloat(current);
    } else if (previousOperation === '÷') {
        result = parseFloat(result) / parseFloat(current);
    }
}

operators.forEach((operation) => {
    operation.addEventListener('click', (e) => {
        if (!current) return;
        dot = false;
        const operator = e.target.innerText;
        if (prev && current && previousOperation) {
            operations();
        } else {
            result = parseFloat(current);
        }
        clearVar(operator);
        previousOperation = operator;
    });
});

equal.addEventListener('click', () => {
    if (!current || !prev) return;
    dot = false;
    operations();
    clearVar();
    display.innerText = result;
    current = result;
    prev = '';
});

clear.addEventListener('click', () => {
    prev = '';
    current = '';
    displaytop.innerText = '0';
    display.innerText = '0';
    result = '';
});

del.addEventListener('click', () => {
    display.innerText = display.innerText.slice(0, -1);
    current = current.slice(0, -1);
});