Popular Post

Cara Membuat Program Kalkulator Sederhana Menggunakan HTML, CSS, dan JavaScript

Posted by on

Membuat kalkulator sederhana adalah salah satu latihan terbaik untuk memahami dasar pengembangan web. Dari proyek kecil ini, kamu bisa belajar bagaimana HTML digunakan untuk menyusun tampilan, CSS untuk mempercantik desain, dan JavaScript untuk menjalankan logika perhitungan. 


Walaupun terlihat sederhana, proyek kalkulator sangat bagus untuk melatih pemahaman tentang input pengguna, event klik tombol, dan manipulasi elemen di halaman web. Ini adalah fondasi yang sangat penting sebelum masuk ke proyek yang lebih besar.

Pada artikel ini, kita akan membuat sebuah kalkulator sederhana yang memiliki fitur dasar seperti:

  • Penjumlahan
  • Pengurangan
  • Perkalian
  • Pembagian
  • Tombol hapus
  • Tombol hasil

Hasil akhirnya akan berupa kalkulator yang ringan, rapi, dan mudah dipahami, sangat cocok untuk pemula.

1. Struktur Dasar Project

Kita akan menggunakan 3 file:

  • index.html
  • style.css
  • script.js

Pembagian ini penting agar kode lebih rapi dan mudah dikelola. HTML fokus pada struktur, CSS fokus pada tampilan, dan JavaScript fokus pada fungsi.

2. Membuat Struktur HTML

Pertama, buat file index.html dan isi dengan kode berikut:

<!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" disabled>


    <div class="buttons">

      <button onclick="clearDisplay()">C</button>

      <button onclick="appendValue('/')">/</button>

      <button onclick="appendValue('*')">*</button>

      <button onclick="deleteLast()">DEL</button>


      <button onclick="appendValue('7')">7</button>

      <button onclick="appendValue('8')">8</button>

      <button onclick="appendValue('9')">9</button>

      <button onclick="appendValue('-')">-</button>


      <button onclick="appendValue('4')">4</button>

      <button onclick="appendValue('5')">5</button>

      <button onclick="appendValue('6')">6</button>

      <button onclick="appendValue('+')">+</button>


      <button onclick="appendValue('1')">1</button>

      <button onclick="appendValue('2')">2</button>

      <button onclick="appendValue('3')">3</button>

      <button onclick="calculateResult()" class="equal">=</button>


      <button onclick="appendValue('0')" class="zero">0</button>

      <button onclick="appendValue('.')">.</button>

    </div>

  </div>


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

</body>

</html>

Penjelasan HTML

Pada bagian ini, kita membuat sebuah div utama dengan class calculator sebagai wadah seluruh isi kalkulator.

Lalu kita menambahkan input dengan id="display" yang berfungsi sebagai layar kalkulator. Atribut disabled digunakan agar user tidak mengetik langsung dari keyboard, melainkan hanya melalui tombol yang kita sediakan.

Setelah itu, kita membuat banyak tombol angka dan operator. Masing-masing tombol memiliki onclick, yang berarti ketika tombol diklik, JavaScript akan menjalankan fungsi tertentu.

Contohnya:

<button onclick="appendValue('7')">7</button>

Artinya, saat tombol angka 7 ditekan, nilai 7 akan ditambahkan ke layar kalkulator.

3. Membuat Tampilan dengan CSS

Sekarang buat file style.css dan isi dengan kode berikut:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.calculator {
  background: #222;
  padding: 20px;
  border-radius: 15px;
  width: 320px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

#display {
  width: 100%;
  height: 60px;
  margin-bottom: 15px;
  font-size: 24px;
  text-align: right;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: #fff;
  color: #000;
}

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

button {
  height: 55px;
  border: none;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  background: #444;
  color: white;
  transition: 0.2s;
}

button:hover {
  background: #666;
}

.equal {
  grid-row: span 2;
  background: orange;
  color: white;
}

.equal:hover {
  background: darkorange;
}

.zero {
  grid-column: span 2;
}

Penjelasan CSS
CSS ini digunakan agar kalkulator terlihat lebih modern dan rapi.
Bagian body memakai display: flex supaya kalkulator bisa berada tepat di tengah halaman. Lalu class .calculator diberi warna gelap, padding, dan border radius agar tampil seperti kalkulator sungguhan.
Untuk tombol, kita menggunakan grid supaya susunan tombol lebih mudah diatur. Dengan grid-template-columns: repeat(4, 1fr), kita membuat 4 kolom dengan lebar yang sama.
Beberapa tombol juga dibuat spesial:
Tombol = dibuat lebih tinggi dengan grid-row: span 2
Tombol 0 dibuat lebih lebar dengan grid-column: span 2
Hal seperti ini membuat tampilan kalkulator jadi lebih menarik dan mirip aplikasi kalkulator pada umumnya.
4. Menambahkan Logika dengan JavaScript
Sekarang buat file script.js dan isi dengan kode berikut:
const display = document.getElementById('display');

