Simple HTML Calculator Coding [CODE]

Here is Simple Calculator Coding in HTML

Sep 25, 2025 0 19

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Animated Modern Calculator</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(135deg, #0f172a, #1e293b, #334155);
      font-family: Arial, sans-serif;
      animation: bgMove 10s infinite alternate;
    }
    @keyframes bgMove {
      0% { background-position: left; }
      100% { background-position: right; }
    }
    .calculator {
      background: #1e293b;
      padding: 20px;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
      transform: scale(0.9);
      animation: popUp 1s ease forwards;
    }
    @keyframes popUp {
      from { transform: scale(0); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .display {
      width: 260px;
      height: 60px;
      margin-bottom: 15px;
      font-size: 1.5rem;
      text-align: right;
      padding: 10px;
      border-radius: 10px;
      border: none;
      outline: none;
      background: #0f172a;
      color: #f1f5f9;
      box-shadow: inset 0 4px 10px rgba(0,0,0,0.5);
    }
    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 65px);
      gap: 10px;
    }
    button {
      height: 60px;
      border: none;
      border-radius: 12px;
      font-size: 1.2rem;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      background: #334155;
      color: #f1f5f9;
      box-shadow: 0 4px 0 #1e293b, 0 6px 15px rgba(0,0,0,0.4);
    }
    button:active {
      transform: translateY(3px);
      box-shadow: 0 2px 0 #1e293b, 0 3px 10px rgba(0,0,0,0.3);
    }
    button:hover {
      background: #475569;
    }
    .equal {
      grid-column: span 2;
      background: #10b981;
      color: white;
      box-shadow: 0 4px 0 #047857, 0 6px 15px rgba(0,0,0,0.4);
    }
    .equal:hover {
      background: #059669;
    }
    .clear {
      background: #ef4444;
      color: white;
      box-shadow: 0 4px 0 #b91c1c, 0 6px 15px rgba(0,0,0,0.4);
    }
    .clear:hover {
      background: #dc2626;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <input type="text" id="display" class="display" disabled />
    <div class="buttons">
      <button onclick="clearDisplay()" class="clear">C</button>
      <button onclick="appendValue('/')">÷</button>
      <button onclick="appendValue('*')">×</button>
      <button onclick="appendValue('-')">−</button>
      <button onclick="appendValue('7')">7</button>
      <button onclick="appendValue('8')">8</button>
      <button onclick="appendValue('9')">9</button>
      <button onclick="appendValue('+')">+</button>
      <button onclick="appendValue('4')">4</button>
      <button onclick="appendValue('5')">5</button>
      <button onclick="appendValue('6')">6</button>
      <button onclick="appendValue('.')">.</button>
      <button onclick="appendValue('1')">1</button>
      <button onclick="appendValue('2')">2</button>
      <button onclick="appendValue('3')">3</button>
      <button onclick="calculate()" class="equal">=</button>
      <button onclick="appendValue('0')" style="grid-column: span 2;">0</button>
    </div>
  </div>
  <script>
    const display = document.getElementById("display");
    function appendValue(value) {
      display.value += value;
    }
    function clearDisplay() {
      display.value = "";
    }
    function calculate() {
      try {
        display.value = eval(display.value);
      } catch {
        display.value = "Error";
      }
    }
  </script>
</body>
</html>