JavaScript merupakan bahasa pemrograman yang banyak digunakan untuk membuat website menjadi lebih interaktif. Salah satu proyek yang sangat cocok untuk pemula adalah membuat kalkulator sederhana menggunakan JavaScript.
Melalui proyek ini, Anda akan belajar bagaimana menghubungkan HTML, CSS, dan JavaScript untuk menghasilkan aplikasi yang dapat melakukan operasi matematika dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian.
Selain mudah dibuat, proyek ini juga membantu Anda memahami konsep penting seperti manipulasi DOM, event, fungsi, hingga pengolahan input dari pengguna.
Mengapa Harus Belajar Membuat Kalkulator?
Meskipun terlihat sederhana, membuat kalkulator memiliki banyak manfaat bagi pemula.
Beberapa manfaat tersebut antara lain:
- Memahami cara kerja JavaScript dalam menangani input pengguna.
- Belajar menggunakan event pada tombol.
- Mengenal fungsi (
function) dalam JavaScript. - Melatih logika pemrograman dasar.
- Menjadi dasar sebelum membuat aplikasi web yang lebih kompleks.
Proyek ini sering dijadikan latihan pertama bagi calon Front-End Developer karena mudah dipahami namun tetap mengajarkan konsep penting.
Persiapan Sebelum Memulai
Sebelum membuat kalkulator, siapkan beberapa alat berikut:
- Visual Studio Code
- Browser (Google Chrome, Microsoft Edge, atau Mozilla Firefox)
- Pengetahuan dasar HTML
- Pengetahuan dasar CSS
- Pengetahuan dasar JavaScript
Buat struktur folder seperti berikut.
kalkulator/
│
├── index.html
├── style.css
└── script.jsLangkah 1: Membuat Struktur HTML
Buka file index.html, lalu masukkan kode berikut.
<!DOCTYPE html>
<html lang="id">
<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">
<h2>Kalkulator JavaScript</h2>
<input type="number" id="angka1" placeholder="Masukkan Angka Pertama">
<input type="number" id="angka2" placeholder="Masukkan Angka Kedua">
<div class="button">
<button onclick="tambah()">+</button>
<button onclick="kurang()">-</button>
<button onclick="kali()">*</button>
<button onclick="bagi()">/</button>
</div>
<h3 id="hasil">Hasil : 0</h3>
</div>
<script src="script.js"></script>
</body>
</html>Penjelasan HTML
Pada kode di atas terdapat beberapa elemen penting.
- Dua buah input untuk memasukkan angka.
- Empat tombol operasi matematika.
- Satu elemen
<h3>untuk menampilkan hasil. - File JavaScript yang dipanggil pada bagian bawah halaman.
HTML hanya berfungsi sebagai struktur tampilan.
Langkah 2: Membuat Tampilan dengan CSS
Buka file style.css.
body{
font-family:Arial,sans-serif;
background:#f4f4f4;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.calculator{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,.2);
width:320px;
text-align:center;
}
input{
width:100%;
padding:10px;
margin:10px 0;
font-size:18px;
box-sizing:border-box;
}
button{
padding:12px 18px;
margin:5px;
font-size:18px;
cursor:pointer;
border:none;
background:#2563eb;
color:white;
border-radius:6px;
}
button:hover{
background:#1d4ed8;
}
#hasil{
margin-top:20px;
color:#2563eb;
}Hasil CSS
Setelah CSS diterapkan, tampilan kalkulator akan terlihat lebih modern dengan kotak putih, tombol berwarna biru, serta posisi yang berada di tengah halaman.
Langkah 3: Menambahkan JavaScript
Buka file script.js.
function ambilAngka(){
let angka1=parseFloat(document.getElementById("angka1").value);
let angka2=parseFloat(document.getElementById("angka2").value);
return {angka1,angka2};
}
function tampil(hasil){
document.getElementById("hasil").innerHTML="Hasil : "+hasil;
}
function tambah(){
let data=ambilAngka();
tampil(data.angka1+data.angka2);
}
function kurang(){
let data=ambilAngka();
tampil(data.angka1-data.angka2);
}
function kali(){
let data=ambilAngka();
tampil(data.angka1*data.angka2);
}
function bagi(){
let data=ambilAngka();
if(data.angka2==0){
tampil("Tidak bisa dibagi dengan nol");
}else{
tampil(data.angka1/data.angka2);
}
}Penjelasan Program
Mari kita bahas setiap bagian kode.
Fungsi ambilAngka()
parseFloat()Fungsi ini digunakan untuk mengubah input dari pengguna menjadi tipe data angka agar dapat dihitung.
Fungsi tampil()
document.getElementById("hasil").innerHTMLKode tersebut digunakan untuk menampilkan hasil perhitungan pada halaman.
Fungsi Penjumlahan
tampil(data.angka1 + data.angka2);Operator + digunakan untuk menjumlahkan dua angka.
Fungsi Pengurangan
tampil(data.angka1 - data.angka2);Operator - digunakan untuk menghitung selisih dua angka.
Fungsi Perkalian
tampil(data.angka1 * data.angka2);Operator * digunakan untuk mengalikan dua angka.
Fungsi Pembagian
tampil(data.angka1 / data.angka2);Operator / digunakan untuk melakukan pembagian.
Pada contoh di atas juga terdapat validasi agar pengguna tidak membagi angka dengan nol.
Cara Kerja Program
Alur kerja kalkulator sederhana ini adalah sebagai berikut.
- Pengguna memasukkan dua angka.
- Pengguna memilih operasi matematika.
- JavaScript mengambil nilai dari input.
- Nilai diubah menjadi angka menggunakan
parseFloat(). - Program melakukan proses perhitungan.
- Hasil langsung ditampilkan pada halaman.
Semua proses dilakukan tanpa me-refresh browser.
Contoh Hasil Penggunaan
Penjumlahan
Angka Pertama : 10
Angka Kedua : 5
Hasil : 15Pengurangan
Angka Pertama : 20
Angka Kedua : 7
Hasil : 13Perkalian
Angka Pertama : 8
Angka Kedua : 4
Hasil : 32Pembagian
Angka Pertama : 24
Angka Kedua : 6
Hasil : 4Mengembangkan Kalkulator Menjadi Lebih Lengkap
Setelah berhasil membuat kalkulator sederhana, Anda dapat menambahkan berbagai fitur menarik, seperti:
- Tombol Clear (C)
- Tombol Delete
- Operasi persen (%)
- Operasi pangkat
- Operasi akar kuadrat
- Riwayat perhitungan
- Tampilan dark mode
- Keyboard shortcut
- Desain responsif untuk perangkat mobile
Dengan menambahkan fitur tersebut, Anda akan semakin memahami konsep JavaScript dan pengembangan antarmuka pengguna.
Kesalahan yang Sering Dilakukan Pemula
Berikut beberapa kesalahan yang sering terjadi saat membuat kalkulator.
Tidak Mengubah Input Menjadi Angka
Jika tidak menggunakan parseFloat(), JavaScript akan menganggap nilai input sebagai teks.
Contoh:
"10" + "5"Output:
105Padahal yang diharapkan adalah:
15Salah Menulis ID HTML
Pastikan ID pada HTML sama persis dengan yang dipanggil pada JavaScript.
HTML:
<input id="angka1">JavaScript:
document.getElementById("angka1")Lupa Menghubungkan File JavaScript
Pastikan terdapat kode berikut sebelum tag </body>.
<script src="script.js"></script>Tidak Menangani Pembagian Nol
Jika pengguna membagi dengan angka nol, tampilkan pesan kesalahan agar aplikasi tetap berjalan dengan baik.
Tips Belajar JavaScript Melalui Proyek Kalkulator
Agar kemampuan Anda berkembang lebih cepat, cobalah beberapa tantangan berikut.
- Tambahkan operasi modulo (
%). - Tambahkan tombol reset.
- Gunakan CSS Grid agar tata letak tombol lebih rapi.
- Buat tampilan seperti kalkulator pada smartphone.
- Tambahkan efek animasi saat tombol ditekan.
- Simpan riwayat perhitungan menggunakan Local Storage.
Semakin sering Anda mengembangkan proyek sederhana seperti ini, semakin baik pemahaman Anda terhadap JavaScript.
Kesimpulan
Tutorial membuat kalkulator sederhana menggunakan JavaScript merupakan salah satu latihan terbaik bagi pemula yang ingin memahami dasar-dasar pemrograman web. Melalui proyek ini, Anda belajar menggabungkan HTML sebagai struktur, CSS sebagai tampilan, dan JavaScript sebagai logika aplikasi.
Selain memahami operasi matematika dasar, Anda juga mempelajari manipulasi DOM, event, fungsi, validasi input, dan cara menampilkan hasil secara dinamis. Setelah menguasai proyek ini, Anda dapat mengembangkannya menjadi kalkulator ilmiah atau aplikasi web interaktif lainnya.
