Membuat Kalkulator Sederhana dengan Javascript

Hallo gan, selamat datang di website kami (ilmukita) dan terimakasih telah berkunjung. Di artikel ini kita akan belajar contoh dari implementasi operator aritmatika yaitu membuat kalkulator sederhana dengan Javascript. Berikut langkah-langkahnya.

Membuat kalkulator sederhana dengan Javascript

• Buat folder baru dengan nama KalkulatorSederhanaJS
• Buat file baru dengan nama style.css kemudian simpan di folder KalkulatorSederhanaJS lalu isikan source code berikut :
  
  CSS

  table { border : none; border-collapse: collapse; } td{ padding: 5px; border: none; } input[type=text]{ padding: 10px; width: 410px; border-style: solid; text-align: right; font-size: 16px; } input[type=text]:disabled{ background-color: white; } .btn { width: 100px; height: 40px; background-color: #4CAF50; border: none; color: white; padding: 10px; font-size: 16px; cursor: pointer; } .opr{ background-color: #555555; } .clr{ background-color: #f44336;; } .hsl{ background-color: #008CBA; }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

  table { border : none; border-collapse: collapse; } td{ padding: 5px; border: none; } input[type=text]{ padding: 10px; width: 410px; border-style: solid; text-align: right; font-size: 16px; } input[type=text]:disabled{ background-color: white; } .btn { width: 100px; height: 40px; background-color: #4CAF50;     border: none;     color: white;     padding: 10px;     font-size: 16px;     cursor: pointer; } .opr{ background-color: #555555; } .clr{ background-color: #f44336;; } .hsl{ background-color: #008CBA; }

• Buat file baru dengan nama kalkulator.js kemudian simpan di folder KalkulatorSederhanaJS  lalu isikan source code berikut :
  
  JavaScript

  var bil1; var bil2; var hasil; var opr; var opr_seleksi = false; function btn(angka) { var display = document.getElementById("output").value; if (display == "0") { display = angka; } else { display += angka; } document.getElementById("output").value = display; } function clr() { document.getElementById("output").value = "0"; bil1 = 0; bil2 = 0; opr_seleksi = false; } function koma() { var display = document.getElementById("output").value; if (display.includes(".") == false) { display += "."; } document.getElementById("output").value = display; } function btn_opr(o) { opr_seleksi = true; bil1 = parseFloat(document.getElementById("output").value); opr = o; document.getElementById("output").value = "0"; } function hitung() { if (opr_seleksi == true) { bil2 = parseFloat(document.getElementById("output").value); switch(opr){ case 1 : hasil = bil1 * bil2; document.getElementById("output").value = hasil; break; case 2 : hasil = bil1 / bil2; document.getElementById("output").value = hasil; break; case 3 : hasil = bil1 - bil2; document.getElementById("output").value = hasil; break; case 4 : hasil = bil1 + bil2; document.getElementById("output").value = hasil; break; } opr_seleksi = false hasil = 0; bil1 = 0; bil2 = 0; } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

  var bil1; var bil2; var hasil; var opr; var opr_seleksi = false; function btn(angka) { var display = document.getElementById("output").value; if (display == "0") { display = angka; } else { display += angka; } document.getElementById("output").value = display; }   function clr() { document.getElementById("output").value = "0"; bil1 = 0; bil2 = 0; opr_seleksi = false; }   function koma() { var display = document.getElementById("output").value; if (display.includes(".") == false) { display += "."; } document.getElementById("output").value = display; }   function btn_opr(o) { opr_seleksi = true; bil1 = parseFloat(document.getElementById("output").value); opr = o; document.getElementById("output").value = "0"; }   function hitung() { if (opr_seleksi == true) { bil2 = parseFloat(document.getElementById("output").value); switch(opr){ case 1 : hasil = bil1 * bil2; document.getElementById("output").value = hasil; break; case 2 : hasil = bil1 / bil2; document.getElementById("output").value = hasil; break; case 3 : hasil = bil1 - bil2; document.getElementById("output").value = hasil; break; case 4 : hasil = bil1 + bil2; document.getElementById("output").value = hasil; break; } opr_seleksi = false hasil = 0; bil1 = 0; bil2 = 0; } }

• Buat file baru dengan nama kalkulatorJS.html kemudian simpan di folder KalkulatorSederhanaJS lalu isikan source code berikut :
  
  XHTML

  <!DOCTYPE html> <html> <head> <title>ilmukita.org</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <table> <tr> <td colspan="5"> <input type="text" disabled id="output" value="0"> </td> </tr> <tr> <td><button class="btn" onclick="btn('1')">1</button></td> <td><button class="btn" onclick="btn('2')">2</button></td> <td><button class="btn" onclick="btn('3')">3</button></td> <td><button class="btn opr" onclick="btn_opr(1)">*</button></td> </tr> <tr> <td><button class="btn" onclick="btn('4')">4</button></td> <td><button class="btn" onclick="btn('5')">5</button></td> <td><button class="btn" onclick="btn('6')">6</button></td> <td><button class="btn opr" onclick="btn_opr(2)">/</button></td> </tr> <tr> <td><button class="btn" onclick="btn('7')">7</button></td> <td><button class="btn" onclick="btn('8')">8</button></td> <td><button class="btn" onclick="btn('9')">9</button></td> <td><button class="btn opr" onclick="btn_opr(3)">-</button></td> </tr> <tr> <td><button class="btn" onclick="btn('0')">0</button></td> <td><button class="btn" onclick="koma()">.</button></td> <td><button class="btn clr" onclick="clr()">C</button></td> <td><button class="btn opr" onclick="btn_opr(4)">+</button></td> </tr> <tr> <td colspan="5"><button class="btn hsl" style="width: 100%" onclick="hitung()">=</button></td> </tr> </table> <script type="text/javascript" src="kalkulator.js"></script> </body> </html>

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

  <!DOCTYPE html> <html> <head> <title>ilmukita.org</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <table> <tr> <td colspan="5"> <input type="text" disabled id="output" value="0"> </td> </tr> <tr> <td><button class="btn" onclick="btn('1')">1</button></td> <td><button class="btn" onclick="btn('2')">2</button></td> <td><button class="btn" onclick="btn('3')">3</button></td> <td><button class="btn opr" onclick="btn_opr(1)">*</button></td> </tr> <tr> <td><button class="btn" onclick="btn('4')">4</button></td> <td><button class="btn" onclick="btn('5')">5</button></td> <td><button class="btn" onclick="btn('6')">6</button></td> <td><button class="btn opr" onclick="btn_opr(2)">/</button></td> </tr> <tr> <td><button class="btn" onclick="btn('7')">7</button></td> <td><button class="btn" onclick="btn('8')">8</button></td> <td><button class="btn" onclick="btn('9')">9</button></td> <td><button class="btn opr" onclick="btn_opr(3)">-</button></td> </tr> <tr> <td><button class="btn" onclick="btn('0')">0</button></td> <td><button class="btn" onclick="koma()">.</button></td> <td><button class="btn clr" onclick="clr()">C</button></td> <td><button class="btn opr" onclick="btn_opr(4)">+</button></td> </tr> <tr> <td colspan="5"><button class="btn hsl" style="width: 100%" onclick="hitung()">=</button></td> </tr> </table> <script type="text/javascript" src="kalkulator.js"></script> </body> </html>

  
   

Untuk melihat hasilnya buka file kalkulatorJS.html di browser.

Download source code membuat kalkulator sederhana dengan Javascript disini

pass : ilmukita.org