Mini Project: Kalkulator Sederhana dengan JavaScript

Kalkulator Sederhana dengan JavaScript adalah proyek mini yang membantu memahami logika perhitungan, event listener, dan manipulasi DOM. Dengan membuat kalkulator sendiri, kamu akan belajar bagaimana tombol bekerja, angka ditampilkan, dan hasil dihitung otomatis, semuanya tanpa library tambahan.

Proyek ini cocok untuk pemula yang ingin memperdalam interaksi antar elemen HTML, fungsi matematika, dan pengelolaan event klik.

Struktur Dasar HTML

Buat file index.html seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kalkulator JavaScript</title>
  <style>
    body { font-family: Arial; display: flex; justify-content: center; margin-top: 80px; }
    .calculator { width: 250px; background: #f5f5f5; padding: 15px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
    input { width: 100%; height: 50px; text-align: right; font-size: 20px; margin-bottom: 10px; padding: 5px; border: none; border-radius: 5px; background: #fff; }
    .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    button { padding: 15px; font-size: 18px; border: none; border-radius: 5px; cursor: pointer; background: #e0e0e0; }
    button.operator { background: #ff9800; color: white; }
    button.equal { background: #4caf50; color: white; grid-column: span 2; }
    button.clear { background: #f44336; color: white; }
  </style>
</head>
<body>

  <div class="calculator">
    <input type="text" id="display" readonly>
    <div class="buttons">
      <button class="clear">C</button>
      <button class="operator">/</button>
      <button class="operator">*</button>
      <button class="operator">-</button>
      <button>7</button>
      <button>8</button>
      <button>9</button>
      <button class="operator">+</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <button>.</button>
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button class="equal">=</button>
      <button>0</button>
    </div>
  </div>

  <script src="app.js"></script>
</body>
</html>

Logika Dasar di JavaScript

Buat file app.js di folder yang sama:

const display = document.getElementById("display");
const buttons = document.querySelectorAll("button");

let currentInput = "";

buttons.forEach(button => {
  button.addEventListener("click", () => {
    const value = button.textContent;

    if (value === "C") {
      currentInput = "";
      display.value = "";
    } 
    else if (value === "=") {
      try {
        currentInput = eval(currentInput).toString();
        display.value = currentInput;
      } catch {
        display.value = "Error";
        currentInput = "";
      }
    } 
    else {
      currentInput += value;
      display.value = currentInput;
    }
  });
});

Penjelasan Kode

querySelectorAll() mengambil semua tombol di kalkulator.
Setiap tombol memiliki event listener untuk menangani klik.
Tombol angka/operator menambahkan karakter ke variabel currentInput.
Tombol C menghapus tampilan.
Tombol = menghitung ekspresi menggunakan eval() (hati-hati pada proyek besar — sebaiknya gunakan parser khusus).
Jika perhitungan salah, akan muncul teks Error.

Menambahkan Fitur Tambahan (Opsional)

Agar lebih interaktif, kamu bisa tambahkan:

document.addEventListener("keydown", (e) => {
  if (/[0-9+\-*/.]/.test(e.key)) {
    currentInput += e.key;
    display.value = currentInput;
  } else if (e.key === "Enter") {
    try {
      currentInput = eval(currentInput).toString();
      display.value = currentInput;
    } catch {
      display.value = "Error";
      currentInput = "";
    }
  } else if (e.key === "Backspace") {
    currentInput = currentInput.slice(0, -1);
    display.value = currentInput;
  }
});

Sekarang kalkulator bisa dikendalikan dari keyboard juga!

Studi Kasus: Operasi Dasar

Coba:

5 + 3 = → hasil 8
12 / 4 = → hasil 3
2 * (3 + 5) = → hasil 16

Semua berjalan langsung di browser tanpa reload.

Kesimpulan

Dengan membuat kalkulator JavaScript, kamu belajar tentang:

Manipulasi DOM dengan event listener,
Menangani input dari tombol dan keyboard,
Logika perhitungan sederhana, dan
Tampilan responsif dengan CSS Grid.

Proyek ini jadi dasar bagus sebelum membuat versi lanjutan seperti kalkulator ilmiah atau kalkulator keuangan berbasis web.