index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Home</title>
</head>

<body>
    <div class="cal-wrap">
        <input type="text" id="edu" class="cal-display">
        <input type="text" id="eds" class="cal-display-sol">
        <table class="cal-table">
            <tr>
                <td><input type="button" value="=" onclick="sol()" class="cal-button cal-sol"></td>
                <td><input type="button" value="c" onclick="clr()" class="cal-button  cal-function"></td>
                <td><input type="button" value="/" onclick="dis('/')" class="cal-button cal-function"></td>
                <td><input type="button" value="%" onclick="dis('%')" class="cal-button cal-function"></td>

            </tr>

            <tr>
                <td><input type="button" value="+" onclick="dis('+')" class="cal-button cal-function"></td>
                <td><input type="button" value="1" onclick="dis('1')" class="cal-button"></td>
                <td><input type="button" value="2" onclick="dis('2')" class="cal-button"></td>
                <td><input type="button" value="3" onclick="dis('3')" class="cal-button"></td>
            </tr>

            <tr>
                <td><input type="button" value="-" onclick="dis('-')" class="cal-button cal-function"></td>
                <td><input type="button" value="4" onclick="dis('4')" class="cal-button"></td>
                <td><input type="button" value="5" onclick="dis('5')" class="cal-button"></td>
                <td><input type="button" value="6" onclick="dis('6')" class="cal-button"></td>
            </tr>

            <tr>
                <td><input type="button" value="x" onclick="dis('x')" class="cal-button cal-function"></td>
                <td><input type="button" value="7" onclick="dis('7')" class="cal-button"></td>
                <td><input type="button" value="8" onclick="dis('8')" class="cal-button"></td>
                <td><input type="button" value="9" onclick="dis('9')" class="cal-button"></td>
            </tr>



        </table>

    </div>
    <script>
        function dis(val) {
            document.getElementById("edu").value += val
        }

        function sol() {
            let x = document.getElementById("edu").value
            let y = eval(x)
            document.getElementById("eds").value = y
        }

        function clr() {
            document.getElementById("edu").value = ""
            document.getElementById("eds").value = ""
        }
    </script>

</body>

</html>