Kode Pemrograman Kalkulator Sederhana Menggunakan HTML, CSS, dan JavaScript

Salam Sobat, kali ini GFT membagikan Kode Pemrograman Kalkulator Sederhana Menggunakan HTML, CSS, dan JavaScript, salin kode berikut di Notepad di PC atau Laptop kamu, selanjutnya save dengan format html, yaitu setelah "nama.html" (Kalkolator.html).

berikut kode pemogramannya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Kalkulator Sederhana</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f3f3f3;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .calculator {
      background-color: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
    }
    input[type="text"] {
      width: 100%;
      padding: 15px;
      margin-bottom: 10px;
      font-size: 18px;
      text-align: right;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    button {
      padding: 20px;
      font-size: 18px;
      border: none;
      border-radius: 8px;
      background-color: #eee;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    button:hover {
      background-color: #ddd;
    }
    .operator {
      background-color: #f9a825;
      color: white;
    }
    .equal {
      background-color: #43a047;
      color: white;
      grid-column: span 2;
    }
    .clear {
      background-color: #e53935;
      color: white;
      grid-column: span 2;
    }
  </style>
</head>
<body>

  <div class="calculator">
    <input type="text" id="display" readonly>
    <div class="buttons">
      <button onclick="appendValue('7')">7</button>
      <button onclick="appendValue('8')">8</button>
      <button onclick="appendValue('9')">9</button>
      <button class="operator" onclick="appendValue('/')">÷</button>

      <button onclick="appendValue('4')">4</button>
      <button onclick="appendValue('5')">5</button>
      <button onclick="appendValue('6')">6</button>
      <button class="operator" onclick="appendValue('*')">×</button>

      <button onclick="appendValue('1')">1</button>
      <button onclick="appendValue('2')">2</button>
      <button onclick="appendValue('3')">3</button>
      <button class="operator" onclick="appendValue('-')">−</button>

      <button onclick="appendValue('0')">0</button>
      <button onclick="appendValue('.')">.</button>
      <button class="equal" onclick="calculate()">=</button>
      <button class="operator" onclick="appendValue('+')">+</button>

      <button class="clear" onclick="clearDisplay()">C</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 (e) {
        display.value = 'Error';
      }
    }
  </script>

</body>
</html>