calculator_updated.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
  </head>
  <body>
    <h1>Calculator</h1>
    <p class="js-amount-input"> </p>
    <p>
      <button onclick="appendValue('1')">1</button>
      <button onclick="appendValue('2')">2</button>
      <button onclick="appendValue('3')">3</button>
      <button onclick="appendValue('+')">+</button>
    </p>
    <p>
      <button onclick="appendValue('4')">4</button>
      <button onclick="appendValue('5')">5</button>
      <button onclick="appendValue('6')">6</button>
      <button onclick="appendValue('-')">-</button>
    </p>
    <p>
      <button onclick="appendValue('7')">7</button>
      <button onclick="appendValue('8')">8</button>
      <button onclick="appendValue('9')">9</button>
      <button onclick="appendValue('*')">*</button>
    </p>
    <p>
      <button onclick="appendValue('0')">0</button>
      <button onclick="appendValue('.')">.</button>
      <button onclick="calculate()">=</button>
      <button onclick="appendValue('/')">/</button>
    </p>
    <p>
      <button onclick="clearDisplay()">Clear</button>
    </p>
    <script>
      let value = "";
      function appendValue(val) {
        value += val;
        document.querySelector('.js-amount-input').innerHTML = value;
      }
      function calculate() {
        try {
          value = eval(value);
          document.querySelector('.js-amount-input').innerHTML = value;
        } catch (error) {
          document.querySelector('.js-amount-input').innerHTML = "Error";
        }
      }
      function clearDisplay() {
        value = "";
        document.querySelector('.js-amount-input').innerHTML = "";
      }
    </script>
  </body>
</html>