Calculator App

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Complete Calculator</title>

  <style>

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, sans-serif;
    }

    body{
      height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background:#1e1e1e;
    }

    .calculator{
      width:320px;
      background:#2c2c2c;
      padding:20px;
      border-radius:15px;
      box-shadow:0 0 15px rgba(0,0,0,0.5);
    }

    .display{
      width:100%;
      height:70px;
      border:none;
      outline:none;
      background:#111;
      color:white;
      font-size:30px;
      text-align:right;
      padding:15px;
      border-radius:10px;
      margin-bottom:15px;
    }

    .buttons{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:10px;
    }

    button{
      height:60px;
      border:none;
      border-radius:10px;
      font-size:22px;
      cursor:pointer;
      transition:0.2s;
    }

    button:hover{
      transform:scale(0.95);
    }

    .number{
      background:#444;
      color:white;
    }

    .operator{
      background:orange;
      color:white;
    }

    .equal{
      background:#00b894;
      color:white;
      grid-column:span 2;
    }

    .clear{
      background:#d63031;
      color:white;
    }

  </style>
</head>
<body>

  <div class="calculator">

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

    <div class="buttons">

      <button class="clear" onclick="clearDisplay()">AC</button>

      <button class="operator" onclick="appendValue('/')">/</button>

      <button class="operator" onclick="appendValue('*')">*</button>

      <button class="operator" onclick="appendValue('-')">-</button>

      <button class="number" onclick="appendValue('7')">7</button>

      <button class="number" onclick="appendValue('8')">8</button>

      <button class="number" onclick="appendValue('9')">9</button>

      <button class="operator" onclick="appendValue('+')">+</button>

      <button class="number" onclick="appendValue('4')">4</button>

      <button class="number" onclick="appendValue('5')">5</button>

      <button class="number" onclick="appendValue('6')">6</button>

      <button class="operator" onclick="appendValue('%')">%</button>

      <button class="number" onclick="appendValue('1')">1</button>

      <button class="number" onclick="appendValue('2')">2</button>

      <button class="number" onclick="appendValue('3')">3</button>

      <button class="operator" onclick="appendValue('**')">^</button>

      <button class="number" onclick="appendValue('0')">0</button>

      <button class="number" onclick="appendValue('.')">.</button>

      <button class="equal" onclick="calculate()">=</button>

    </div>

  </div>

  <script>

    let display = document.getElementById("display");

    function appendValue(value){
      display.value += value;
    }

    function clearDisplay(){
      display.value = "";
    }

    function calculate(){

      try{

        display.value = eval(display.value);

      }catch(error){

        display.value = "Error";

      }

    }

  </script>

</body>
</html>
Supported operations:
Addition +
Subtraction -
Multiplication *
Division /
Modulus %
Exponential **
Example:
Academy

Calculator App

List of Modules
