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.
A four function calculator (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>
Blade10878
0
Junior Poster in Training
this is alsome!
bhadz
0
Unverified User
wow.. its great...
bhadz
0
Unverified User
how can I come up with the if and else, for loop, cases with html?
debasispradhan
0
Newbie Poster
:) 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.
mybaby567
0
Newbie Poster
hello! can you give the code of the 4 basic operation in calculator?
such sa addtion, subtraction, addition and multiplication..
tnx a lot..
mybaby567
0
Newbie Poster
using vb6
learnin
0
Newbie Poster
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
866
Retired: passive income ROCKS
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
-4
Newbie Poster
Wow! This is really awesome!!. .
umapathi7s
0
Newbie Poster
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
BuraRAhul
0
Newbie Poster
Hi guys This is Rahul
I need some more controls in calc like cancel,enter,backsapce can any one help to me pls.
ablitz
-5
Light Poster
thanx for sharing:)
almostbob
866
Retired: passive income ROCKS
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;'>
unwind
0
Newbie Poster
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...
printrobin
-3
Light Poster
Awesome! can we make this calculator only with the help of html?
almostbob
866
Retired: passive income ROCKS
not only html, javascript to do the crunching,
innoccuous javascript,
but some users have all javascripting disabled as a security issue.
Coldston87
0
Newbie Poster
Hi I would need one decimal also.
However I have edited and got it. But it is also a necessary thing..
appleluv
0
Newbie Poster
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!!!!!
sid the kid
0
Newbie Poster
Excellent. I'm trying to learn html this has helped me a lot. Many thanks
sheilaaellis44
0
Newbie Poster
Here is how I would approach your calculator problem:
1) find a reference solution in HTML (google will help you find example calculator code)
e.g., http://www.daniweb.com/code/snippet216407.html
2) use MobiOne Design Center to paint a calculator UI.
2a) Use custom button components for the numbers and functions. Create an initial button for the numbers and the copy/paste it 8 more times and change it's text for the appropriate number, 0-9
2b) Include an input field component for presenting the current value
3) run the design in the Test Center iPhone emulator to confirm the UI appears the way you want it to
4) you'll have to write javascript for the button actions
See #1 above for example code and inspiration :)
You can use the Test Center to view and edit the HTML, JS, or CSS files that make up your calculator webapp.
Note, MobiOne does not yet protect customizations of the generated code from a design. Therefore be extra careful not to overwrite your custom js in #3. Currently I put my custom css and js in completely separate files.
Good luck.
jkpjtm
0
Newbie Poster
Very Helpful Thank u.....
MidiMagic
579
Nearly a Senior Poster
HTML needs a script to do any math or display any numbers from a data source. Used alone, HTML can't do anything but control how a web page is displayed.
komalsamad
0
Newbie Poster
not run plz help
mikerock
0
Newbie Poster
I also make calculator in java script. When i developed my calculator in javascript I had to write many function. Your code is very simple and no need to use javascript. I also checked it on browser, worked well.
Ilian
0
Newbie Poster
Wow is's so so simple. I was thinking about DOM tree, innerHTML so on so on.
selle18
0
Newbie Poster
OHHH SOME!!!
slavica.k
0
Light Poster
wow html can do maths? i taught only java script could do it!
diafol
Please guys. Leave this thread alone unless you have a question or an improvement. If you wish to say thank you, kindly give the contributors a +1 or some positive reputation instead of leaving a comment as that only serves to push this very old post to the top of the "current" list. Posters who post drivel will probably find that they will be downvoted by the community. Thank you.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.