Kalkulator memang semua kalangan dari SD sampai kuliah sudah banyak mengenal ada sudah mengethui apa itu kalkulator, ya, benar, kalkulator adalah sebuah alat bantu kita untuk menghitung sebuah angka, jadi kita tidak perlu repot-repot menghitung manual, dengan kalkulator kita tinggal memasukan sebuah angkanya lalu kita kita pilih operatornya tekan hasilnya maka akan keluar hasilnya, bagaimana sangat menarik ya, oke jangan kemana-mana simak terus ya teman-teman, cara membuat calculator sederhana menggunakan jquery.
oke kalkulator yang akan saya buat ini menggunakan jquery ya teman-teman, maka dari itu disini saya membuat judul dengan cara membuat calculator sederhana menggunakan jquery, jadi yang nanti saya buat adalah ada dua inputan di mana inputan yang satu dan dua itu adalah sebuah bilangan yang nanti kita akan esekusi, dan ada sebuah tag select dimana nanti select itu optionya saya masukan sebuah operatornya, oke langsung saja kita masuk contoh pembuatnya ya.
|
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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<!DOCTYPE html> <html> <head> <title>Cara Membuat Calculator Sederhana Menggunakan Jquery</title> <meta charset="utf-8"> <style type="text/css"> input{ width: 40px; height: 40px; background: #333; color: #fff; border: 2px solid red; padding: 5px; text-align: center; border-radius: 50%; font-weight: bold; font-size: 20px; } .operator{ padding: 3px; background: #333; color: #fff; font-weight: bold; font-size: 20px; text-align: center; position: relative; top: 50px; } #hitung{ position: relative; top: 50px; left: 0px; width: 180px; border-bottom-left-radius: 40px; border: 2px solid red; border-bottom-right-radius: 40px; padding: 5px; font-size: 20px; text-align: center; cursor: pointer; } #hitung:hover{ background: #000; color: #fff; } .container{ width: 300px; margin: auto; height: 300px; border-radius: 50%; border: 2px solid red; } .muka{ position: relative; top: 70px; left: 40px; } .demo { position: relative; top: 220px; left: 50px; } h1{text-align: center;} </style> </head> <body><h1>Cara Membuat Calculator Sederhana Menggunakan Jquery</h1> <div class="container"> <div class="muka"> <input class="bilangan1" type="text"></input> <select class="operator"> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> <option value="+">+</option> </select> <input class="bilangan2" type="text"></input> <br> <button id="hitung">Hitung</button> </div> <div class="demo"></div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#hitung").click(function(e){ e.preventDefault() var bilangan1 = parseInt($(".bilangan1").val()); var bilangan2 = parseInt($(".bilangan2").val()); // console.log(bilangan1); // console.log(bilangan2); function cek (){ operator = $(".operator").val(); if(operator === "*"){ var hasil = (bilangan1 * bilangan2); }else if(operator === "/"){ var hasil = (bilangan1 / bilangan2); }else if(operator === "+"){ var hasil = (bilangan1 + bilangan2); }else if(operator === "-"){ var hasil = (bilangan1 - bilangan2); } return hasil; } console.log(cek()) var output = $(".demo"); output.html(` Hasil dari operator <strong> ( ${operator} ) </strong> adalah = <strong> ${cek()} </strong>`) }) }) </script> </body> </html> |
Oiya sedikit memperunik jadi hasil dari sebuah calculator di atas sedikit saya gambar, supaya unik aja, hehe, oke jadi seperti ini hasilnya:
Seperti gambar wajah orang ya teman-teman, jadi mata itu kalian bisa input angkanya, dan hidung itu adalah pilihan operator yang teman-teman mau, dan mulut itu sebagai pengecekan dari bilangan di atas, oke saya rasa seperti itu saja belajar kita cara membuat calculator sederhana menggunakan jquery, saya harap teman-teman paham ya, dan semoga bermanfaat terimakasih.