HTML5 CALCULATOR WITH FULL COADING
<html>
<head>
<style>
.main{
width:300px;
height:530px;
background:orange;
padding:0px;
margin:0px;
border:2px ridge black;
}
.header{
width:100%;
font-size:30px;
color:yellow;
background:green;
text-shadow:1px 1px 1px red;
height:35px;
text-align:center;
}
.cal, textarea{
width:100%;
height:150px;
background:white;
color:black;
font-size:15px;
padding:0px;
}
.result, input[type= "text"]{
width:100%;
height:40px;
color:white;
background:black;
font-size:15px;
padding:0px;
text-align:right;
}
input[type= "button"]
{
width:65px;
height:40px;
color:white;
background:black;
margin:13px 0px 5px 5px;
font-size:16px;
font-weight:bold;
background-image: -moz-linear-gradient(bottom, #111111, #999999); /* FF3.6 */
background-image: -o-linear-gradient(bottom, #111111, #999999); /* Opera 11.10+ */
background-image: -webkit-gradient(linear, left top, left bottom, from(#111111), to(#999999)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(bottom, #111111, #999999); /* Chrome 10+, Saf5.1+ */
}
</style>
</head>
<body>
<div class="main">
<div class="header">SK CALCULATOR</div>
<form name= "cal">
<div class="cal"><textarea name= "rst"></textarea></div>
<div class="result"><input type= "text" name= "res"></div>
<div class="btn-area">
<input type= "button" onClick= "cal.rst.value+='7'" value= "7">
<input type= "button" onClick= "cal.rst.value+='8'" value= "8">
<input type= "button" onClick= "cal.rst.value+='9'" value= "9">
<input type= "button" onClick= "cal.rst.value+='+'" value= "+">
<br>
<input type= "button" onClick= "cal.rst.value+='4'" value= "4">
<input type= "button" onClick= "cal.rst.value+='5'" value= "5">
<input type= "button" onClick= "cal.rst.value+='6'" value= "6">
<input type= "button" onClick= "cal.rst.value+='-'" value= "-">
<br>
<input type= "button" onClick= "cal.rst.value+='1'" value= "1">
<input type= "button" onClick= "cal.rst.value+='2'" value= "2">
<input type= "button" onClick= "cal.rst.value+='3'" value= "3">
<input type= "button" onClick= "cal.rst.value+='*'" value= "*">
<br>
<input type= "button" onClick= "cal.rst.value+='.'" value= ".">
<input type= "button" onClick= "cal.rst.value+='0'" value= "0">
<input type= "button" onClick= "cal.rst.value=Math.sqrt(cal.rst.value)" value= "sqrt">
<input type= "button" onClick= "cal.rst.value+='/'" value= "/">
<br>
<input type= "button" onClick= "cal.rst.value='' " value= "Del">
<input type= "button" onClick= "rst.value = rst.value.substring(0, rst.value.length - 1)" value= "Cel">
<input type= "button" onClick= "cal.rst.value+='00'" value= "00">
<input type= "button" onClick= "cal.res.value=eval(cal.rst.value)" value= "=">
<br>
<div>
</form>
</div>
</body>
</html>
