Calculator
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
padding:0;
margin: 0;
border:none;
}
html{
width:100%;
height:100%;
}
body{
background:linear-gradient(to right,#96deda,hotpink);
width:100%;
height:100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tab{
min-width:0px; /*Its minimum height,so that table can be resized according to the data inside it*/
min-height:0px;
}
.text{
height:40px;
width:264px;
font-size:25px;
background:linear-gradient(to right,#ff9a9e,#fad0c4);
color:black;
box-shadow:-3px -3px 5px 1px #ffffff73,5px 5px 10px rgba(94,104,121,.4);
}
.button{
width:50px;
height:50px;
margin:10px;
font-size:25px;
background-color:rgba(128,128,128,0.4);
border-radius:10px;
box-shadow:-3px -3px 5px #ffffff73,5px 5px 10px 2px rgba(94,104,121,.4);
}
.button:focus{
outline: none;
}
.button:hover{
cursor: pointer;
background-color: black;
color:blanchedalmond;
}
.text:hover{
cursor:not-allowed;
}
</style>
<title></title>
</head>
<body>
<input class="text" disabled>
<table class="tab">
<tr>
<td><input type="button" value="C" class="button" onclick="clean()"></td>
<td><input type="button" value="<" class="button" onclick="back()"></td>
<td><input type="button" value="/" class="button" onclick="insert('/')"></td>
<td><input type="button" value="X" class="button" onclick="insert('*')"></td>
</tr>
<tr>
<td><input type="button" value="7" class="button" onclick="insert(7)"></td>
<td><input type="button" value="8" class="button" onclick="insert(8)"></td>
<td><input type="button" value="9" class="button" onclick="insert(9)"></td>
<td><input type="button" value="-" class="button" onclick="insert('-')"></td>
</tr>
<tr>
<td><input type="button" value="4" class="button" onclick="insert(4)"></td>
<td><input type="button" value="5" class="button" onclick="insert(5)"></td>
<td><input type="button" value="6" class="button" onclick="insert(6)"></td>
<td><input type="button" value="+" class="button" onclick="insert('+')"></td>
</tr>
<tr>
<td><input type="button" value="1" class="button" onclick="insert(1)"></td>
<td><input type="button" value="2" class="button" onclick="insert(2)"></td>
<td><input type="button" value="3" class="button" onclick="insert(3)"></td>
<td rowspan="2"><input style="height:125px;" type="button" value="=" class="button" onclick="equal()"></td>
</tr>
<tr>
<td colspan="2"><input style="width:120px;" type="button" value="0" class="button" onclick="insert(0)"></td>
<td><input type="button" value="." class="button" onclick="insert('.')"></td>
</tr>
</table>
<script type="text/javascript">
let input=document.querySelector("input[class=text]");
function insert(num){
input.value=input.value+num;
}
function equal(){
var exp=input.value;
if (exp){
input.value=eval(exp);
}
}
function clean(){
input.value="";
}
function back(){
var exp=input.value;
input.value=exp.substring(0,exp.length-1);
}
</script>
</body>
</html>
Comments
Post a Comment