function appendValue(value) {
  display.value += value;
}

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

function deleteLast() {
  display.value = display.value.slice(0, -1);
}

function calculateResult() {
  try {
    display.value = eval(display.value);
  } catch (error) {
    display.value = 'Error';
  }
}


Penjelasan JavaScript
Di sinilah bagian paling penting terjadi, yaitu logika kalkulator.
1. Mengambil elemen display
const display = document.getElementById('display');
Kode ini digunakan untuk mengambil elemen input yang menjadi layar kalkulator. Nantinya, semua angka dan operator akan ditampilkan di sana.
2. Menambahkan nilai ke display
function appendValue(value) {
  display.value += value;
}
Fungsi ini menambahkan angka atau operator ke layar setiap kali tombol ditekan.
Misalnya jika user menekan 7, lalu +, lalu 3, maka isi display akan menjadi:
7+3
3. Menghapus semua isi display
function clearDisplay() {
  display.value = '';
}
Fungsi ini akan mengosongkan layar saat tombol C ditekan.
4. Menghapus satu karakter terakhir
function deleteLast() {
  display.value = display.value.slice(0, -1);
}
Fungsi ini berguna untuk menghapus input terakhir. Misalnya display berisi 12+3, lalu tombol DEL ditekan, hasilnya menjadi 12+.
5. Menghitung hasil
function calculateResult() {
  try {
    display.value = eval(display.value);
  } catch (error) {
    display.value = 'Error';
  }
}
Fungsi ini menggunakan eval() untuk menghitung ekspresi matematika yang ada di display.
Contoh:
  • 2+3 menjadi 5
  • 10/2 menjadi 5
  • 4*6 menjadi 24
Jika input tidak valid, misalnya 5++2, maka program akan masuk ke catch dan menampilkan Error.
5. Cara Menjalankan Program
Setelah ketiga file selesai dibuat, simpan semuanya dalam satu folder yang sama:
project-kalkulator/
│── index.html
│── style.css
│── script.js
Lalu buka file index.html di browser. Setelah itu, kalkulator sederhana kamu sudah bisa digunakan.
6. Hasil yang Didapat
Dengan project ini, kamu sudah berhasil membuat aplikasi kalkulator sederhana berbasis web. Walaupun project ini masih dasar, kamu sudah belajar beberapa hal penting:
HTML mengajarkan bagaimana menyusun elemen tampilan. CSS membantu membuat tampilan lebih menarik dan nyaman dilihat. JavaScript memberi kehidupan pada tombol-tombol itu agar bisa benar-benar bekerja.
Ini adalah langkah kecil, tapi sangat penting. Banyak project besar dimulai dari pemahaman dasar seperti ini.


7. Pengembangan Selanjutnya
Setelah kalkulator sederhana ini berhasil, kamu bisa mengembangkannya menjadi lebih bagus lagi. Misalnya:
  • Menambahkan dukungan keyboard

  • Membuat tema gelap dan terang
  • Menambahkan validasi agar operator tidak dobel
  • Mengganti eval() dengan logika perhitungan yang lebih aman
  • Menambahkan riwayat perhitungan
Kalau kamu terus mengembangkan project kecil seperti ini, kamu akan semakin paham bagaimana HTML, CSS, dan JavaScript saling bekerja sama membentuk sebuah aplikasi web.
8. Kesimpulan
Membuat kalkulator sederhana adalah latihan yang sangat bagus untuk pemula yang ingin belajar web development. Project ini tidak terlalu rumit, tetapi cukup lengkap untuk memperkenalkan konsep penting seperti struktur halaman, desain antarmuka, event klik, dan logika pemrograman.
Yang paling penting, dari project sederhana seperti ini kamu sedang membangun kebiasaan yang benar: memahami dasar, memecah masalah menjadi bagian kecil, lalu menyatukannya menjadi program yang bisa digunakan.
Karena di dunia pemrograman, kemajuan besar hampir selalu dimulai dari langkah sederhana yang dikerjakan dengan serius.

Comments

Post a Comment