Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <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>
- .main{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translateX(-50%) translateY(-50%);
- }
- *{
- margin: 1px;
- padding: 1px;
- }
- .button{
- cursor: pointer;
- width: 50px;
- height: 50px;
- font-size: 25;
- margin: 2;
- }
- .textview{
- margin: 5px;
- width: 208px;
- height: 20px;
- font-size: 25;
- padding: 5px;
- }
- .background{
- background-color: red;
- height: 100%;
- }
- </style>
- <title> Simple Calculator </title>
- </head>
- <body>
- <div class ="background"> </div>
- <div class ="main">
- <form name="form">
- <input class="textview" name="textview">
- </form>
- <form>
- <table>
- <tr>
- <td> <input class ="button" type="button" value="CE" 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="6" onclick="insert(6)"> </td>
- <td> <input class ="button" type="button" value="5" onclick="insert(5)"> </td>
- <td> <input class ="button" type="button" value="4" onclick="insert(4)"> </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="2"> <input class ="button" type="button" value="=" style=height:104px onclick="equal()"> </td>
- </tr>
- <tr>
- <td colspan="2"> <input class ="button" type="button" value="0" style=width:104px onclick=insert(0)> </td>
- <td> <input class ="button" type="button" value="." onclick="insert('.')"> </td>
- </tr>
- </table>
- </form>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement