How to make a four function calculator in HTML

**Vicious** · 14-04-2009

I would like to have a four-function calculator and made some code for it in HTML but the problem is that it doesent calculate precisely. I have also searched on websites for web based calculators but it is not what I require. Is there someone who can make this work correctly. Thank you

**Expertz** · 14-04-2009

Have you looked at using the asciimath calculator? Demo here: http://www1.chapman.edu/~jipsen/math...alculator.html
This can be embedded anywhere, modded to your hearts content and provides rather extensive ability to display math as well as graphs

**JAMES_911** · 14-04-2009

Hope this helps you

Code:

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

Source: Daniweb

**Team Leader** · 14-04-2009

You can also make Four Function Calculator using Java and Swing

Overview
The calculator is window with a menu bar, single-line text display and buttons. The user can only enter data using the buttons in the display and keyboard input is disabled. The text display and buttons are laid out in a tabular format. The menu bar has File / Exit and Help / About menu items.

Folder Structure
To facilitate discussion, below is the folder structure of the source code:

./src:
infixcalculator resources

./src/infixcalculator:
AboutAction.java HelpAction.java InfixCalculatorResource.java
ExitAction.java images Main.java
FileAction.java InfixCalculator.java Model.java

./src/infixcalculator/images:
InfixCalculator_32x32.gif InfixCalculator_32x32.xcf

./src/resources:
InfixCalculator.properties

For more info go to this link.