Output
//Calculator using Javascript.
CSS Code
#container
{
height: 300px;
width: 260px;
margin-left: auto;
margin-right: auto;
border: 7px solid;
border-color: gray;
box-shadow: 2px 2px 15px 1px;
margin-top: 10%;
border-radius: 5px;
}
#screen
{
height: 20%;
width: 99.9%;
margin-left: auto;
margin-right: auto;
background: #3d4543;
}
#input
{
height: 100%;
width: 70%;
float: left;
}
#back
{
height: 100%;
width: 30%;
float: left;
}
#padone
{
height: 20%;
width: 99.9%;
border: 0px solid;
margin-left: auto;
margin-right: auto;
background: #3d4543;
}
#padtwo
{
height: 20%;
width: 99.9%;
border: 0px solid;
margin-left: auto;
margin-right: auto;
background: #3d4543;
}
#padthree
{
height: 20%;
width: 99.9%;
border: 0px solid;
margin-left: auto;
margin-right: auto;
background: #3d4543;
}
#padfour
{
height: 20%;
width: 99.9%;
border: 0px solid;
margin-left: auto;
margin-right: auto;
background: #3d4543;
}
.ninth
{
height: 100%;
width: 25%;
float: left;
}
.eight
{
height: 100%;
width: 25%;
float: left;
}
.seventh
{
height: 100%;
width: 25%;
float: left;
}
.add
{
height: 100%;
width: 25%;
float: left;
}
HTML Code
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "//w3c//DTD XTML 1.0 strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.DTD">
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="calc.css" />
<script type="text/javascript">
var a=0;
function ak(n)
{
//a=n;
document.getElementById('number').value+=n;
}
function v(val)
{
document.getElementById('number').value=val;
}
function e()
{
try
{
v(eval(document.getElementById('number').value))
}
catch(e)
{
v('Error')
}
}
</script>
</head>
<body style="background:white;">
<p>Designed by Akshay Sarda. (BCA IV Sem)</p>
<div id="container">
<div id="screen">
<div id="input">
<input type="text" id="number" maxlength="12"
style="height:40px; margin-top:15px; margin-left:10px; box-shadow: 1px 1px 2px 1px;
border:none; background-color:#bccd95; color:black; font-size:20px; width:167px;" />
</div>
<div id="back">
<input type="button" value=" c " name="button0" id="buttonback" onclick="v(' ')"
style="margin-top:20px; margin-left:16px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#6f6f6f; color:white; height:30px; width:45px; font-size:17px;" />
</div>
</div>
<div id="padone">
<div class="ninth">
<input type="button" value=" 9 " name="button9" id="but9" onclick="ak('9')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; font-size:17px;
border-radius:2px; background:#6f6f6f; color:white; height:30px; width:40px;" />
</div>
<div class="eight">
<input type="button" value=" 8 " name="button8" onclick="ak('8')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#6f6f6f; color:white; height:30px; width:40px; font-size:17px;" />
</div>
<div class="seventh">
<input type="button" value=" 7 " name="button7" onclick="ak('7')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#6f6f6f; color:white; height:30px; width:40px; font-size:17px;" />
</div>
<div class="add">
<input type="button" value=" + " name="button+" onclick="ak('+')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#ff4561; color:white; height:30px; width:40px; font-size:17px;" />
</div>
</div>
<div id="padtwo">
<div class="ninth">
<input type="button" value=" 6 " name="button6" onclick="ak('6')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#6f6f6f; color:white; height:30px; width:40px; font-size:17px;" />
</div>
<div class="eight">
<input type="button" value=" 5 " name="button5" onclick="ak('5')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#6f6f6f; color:white; height:30px; width:40px; font-size:17px;" />
</div>
<div class="seventh">
<input type="button" value=" 4 " name="button4" onclick="ak('4')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#6f6f6f; color:white; height:30px; width:40px; font-size:17px;" />
</div>
<div class="add">
<input type="button" value=" - " name="button4" onclick="ak('-')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#ff4561; color:white; height:30px; width:40px; font-size:17px;" />
</div>
</div>
<div id="padthree">
<div class="ninth">
<input type="button" value=" 3 " name="button3" onclick="ak('3')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#6f6f6f; color:white; height:30px; width:40px; font-size:17px;" />
</div>
<div class="eight">
<input type="button" value=" 2 " name="button2" onclick="ak('2')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#6f6f6f; color:white; height:30px; width:40px; font-size:17px;" />
</div>
<div class="seventh">
<input type="button" value=" 1 " name="button2" onclick="ak('1')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#6f6f6f; color:white; height:30px; width:40px; font-size:17px;" />
</div>
<div class="add">
<input type="button" value="*" name="button1" onclick="ak('*')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#ff4561; color:white; height:30px; width:40px; font-size:17px;" />
</div>
</div>
<div id="padfour">
<div class="ninth">
<input type="button" value=" 0 " name="button9" onclick="ak('0')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#6f6f6f; color:white; height:30px; width:40px; font-size:17px;" />
</div>
<div class="eight">
<input type="button" value=" . " name="button8" onclick="ak('.')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#6f6f6f; color:white; height:30px; width:40px; font-size:17px;" />
</div>
<div class="seventh">
<input type="button" value=" = " name="button7" onclick="e()"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#FF9933; color:white; height:30px; width:40px; font-size:17px;" />
</div>
<div class="add">
<input type="button" value=" / " name="button6" onclick="ak('/')"
style="margin-top:15px; margin-left:15px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#ff4561; color:white; height:30px; width:40px; font-size:17px;" />
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment