Calculator 3 in html , css , js

<html>
  <head>
    <title>Calculator</title>
    <style>
   table{
     border: 2px solid black;
     border-radius: 5px;
     background: #e0e0e0;
     box-shadow:  5px 5px 21px #8f8f8f,
                  -5px -5px 21px #ffffff;
   }
   td{
     width: 40px;
     height: 40px;
     border: 2px solid black;
     border-radius: 5px;
   }
   button{
     width: 40px;
     height: 40px;
     border-radius: 5px;
     background: #e0e0e0;
   }
   input{
     width: 184px;
     height: 50px;
     border-radius: 5px;
     background: #e0e0e0;
     font-size: 25px;
   }
    </style>
    <script>
      function dis(val)
      {document.getElementById("result").value+=val}

      function solve()
      {let x=document.getElementById("result").value
      let y=eval(x)
      document.getElementById("result").value=y}

      function clr()
      {document.getElementById("result").value=""}
    </script>
  </head>
  <body>
    <div>
      <table>
        <tr>
          <td colspan="4"><input type="text" disabled="true" id="result"/></td>
        </tr>
        <tr>
          <td><button onclick="clr()">AC</button></td>
          <td><button onclick="dis('.')">.</button></td>
          <td><button onclick="dis('%')">%</button></td>
          <td><button onclick="dis('+')">+</button></td>
        </tr>
        <tr>
          <td><button onclick="dis('1')">1</button></td>
          <td><button onclick="dis('2')">2</button></td>
          <td><button onclick="dis('3')">3</button></td>
          <td><button onclick="dis('-')">-</button></td>
        </tr>
        <tr>
          <td><button onclick="dis('4')">4</button></td>
          <td><button onclick="dis('5')">5</button></td>
          <td><button onclick="dis('6')">6</button></td>
          <td><button onclick="dis('*')">*</button></td>
        </tr>
        <tr>
          <td><button onclick="dis('7')">7</button></td>
          <td><button onclick="dis('8')">8</button></td>
          <td><button onclick="dis('9')">9</button></td>
          <td><button onclick="dis('/')">/</button></td>
        </tr>
        <tr>
          <td><button onclick="dis('(')">(</button></td>
          <td><button onclick="dis('0')">0</button></td>
          <td><button onclick="dis(')')">)</button></td>
          <td><button onclick="solve()">=</button></td>
        </tr>
      </table>
    </div>
  </body>
</html>