HTML5 CALCULATOR WITH CODING
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/><head>
<title>SK Calculator</title>
<style>
body{
margin: 0px;
padding: 0px;
background:orange;
}
.tabl-1{
width:100%;
height:100%;
padding:0px;
margin:0px;
border:2px solid orange;
}
.head{
color:lime;
font-size:35px;
padding:0px;
text-shadow:
1.5px 1.5px 2px red,
2px 2px 0px red,
2.5px 2.5px 2px red,
3px 3px 0px lime,
3.5px 3.5px 2px red,
4px 4px 0px red
;
}
.val{
width:310px;
height:170;
color:black;
font-size:20px;
padding-left:5px;
line-spacing:0px;
padding-right:5px;
margin-right:1px;
border:2px solid black;
}
.result{
width:310;
height:40;
text-align:right;
font-weight:bold;
padding-right:5px;
padding-left:5px;
font-size:22px;
color:white;
margin-top:-5px;
background:black;
border:2px solid black;
}
th, tr{
border-radius:5px;
}
.num{
width:100%;
height:100%;
margin-left:0px;
padding:5px;
border-radius:5px 5px 0px 0px;
border:2px solid orange ;
}
input[type="button"]{
background:black;
width:65px;
height:50px;
font-size:25px;
font-weight:bold;
color:lime;
border-radius:10px 4px 10px 4px;
border-width:1px 2px 2px 1px;
border-color:orange;
border-style:solid;
text-shadow:1.5px 1.5px 0px orange,
.5px .5px 0px orange,
1px 1px 0px orange,
1.5px 1.5px 0px orange;
box-shadow:2px 2px 0px orange;
}
</style>
</head>
<body>
<table class="tabl-1" cellspacing= "0px" cellpadding= "0px" bgcolor= "orange">
<tr height= "5%" bgcolor= "orange"><th class="head">SK CALCULATOR</th></tr>
<form name= "cal">
<tr height= "40%" cellpadding= "0px"><th>
<center><textarea class="val" name= "sd"></textarea><br>
<textarea class="result" name= "sm" >=</textarea></center>
</th></tr>
<tr height= "52%"><th>
<table class="num" cellspacing= "0px" bgcolor= "black">
<tr>
<th><input type= "button" value= "7" onclick= "cal.sd.value+='7'"></th>
<th><input type= "button" value= "8" onclick= "cal.sd.value+='8'"></th>
<th><input type= "button" value= "9" onclick= "cal.sd.value+='9'"></th>
<th><input type= "button" value= "+" onclick= "cal.sd.value+='+'"></th>
</tr>
<tr>
<th><input type= "button" value= "4" onclick= "cal.sd.value+='4'"></th>
<th><input type= "button" value= "5" onclick= "cal.sd.value+='5'"></th>
<th><input type= "button" value= "6" onclick= "cal.sd.value+='6'"></th>
<th><input type= "button" value= "-" onclick= "cal.sd.value+='-'"></th>
</tr>
<tr>
<th><input type= "button" value= "1" onclick= "cal.sd.value+='1'"></th>
<th><input type= "button" value= "2" onclick= "cal.sd.value+='2'"></th>
<th><input type= "button" value= "3" onclick= "cal.sd.value+='3'"></th>
<th><input type= "button" value= "*" onclick= "cal.sd.value+='*'"></th>
</tr>
<tr>
<th><input type= "button" value= "D" onclick= "cal.sd.value='' "
onclick= "cal.sm.value='' " ></th>
<th><input type= "button" value= "0" onclick= "cal.sd.value+='0'"></th>
<th><input type= "button" value= "=" onclick= "cal.sm.value=eval(cal.sd.value)"></th>
<th><input type= "button" value= "/" onclick= "cal.sd.value+='/'"></th>
</tr>
</form>
</table>
</th></tr>
</table>
</body>
</html>
| SK CALCULATOR |
|---|
No comments :
Post a Comment