Untitled

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            let result = '0';
            let empty = true;

            function update() {
                document.getElementById('calculation-result').innerHTML = result;
            }

            function append(char) {
                if (empty) {
                    if (char === '0') {
                        return;
                    }
                    empty = false;
                    result = char;
                    update();
                    return;
                }
                if (!'+-*/'.includes(result.slice(-2)[0])) {
                    if ('+-*/'.includes(char)) {
                        char = ' ' + char + ' ';
                    }
                } else {
                    if ('*/'.includes(char)) {
                        return;
                    }
                }
                result += char;
                update();
            }

            function calculate() {
                result = eval(result).toString();
                update();
            }

            function backspace() {
                if (result.length === 1) {
                    empty = true;
                    result = '0';
                } else {
                    if (result.slice(-1) == ' ') {
                        result = result.slice(0, -3);
                    } else {
                        result = result.slice(0, -1);
                    }
                }
                update();
            }
        </script>
        <style>
            * {
                font-family: monospace;
            }

            body {
                background: linear-gradient(to top, #34343E, #57575F);
                background-size: 100% 250%;
                text-align: center;
                color: #7CBDBA;
            }

            #calculation-result {
                margin-right: 6px;
                font-size: 150%;
            }

            .number-button {
                border: 1px solid  #7CFDFF;
                background-clip: padding-box;
                border-radius: 0.125em;
                display: inline-block;
                background: #34343E;
                text-decoration: none;
                color: #7CBDBA;
                padding: 10px;
                margin: 0.5%;
            }
        </style>
        <title>Calculator</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="calculator">
            <a id="calculation-result">0</div>
            <br>
            <a class="number-button" href="#" onclick="append('1')">1</a>
            <a class="number-button" href="#" onclick="append('2')">2</a>
            <a class="number-button" href="#" onclick="append('3')">3</a>
            <a class="number-button" href="#" onclick="append('+')">+</a>
            <br>
            <a class="number-button" href="#" onclick="append('4')">4</a>
            <a class="number-button" href="#" onclick="append('5')">5</a>
            <a class="number-button" href="#" onclick="append('6')">6</a>
            <a class="number-button" href="#" onclick="append('-')">-</a>
            <br>
            <a class="number-button" href="#" onclick="append('7')">7</a>
            <a class="number-button" href="#" onclick="append('8')">8</a>
            <a class="number-button" href="#" onclick="append('9')">9</a>
            <a class="number-button" href="#" onclick="append('*')">*</a>
            <br>
            <a class="number-button" href="#" onclick="append('.')">.</a>
            <a class="number-button" href="#" onclick="append('0')">0</a>
            <a class="number-button" href="#" onclick="append('/')">/</a>
            <a class="number-button" href="#" onclick="calculate()">=</a>
            <br>
            <a class="number-button" href="#" onclick="backspace()">←</a>
            <br>
        </div>
    </body>
</html>