Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Membuat kalkulator dengan HTML bisa menjadi proyek yang menarik dan edukatif, terutama bagi mereka yang sedang belajar bahasa pemrograman web. Dalam artikel ini, kita akan membahas cara membuat kalkulator sederhana menggunakan HTML, sekaligus memberikan pemahaman dasar tentang HTML dan JavaScript.
Sebelum memulai, pastikan kamu telah memahami dasar-dasar HTML dan JavaScript. Jika belum, ada banyak tutorial online yang bisa kamu pelajari.
Pertama-tama, buka text editor favorit kamu mungkin Visual Studio Code, Sublime Text, atau editor lainnya. Buat file baru dan beri nama “kalkulator.html”. Kamu juga bisa menamai file ini dengan apa pun yang kamu suka, selama itu berakhiran “.html”.
Ketik kode berikut di dalam file:
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Sederhana</title>
</head>
<body>
</body>
</html>Itu adalah struktur dasar dari sebuah halaman web.
Nah, mari kita mulai membuat form kalkulator kita. Tambahkan kode berikut di dalam tag <body>:
<form>
<input type="text" id="angka1" placeholder="Angka pertama">
<input type="text" id="angka2" placeholder="Angka kedua">
<button type="button" id="hitung">Hitung</button>
</form>Pada kode di atas, kita memiliki dua inputan untuk angka dan satu tombol untuk melakukan perhitungan.
Untuk membuat kalkulator kita berfungsi, kita perlu menambahkan JavaScript.
Tambahkan kode berikut tepat sebelum tag penutup </body>:
<script>
document.getElementById('hitung').addEventListener('click', function() {
var angka1 = document.getElementById('angka1').value;
var angka2 = document.getElementById('angka2').value;
var hasil = Number(angka1) + Number(angka2);
alert("Hasil: " + hasil);
});
</script>Pada kode di atas, kita mengambil nilai dari kedua inputan angka, kemudian mengubahnya menjadi tipe data number dan menjumlahkannya. Hasil penjumlahan akan ditampilkan dalam bentuk alert.
Itulah cara membuat kalkulator sederhana menggunakan HTML dan JavaScript. Semoga dengan mempraktekkan langkah-langkah ini, kamu bisa semakin memahami cara kerja HTML dan Javascript.
Selalu ingat, pemrograman itu seperti puzzle. Semakin banyak kamu mempraktekkan dan memecahkan kode, semakin baik keahlian pemrograman kamu. Selamat mencoba!
Link terkait: