Simple Calculator using Html Css and JavaScript
<html>
<head>
<style>
.button
{
width:50;
height:50;
font-size:25;
margin:2;
cursor:pointer;
background:#607d8b;
border:none;
color:white;
}
.textview
{
width:225;
margin:5;
font-size:25;
padding:5;
border:none;
color:#607d8b;
}
.main
{
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%)translateY(-50%)
}
.bg
{
background:linear-gradient(to right,#e91e63,#3151b5);
height:100%;
}
h1
{
position:absolute;
top:10%;
left:42%;
font-size:30;
}
</style>
<script>
function insert(num)
{
document.form.textview.value=document.form.textview.value+num
}
function equal()
{
var exp=document.form.textview.value;
if(exp)
{
document.form.textview.value=eval(exp);
}
}
function clean()
{
document.form.textview.value="";
}
function back()
{
var exp=document.form.textview.value;
document.form.textview.value=exp.subString(0,exp.lenth-1);
}
</script>
</head>
<body>
<h1> Simple Calculator</h1>
<div class="bg"></div>
<div class="main">
<form name="form">
<input class="textview" name=textview>
</form>
<table>
<tr>
<td> <input class="button" type="button" value=C onclick="clean()"></td>
<td> <input class="button" type="button" value=< onclick="back()"></td>
<td> <input class="button" type="button" value=/ onclick=insert("/")></td>
<td> <input class="button" type="button" value=* onclick=insert("*")></td>
</tr>
<tr>
<td> <input class="button" type="button" value=7 onclick=insert(7)></td>
<td> <input class="button" type="button" value=8 onclick=insert(8)></td>
<td> <input class="button" type="button" value=9 onclick=insert(9)></td>
<td> <input class="button" type="button" value="=" onclick="equal()"></td>
</tr>
<tr>
<td> <input class="button" type="button" value=4 onclick=insert(4)></td>
<td> <input class="button" type="button" value=5 onclick=insert(5)></td>
<td> <input class="button" type="button" value=6 onclick=insert(6)></td>
<td> <input class="button" type="button" value=- onclick=insert("-")></td>
</tr>
<tr>
<td> <input class="button" type="button" value=1 onclick=insert(1)></td>
<td> <input class="button" type="button" value=2 onclick=insert(2)></td>
<td> <input class="button" type="button" value=3 onclick=insert(3)></td>
<td rowspan=5> <input class="button" style="height:106" type="button" value=+ onclick=insert("+")></td>
</tr>
<tr>
<td colspan=2> <input class="button" style="width:106" type="button" value=0 onclick=insert(0)></td>
<td> <input class="button" type="button" value=. onclick=insert(.)></td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment