Berandateknologi webMembuat Program Kalkulator Sederhana Dengan Javascript
JAVASCRIPT
Pada artikel ini saya akan membuat sebuah program kalkulator sederhana dengan bahasa pemrograman javascript. pada artikel sebelumnya saya telah membuat program copy text dengan bahasa pemrograman javascript kamu bisa di lihat di sini. program yang saya buat nanti bisa di modifikasi lagi oleh kamu yah dan sebagai referensi juga dalam belajar bahasa pemrograman javascript.
Kamu buat dengan file HTML nya dengan nama index.html
<!doctype html> <html lang="en"> <head> <title>Kalkulator Sederhana Javascript</title> </head> <body> <br> <br> <br> <!--Buat sebuah tombol --> <center> <form method="post" action=""> <!-- Buat label nilai 1--> <label for="nilai1">Nilai 1</label> <!-- Buat kolom masukkan --> <input type="text" id="nilai1" autocomplete="off"> <!-- Buat label nilai 2--> <label for="nilai2">Nilai 2</label> <!-- Buat kolom masukkan--> <input type="text" id="nilai2" autocomplete="off"> <!-- Buat spasi--> <br> <br> <br> <!-- Buat label hasil--> <label for="hasil">Hasil</label> <!-- Buat kolom masukkan untuk hasil--> <input type="text" id="hasil"> <!-- Buat spasi--> <br> <br> <br> <!-- Buat tombol--> <button type="button" id="tambah">+</button> <button type="button" id="kurang">-</button> <button type="button" id="kali">x</button> <button type="button" id="bagi">/</button> <button type="button" id="reset">reset</button> </form> </center> <script src="script.js"></script> </body> </html>Setelah itu buat file javascript nya dengan nama script.js
Nah program yang saya buat di atas bisa di lihat di sini. semoga bermanfaat :D
Kembali lagi dengan saya temen-temen. Pada artikel kali ini saya akan membagikan kode lengkap dan sederhana bagaimana cara membuat kalkulator menggunakan HTML, CSS, dan Javascript.
Kode ini sangat sederhana sekali namun sudah memiliki fitur kalkulator yang sangat memadai. Di sini untuk text editornya saya menggunakan Visual Studio Code serta Firefox sebagai browsernya.
Berikut untuk script lengkapnya dan jika ada yang belum jelas bisa menonton videonya di atas.
<html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Kalkulator</title> <style> * { margin: 0; padding: 0; } .btn { width: 6em; height: 6em; margin: 0.2em; border: none; cursor: pointer; } #viewer { width: 25.7em; height: 4em; margin: 0.3em; padding: 0.1em 0.8em; } #main { background: linear-gradient(to right, rgb(90, 20, 20), rgb(10, 8, 110)); height: 100%; } form { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } </style> </head> <body> <div id="main"> <form> <input type="text" id="viewer" /> <table> <tr> <td> <input type="button" value="C" class="btn" title="clean()" /> </td> <td> <input type="button" value="DEL" class="btn" title="backspace()" /> </td> <td> <input type="button" value="/" class="btn" title="view('/')" /> </td> <td> <input type="button" value="X" class="btn" title="view('*')" /> </td> </tr> <tr> <td> <input type="button" value="7" class="btn" title="view(7)" /> </td> <td> <input type="button" value="8" class="btn" title="view(8)" /> </td> <td> <input type="button" value="9" class="btn" title="view(9)" /> </td> <td> <input type="button" value="-" class="btn" title="view('-')" /> </td> </tr> <tr> <td> <input type="button" value="4" class="btn" title="view(4)" /> </td> <td> <input type="button" value="5" class="btn" title="view(5)" /> </td> <td> <input type="button" value="6" class="btn" title="view(6)" /> </td> <td> <input type="button" value="+" class="btn" title="view('+')" /> </td> </tr> <tr> <td> <input type="button" value="1" class="btn" title="view(1)" /> </td> <td> <input type="button" value="2" class="btn" title="view(2)" /> </td> <td> <input type="button" value="3" class="btn" title="view(3)" /> </td> <td rowspan="2"> <input type="button" value="=" class="btn" title="equal()" style="height: 12.4em;" /> </td> </tr> <tr> <td> <input type="button" value="0" class="btn" title="view('0')" /> </td> <td> <input type="button" value="000" class="btn" title="view('000')" /> </td> <td> <input type="button" value="." class="btn" title="view('.')" /> </td> </tr> </table> </form> </div> <script> function view(val) { document.getElementById("viewer").value += val; } function clean() { document.getElementById("viewer").value = ""; } function backspace() { var val = document.getElementById("viewer").value; document.getElementById("viewer").value = val.substring( 0, val.length - 1 ); } function equal() { var val = document.getElementById("viewer").value; if (val) { document.getElementById("viewer").value = eval(val); } } </script> </body> </html>Semoga Bermanfaat …