How to Make Calculator Using HTML JavaScript
Firstly open Notepad In your PC/Mobile and Enter the html codes for input and buttons
:-We have Requirement of HTML tags which are Two Text Input, Buttons;
Start
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.container
{
margin-left: auto;
margin-right: auto;
}
.container
{
border: 1px solid gray;
width: 40%;
}
input[type="text"]
{
padding: 3px 0px 3px 0px;
width: 80%;
}
input[type="button"]
{
width: 100%;
padding: 5px 5px 5px 5px;
border: 1px solid gray;
}
.tdata
{
text-align: center;
width: 25%;
}
p
{
font-weight: bold;
font-family: Lucida Console;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<p>
Calculator</p>
<table width="100%">
<tr>
<td class="tdata" colspan="2">
<input type="text" placeholder="value1" id="v1" />
</td>
<td class="tdata" colspan="2">
<input type="text" placeholder="value2" id="v2" />
</td>
</tr>
</table>
<hr />
<table width="100%">
<tr>
<td class="tdata" class="thead">
<input type="button" id="add" value="Addition" onclick="load()" />
</td>
<td class="tdata">
<input type="button" id="sub" value="Substraction" onclick="load1()" />
</td>
<td class="tdata" class="thead">
<input type="button" id="mul" value="Multiply" onclick="load2()" />
</td>
<td class="tdata" class="thead">
<input type="button" id="div" value="Division" onclick="load3()" />
</td>
</tr>
</table>
<hr />
<p>
OUTPUT</p>
<table width="100%" border="1" style="text-align: center;">
<tr>
<td>
Addition
</td>
<td>
Substrction
</td>
<td>
Multiply
</td>
<td>
Division
</td>
</tr>
<tr>
<td class="tdata">
<p id="out">
</p>
</td>
<td class="tdata">
<p id="subresult">
</p>
</td>
<td class="tdata">
<p id="mulresult">
</p>
</td>
<td class="tdata">
<p id="divresult">
</p>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function load() {
var value1 = document.getElementById("v1").value;
var value2 = document.getElementById("v2").value;
var z = Number(value1) + Number(value2);
document.getElementById("out").innerHTML = z;
} function load1() {
var value1 = document.getElementById("v1").value;
var value2 = document.getElementById("v2").value;
var z = Number(value1) - Number(value2);
document.getElementById("subresult").innerHTML = z;
} function load2() {
var value1 = document.getElementById("v1").value;
var value2 = document.getElementById("v2").value;
var z = Number(value1) * Number(value2);
document.getElementById("mulresult").innerHTML = z;
} function load3() {
var value1 = document.getElementById("v1").value;
var value2 = document.getElementById("v2").value;
var z = Number(value1) % Number(value2);
document.getElementById("divresult").innerHTML = z;
}
</script>
</form>
</body>
</html>
tnx
ReplyDelete