JavaScript to Design a Simple Calculator

by

Aim:

Write a JavaScript to design a simple calculator to perform the following operations: sum, product, difference and quotient.

Explanation:

This program demonstrates the use of embedding Javascript inside a webpage designed using HTML. The usefulness of Javascript in client-side computations for small tasks, displaying results in its own graphical window, rendering the output to the web pages dynamically and requesting input from the user are illustrated through this program.

Code:

Html

<html>
<script type=text/javascript src=1.js>
</script>
<body>
<table border>
<tr >
<td colspan=4><input type=text id=res size=16 onfocus="this.blur();"></td>
</tr>
<tr>
<td><input type=button id=b1 value=0 size=2 onclick=f('0')></td>
<td><input type=button id=b2 value=1 size=2 onclick=f('1')></td>
<td><input type=button id=b3 value=2 size=2 onclick=f('2')></td>
<td><input type=button id=b4 value=+ size=2 onclick=f('+')></td>
</tr>
<tr>
<td><input type=button id=b5 value=3 size=2 onclick=f('3')></td>
<td><input type=button id=b6 value=4 size=2 onclick=f('4')></td>
<td><input type=button id=b7 value=5 size=2 onclick=f('5')></td>
<td><input type=button id=b8 value=- size=2 onclick=f('-')></td>
</tr>
<tr>
<td><input type=button id=b9 value=6 size=2 onclick=f('6')></td>
<td><input type=button id=b10 value=7 size=2 onclick=f('7')></td>
<td><input type=button id=b11 value=8 size=2 onclick=f('8')></td>
<td><input type=button id=b12 value=* size=2 onclick=f('*')></td>
</tr>
<tr>
<td><input type=button id=b13 value=9 size=2 onclick=f('9')></td>
<td><input type=button id=b14 value=+/- size=2 onclick=f('--')></td>
<td><input type=button id=b15 value='=' size=2 onclick=f('=')></td>
<td><input type=button id=b16 value='/' size=2 onclick=f('/')></td>
</tr>
<tr>
<td colspan=4 ><input type=button value=Clear size=16 onclick=f('c')></td>
</tr>
</table>
</body>
</html>

JavaScript

function f(d)
{
if(d=='c')
{
document.getElementById('res').value="";
return;
}
res=document.getElementById('res').value;
if(res==0 && d==0)
return;
if(d=='+' || d=='-' || d=='*' || d=='/')
{
opr=d;
num=parseFloat(res);
document.getElementById('res').value=d;
return;
}
if(d=='=')
{
num1=parseFloat(res);
switch(opr)
{
case '+': ans=num+num1; break;
case '-': ans=num-num1; break;
case '*': ans=num*num1; break;
case '/': ans=parseInt(num/num1); break;
}
document.getElementById('res').value=ans;
return;
}
if(d=='--')
{
document.getElementById('res').value*=-1;
return;
}
if(!isNaN(document.getElementById('res').value))
document.getElementById('res').value+=d;
else
document.getElementById('res').value=d;
}

Javascript functions used:

document.getElementById()

  • The getElementById() method returns the element that has the ID attribute with the specified value. This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document.
  • Returns null if no elements with the specified ID exists. An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element in the source code.
  • parseFloat()– parseFloat() function parses a string and returns a floating-point number. This function determines if the first character in the specified string is a number. If it is, it parses the string until it reaches the end of the number, and returns the number as a number, not as a string.
  • parseInt() – parseInt() function parses a string and returns an integer. The radix parameter is used to specify which numeral system to be used, for example, a radix of 16 (hexadecimal) indicates that the number in the string should be parsed from a hexadecimal number to a decimal number.
  • If the radix parameter is omitted, JavaScript assumes the following:
    • If the string begins with “0x”, the radix is 16 (hexadecimal)
    • If the string begins with “0”, the radix is 8 (octal). This feature is deprecated
    • If the string begins with any other value, the radix is 10 (decimal)
  • isNaN()– he isNaN() function determines whether a value is an illegal number (Not-a-number). This function returns true if the value equates to NaN. Otherwise, it returns false.

Leave a Comment