simple_cla.html

<html>
    <head>
        <link rel="stylesheet" type="text\css" href="C:\Users\Administrator\Desktop\JS\cla.css">
        <title>CALCULATOR</title>
        <script>
            function insert(num)
            {
                document.form.textview.value=document.form.textview.value+num
            }
            function equal()
            { var exp=document.form.textview.value
                if(exp){
                    document.form.textview.value=eval(exp)
                }
                
            }
            function clean()
            {
                document.form.textview.value="";
            }
            function back()
            {
                var exp=document.form.textview.value
                 document.form.textview.value=exp.substring(0,exp.length-1);
            }
        </script>
            <style>
              *{
                    padding: 0;
                    margin: 0;


              }
               .button
               {
                        width: 50px;
                        height: 50px;
                        font-size: 25;
                        margin: 2;
                        cursor: pointer; 
                        background:black;
                        border: none;
                        color: white;              
               }
               .textview
               {
                        width: 217px;
                        padding: 10px;
                        font-size: 25;
                        margin: 5;
                        border:crimson
                        color: #607d8b;
               }
               .main
               {
                   position: absolute;
                   top: 50%;
                   left: 50%;
                   transform: translateX(-50%) translateY(-50%);
                   background:orangered;

               }
               .bg
               {
                   background: linear-gradient(to right,black,rgb(23, 23, 78));
                   height: 100%;
                   box-shadow:lime;
               }
               #cal
               {
                   text-align: center;
                   font-family:Comic Sans MS, sans-serif;
                   font-size: 60px;
                   color: blanchedalmond;
                   height:
        
               }
            </style>
    </head>
    <body>
       
        <div class="bg">
            <h2 id="cal"><i>SIMPLE CALCULATOR</i></h2>
        </div>
       <div class="main">
           <form name="form">
               <input class="textview" name="textview">
           </form>
           <table>
               <tr>
                    <td><input class="button" type="button"value="C" onclick="clean()"></td>
                    <td><input class="button" type="button"value="<" onclick="back()"></td>
                    <td><input class="button" type="button"value="/" onclick="insert('/')"></td>
                    <td><input class="button" type="button"value="x" onclick="insert('*')"></td>
               </tr>
               <tr>
                    <td><input class="button" type="button"value="7" onclick="insert(7)"></td>
                    <td><input class="button" type="button"value="8" onclick="insert(8)"></td>
                    <td><input class="button" type="button"value="9" onclick="insert(9)"></td>
                    <td><input class="button" type="button"value="-" onclick="insert('-')"></td>
               </tr>
                <tr>
                    <td><input class="button" type="button"value="4" onclick="insert(4)"></td>
                    <td><input class="button" type="button"value="5" onclick="insert(5)"></td>
                    <td><input class="button" type="button"value="6" onclick="insert(6)"></td>
                    <td><input class="button" type="button"value="+" onclick="insert('+')"></td>
                </tr>
                <tr>
                    <td><input class="button" type="button"value="1" onclick="insert(1)"></td>
                    <td><input class="button" type="button"value="2" onclick="insert(2)"></td>
                    <td><input class="button" type="button"value="3" onclick="insert(3)"></td>
                    <td rowspan=5><input class="button" style="height: 107" type="button"value="=" onclick="equal()"></td>
               </tr>
               <tr>
                    <td colspan="2"><input class="button" style="width:106;"type="button" value="0" onclick="insert(0)"></td>
                    <td><input class="button" type="button" value="." onclick="insert('.')"></td>
                
               </tr>
           </table>
       </div>

    </body>
</html>