<!--
--  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>