Online_calculator_using_html,javascript_and_css(source code)
Online_calculator_using_html,javascript_and_css(source code)
The source code of online calculator using html,css and javascript is given below.
<!DOCTYPE html5>
<html>
<head>
<title>Online Calculator</title>
<style>
div{
background-color:#edb;
height:360px;
width:305px;
border:solid gray 2px;
margin:auto;
}
.btn{
cursor:pointer;
margin:2px;
width:67px;
height:45px;
background-color:gray;
font-size:20px;
}
.btn:hover{
font-size:23px;
background-color:#ebb;
}
.clear{
width:295px; font-size:20px; height:45px;margin:5px;cursor:pointer; background-color:gray;
}
.clear:hover{
font-size:23px;
background-color:#ebb;
}
</style>
<script type="text/javascript">
function displaynum(n1)
{
calcform.txt1.value=calcform.txt1.value+n1;
}
</script>
</head>
<body>
<div>
<form name=calcform >
<input type=text name=txt1 style="text-align:right ;width:295px; font-size:30px;padding:5px;height:67px;margin:5px;" ><br>
<input class="btn" style="margin-left:5px;" type=button name=btn7 value=7 onclick="displaynum(btn7.value)" >
<input class="btn" type=button name=btn8 value=8 onclick="displaynum(btn8.value)">
<input class="btn" type=button name=btn9 value=9 onclick="displaynum(btn9.value)">
<input class="btn" type=button name=addbtn value=+ onclick="displaynum(addbtn.value)">
<br>
<input class="btn" style="margin-left:5px;" type=button name=btn4 value=4 onclick="displaynum(btn4.value)">
<input class="btn" type=button name=btn5 value=5 onclick="displaynum(btn5.value)">
<input class="btn" type=button name=btn6 value=6 onclick="displaynum(btn6.value)">
<input class="btn" type=button name=subbtn value=- onclick="displaynum(subbtn.value)">
<br>
<input class="btn" style="margin-left:5px;" type=button name=btn1 value=1 onclick="displaynum(btn1.value)">
<input class="btn" type=button name=btn2 value=2 onclick="displaynum(btn2.value)">
<input class="btn" type=button name=btn3 value=3 onclick="displaynum(btn3.value)">
<input class="btn" type=button name=mulbtn value=* onclick="displaynum(mulbtn.value)">
<br>
<input class="btn" style="margin-left:5px;" type=button name=dotbtn value=. onclick="displaynum(dotbtn.value)">
<input class="btn" type=button name=btn0 value=0 onclick="displaynum(btn0.value)">
<input class="btn" type=button name=eqlbtn value== onclick="calcform.txt1.value=eval(calcform.txt1.value)">
<input class="btn" type=button name=divbtn value=/ onclick="displaynum(divbtn.value)">
<br>
<input class="clear" type=button name=cls value=clear onclick="calcform.txt1.value='' ">
</form>
</div>
</body>
</html>
When you open in browser it will look like--
Comments
Post a Comment