Proyek: Kalkulator

UI + event + state management sederhana.

Pahami konsepnya

Proyek penutup kedua: kalkulator dengan tombol angka, operator, dan layar hasil. Menggabungkan event delegation, state management (angka pertama, operator menunggu, angka kedua), dan update DOM real-time.

State-nya sederhana: firstNum (angka pertama), operator (+, -, *, /), waitingForSecond (boolean — sedang menunggu angka kedua), display (string di layar). Setiap tombol angka menambah digit; tombol operator menyimpan angka pertama dan operator; tombol = menghitung.

Kerangka sudah siap — lengkapi fungsi hitung dan update display sampai kalkulator berfungsi penuh.

Coba contoh kode

<!doctype html>
<html>
<head>
  <style>
    body { font-family: monospace; max-width: 280px; margin: 40px auto; }
    #layar { font-size: 2em; text-align: right; padding: 12px; background: #222; color: #0f0; border-radius: 8px; margin-bottom: 8px; min-height: 1.4em; }
    button { width: 60px; height: 50px; font-size: 1.2em; margin: 2px; border: 1px solid #ccc; border-radius: 6px; }
    button:hover { background: #e0e0e0; }
    .op { background: #ff9500; color: white; }
  </style>
</head>
<body>
  <div id="layar">0</div>
  <div id="tombol">
    <button>7</button><button>8</button><button>9</button><button class="op">/</button>
    <button>4</button><button>5</button><button>6</button><button class="op">*</button>
    <button>1</button><button>2</button><button>3</button><button class="op">-</button>
    <button>0</button><button>.</button><button>C</button><button class="op">+</button>
    <button style="width:100%">=</button>
  </div>

  <script>
    const layar = document.getElementById("layar");
    let display = "0", firstNum = null, op = null;

    function update() { layar.textContent = display; }

    document.getElementById("tombol").addEventListener("click", (e) => {
      const t = e.target.textContent;
      if (/[0-9.]/.test(t)) {
        display = display === "0" ? t : display + t;
      } else if (["+", "-", "*", "/"].includes(t)) {
        firstNum = parseFloat(display);
        op = t;
        display = "0";
      } else if (t === "C") {
        display = "0"; firstNum = null; op = null;
      } else if (t === "=") {
        const b = parseFloat(display);
        if (op === "+") display = firstNum + b;
        else if (op === "-") display = firstNum - b;
        else if (op === "*") display = firstNum * b;
        else if (op === "/") display = b === 0 ? "Error" : firstNum / b;
        firstNum = null; op = null;
      }
      update();
    });
  </script>
</body>
</html>

Event delegation di #tombol menangani SEMUA tombol dengan satu listener. State: display untuk layar, firstNum untuk angka pertama, op untuk operator. Tombol = menghitung berdasarkan op yang tersimpan.

Latihan singkat

Uji: fungsi hitung(a, op, b) — hitung(10, "+", 20) harus `30`; hitung(10, "/", 0) harus `Error`.