Cara Membuat Kalkulator Sederhana Menggunakan HTML, CSS dan JavaScript

Artikel ini membahas membua sebuah program kalkulator sederhana dengan HTML dan JavaScript kemudian di hias menggunakan CSS.

Dari sekian banyak pertanyaan dan permintaan teman teman,
Apa bisa bikin aplikasi kalkulator pake html?
Gimana sih cara membuat kalkulator pake html?
Kak, tolong bikinin aplikasi kalkulator sederhana menggunakan html dong..

dan masih banyak lagi pertanyaan lainnya yang muncul mengenai kasus ini. Nah dengan artikel ini saya akan membantu menuntaskan jawaban dari pertanyaan teman-teman yang penasaran tersebut.

(?) Lalu, Apakah bisa?

(+) Of Course.

Tapi jika dibilang untuk membuat kalkulator hanya menggunakan html saja maka tentu saja tidak bisa, karena kita akan membutuhkan aritmatika dalam membuat aplikasi kalkulator ini. Yakni membutuhkan sedikit bantuan bahasa pemrograman JavaScript untuk melakukan perhitungan. Nah sedangkan seperti kita ketahui bahwa HML merupakan (Hypertext Markup Language) dari kepanjangannya bila diartikan ialah bahasa tanda.

Jika perlu dijelaskan sedikit.

Apa itu HTML?

ialah bahasa markah yang digunakan untuk membuat sebuah halaman website atau bisa dikatakan membuat pondasi sebuah website. Dan tentu saja tidak bisa digunakan menghitung aritmatik/logika seperti bahasa lainnya PHP,C++, JAVA dsb.

Oke, sekarang balik lagi ke studi kasus cara membuat kalkulator sederhana menggunakan html. Nah, membuat kalkulator kan memerlukan perhitungan aritmatika dimana akan terjadi perhitungan angka seperti penjumlahan, pengurangan, perkalian, pembagian dan lainnya. Maka dari itu disini saya akan menggunakan sedikit bantuan dari JavaScript.

Apa itu JavaScript?

Javascript adalah bahasa pemrogaman tingkat tinggi dan dinamis yang bisa disisipkan pada halaman web dengan menggunakan tag <script> pelajari lebih lanjut bahasa pemrograman JavaScript..

Kita bisa mengkolaborasikan html dan javascript untuk membuat sebuah aplikasi kalkulator sederhana inidan juga tidak melupakan peran CSS yang akan menghiasi tampilan kalkulator agar lebih menarik.

Program Kalkulator Sederhana Menggunakan HTML, CSS dan Javascript

Langsung saja, silahkan copy koding berikut pada teks editor anda notepad, sublime dsb lalu jangan lupa save file-nya dengan format .html

<html> <head> <title>Calculator </title> <style> body{ background:gray; } *{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .wrap{ width:400px; margin:auto; height:auto; background: linear-gradient(50deg, #B000EA,black); padding:15px; border-radius: 10px; box-shadow: 1px 5px 10px black } input[type=text]{ width:80%; padding:10px; font-size:22px; font-height:bold; margin-top:20px; border-radius:5px; } input[type=button]{ width:70px; padding:10px; font-size:22px; font-height:bold; border-radius:5px; } #del{ width:60%; } </style> </head> <div class=”Wrap”> <form name =”cal”> <input type=”text” name =”display”> <br><br> <input type=”button” value =”9″ onclick =”cal.display.value+=’9′”> <input type=”button” value =”8″ onclick =”cal.display.value+=’8′”> <input type=”button” value =”7″ onclick =”cal.display.value+=’7′”> <input type=”button” value =”+” onclick =”cal.display.value+=’+'”> <br><br> <input type=”button” value =”6″ onclick =”cal.display.value+=’6′”> <input type=”button” value =”5″ onclick =”cal.display.value+=’5′”> <input type=”button” value =”4″ onclick =”cal.display.value+=’4′”> <input type=”button” value =”-” onclick =”cal.display.value+=’-‘”> <br><br> <input type=”button” value =”3″ onclick =”cal.display.value+=’3′”> <input type=”button” value =”2″ onclick =”cal.display.value+=’2′”> <input type=”button” value =”1″ onclick =”cal.display.value+=’1′”> <input type=”button” value =”” onclick =”cal.display.value+=””> <br><br> <input type=”button” value =”0″ onclick =”cal.display.value+=’0′”> <input type=”button” value =”/” onclick =”cal.display.value+=’/'”> <input type=”button” value =”%” onclick =”cal.display.value+=’%'”> <input type=”button” value =”=” onclick =”cal.display.value =eval(cal.display.value)”> <br><br> <input type=”button” value =”DELETE” onclick =”cal.display.value=”” id=”del”> <input type=”button” value =”.” onclick =”cal.display.value+=’.'”> </form> <body> </body> </html>

Hasilnya akan seperti gambar dibawah ini.

Demo Kalkulator Sederhana Menggunakan HTML dan JavaScript

Nah, dari koding membuat kalkulator dengan JavaScrritp diatas kira-kira akan jadi seperti ini.