Source codes:
<!DOCTYPE html>
<html>
<head>
<title> Calculator </title>
<style type=”text/css”>
html,body{
padding: 0;
margin: 0;
background: whitesmoke;
}
.cont{
position: relative;
width: 100%;
padding: 0;
margin: 0;
text-align: center;
}
.calsi{
width: 350px;
padding: 0;
margin: 100px auto;
text-align: center;
background: darkslateblue;
box-shadow: 0px 0px 6px 0px #0006;
}
.calsi h1{
font-size: 35px;
font-family: sans-serif;
padding: 5px 0;
text-align: center;
background: center;
margin: 0 auto;
}
#inp{
position: relative;
width: 100%;
padding: 8 auto;
text-align: center;
font-size: 17px;
font-family: arial, sans-serif;
color: #222;
outline: none;
border: none;
background: white;
}
.btns{
position: relative;
width: 100%;
padding: 10px 0px;
}
.btns button{
border: none;
outline: none;
width: 50px;
height: 50px;
font-size: 30px;
color: #222;
vertical-align: middle;
border-radius: 5px;
background: white;
margin: 10px 5px;
display: inline-block;
}
button{
border: none;
outline: none;
width: 100px;
height: 50px;
font-size: 20px;
color: #222;
border-radius: 5px;
vertical-align: middle;
background: white;
margin: 10px 5px;
display: inline-block;
}
</style>
</head>
<body>
<div class=”cont”>
<div class=”calsi”>
<h1> Calculator </h1>
<input type=”text” id=”inp” placeholder=”Enter Value…” readonly=””>
<div class=”btns”>
<button onclick=”at_add(0)”>0</button>
<button onclick=”at_add(1)”>1</button>
<button onclick=”at_add(2)”>2</button>
<button onclick=”at_add(3)”>3</button>
<button onclick=”at_add(4)”>4</button>
<button onclick=”at_add(5)”>5</button>
<button onclick=”at_add(6)”>6</button>
<button onclick=”at_add(7)”>7</button>
<button onclick=”at_add(8)”>8</button>
<button onclick=”at_add(9)”>9</button>
<button onclick=”at_add(‘+’)”>+</button>
<button onclick=”at_add(‘-‘)”>-</button>
<button onclick=”at_add(‘/’)”>/</button>
<button onclick=”at_add(‘*’)”>*</button>
</div>
<button onclick=”exe()”>=</button>
<button onclick=”cancel()”>⌫</button>
<button onclick=”cls()”>c</button>
</div>
</div>
<!– JavaScript –>
<script>
var val=document.getElementById(‘inp’);
function at_add(v){
val.value+=v;
}
function cls() {
val.value=””;
}
function exe(){
val.value=eval(val.value);
}
function cancel(){
val.value=val.value.substr(0,val.value.length-1);
}
</script>
</body>
</html>
