Membuat Kalkulator Dengan Javascript

Capture

Asalamualaikum Wr Wb.

Udah lama banget gak bikin tutorial, sebenernya setiap kali nongkrong di wc selalu kepikiran bikin tutorial, karena gue percaya dengan cara membuat tutorial / berbagi ilmu kepada orang lain, kelak gue juga bakal dapet ilmu baru dari orang lain. Oke cukup basa basinya !

Untuk membuat kalkulator dengan javascript, kita menggunakan bahasa dasar HTML. Silahkan buka editor apapun yang kalian suka, gue pakai sublime text.

Langkah awal adalah membuat desain, ini code nya.

<input type="text" id="bilangan1"/>     
<input type="text" id="bilangan2"/>    
<button>Tambah</button>    
<button>Kurang</button>    
<button>Kali</button>    
<button>Bagi</button>    
<h2 id="hasil">0</h2>
</body>

Dan setelah itu kita membuat Script di bagian head

 


dan kemudian tambahkan event pada setiap button

 



hingga semua code terlihat seperti ini

<!DOCTYPE HTML>

<html>

<head>

    <title>Membuat Kalkulator Dengan Javascript</title>

    <script type="text/javascript">

        function tambah(val1, val2){

            var hasil;

            hasil=parseInt(val1)+parseInt(val2);

            document.getElementById("hasil").innerHTML=hasil;

        }

        function kurang(val1, val2){

            var hasil;

            hasil=parseInt(val1)-parseInt(val2);

            document.getElementById("hasil").innerHTML=hasil;

        }

        function kali(val1, val2){

            var hasil;

            hasil=parseInt(val1)*parseInt(val2);

            document.getElementById("hasil").innerHTML=hasil;

        }

        function bagi(val1, val2){

            var hasil;

            hasil=parseInt(val1)/parseInt(val2);

            document.getElementById("hasil").innerHTML=hasil;

        }

    </script>

</head>

<body>

    <input type="text" id="bilangan1"/>

    <br>

    <input type="text" id="bilangan2"/>

    <br>

    <button onclick=tambah(bilangan1.value,bilangan2.value)>Tambah</button>

    <button onclick=kurang(bilangan1.value,bilangan2.value)>Kurang</button>

    <button onclick=kali(bilangan1.value,bilangan2.value)>Kali</button>

    <button onclick=bagi(bilangan1.value,bilangan2.value)>Bagi</button>

    <br>

    <h2 id="hasil">0</h2>

</body>

</html>

Simpan dengan nama apapun dengan ektensi .html, contoh “kalkulator.html” tanpa tanda kutip. dan tampilan ketika di jalankan akan menjadi seperti gambar dibawah ini.Capture

Download Source Code Disini Kalkulator Dengan Javascript.rar


Selamat mencoba dan semoga berhasil Winking smile


Wasalam.