HTML and CSS

A four function calculator (HTML)

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

vegaseat

Offline Jan 10th, 2005, 2:02 pm |

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

Code Snippet

•

HTML and CSS 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>

Code Snippet Comments

Blade10878 Blade10878 is offline

Offline | Aug 10th, 2005

•

this is alsome!

bhadz

Offline | Dec 21st, 2005

•

wow.. its great...

bhadz

Offline | Dec 21st, 2005

•

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

debasispradhan debasispradhan is offline

Offline | 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.

mybaby567

Offline | Jul 25th, 2008

•

using vb6

mybaby567

Offline | 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..

learnin

Offline | 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

almostbob

Offline | 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;">

campuzcrazyness campuzcrazyness is offline

Offline | Feb 17th, 2009

•

Wow! This is really awesome!!. .

Quick Comment

Similar Threads

HTML code for a freight calculator? (HTML and CSS)
4 Function Calculator textbox or field control (ASP.NET)
Square root function in calculator (Java)
C++ HTML Encode Function (C++)
Calling function to add HTML to the page (ASP.NET)

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes