Untitled

<!doctype html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Kalkulator Sederhana</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #1e1e1e;
        font-family: Arial;
      }

      .calc {
        background: #2c2c2c;
        padding: 20px;
        border-radius: 10px;
        width: 220px;
      }

      .display {
        width: 100%;
        height: 50px;
        margin-bottom: 10px;
        font-size: 20px;
        text-align: right;
        padding: 10px;
        border-radius: 6px;
        border: none;
        background: #000;
        color: #0f0;
      }

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

      button {
        padding: 15px;
        font-size: 16px;
        border: none;
        border-radius: 6px;
        background: #444;
        color: white;
        cursor: pointer;
      }

      button:hover {
        background: #666;
      }

      .clear {
        grid-column: span 4;
        background: #c0392b;
      }
    </style>
  </head>
  <body>
    <div class="calc">
      <input type="text" id="display" class="display" disabled />

      <div class="grid">
        <button onclick="press('7')">7</button>
        <button onclick="press('8')">8</button>
        <button onclick="press('9')">9</button>
        <button onclick="press('/')">/</button>

        <button onclick="press('4')">4</button>
        <button onclick="press('5')">5</button>
        <button onclick="press('6')">6</button>
        <button onclick="press('*')">*</button>

        <button onclick="press('1')">1</button>
        <button onclick="press('2')">2</button>
        <button onclick="press('3')">3</button>
        <button onclick="press('-')">-</button>

        <button onclick="press('0')">0</button>
        <button onclick="press('.')">.</button>
        <button onclick="calculate()">=</button>
        <button onclick="press('+')">+</button>

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

    <script>
      let input = "";

      function press(value) {
        input += value;
        updateDisplay();
      }

      function calculate() {
        try {
          input = eval(input).toString();
        } catch {
          input = "Error";
        }
        updateDisplay();
      }

      function clearDisplay() {
        input = "";
        updateDisplay();
      }

      function updateDisplay() {
        document.getElementById("display").value = input;
      }
    </script>
  </body>
</html>
Editor is loading...