Cara Membuat Kalkulator Dasar dengan HTML, CSS, dan JavaScript yang bisa Dijalankan di Browser

kitsune.my.id - Kalkulator adalah salah satu proyek terbaik untuk mulai belajar pengembangan web. Proyek ini tidak memerlukan database atau framework: cukup satu file HTML, sedikit CSS, dan beberapa fungsi JavaScript untuk membuat aplikasi yang bisa menjumlah, mengurangi, mengalikan, dan membagi.

Dalam tutorial Cara Membuat Kalkulator Dasar dengan HTML, CSS, dan JavaScript ini, kita akan membuat kalkulator yang benar-benar berfungsi dari nol. Seluruh nama elemen, class, fungsi, dan tampilan akan menggunakan bahasa Indonesia agar lebih mudah dipahami.

Sebelum mulai, pastikan kamu memiliki:

1. Browser modern, misalnya Chrome, Firefox, atau Brave.
2. Editor teks atau kode, seperti Visual Studio Code.
3. Pemahaman dasar tentang HTML, CSS, dan JavaScript.

Kamu tidak perlu menginstal perangkat tambahan. Seluruh proyek akan berjalan langsung di browser.

Membuat file HTML

Buka editor kode kamu misalnya Visual Studio Code atau terminal di Ubuntu, lalu buat file bernama kalkulator.html.

File ini akan menampung seluruh aplikasi: struktur tampilan, gaya visual, dan logika kerja kalkulator.

Menyusun Struktur Halaman

Kalkulator ini memiliki dua bagian utama: layar untuk menampilkan angka dan hasil, serta tombol-tombol untuk memasukkan nilai dan operasi hitung.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Kalkulator Dasar</title>
</head>
<body>

  <div class="kalkulator">
    <input type="text" id="layar" disabled>

    <div class="tombol">
      <button onclick="tambahAngka('7')">7</button>
      <button onclick="tambahAngka('8')">8</button>
      <button onclick="tambahAngka('9')">9</button>
      <button onclick="tambahAngka('/')">/</button>

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

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

      <button class="nol" onclick="tambahAngka('0')">0</button>
      <button onclick="tambahAngka('.')">.</button>
      <button onclick="tambahAngka('+')">+</button>

      <button onclick="hitung()">=</button>
      <button class="bersihkan" onclick="hapusSemua()">C</button>
    </div>
  </div>

</body>
</html>

Elemen <input> berperan sebagai layar kalkulator. Atribut disabled dipasang agar pengguna tidak bisa mengetik langsung ke dalamnya; angka dan simbol hanya masuk melalui tombol.

Setiap tombol memanggil fungsi JavaScript melalui onclick. Misalnya, saat tombol 7 ditekan, fungsi tambahAngka('7') akan dijalankan. Tombol =, C, +, -, *, dan / memiliki peran khusus yang akan dibuat pada bagian JavaScript.

Memberi Tampilan dengan CSS

Tanpa CSS, kalkulator tetap bisa berfungsi, tetapi tampilannya hanya berupa deretan tombol polos. CSS menyusun tombol menjadi grid yang rapi dan memberi tampilan yang lebih nyaman digunakan.

Tambahkan blok <style> berikut di dalam bagian <head>:

<style>
body {
  font-family: Arial, sans-serif;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.kalkulator {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 260px;
}

#layar {
  width: 100%;
  height: 40px;
  font-size: 18px;
  text-align: right;
  margin-bottom: 10px;
  padding: 5px;
}

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

.tombol button {
  height: 45px;
  font-size: 18px;
  cursor: pointer;
}

.nol {
  grid-column: span 2;
}

.bersihkan {
  grid-column: span 4;
  background-color: #f44336;
  color: white;
}
</style>

Properti display: grid menyusun tombol menjadi empat kolom. Aturan grid-template-columns: repeat(4, 1fr) membuat setiap kolom memiliki lebar yang sama.

Class .nol membuat tombol 0 melebar hingga menempati dua kolom. Sementara .bersihkan membuat tombol C membentang selebar kalkulator dan diberi warna merah agar mudah dikenali sebagai tombol hapus.

Menambahkan Logika JavaScript

Sampai titik ini, kalkulator baru terlihat. JavaScript yang membuatnya merespons setiap tombol yang ditekan.

Letakkan blok <script> berikut sebelum tag penutup </body>:

<script>
  let layar = document.getElementById('layar');

  function tambahAngka(nilai) {
    layar.value += nilai;
  }

  function hitung() {
    try {
      layar.value = eval(layar.value);
    } catch {
      layar.value = "Error";
    }
  }

  function hapusSemua() {
    layar.value = '';
  }
</script>

Variabel layar menyimpan referensi ke kolom teks kalkulator. Dari sana, tiga fungsi mengatur seluruh perilakunya:

• tambahAngka(nilai): menambahkan angka, titik desimal, atau operator ke layar.
• hitung(): menghitung ekspresi yang ada di layar, lalu menampilkan hasilnya. Jika ekspresi tidak valid, layar menampilkan Error.
• hapusSemua(): mengosongkan seluruh isi layar.

Fungsi hitung() menggunakan eval(), yang membaca teks di layar sebagai ekspresi matematis. Misalnya, jika layar berisi 5+3*2, hasil yang muncul adalah 11.

Mencoba kalkulator

Simpan file, lalu buka melalui browser dengan mengklik dua kali file tersebut atau menyeretnya ke jendela browser.

Kalkulator sudah bisa dipakai untuk operasi dasar:

• Penjumlahan: 4 + 3
• Pengurangan: 10 - 6
• Perkalian: 7 * 8
• Pembagian: 20 / 4

Tekan = untuk melihat hasil dan C untuk memulai perhitungan baru.

Proyek Kecil dengan Pelajaran Besar

Kalkulator ini memperlihatkan tiga lapisan dasar pengembangan web: HTML membentuk elemen, CSS mengatur tampilannya, dan JavaScript memberi perilaku. Proyeknya sederhana, tetapi cukup untuk memahami bagaimana antarmuka merespons tindakan pengguna.

Langkah pengembangan berikutnya adalah memperbaiki keamanan dan pengalaman penggunaan: mengganti eval() dengan pengevaluasi ekspresi yang lebih terkendali, mencegah operator berulang, serta mendukung input dari keyboard. Dari situ, latihan dasar ini bisa berkembang menjadi fondasi proyek web yang lebih kompleks.