Code to design and coding a calculator is given below:-
<html>
<!--
Author : Ajay Kumar Shukla
Purpose : Designing and coding a calculator using html, css, and javascript.
-->
<head>
<title>Calculator coding by Ajay Shukla</title>
<style>
.button
{
height: 83px;
width: 75px;
font-size: 20;
cursor: pointer;
background-color: rgba(0,0,0,0.5);
color: blanchedalmond;
}
.scr
{
height: 101;
width: 330;
font-size: 42;
}
.calc
{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
<script type="text/javascript">
function enter(num)
{
document.form.view.value=document.form.view.value+num;
}
function clean()
{
document.form.view.value=""
}
function equal()
{
var cal=document.form.view.value;
if(cal)
{
document.form.view.value=eval(cal);
}
}
</script>
</head>
<body>
<div class="calc">
<form name="form">
<input type="text" class="scr" name="view" readonly>
</form>
<table border="3px">
<tr>
<th colspan="2"><input style="width: 154;" type="button" class="button" value="CLEAR" onclick="clean()"></th>
<th><input type="button" class="button" value="+" onclick="enter('+')"></th>
<th><input type="button" class="button" value="-" onclick="enter('-')"></th>
</tr>
<tr>
<th><input type="button" class="button" value="1" onclick="enter(1)"></th>
<th><input type="button" class="button" value="2" onclick="enter(2)"></th>
<th><input type="button" class="button" value="3" onclick="enter(3)"></th>
<th><input type="button" class="button" value="*" onclick="enter('*')"></th>
</tr>
<tr>
<th><input type="button" class="button" value="4" onclick="enter(4)"></th>
<th><input type="button" class="button" value="5" onclick="enter(5)"></th>
<th><input type="button" class="button" value="6" onclick="enter(6)"></th>
<th><input type="button" class="button" value="/" onclick="enter('/')"></th>
</tr>
<tr>
<th><input type="button" class="button" value="7" onclick="enter(7)"></th>
<th><input type="button" class="button" value="8" onclick="enter(8)"></th>
<th><input type="button" class="button" value="9" onclick="enter(9)"></th>
<th rowspan="2"><input style="height: 170;" type="button" class="button" value="=" onclick="equal()"></th>
</tr>
<tr>
<th><input type="button" class="button" value="." onclick="enter('.')"></th>
<th colspan="2"><input style="width: 154;" type="button" class="button" value="0" onclick="enter(0)"></th>
</tr>
</table>
</div>
</body>
</html>
See the video for complete tutorial=============
