بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Kalkulator bagi seseorang yang memang kurang ahli dalam perhitungan sangat diperlukan. Meski begitu, dalam dunia perkantoran terutama administasi keuangan, kalkulator tentu menjadi alat utama penunjang penghitung yang akurat.
Dalam dunia pemrograman juga sama yaitu kalkulator dibuat dengan bahasa pemrograman yang begitu rumit. Antara kode satu dengan lainnya saling berhubung tapi ada perbedaan. Ketika kita klik angka plus berarti tambah dan minus berarti pengurangan.
Baca Juga : Form Login Cantik Bergradient dengan Menggunakan Animasi CSS3
Dalam artikel ini kita mencoba membuat kalkulator online, saya sebut begitu karena disini kalkulator akan berada dihalaman blog yang kita punya. Sehingga ketika kita membutuhkan alat penghitung akurat, tinggal buka widget ini dan klik saja penghitungan yang kita mau. Maka hasil akan keluar dengan akurat.
Baca Juga : Generator Quote of The Day Berbahasa Inggris
Oke langsung saja ya kita buat kalkulatornya. Tapi meski masih belum lengkap tanpa sinus, cosinus, tangen. Kalkulator ini sudah bisa digunakan semestinya. Kalian mesti coba pasang ini nih.
Kalkulator Online Unik dengan Utak-atik Javascript
1. Langsung ke Tema
2. Pilih Sesuaikan : Edit HTML
3. Cari kode ]]></b:skin>. Kemudian tempelkan kode dibawah ini diatas kode ]]></b:skin> itu.
*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto Mono",monospace;}
body{height:100vh;background:linear-gradient(to bottom,#f9544c 50%,#090c31 50%);}
.calculator{width:400px;background-color:#15173c;padding:50px 30px;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;border-radius:8px;box-shadow:0 20px 50px rgba(0,5,24,0.4);}
.display{width:100%;}
.display input{width:100%;padding:15px 10px;text-align:right;border:none;background-color:transparent;color:#ffffff;font-size:35px;}
.display input::placeholder{color:#9490ac;}
.buttons{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:20px;margin-top:40px;}
.buttons input[type="button"]{font-size:20px;padding:17px;border:none;background-color:transparent;color:#ffffff;cursor:pointer;border-radius:5px;}
.buttons input[type="button"]:hover{box-shadow:0 8px 25px #000d2e;}
input[type="button"]#equal{grid-row:span 2;background-color:#f9544c;}
input[type="button"][]{grid-column:span 2;}4. Lanjut lagi. Cari kode </body>. Kode ini terletak di template juga, setelah ketemu taruh kode dibawah ini diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
let equal_pressed = 0;//Refer all buttons excluding AC and DEL
let button_input = document.querySelectorAll(".input-button");//Refer input,equal,clear and erase
let input = document.getElementById("input");let equal = document.getElementById("equal");let clear = document.getElementById("clear");let erase = document.getElementById("erase");window.onload = () =>{input.value = ""}
;//Access each class using forEach
button_input.forEach((button_class) =>{button_class.addEventListener("click",() =>{if (equal_pressed == 1){input.value = "";equal_pressed = 0;}
//display value of each button
input.value += button_class.value;}
);}
);//Solve the user's input when clicked on equal sign
equal.addEventListener("click",() =>{equal_pressed = 1;let inp_val = input.value;try{//evaluate user's input
let solution = eval(inp_val);//True for natural numbers
//false for decimals
if (Number.isInteger(solution)){input.value = solution;}
else{input.value = solution.toFixed(2);}}
catch (err){//If user has entered invalid input
alert("Invalid Input");}}
);//Clear Whole Input
clear.addEventListener("click",() =>{input.value = ""}
);//Erase Single Digit
erase.addEventListener("click",() =>{input.value = input.value.substr(0,input.value.length - 1);}
);
//]]>
</script>Setelah itu semua dilakukan saatnya sekarang taruh kode dibawah ini di Tata Letak. Tambah HTML - Javascript. Kodenya sebagai berikut ya. Tinggal copy paste aja disitu
<div class="calculator"><div class="display"><input type="text"placeholder="0"id="input"disabled /></div><div class="buttons"><!-- Full Erase --><input type="button"value="AC"id="clear"/><!-- Erase Single Value --><input type="button"value="DEL"id="erase"/><input type="button"value="/"class="input-button"/><input type="button"value="*"class="input-button"/><input type="button"value="7"class="input-button"/><input type="button"value="8"class="input-button"/><input type="button"value="9"class="input-button"/><input type="button"value="-"class="input-button"/><input type="button"value="6"class="input-button"/><input type="button"value="5"class="input-button"/><input type="button"value="4"class="input-button"/><input type="button"value="+"class="input-button"/><input type="button"value="1"class="input-button"/><input type="button"value="2"class="input-button"/><input type="button"value="3"class="input-button"/><input type="button"value="="id="equal"/><input type="button"value="0"class="input-button"/><input type="button"value="."class="input-button"/></div></div>Oke sudah khan? sekarang lihat blog kalian. Jadi khan? kalau memang belum jadi ya coba dipantengin satu-satu caranya dan kodenya yang ada disitu. Siapa tau kalian ketinggal satu huruf disitu. Ingat ya bahasa pemrograman harus lengkap penulisannya. Kurang satu saja huruf, tidak akan kebaca. Sehingga kalian harus teliti. Oke? terima kasih ya yang sudah membaca artikel Kalkulator Online Unik dengan Utak-atik Javascript.
Baca Juga : Kreasi Game Tic Tac Toe Menggunakan CSS3
Sekarang saya undur diri sejenak ya. Sehabis ini saya langsung lanjut lagi ke postingan berikutnya yang tak kalah menarik. Tapi sehabis istirahat, udah capek ini mata dan jari tangan. Mata melotot laptop, jari mengetik artikel yang panjang sepanjang kereta api Pramex hehe :D .. Sampai jumpa lagi. Wait the next article.
Label Postingan :
Tools
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Kalkulator Online Unik dengan Utak-atik Javascript . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
