<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<style type="text/css">
*{ margin:0; padding:0;box-sizing: border-box;
}
.parent_div{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.child_div{
box-shadow: 30px 30px 20px #D1D9E6,
-5px -10px 10px #fff;
}
.title{
margin-bottom: 10px;
text-align: center;
font-size: 28px;
}
td{
width: 60px;
height: 60px;
border-radius: 50%;
}
input[type="button"]{
background-color: #ECF0F8;
color: black;
width:100%;
height: 100%;
font-size: 20px;
border-radius: 50%;
box-shadow: 5px 5px 5px #D1D9E6,
-10px -10px 10px #fff;
cursor: pointer;
background:
linear-gradient(to right, #33ccff 0%,#ff99cc 100%);
}
input[type="button"]:hover{
box-shadow: 5px 10px 10px #D1D9E6,
inset -10px -10px 10px #fff;
}
input[type="text"]{
width: 100%;
height: 100%;
border-radius: 100px;
font-size: 20px;
outline: none;
}
</style>
</head>
<body>
<div class="parent_div">
<div class="child_div">
<!--Create a table-->
<div class="title">Eagle Tech Calculator</div>
<table >
<tr>
<td colspan="3"><input type="text" id="result"></td>
<!-- Clr() function will call clr to clear all values-->
<td><input type="button" value="c" onclick="clr()"></td>
</tr>
<tr>
<!--Create button and assign value to each button-->
<!--dis(1) will call function dis to display value-->
<td><input type="button" value="1" onclick="dis('1')"/></td>
<td><input type="button" value="2" onclick="dis('2')"/></td>
<td><input type="button" value="3" onclick="dis('3')"/></td>
<td><input type="button" value="/" onclick="dis('/')"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dis('4')"/></td>
<td><input type="button" value="5" onclick="dis('5')"/></td>
<td><input type="button" value="6" onclick="dis('6')"/></td>
<td><input type="button" value="-" onclick="dis('-')"/></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dis('7')"/></td>
<td><input type="button" value="8" onclick="dis('8')"/></td>
<td><input type="button" value="9" onclick="dis('9')"/></td>
<td><input type="button" value="+" onclick="dis('+')"/></td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')"/></td>
<td><input type="button" value="0" onclick="dis('0')"/></td>
<!-- solve function call function solve to evaluvate value-->
<td><input type="button" value="=" onclick="solve('')"/></td>
<td><input type="button" value="*" onclick="dis('*')"/></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// function that display value
function dis(val){
document.getElementById('result').value+=val;
}
// function that evaluates the digits and return result
function solve(){
let x=document.getElementById('result').value;
let y=eval(x);
document.getElementById('result').value=y;
}
//function that clear the display
function clr(){
document.getElementById('result').value="";
}
</script>
Comments
Post a Comment