 |
| Calculator |
In this program, you will learn how to make a calculator using javascript.
Calculator Using JavaScript:
<html>
<title>calculator</title>
<head>
<b><center><h1><u>CALCULATOR</u></h1></center></b>
<style type = "text/css">
table
{
position : absolute;
top : 50px;
left: 480px;
width : 30%;
height: 50%;
border : 2px solid black;
background-color:seagreen;
}
li:hover{
opacity:0.5
cursor:pointer
</style>
<script type="text/javascript">
function f()
{
var x=document.getElementById("t1").value;
var y=document.getElementById("t2").value;
var z=parseFloat(x)+parseFloat(y);
document.getElementById("t3").value=z;
}
function f1()
{
var x=document.getElementById("t1").value;
var y=document.getElementById("t2").value;
var z=parseFloat(x)-parseFloat(y);
document.getElementById("t3").value=z;
}
function f2()
{
var x=document.getElementById("t1").value;
var y=document.getElementById("t2").value;
var z=parseFloat(x)*parseFloat(y);
document.getElementById("t3").value=z;
}
function f3()
{
var x=document.getElementById("t1").value;
var y=document.getElementById("t2").value;
var z=parseFloat(x)/parseFloat(y);
document.getElementById("t3").value=z;
}
</script>
</head>
<body>
<table>
<tr>
<td>FIRST NO : <input type="text" id="t1"/></td><br>
</tr>
</br>
<tr>
<td>SECOND NO : <input type="text" id="t2"/></td><br>
</tr>
</br>
<tr>
<td><input type="button" value="+" onclick="f()" style="color: black;"/>
<input type="button" value="-" onclick="f1()" style="color: black;"/>
<input type="button" value="*" onclick="f2()" style="color: black;"/>
<input type="button" value="/" onclick="f3()" style="color: black;"/>
</td>
</tr>
<br>
<tr>
<td>RES :<input type="text" id="t3"/></td></tr></br>
</body>
</html>
Output:
The Subtract Result is (25-5) =20
The Multiplication Result is (25*5) =125
The Division Result is (25-5) =5
The Addition Result is (25-5) =20
0 Comments