Scribd
Upload
543 views2 pages

Web Program For A Simple Calculator

This document outlines a simple JavaScript program to design a calculator that performs basic math operations (addition, subtraction, multiplication, division). It includes HTML code to create a table interface for the calculator with input fields for two values and a button for each operation. The JavaScript code defines functions to calculate the result when a button is clicked, retrieve the input values, perform the operation, and display the output. It also includes a clear button to reset the values.

Uploaded by

sirius
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
543 views2 pages

Web Program For A Simple Calculator

This document outlines a simple JavaScript program to design a calculator that performs basic math operations (addition, subtraction, multiplication, division). It includes HTML code to create a table interface for the calculator with input fields for two values and a button for each operation. The JavaScript code defines functions to calculate the result when a button is clicked, retrieve the input values, perform the operation, and display the output. It also includes a clear button to reset the values.

Uploaded by

sirius
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

SIMPLE CALCULATOR USING JAVASCRIPT

1.Write a JavaScript to design a simple calculator to perform the following


operations:
sum, product, difference and quotient.
Aim:
To Write a JavaScript to design a simple calculator
Algorithm/Procedure:
1. Create a webpage with the name program1.html.
2. Create table for Calculator using Html code.
3. Create html form and input field for each entry.
PROGRAM:
<!DOCTYPE
HTML> <html>
<head>
<style>
table, td, th
{
border: 1px solid black;
width: 33%;
text-align: center;
background-color: DarkGray;
border-collapse:collapse;
}
table { margin: auto; }
input { text-align:right; }
</style>
<script type="text/javascript">
function calc(clicked_id)
{
Var val1 =
parseFloat(document.getElementById("value1").value);
var val2 =
parseFloat(document.getElementById("value2").value);
if(isNaN(val1)||isNaN(val2))
alert("ENTER VALID NUMBER");
else if(clicked_id=="add")
document.getElementById("answer").value=val1+val
2;
else if(clicked_id=="sub")
document.getElementById("answer").value=val1-
val2;
else if(clicked_id=="mul")
document.getElementById("answer").value=val1*val2;
else if(clicked_id=="div")
document.getElementById("answer").value=val1/val2;
}
function cls()
{
value1.value="0";
value2.value="0";
answer.value="";
}
</script>
</head>
<body>
<table>
<tr><th colspan="4"> SIMPLE CALCULATOR </th></tr>
<tr><td>value1</td><td><input type="text" id="value1"
value="0"/></td> <td>value2</td><td><input type="text" id="value2"
value="0"/> </td></tr> <tr><td><input type="button" value="Addition"
id = "add" onclick="calc(this.id)"/></td>
<td><input type="button" value="Subtraction" id = "sub"
onclick="calc(this.id)"/></td>
<td><input type="button" value="Multiplication" id = "mul"
onclick="calc(this.id)"/></td>
<td><input type="button" value="Division" id ="div"
onclick="calc(this.id)"/></td></tr>
<tr><td>Answer:</td><td> <input type="text" id="answer" value=""
disabled/></td>
<td colspan="2"><input type="button" value="CLEAR ALL"
onclick="cls()"/></td> </tr>
</table>
</body>
</html>

You might also like