<!DOCTYPE html>
<html>
<head>
<title> Calculator </title>
<script type="text/javascript">
function displynum(n1)
{
calcform.txt1.value = calcform.txt1.value + n1;
}
function del()
{
var prevalue = calcform.txt1.value;
calcform.txt1.value = prevalue.substr(0,prevalue.length-1);
}
</script>
<style type="text/css">
/*#btn
{
width: 100%;
height: 100%;
}*/
input
{
width: 100%;
height: 100%;
/*background-color: #CE33FF;*/
background-color: #BDC3C7 ;
color: black;
font-size: 20px;

}
input:hover
{
background-color: #909497 ;
}
.main
{
background: linear-gradient(to right,#e91e63,#3f51b5);
}
</style>
</head>
<body class="main">
<form name="calcform">
<table border=4 align="center" height="300px" width="300px">
<tr>
<td colspan="4"><input type="text" name="txt1" style="text-align: right"></td>
</tr>
<tr>
<td><input type=button onclick="displynum(btn9.value)" name=btn9 value=9></td>
<td><input type=button onclick="displynum(btn8.value)" name=btn8 value=8></td>
<td><input type=button onclick="displynum(btn7.value)" name=btn7 value=7></td>
<td><input type=button onclick="displynum(addbtn.value)" name=addbtn value=+></td>
</tr>
<tr>
<td><input type=button onclick="displynum(btn6.value)" name=btn6 value=6></td>
<td><input type=button onclick="displynum(btn5.value)" name=btn5 value=5></td>
<td><input type=button onclick="displynum(btn4.value)" name=btn4 value=4></td>
<td><input type=button onclick="displynum(subbtn.value)" name=subbtn value=-></td>
</tr>
<tr>
<td><input type=button onclick="displynum(btn3.value)" name=btn3 value=3></td>
<td><input type=button onclick="displynum(btn2.value)" name=btn2 value=2></td>
<td><input type=button onclick="displynum(btn1.value)" name=btn1 value=1></td>
<td><input type=button onclick="displynum(mulbtn.value)" name=mulbtn value=*></td>
</tr>
<tr>
<td><input type=button onclick="displynum(btn0.value)" name=btn0 value=0></td>
<td><input type=button onclick="displynum(dotbtn.value)" name=dotbtn value=.></td>
<td><input type=button onclick="calcform.txt1.value=eval(calcform.txt1.value)" name=eualbtn value==></td>
<td><input type=button onclick="displynum(divbtn.value)" name=divbtn value=/></td>
</tr>
<tr>
<td colspan="2"><input type=button onclick="calcform.txt1.value=' ' " value=AC></td>
<td colspan="2"><input type=button onclick="del()" value=Del></td>
</tr>
</table>
</form>
</body>
</html>