Kalkulator Sederhana HTML CSS & JavaScript Panduan Lengkap

Farhan Hidayat 1 Maret 2025 4 min read

Pernah kepikiran bikin kalkulator sederhana sendiri pakai HTML, CSS, dan JavaScript? 🤔 Tenang, nggak perlu jadi ahli dulu buat bisa bikin ini!

Di artikel ini, kita bakal bahas cara membuat kalkulator sederhana dari nol, lengkap dengan desain yang keren dan fitur interaktif. Cocok banget buat kamu yang baru belajar coding atau pengen bikin proyek kecil tapi bermanfaat!

Persiapan Sebelum Coding

Sebelum mulai ngoding, kita butuh beberapa alat dasar:

Untuk menulis kode, gunakan Text Editor seperti VS Code, Sublime Text, atau bahkan Notepad++.
Pastikan kamu memiliki Web Browser seperti Chrome, Firefox, atau Edge untuk menguji kode.
Siapkan struktur file proyek, yaitu

index.html → Buat tampilan kalkulator
style.css → Buat desainnya
script.js → Buat fungsinya

Kalau udah siap, yuk lanjut ke tahap berikutnya!

Also Read: Cara Membuat Navbar Responsive Tanpa Ribet (HTML CSS)

🚀 Lihat Dulu, Baru Ngoding! 🚀
Sebelum kita mulai ngoding, pertama-tama, coba lihat dulu demo kalkulator sederhana ini! Dengan demikian, kamu bisa lebih memahami hasil akhirnya dan setelah itu, kamu akan semakin semangat untuk bikin sendiri! 😃

Live Preview

Membuat Struktur HTML Kalkulator

Pertama, kita bikin tampilan dasarnya pakai HTML. Ini dia kodenya:

<!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>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="calculator">
    <input type="text" id="display" class="display" disabled />
    <div class="buttons">
      <button class="button" onclick="appendToDisplay('7')">7</button>
      <button class="button" onclick="appendToDisplay('8')">8</button>
      <button class="button" onclick="appendToDisplay('9')">9</button>
      <button class="button operator" onclick="appendToDisplay('+')">+</button>

      <button class="button" onclick="appendToDisplay('4')">4</button>
      <button class="button" onclick="appendToDisplay('5')">5</button>
      <button class="button" onclick="appendToDisplay('6')">6</button>
      <button class="button operator" onclick="appendToDisplay('-')">-</button>

      <button class="button" onclick="appendToDisplay('1')">1</button>
      <button class="button" onclick="appendToDisplay('2')">2</button>
      <button class="button" onclick="appendToDisplay('3')">3</button>
      <button class="button operator" onclick="appendToDisplay('*')">*</button>

      <button class="button" onclick="appendToDisplay('0')">0</button>
      <button class="button" onclick="clearDisplay()">C</button>
      <button class="button operator" onclick="appendToDisplay('/')">/</button>
      <button class="button equal" onclick="calculate()">=</button>
    </div>
  </div>

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

Mendesain Kalkulator dengan CSS

Agar tampilan lebih menarik, kita tambahkan CSS:

Also Read: 10 Navbar HTML CSS Simple & Keren (Copy Paste, Anti Ribet)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.calculator {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px;
}

.display {
  width: 100%;
  height: 50px;
  text-align: right;
  font-size: 1.5em;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

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

.button {
  background-color: #f0f0f0;
  padding: 20px;
  font-size: 1.2em;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #ddd;
}

.operator {
  background-color: #f9a825;
  color: white;
}

.operator:hover {
  background-color: #f57f17;
}

.equal {
  background-color: #388e3c;
  color: white;
}

.equal:hover {
  background-color: #2c6f3b;
}

button:active {
  transform: scale(0.98);
}

Menambahkan Fitur Interaktif dengan JavaScript

Sekarang saatnya bikin kalkulator bisa berfungsi dengan JavaScript!

let display = document.getElementById('display');

// Menambahkan angka atau operator ke layar kalkulator
function appendToDisplay(value) {
  display.value += value;
}

// Menghapus tampilan
function clearDisplay() {
  display.value = '';
}

// Menghitung hasil
function calculate() {
  try {
    display.value = eval(display.value);
  } catch (error) {
    display.value = 'Error';
  }
}

Sekarang kalkulatornya udah bisa digunakan! 🎉

Mengoptimalkan dan Mengatasi Error

Biar lebih aman dan nyaman dipakai, kita bisa tambahin beberapa penyempurnaan:

Also Read: Roadmap Web Developer dari Nol hingga Bisa Ngoding dalam 3 Bulan

Pastikan input tetap valid dengan mencegah pengguna memasukkan dua operator berturut-turut.
Untuk keamanan, gunakan alternatif selain eval() agar kode tidak rentan terhadap eksploitasi.
Buat pengalaman lebih interaktif dengan menambahkan efek visual saat tombol ditekan.

Menyempurnakan Kalkulator (Opsional)

Biar makin keren, kita bisa tambahin fitur tambahan:

Buat tema Dark Mode menggunakan CSS agar tampilannya lebih modern.
Tambahkan animasi tombol untuk pengalaman pengguna yang lebih menarik.
Simpan riwayat perhitungan sehingga pengguna bisa melihat hasil sebelumnya.

Kesimpulan

Kita sudah berhasil membuat kalkulator sederhana dengan HTML, CSS, dan JavaScript! 🎉

🔥 Recap Singkat:

Also Read: Cara Membuat Strongest Password Generator Python Sederhana

Membuat struktur HTML sebagai dasar tampilan kalkulator.
Menggunakan CSS agar tampilan lebih menarik dan responsif di berbagai perangkat.
Menambahkan fungsi JavaScript sehingga kalkulator bisa melakukan perhitungan dengan baik.

Dengan proyek kecil ini, kamu sudah melangkah lebih jauh dalam belajar coding. Yuk, kembangkan lebih lanjut dengan fitur tambahan! 🚀