If you liked the post, Share on Facebook, Tweet and Google Plus (use buttons above). You can also Subscribe to our feed via Email for free.
 |
Calculator in Javascript Code
on 06 March 2011
So we want to create a JavaScript calculator. Let's not be too ambitious initially. What we will make is a simple calculator using JavaScript code and not a complicated scientific calculator. All our calculator will do is basic arithmetic: add, subtract, multiply and divide.
This is what our calculator will contain:
- A display area for numbers.
- Buttons for 0,1,2, up to 9.
- A decimal point button (Yup, we will also calculate float values).
- The = button.
We will use HTML Form and Table to prepare the structure of our calculator.
Just copy and paste the code for Java-Script Calci which is given below in notepad or any other text editor and save it with extension .html or .htm (For example: calculator.html) and your basic calculator is ready.
Javascript Code for Calculator:
<html>
<head>
<title>Calculator</title>
<script language="javascript">
var i,j,op1,op2,op,f;
function digit(i)
{
switch(i)
{
case 1:
document.calc.display.value=(document.calc.display.value)+"1";
break;
case 2:
document.calc.display.value=(document.calc.display.value)+"2";
break;
case 3:
document.calc.display.value=(document.calc.display.value)+"3";
break;
case 4:
document.calc.display.value=(document.calc.display.value)+"4";
break;
case 5:
document.calc.display.value=(document.calc.display.value)+"5";
break;
case 6:
document.calc.display.value=(document.calc.display.value)+"6";
break;
case 7:
document.calc.display.value=(document.calc.display.value)+"7";
break;
case 8:
document.calc.display.value=(document.calc.display.value)+"8";
break;
case 9:
document.calc.display.value=(document.calc.display.value)+"9";
break;
case 0:
document.calc.display.value=(document.calc.display.value)+"0";
break;
case 10:
document.calc.display.value=(document.calc.display.value)+".";
break;
}
}
function operation(j)
{
if(j==1)
{
op1=parseFloat(document.calc.display.value);
document.calc.display.value="";
op=1;
}
if(j==2)
{
op1=parseFloat(document.calc.display.value);
document.calc.display.value="";
op=2;
}
if(j==3)
{
op1=parseFloat(document.calc.display.value);
document.calc.display.value="";
op=3;
}
if(j==4)
{
op1=parseFloat(document.calc.display.value);
document.calc.display.value="";
op=4;
}
if(j==5)
{
op2=parseFloat(document.calc.display.value);
if(op==1)
{
f=op1+op2;
document.calc.display.value=f;
}
else if(op==2)
{
f=op1-op2;
document.calc.display.value=f;
}
else if(op==3)
{
f=op1*op2;
document.calc.display.value=f;
}
else if(op==4)
{
f=op1/op2;
document.calc.display.value=f;
}
}
}
</script>
</head>
<body>
<form name="calc">
<table align="center" bgcolor="black" cellspadding=5 cellspacing=5 height=200 width=200>
<tr>
<td colspan=4 align="center">
<input type="text" name="display">
</td>
</tr>
<tr>
<td>
<input type="button" name="B" value=" 7 " onClick="digit(7)">
</td>
<td>
<input type="button" name="B" value=" 8 " onClick="digit(8)">
</td>
<td>
<input type="button" name="B" value=" 9 " onClick="digit(9)">
</td>
<td>
<input type="button" name="B" value=" + " onClick="operation(1)">
</td>
</tr>
<tr>
<td>
<input type="button" name="B" value=" 4 " onClick="digit(4)">
</td>
<td>
<input type="button" name="B" value=" 5 " onClick="digit(5)">
</td>
<td>
<input type="button" name="B" value=" 6 " onClick="digit(6)">
</td>
<td>
<input type="button" name="B" value=" - " onClick="operation(2)">
</td>
</tr>
<tr>
<td>
<input type="button" name="B" value=" 1 " onClick="digit(1)">
</td>
<td>
<input type="button" name="B" value=" 2 " onClick="digit(2)">
</td>
<td>
<input type="button" name="B" value=" 3 " onClick="digit(3)">
</td>
<td>
<input type="button" name="B" value=" * " onClick="operation(3)">
</td>
</tr>
<tr>
<td>
<input type="button" name="B" value=" 0 " onClick="digit(0)">
</td>
<td>
<input type="button" name="B" value=" . " onClick="digit(10)">
</td>
<td>
<input type="button" name="B" value=" = " onClick="operation(5)">
</td>
<td>
<input type="button" name="B" value=" / " onClick="operation(4)">
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
Calculator Output:
Check out this calculator above by performing some mathematical operations.
6 comments:
It is working fine but there no clear button
nice yar it has given very sinple coding for a learner
thankz for the help...
To add a clear button you just need to add the coding for button and then add a case or function:
document.calc.display.value="";
backspace button ?
Hi akash
Thank you so much.. It really helped me. I was given task to make calculator without using eval(). This helped me a lot.
can you tell me i want to display 4*4 like this..how to add operator after digits which is show in display box
Post a Comment