<div class="wrapper">
  <div class="display">
    <input type="text" value="0" readonly></input>
  </div>
  <div class="button">
    <table>
      <tr>
        <td><button id="num" onclick="insrt(1)">1</button></td>
        <td><button id="num" onclick="insrt(2)">2</button></td>
        <td><button id="num" onclick="insrt(3)">3</button></td>
        <td><button id="num" onclick="insrt('+')">+</button></td>
      </tr>
      <tr>
        <td><button id="num" onclick="insrt(4)">4</button></td>
        <td><button id="num" onclick="insrt(5)">5</button></td>
        <td><button id="num" onclick="insrt(6)">6</button></td>
        <td><button id="num" onclick="insrt('-')">-</button></td>
      </tr>
      <tr>
        <td><button id="num" onclick="insrt(7)">7</button></td>
        <td><button id="num" onclick="insrt(8)">8</button></td>
        <td><button id="num" onclick="insrt(9)">9</button></td>
        <td><button id="num" onclick="insrt('*')">x</button></td>
      </tr>
      <tr>
        <td><button id="exp" onclick="cl()">C</button></td>
        <td><button id="num" onclick="insrt(0)">0</button></td>
        <td><button id="exp" onclick="eql()">=</button></td>
        <td><button id="num" onclick="insrt('/')">/</button></td>
      </tr>
    </table>
  </div>
</div>
* {
  font-family: monospace;
  font-size: 20px;
}

.wrapper {
  margin: 0 auto;
  width: 500px;
  border: 1px solid grey;
  border-radius: 10px;
  background: #ddd;
}
.display {
  margin: 10px auto;
  width: 480px;
  height: 100px;
  border: 1px solid grey;
  border-radius: 10px;
  font-size:2rem;
  background: #dfd;
  color: grey;
}

.display input{
  display: block;
  margin:20px auto;
  height:60px;
  width:420px;
  font-size:1.5rem;
  border-style:none;
  border-radius:10px;
  overflow:hidden;
}

.button {
  width: 500px;
  height: 500px;
}

.button #exp{
  background-color:orange;
}
.button table {
  table-layout: fixed;
  width: 500px;
  height: 500px;
}

.button table tr td {
  padding: 10px;
}
.button table button {
  width: 100%;
  height: 100px;
  font-weight: bold;
  border-style: none;
  border-radius: 10px;
  background: grey;
  color: white;
}

.button table button:hover {
  background: white;
  border: 1px solid grey;
  color: grey;
}
function insrt(num){
  if( $('.display input').val()==0)
   $('.display input').val('');
  $('.display input').val($('.display input').val()+num);
}
function eql(){
  $('.display input').val(eval($('.display input').val()));
}
function cl(){
  $('.display input').val(0);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js