Javascript Calculator (not original , but WIP)

calculator.blade.php

<div class="calc-container">
    <fieldset class="calculator">
        <div class="display"></div>
        <div class="keys">
            <button class="btn-number btn">7</button>
            <button class="btn-number btn">8</button>
            <button class="btn-number btn">9</button>
            <button class="btn-operator btn" data-action="divide">÷</button>
            <button class="btn-number btn">4</button>
            <button class="btn-number btn">5</button>
            <button class="btn-number btn">6</button>
            <button class="btn-operator btn" data-action="multiply">&times;</button>
            <button class="btn-number btn">1</button>
            <button class="btn-number btn">2</button>
            <button class="btn-number btn">3</button>
            <button class="btn-operator btn" data-action="subtract">-</button>
            <button class="btn-number btn">0</button>
            <button class="btn-decimal btn-number btn" data-action="decimal">.</button>
            <button class="btn-equals btn" data-action="calculate">=</button>
            <button class="btn-operator btn" data-action="add">+</button>
            <button class="btn-operator btn-clr btn" data-action="clear">C</button>
        </div>
    </fieldset>
</div>
<script>

    $("#calculator-toggle").on('shown.bs.collapse', () => {
        $('#toggle-calculator').html("<i class='fa fa-times fa-2x text-muted'></i>");
    }).on('hidden.bs.collapse', function () {
        $('#toggle-calculator').html("<i class='fa fa-calculator fa-2x text-muted'></i>");
    });

    calculator();

    function calculator() {
        const calc = document.querySelector('.calculator');
        const keys = document.querySelector('.keys');
        const display = document.querySelector('.display');

        const calculate = (n1, operator, n2) => {
            let result = '';

            if (operator === 'add') {
                result = parseFloat(n1) + parseFloat(n2)
            } else if (operator === 'subtract') {
                result = parseFloat(n1) - parseFloat(n2)
            } else if (operator === 'multiply') {
                result = parseFloat(n1) * parseFloat(n2)
            } else if (operator === 'divide') {
                result = parseFloat(n1) / parseFloat(n2)
            }
            return result
        };
        keys.addEventListener('click', e => {
            if (e.target.matches('button')) {
                const key = e.target;
                const action = key.dataset.action;
                const keyContent = key.textContent;
                const displayedNum = display.textContent;
                const previousKeyType = calc.dataset.previousKeyType;

                Array.from(key.parentNode.children)
                    .forEach(k => k.classList.remove('is-depressed'));

                if (!action) {
                    if (displayedNum === '0' || previousKeyType === 'operator') {
                        display.textContent = keyContent
                    } else {
                        display.textContent = displayedNum + keyContent
                    }
                    calc.dataset.previousKeyType = keyContent;
                }

                if (
                    action === 'add' ||
                    action === 'subtract' ||
                    action === 'multiply' ||
                    action === 'divide'
                ) {
                    key.classList.add('is-depressed');
                    calc.dataset.firstValue = displayedNum;
                    calc.dataset.operator = action;
                    calc.dataset.previousKeyType = 'operator';
                }

                if (action === 'decimal') {
                    display.textContent = displayedNum + '.';
                }

                if (action === 'clear') {
                    display.textContent = '';
                }

                if (action === 'calculate') {
                    const firstValue = calc.dataset.firstValue;
                    const operator = calc.dataset.operator;
                    display.textContent = calculate(firstValue, operator, displayedNum);
                }
            }
        }, false);
        /* numpad */
        document.addEventListener('keydown', keyboardType);

        function keyboardType(e) {
            let key = Number(e.key);
            const keyContent = e.key;
            const displayedNum = display.textContent;
            const previousKeyType = calc.dataset.previousKeyType;
            if (isNaN(key) || key === null) {
                if (keyContent === '+' ||
                    keyContent === '-' ||
                    keyContent === '*' ||
                    keyContent === '/' ||
                    keyContent === '.') {

                    switch (keyContent) {
                        case "+":
                            calc.dataset.operator = 'add';
                            break;
                        case "-":
                            calc.dataset.operator = 'subtract';
                            break;
                        case "*":
                            calc.dataset.operator = 'multiply';
                            break;
                        case "/":
                            calc.dataset.operator = 'divide';
                            break;
                    }
                    calc.dataset.firstValue = displayedNum;
                    calc.dataset.previousKeyType = 'operator';
                }

                if (keyContent === 'Enter') {
                    e.preventDefault();
                    const firstValue = calc.dataset.firstValue;
                    const operator = calc.dataset.operator;
                    display.textContent = calculate(firstValue, operator, displayedNum);
                }

                if (keyContent === 'Backspace' || keyContent === 'Delete') {
                    display.textContent = '';
                }

            } else {
                if (keyContent >= 0 && keyContent <= 9) {
                    // 0-9 only
                    if (displayedNum === '0' || previousKeyType === 'operator') {
                        display.textContent = keyContent
                    } else {
                        display.textContent = displayedNum + keyContent
                    }
                    calc.dataset.previousKeyType = keyContent;
                }
            }
        }
    }

</script>

<style>
    .calc-container {
        width: 100%;
        display: grid;
    }

    fieldset.calculator {
        background: #ececec;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
        text-align: right;
    }

    .btn.is-depressed {
        background: #a54e00;
        box-shadow: inset 0 0 10px black;
    }

    .btn-number {
        width: 24.25%;
        margin: 1% 1.25%;
    }

    .btn-operator {
        width: 13.5%;
        margin: 1%;
        font-weight: bolder;
        font-size: 1.6em;
        line-height: 1em;
        vertical-align: middle;
        background: #6d6156;
        font-family: monospace, serif;
        color: white;
    }

    .btn-equals {
        width: 24.25%;
        margin: 1% 1.25%;
        background: #b9b9b9;
        font-size: 1.2em;
        color: black;
    }

    .display {
        width: 100%;
        margin-bottom: 15px;
        padding: 10px;
        min-height: 62px;
        font-size: 2.2em;
        background: #878788;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
        border: 2px solid #7d7d7d;
        text-align: right;
        font-family: monospace, serif;
        color: black;
    }
</style>

index.php

<div id="calculator-toggle" class="collapse">@include('admin.payment.partials.calculator')</div>
<a href="#calculator-toggle" id="toggle-calculator" style="position:absolute; top:7px; right:19px;" data-toggle="collapse"><i class="fa fa-calculator text-muted fa-2x"></i></a>