Javascript-форум - Изменение в калькуляторе

Всем привет, недавно начал делать свой первый калькулятор HTML+CSS+JS

Сделал его, но его нужно изменить

1.querySelector('.screen p') заменить на что-то более осознанное, в один селектор
2.event функции нужно разбить на несколько частей, например, одна отвечает за обработку нажатий на цифры, а другая за обработку нажатий на мат.операции. А в event-е просто вызывать их в зависимости от того, что сейчас нажато

Нужна помощь в изменении кода

Вот сам JS код

let a = ''; 
let b = ''; 
let sign = '';
let finish  = false;

const digit = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];
const action = ['-', '+', 'X', '÷'];

const out = document.querySelector('.screen p');

function clearAll () {
    a = ''; 
    b = '';
    sign = '';
    finish = false;
    out.textContent = 0;
}

document.querySelector('.ac').onclick = clearAll;

document.querySelector('.buttons').onclick = (event) => {
    if(!event.target.classList.contains('knop')) return;
    if(event.target.classList.contains('ac')) return;

    out.textContent = '';
    const key = event.target.textContent;

    if (digit.includes(key)) {
        if (b ==='' && sign === '') {
            a += key;
            
            out.textContent = a;
        }
        else if (a!=='' && b!=='' && finish) {
            b = key;
            finish = false;
            out.textContent = b;
        }
        else {
            b += key;
            out.textContent = b;
        }
        console.table(a, b , sign);
        return;
    }

     if (action.includes(key)) {
        sign = key;
        out.textContent = sign;
        console.table(a, b , sign);
        return;
    }

    if (key === '=') {
        if (b ==='') b = a;
        switch (sign) {
            case "+":
                a = (+a) + (+b);
                break;
            case "-":
                a = a - b;
                break;
            case "X":
                a = a * b;
                break;
            case "÷":
                if (b === '0') {
                    out.textContent = 'Разделить на ноль нельзя';
                    a = '';
                    b = '';
                    sign = '';
                    return;
                }
                a = a / b;
                break;
        }
        finish = true;
        out.textContent = a;
        console.table(a, b , sign);
    }

}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="index.js" defer> </script>
    <div class="cal">
        <div class="screen">
            <p>0</p>
        </div>
        <div class="buttons">
            <div class="knop ac pink">AC</div>
            <div class="knop delete pink"><</div>
            <div class="knop percent pink">%</div>
            <div class="knop division pink">÷</div>

            <div class="knop one">1</div>
            <div class="knop two">2</div>
            <div class="knop three">3</div>
            <div class="knop X pink">X</div>

            <div class="knop four">4</div>
            <div class="knop five">5</div>
            <div class="knop six">6</div>
            <div class="knop minus pink">-</div>

            <div class="knop seven">7</div>
            <div class="knop eight">8</div>
            <div class="knop nine">9</div>
            <div class="knop plus pink">+</div>
            
            <div class="knop zero">0</div>
            <div class="knop dot">.</div>
            <div class="knop equals pink">=</div>
        </div>
    </div>
</body>
</html>