Cara Membuat Calculator Menggunakan HTML

Html - Kalkulator adalah salah satu proyek sederhana namun bermanfaat untuk dipelajari ketika belajar pemrograman web. Dengan membuat kalkulator, kita bisa memahami struktur HTML, penggunaan CSS untuk tampilan, serta JavaScript untuk logika perhitungan. Berikut adalah langkah-langkahnya :

Membuat Struktur Dasar HTML
Buka teks editor (misalnya VS Code atau Notepad++) dan buat file baru bernama index.html. Tuliskan struktur dasar HTML 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>
</head>
<body>
<h2>Kalkulator Sederhana</h2>


<input type="text" id="hasil" disabled>


<div>
<button onclick="hapus()">C</button>
<button onclick="tambahInput('7')">7</button>
<button onclick="tambahInput('8')">8</button>
<button onclick="tambahInput('9')">9</button>
<button onclick="tambahInput('+')">+</button><br>

<button onclick="tambahInput('4')">4</button>
<button onclick="tambahInput('5')">5</button>
<button onclick="tambahInput('6')">6</button>
<button onclick="tambahInput('-')">-</button><br>

<button onclick="tambahInput('1')">1</button>
<button onclick="tambahInput('2')">2</button>
<button onclick="tambahInput('3')">3</button>
<button onclick="tambahInput('*')">×</button><br>

<button onclick="tambahInput('0')">0</button>
<button onclick="tambahInput('.')">.</button>
<button onclick="hitung()">=</button>
<button onclick="tambahInput('/')">÷</button>
</div>

<script src="script.js"></script>
</body>
</html>
Menambahkan CSS (Opsional, Agar Lebih Rapi)
Tambahkan bagian <style> di dalam <head> agar tampilan lebih menarik :

<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#hasil {
width: 200px;
height: 40px;
font-size: 20px;
margin-bottom: 10px;
text-align: right;
}
button {
width: 45px;
height: 45px;
margin: 5px;
font-size: 18px;
cursor: pointer;
}
</style>
Membuat File JavaScript
Sekarang buat file baru bernama script.js untuk logika kalkulator.

let layar = document.getElementById("hasil");

// Fungsi menambah input ke layar
function tambahInput(angka) {
layar.value += angka;
}

// Fungsi menghitung hasil
function hitung() {
try {
layar.value = eval(layar.value); // gunakan eval untuk menghitung ekspresi
} catch {
layar.value = "Error";
}
}

// Fungsi hapus (clear)
function hapus() {
layar.value = "";
}
Menjalankan Kalkulator
Simpan semua file (index.html dan script.js) di dalam satu folder.
Buka file index.html menggunakan browser (Chrome, Firefox, atau lainnya).
Anda bisa mencoba menghitung angka dengan menekan tombol pada layar.
Kesimpulan
Dengan mengikuti langkah di atas, kita berhasil membuat kalkulator sederhana hanya dengan HTML, CSS, dan JavaScript.
👉 Dari proyek ini, kita belajar:
HTML untuk membuat struktur tombol dan layar.
CSS untuk mempercantik tampilan.
JavaScript untuk menjalankan logika perhitungan.

Kalkulator ini bisa dikembangkan lebih lanjut, misalnya menambah fitur hapus satu digit (backspace), riwayat perhitungan, atau tema gelap/terang.

Cara Membuat Calculator Menggunakan HTML

No comments