<!-- -- Uploaded on : https://haxor.my.id/open/Kalkulatorv2.html -- Official Web : https://prinsh.com -- script-deface-generator.prinsh.com --> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Kalkulator</title> <style> * { font-family: 'Times New Roman', Times, serif; } .judul { border: 0px solid black; position: relative; height: 160px; } #kal { text-align: center; font-size: 90px; margin: 30px 0 10px 0; position: absolute; right: auto; left: 100px; z-index: 1; transition: 4s; } .judul:hover #kal { opacity: 0; transition: 1s; } #co { text-align: center; font-size: 90px; margin: 30px 0 5px 0; color: #dadada; position: absolute; right: auto; left: 220px; transition: 1s; } .judul:hover #co { color: black; transition: 3s; } .button { width: 180px; height: 180px; border-radius: 100px; border: none; background-color: white; box-shadow: 0 0 0px; font-size: 90px; color :red; transition: 2s; outline:none; } .buttona { width: 180px; height: 180px; border-radius: 100px; border: none; background-color: #4f4f4f; box-shadow: 0 0 0px; font-size: 90px; color :red; transition: 2s; outline:none; } .buttona:hover { background-color: white; transition: 1ms; } .button:hover { background-color: #4f4f4f; transition: 1ms; } .hasil { width: 180px; height:360px; border-radius: 100px; border: none; background-color: #4f4f4f; box-shadow: 0 0 0px black; font-size: 90px; color: red; transition: 5s; outline:none; } .hasil:hover { background-color: #680000; color: black; transition: 1ms; } .fform { text-align: center; margin-bottom: 20px; } .area { width: 750px; height: 140px; text-align: center; border: 2px solid white; border-radius: 100px; outline: none; font-size:90px; box-shadow: 0 0 5px; } .main { margin: 50px auto; border: 5px solid #dadada; width: 850px; height: 1300px; background-color: #dadada; border-radius: 150px; box-shadow: 0 0 20px; } .container { margin:100px auto; } table { margin:0 auto; } </style> </head> <body> <div class="container"> <div class="main"> <div class="judul"> <h2 id="kal">KALKULATOR</h2> <h2 id="co">CONEFO</h2> </div> <form name="fform" class="fform"> <input type="textarea" name="textarea" class="area"> </form> <table> <tr> <td><input type="button" class="buttona" value="C" onclick="clean()" ></td> <td><input type="button" class="buttona" value="<" onclick="back()" ></td> <td><input type="button" class="buttona" value="/" onclick="insert(' / ')" ></td> <td><input type="button" class="buttona" value="x" onclick="insert(' * ')" ></td> </tr> <tr> <td><input type="button" class="button" value="7" onclick="insert(7)"></td> <td><input type="button" class="button" value="8" onclick="insert(8)"></td> <td><input type="button" class="button" value="9" onclick="insert(9)"></td> <td><input type="button" class="buttona" value="-" onclick="insert(' - ')" ></td> </tr> <tr> <td><input type="button" class="button" value="4" onclick="insert(4)"></td> <td><input type="button" class="button" value="5" onclick="insert(5)"></td> <td><input type="button" class="button" value="6" onclick="insert(6)"></td> <td><input type="button" class="buttona" value="+" onclick="insert(' + ')" ></td> </tr> <tr> <td><input type="button" class="button" value="1" onclick="insert(1)"></td> <td><input type="button" class="button" value="2" onclick="insert(2)"></td> <td><input type="button" class="button" value="3" onclick="insert(3)"></td> <td rowspan="2"><input type="button" class="hasil" value="=" onclick="equal()"></td> </tr> <tr> <td><input type="button" class="button" value="0" onclick="insert(0)"></td> <td><input type="button" class="button" value="00" onclick="insert('00')"></td> <td><input type="button" class="button" value="." onclick="insert('.')"></td> </tr> </table> </div> </div> <script> //insert angka ke textarea function insert(num) { document.fform.textarea.value = document.fform.textarea.value + num; } //fungsi hitung function equal() { var hasil = document.fform.textarea.value; document.fform.textarea.value = eval(hasil); if ( isNaN (document.fform.textarea.value) ) { document.fform.textarea.value = 0.0; } } //clean function clean() { var hapus = ""; document.fform.textarea.value = hapus; } // delete function back() { var hasil = document.fform.textarea.value; document.fform.textarea.value = hasil.substring(0,hasil.length-1) } </script> </body> </html>