General
Membuat Kalkulator Sederhana (HTML, CSS, JS)
Oleh Admin
7 September 2025
4 min baca
Belajar bikin kalkulator adalah latihan yang pas buat pemula. Di sini kita mulai dengan HTML + CSS + JavaScript dasar, lalu kita upgrade ke Bootstrap biar tampilannya lebih modern dan responsif 🚀
1. Kalkulator dengan HTML, CSS, dan JavaScript
Struktur HTML
Kita buat file index.html dengan kerangka kalkulator.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Kalkulator Sederhana</title>
...
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
...
</div>
</body>
</html>
Penjelasan:
input→ tempat menampilkan angka dan hasil.- Tombol angka → memanggil fungsi
append(). - Tombol C → memanggil
clearDisplay(). - Tombol = → memanggil
calculate()dengan fungsieval().
2. Upgrade ke Bootstrap
Sekarang kita bikin versi yang sama tapi dengan Bootstrap 5 biar lebih modern dan responsif.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Kalkulator Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light d-flex justify-content-center align-items-center vh-100">
<div class="card shadow p-4" style="width:320px;">
<h4 class="text-center mb-3">Kalkulator Bootstrap</h4>
<input type="text" id="display2" class="form-control mb-3 text-end" disabled>
<div class="row g-2">
<div class="col-3"><button class="btn btn-danger w-100" onclick="clearDisplay2()">C</button></div>
<div class="col-3"><button class="btn btn-primary w-100" onclick="append2('/')">/</button></div>
<div class="col-3"><button class="btn btn-primary w-100" onclick="append2('*')">*</button></div>
<div class="col-3"><button class="btn btn-primary w-100" onclick="append2('-')">-</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="append2('7')">7</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="append2('8')">8</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="append2('9')">9</button></div>
<div class="col-3"><button class="btn btn-primary w-100" onclick="append2('+')">+</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="append2('4')">4</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="append2('5')">5</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="append2('6')">6</button></div>
<div class="col-3"><button class="btn btn-success w-100" onclick="calculate2()">=</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="append2('1')">1</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="append2('2')">2</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="append2('3')">3</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="append2('0')">0</button></div>
</div>
</div>
<script>
let display2 = document.getElementById("display2");
function append2(value) {
display2.value += value;
}
function clearDisplay2() {
display2.value = "";
}
function calculate2() {
try {
display2.value = eval(display2.value);
} catch {
display2.value = "Error";
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output
Perbedaan dengan versi CSS manual:
- Tampilan langsung rapi berkat class
.btn,.row,.coldari Bootstrap. - Responsif → grid Bootstrap bikin layout tetap bagus di HP.
- Lebih cepat styling tanpa banyak nulis CSS.
Kesimpulan
Dari artikel ini, lo udah belajar:
- Struktur kalkulator sederhana dengan HTML + CSS + JavaScript
- Bagaimana tombol bekerja dengan fungsi JS (append, clear, calculate)
- Cara upgrade tampilan pakai Bootstrap biar lebih modern & responsif
👉 Next step: coba tambahin fitur lanjutan, misalnya:
- Tombol persen (%)
- Riwayat perhitungan
- Tema gelap (dark mode)
