html Syntax

Blogs RSS

Forums RSS

A four function calculator (HTML)

Please support our HTML and CSS advertiser: Programming Forums

•

Jan 10th, 2005

Views: 38,212

vegaseat

Here we use the eval() function as the backbone of a simple calculator. One table is used for the display. A second table holds the buttons for the keypad. The whole thing forms an attractive looking calculator. To test it, simply paste the code into an editor like notepad and save it as Calculator.htm then run it in your browser.

Show Printable Version

•

html Syntax

Toggle Plain Text

<!-- experiments with table & button-input  vegaseat  2/13/02 -->
<!-- table, border, cellpadding, cellspacing, input, onClick -->
<!-- uses eval() to do the final calculation -->
<!-- note: eval() traps divide by zero error -->
 
<html>
<head>
 
	<title>A Simple Four-Banger</title>
 
</head>
<body>
 
<form name="calculator">
 
<!-- form the display to match the keypad -->
<table border="4" cellpadding="1" bordercolor="#FFFFFF" bgcolor="#73B27B" cellspacing="2" width="222">
<tr>
<td>
<input type="text" size="25" length="25" value="" name="ans" style="background:beige;color:black;">
</td>
</tr>
</table>
 
<!-- form the keypad with buttons in a table -->
<table border="4" cellpadding="2" bordercolor="#FFFFFF" cellspacing="2" width="150" bgcolor="#73B27B">
<tr>
<td align="center">
<input type="button" value="  7  " name="seven" onClick="document.calculator.ans.value+='7'">
</td>
<td align="center">
<input type="button" value="  8  " name="eight" onClick="document.calculator.ans.value+='8'">
</td>
<td align="center">
<input type="button" value="  9  " name="nine" onClick="document.calculator.ans.value+='9'">
</td>
<td align="center">
<input type="button" value="  /  " name="divide" onClick="document.calculator.ans.value+='/'">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="  4  " name="four" onClick="document.calculator.ans.value+='4'">
</td>
<td align="center">
<input type="button" value="  5  " name="five" onClick="document.calculator.ans.value+='5'">
</td>
<td align="center">
<input type="button" value="  6  " name="six" onClick="document.calculator.ans.value+='6'">
</td>
<td align="center">
<input type="button" value="  *  " name="multiply" onClick="document.calculator.ans.value+='*'">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="  1  " name="one" onClick="document.calculator.ans.value+='1'">
</td>
<td align="center">
<input type="button" value="  2  " name="two" onClick="document.calculator.ans.value+='2'">
</td>
<td align="center">
<input type="button" value="  3  " name="three" onClick="document.calculator.ans.value+='3'">
</td>
<td align="center">
<input type="button" value="  -  " name="subtract" onClick="document.calculator.ans.value+='-'">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="  C  " name="clear" onClick="document.calculator.ans.value=''">
</td>
<td align="center">
<input type="button" value="  0  " name="zero" onClick="document.calculator.ans.value+='0'">
</td>
<td align="center">
<input type="button" value="  =  " name="equal" 
  onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
</td>
<td align="center">
<input type="button" value="  +  " name="add" onClick="document.calculator.ans.value+='+'">
</td>
</tr>
</table>
 
</form>
 
</body>
</html>

<!-- experiments with table & button-input  vegaseat  2/13/02 -->
<!-- table, border, cellpadding, cellspacing, input, onClick -->
<!-- uses eval() to do the final calculation -->
<!-- note: eval() traps divide by zero error -->

<html>
<head>

	<title>A Simple Four-Banger</title>
	
</head>
<body>

<form name="calculator">

<!-- form the display to match the keypad -->
<table border="4" cellpadding="1" bordercolor="#FFFFFF" bgcolor="#73B27B" cellspacing="2" width="222">
<tr>
<td>
<input type="text" size="25" length="25" value="" name="ans" style="background:beige;color:black;">
</td>
</tr>
</table>

<!-- form the keypad with buttons in a table -->
<table border="4" cellpadding="2" bordercolor="#FFFFFF" cellspacing="2" width="150" bgcolor="#73B27B">
<tr>
<td align="center">
<input type="button" value="  7  " name="seven" onClick="document.calculator.ans.value+='7'">
</td>
<td align="center">
<input type="button" value="  8  " name="eight" onClick="document.calculator.ans.value+='8'">
</td>
<td align="center">
<input type="button" value="  9  " name="nine" onClick="document.calculator.ans.value+='9'">
</td>
<td align="center">
<input type="button" value="  /  " name="divide" onClick="document.calculator.ans.value+='/'">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="  4  " name="four" onClick="document.calculator.ans.value+='4'">
</td>
<td align="center">
<input type="button" value="  5  " name="five" onClick="document.calculator.ans.value+='5'">
</td>
<td align="center">
<input type="button" value="  6  " name="six" onClick="document.calculator.ans.value+='6'">
</td>
<td align="center">
<input type="button" value="  *  " name="multiply" onClick="document.calculator.ans.value+='*'">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="  1  " name="one" onClick="document.calculator.ans.value+='1'">
</td>
<td align="center">
<input type="button" value="  2  " name="two" onClick="document.calculator.ans.value+='2'">
</td>
<td align="center">
<input type="button" value="  3  " name="three" onClick="document.calculator.ans.value+='3'">
</td>
<td align="center">
<input type="button" value="  -  " name="subtract" onClick="document.calculator.ans.value+='-'">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="  C  " name="clear" onClick="document.calculator.ans.value=''">
</td>
<td align="center">
<input type="button" value="  0  " name="zero" onClick="document.calculator.ans.value+='0'">
</td>
<td align="center">
<input type="button" value="  =  " name="equal" 
  onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
</td>
<td align="center">
<input type="button" value="  +  " name="add" onClick="document.calculator.ans.value+='+'">
</td>
</tr>
</table>

</form>

</body>
</html>

Comments (Newest First)

umapathi7s | Newbie Poster | Feb 17th, 2009

•

A Simple calculator usng form fileds, have a files number entry one fill for resut allow the user to be able to use +,-,*,/

how will create this type of calculator can u send me or replay

campuzcrazyness | Newbie Poster | Feb 17th, 2009

•

Wow! This is really awesome!!. .

almostbob | Master Poster | Jan 28th, 2009

•

Damn good, I have only one possible idea
calclualtors usually are right justified, the digits extend from the right
so for the input containing the number

<input style='text-align:right;' type="text" size="25" length="25" value="" name="ans" style="background:beige;color:black;">

learnin | Newbie Poster | Dec 14th, 2008

•

I'm very very new to all this, but I'm having fun learning. I like the calculator, is there a way to make it round up to only 2 decimals? Please be very detailed - remember I'm very new.

Thanks

mybaby567 | Newbie Poster | Jul 25th, 2008

•

hello! can you give the code of the 4 basic operation in calculator?
such sa addtion, subtraction, addition and multiplication..

tnx a lot..

mybaby567 | Newbie Poster | Jul 25th, 2008

•

using vb6

debasispradhan | Newbie Poster | Nov 6th, 2006

•

Wow, Its Just Gr8. But I am having a similar HTML calculator in my blogsite ( http://bug-free-zone.blogspot.com ). Please have a look at it. And give your suggestions to improve it.

bhadz | Unverified User | Dec 21st, 2005

•

how can I come up with the if and else, for loop, cases with html?

bhadz | Unverified User | Dec 21st, 2005

•

wow.. its great...

Blade10878 | Junior Poster in Training | Aug 10th, 2005

•

this is alsome!

Post Comment on Code Snippet

•

Only community members can submit or comment on code snippets. You must register or log in to contribute.