DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MEMBUAT KALKULATOR DENGAN HTML

Artikel ini akan mengajarkan kamu cara membuat kalkulator sederhana menggunakan HTML. Jangan khawatir, instruksi akan diberikan langkah demi langkah agar mudah dimengerti.

Daftar Isi:

Persiapan Awal
Membuat Form Kalkulator
Menambahkan JavaScript
Penutup

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.

Persiapan Awal

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.

Membuat Form Kalkulator

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.

Menambahkan JavaScript

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>

Baca dokumentasi dan refrensi Javascript

Penjelasan Kode

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.

Penutup

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!


Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding