1,105,427 Community Members

A four function calculator (HTML)

Member Avatar
Reputation Points: 1,544 [?]
Q&As Helped to Solve: 1,872 [?]
Skill Endorsements: 67 [?]
 
0
 

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.

<!-- 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>
Member Avatar
Blade10878
Junior Poster in Training
86 posts since Nov 2004
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

this is alsome!

bhadz
Newbie Poster
2 posts since Dec 2005
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
Unverified Member
 
0
 

wow.. its great...

bhadz
Newbie Poster
2 posts since Dec 2005
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
Unverified Member
 
0
 

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

Member Avatar
debasispradhan
Newbie Poster
3 posts since Oct 2006
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

:) Wow, Its Just Gr8. But I am having a similar HTML calculator in my blogsite ( <URL SNIPPED> ). Please have a look at it. And give your suggestions to improve it.

Member Avatar
mybaby567
Newbie Poster
2 posts since Jul 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

using vb6

Member Avatar
mybaby567
Newbie Poster
2 posts since Jul 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

tnx a lot..

Member Avatar
learnin
Newbie Poster
1 post since Dec 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
almostbob
Nearly a Senior Poster
3,388 posts since Jan 2009
Reputation Points: 515 [?]
Q&As Helped to Solve: 425 [?]
Skill Endorsements: 14 [?]
 
0
 

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

Member Avatar
campuzcrazyness
Newbie Poster
17 posts since Jan 2008
Reputation Points: -4 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Wow! This is really awesome!!. .

Member Avatar
umapathi7s
Newbie Poster
1 post since Feb 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
BuraRAhul
Newbie Poster
1 post since Dec 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi guys This is Rahul
I need some more controls in calc like cancel,enter,backsapce can any one help to me pls.

Member Avatar
ablitz
Light Poster
48 posts since Jul 2009
Reputation Points: -5 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
-1
 

thanx for sharing:)

Member Avatar
almostbob
Nearly a Senior Poster
3,388 posts since Jan 2009
Reputation Points: 515 [?]
Q&As Helped to Solve: 425 [?]
Skill Endorsements: 14 [?]
 
0
 

the only change I think to to make is in the display,
calculators typically fill from right to left as you punch numbers so

<input style='text-align:right;' type="text" size="25" length="25" value="" name="ans" style='text-align:right;background:beige;color:black;'>
Member Avatar
unwind
Newbie Poster
1 post since Mar 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

hi everyone! can you pls give me the code of the 4 basic operation in calculator in powerbuilder 8.0?
such sa addtion, subtraction, addition and multiplication..

thnx a lot...

Member Avatar
printrobin
Light Poster
47 posts since Jun 2009
Reputation Points: -3 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

Awesome! can we make this calculator only with the help of html?

Member Avatar
almostbob
Nearly a Senior Poster
3,388 posts since Jan 2009
Reputation Points: 515 [?]
Q&As Helped to Solve: 425 [?]
Skill Endorsements: 14 [?]
 
0
 

not only html, javascript to do the crunching,
innoccuous javascript,
but some users have all javascripting disabled as a security issue.

Member Avatar
Coldston87
Newbie Poster
1 post since May 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi I would need one decimal also.
However I have edited and got it. But it is also a necessary thing..

Member Avatar
appleluv
Newbie Poster
1 post since Aug 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi, I'm looking for html codes to calculate a date. For example, in excel i can have a date that says 8/06/11. I want to calculate 90 days from that date. in excel the formula would be =A1+90, which will equal 11/04/11.

I have it PHP:

$today = date("Y-m-d");// current date
$tomorrow = strtotime(date("Y-m-d", strtotime($today)) . " +1000 day");
$output = date("Y-m-d", $tomorrow);

I need it in HTML.


please help!!!!!

Member Avatar
Arkinder
Posting Pro in Training
441 posts since Nov 2010
Reputation Points: 93 [?]
Q&As Helped to Solve: 61 [?]
Skill Endorsements: 0 [?]
 
1
 

Please don't bring up old threads. Ask in the PHP section.

Regards
Arkinder

You
Post:
Start New Discussion
Tags Related to this Article