HTML

<div id="calculator">

  <label>

    <input type="text" id="display">

   </label>

    <br>

    <button onclick="addToDisplay('7')">7</button>

    <button onclick="addToDisplay('8')">8</button>

    <button onclick="addToDisplay('9')">9</button>

    <button onclick="addToDisplay('+')">+</button>

    <br>

    <button onclick="addToDisplay('4')">4</button>

    <button onclick="addToDisplay('5')">5</button>

    <button onclick="addToDisplay('6')">6</button>

    <button onclick="addToDisplay('-')">-</button>

    <br>

    <button onclick="addToDisplay('1')">1</button>

    <button onclick="addToDisplay('2')">2</button>

    <button onclick="addToDisplay('3')">3</button>

    <button onclick="addToDisplay('*')">x</button>

    <br>

    <button onclick="clearDisplay()" class="C_button">C</button>

 <button onclick="addToDisplay('0')">0</button>

    <button onclick="calculateResult()">=</button>

    <button onclick="addToDisplay('/')">/</button>

  </div>

CSS

#calculator {

 width: 300px;

 padding: 10px;

 box-shadow: inset 0px -20px 50px -20px #c5deff, 3px 2px 10px rgba(0, 0, 0, 0.1);

 border-radius: 10px;

 text-align: center;

 font-family: "SN Pro", sans-serif;

 transition: 1s;

 margin-top: 100px;

 margin-left: -625px;

}

#calculator:hover{

 box-shadow: inset 0px -20px 50px -20px #c5deff, 0px 0px 10px rgba(0, 0, 0, 0.05);

}

#calculator::before{

 content: "";

 background-image: url(https://img.freepik.com/premium-psd/abstract-textured-glass-surface-png-water-overlay-effect-transparent-background_53876-498845.jpg?semt=ais_hybrid);

 background-repeat: repeat;

 background-size: 200%;

 opacity: 0.07;

 position: absolute;

 z-index: -1;

 border-radius: 10px;

 width: 280px;

 height: 350px;

}

#calculator button {

 width: 60px;

 height: 60px;

 font-size: 18px;

 margin: 5px;

 cursor: pointer;

 border-radius: 50%;

 border: none;

 box-shadow: inset 10px 10px 20px #fff, 3px 2px 10px rgba(0, 0, 0, 0.1);

 font-family: "SN Pro", sans-serif;

}

#display {

 width: 91%;

 height: 40px;

 font-size: 24px; 

 margin: 10px auto;

 border-radius: 100px;

 border: none;

 background: linear-gradient(to right top,transparent 40%,#ffddb7 95%),linear-gradient(to right,#0a73fd,transparent),linear-gradient(to left bottom,#b2c7fe 55%,transparent);

 box-shadow: inset 10px 10px 20px #fff, 3px 2px 10px rgba(0, 0, 0, 0.1);

 padding-left: 10px;

 padding-right: 10px;

 color: rgba(255,255,255,0.8);

 cursor: pointer;

 font-family: "SN Pro", sans-serif;

 transition: 0.3s;

}

.C_button{

 background: linear-gradient(to right top,transparent 40%,#ffddb7 95%),linear-gradient(to right,#0a73fd,transparent),linear-gradient(to left bottom,#b2c7fe 55%,transparent);

 box-shadow: inset 10px 10px 20px #fff, 3px 2px 10px rgba(0, 0, 0, 0.1);

 color: rgba(255,255,255,0.8);

}

JS

    // Эта функция используется для добавления конкретного "value" (значения) на дисплей.

 function addToDisplay(value) {

      document.getElementById('display').value += value;

    }

    // Эта функция очищает дисплей, устанавливая его значение в пустую строку.

    function clearDisplay() {

      document.getElementById('display').value = '';

    }

    // Эта функция вычисляет результат выражения на дисплее с помощью функции 'eval'.

    // Она обрабатывает ошибки и выводит сообщение 'Error', если выражение недопустимо.

    function calculateResult() {

      try {

    // Получение результата выражения и вывод результата на дисплей.

        document.getElementById('display').value = eval(document.getElementById('display').value);

      } catch (error) {

    // Если в процессе вычисления возникла ошибка, на дисплее отобразится сообщение 'Error'.

        document.getElementById('display').value = 'Error';

      }

    }