943,972 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > A four function calculator (HTML)
Ad:
0

A four function calculator (HTML)

by on Jan 10th, 2005
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.
HTML and CSS Code Snippet (Toggle Plain Text) 
  1. <!-- experiments with table & button-input  vegaseat  2/13/02 -->
  2. <!-- table, border, cellpadding, cellspacing, input, onClick -->
  3. <!-- uses eval() to do the final calculation -->
  4. <!-- note: eval() traps divide by zero error -->
  5.  
  6. <html>
  7. <head>
  8.  
  9. 	<title>A Simple Four-Banger</title>
  10.  
  11. </head>
  12. <body>
  13.  
  14. <form name="calculator">
  15.  
  16. <!-- form the display to match the keypad -->
  17. <table border="4" cellpadding="1" bordercolor="#FFFFFF" bgcolor="#73B27B" cellspacing="2" width="222">
  18. <tr>
  19. <td>
  20. <input type="text" size="25" length="25" value="" name="ans" style="background:beige;color:black;">
  21. </td>
  22. </tr>
  23. </table>
  24.  
  25. <!-- form the keypad with buttons in a table -->
  26. <table border="4" cellpadding="2" bordercolor="#FFFFFF" cellspacing="2" width="150" bgcolor="#73B27B">
  27. <tr>
  28. <td align="center">
  29. <input type="button" value="  7  " name="seven" onClick="document.calculator.ans.value+='7'">
  30. </td>
  31. <td align="center">
  32. <input type="button" value="  8  " name="eight" onClick="document.calculator.ans.value+='8'">
  33. </td>
  34. <td align="center">
  35. <input type="button" value="  9  " name="nine" onClick="document.calculator.ans.value+='9'">
  36. </td>
  37. <td align="center">
  38. <input type="button" value="  /  " name="divide" onClick="document.calculator.ans.value+='/'">
  39. </td>
  40. </tr>
  41. <tr>
  42. <td align="center">
  43. <input type="button" value="  4  " name="four" onClick="document.calculator.ans.value+='4'">
  44. </td>
  45. <td align="center">
  46. <input type="button" value="  5  " name="five" onClick="document.calculator.ans.value+='5'">
  47. </td>
  48. <td align="center">
  49. <input type="button" value="  6  " name="six" onClick="document.calculator.ans.value+='6'">
  50. </td>
  51. <td align="center">
  52. <input type="button" value="  *  " name="multiply" onClick="document.calculator.ans.value+='*'">
  53. </td>
  54. </tr>
  55. <tr>
  56. <td align="center">
  57. <input type="button" value="  1  " name="one" onClick="document.calculator.ans.value+='1'">
  58. </td>
  59. <td align="center">
  60. <input type="button" value="  2  " name="two" onClick="document.calculator.ans.value+='2'">
  61. </td>
  62. <td align="center">
  63. <input type="button" value="  3  " name="three" onClick="document.calculator.ans.value+='3'">
  64. </td>
  65. <td align="center">
  66. <input type="button" value="  -  " name="subtract" onClick="document.calculator.ans.value+='-'">
  67. </td>
  68. </tr>
  69. <tr>
  70. <td align="center">
  71. <input type="button" value="  C  " name="clear" onClick="document.calculator.ans.value=''">
  72. </td>
  73. <td align="center">
  74. <input type="button" value="  0  " name="zero" onClick="document.calculator.ans.value+='0'">
  75. </td>
  76. <td align="center">
  77. <input type="button" value="  =  " name="equal" 
  78.   onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
  79. </td>
  80. <td align="center">
  81. <input type="button" value="  +  " name="add" onClick="document.calculator.ans.value+='+'">
  82. </td>
  83. </tr>
  84. </table>
  85.  
  86. </form>
  87.  
  88. </body>
  89. </html>
Comments on this Code Snippet
Permalink
Aug 10th, 2005
0

Re: A four function calculator (HTML)

this is alsome!
Junior Poster in Training
Blade10878 is offline Offline
86 posts
since Nov 2004
Permalink
Dec 21st, 2005
0

Re: A four function calculator (HTML)

wow.. its great...
Unverified User
bhadz is offline Offline
2 posts
since Dec 2005
Permalink
Dec 21st, 2005
0

Re: A four function calculator (HTML)

how can I come up with the if and else, for loop, cases with html?
Unverified User
bhadz is offline Offline
2 posts
since Dec 2005
Permalink
Nov 6th, 2006
0

Re: A four function calculator (HTML)

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.
Last edited by peter_budo; Jun 6th, 2010 at 9:51 am. Reason: Snipping URL from old post
Newbie Poster
debasispradhan is offline Offline
3 posts
since Oct 2006
Permalink
Jul 25th, 2008
0

Re: A four function calculator (HTML)

using vb6
Newbie Poster
mybaby567 is offline Offline
2 posts
since Jul 2008
Permalink
Jul 25th, 2008
0

Re: A four function calculator (HTML)

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

tnx a lot..
Newbie Poster
mybaby567 is offline Offline
2 posts
since Jul 2008
Permalink
Dec 14th, 2008
0

Re: A four function calculator (HTML)

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
Newbie Poster
learnin is offline Offline
1 posts
since Dec 2008
Permalink
Jan 28th, 2009
0

Re: A four function calculator (HTML)

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;">
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Feb 17th, 2009
0

Re: A four function calculator (HTML)

Wow! This is really awesome!!. .
Newbie Poster
campuzcrazyness is offline Offline
17 posts
since Jan 2008
Message:
Previous Thread in HTML and CSS Forum Timeline: Side Scrolling Photo Gallery?
Next Thread in HTML and CSS Forum Timeline: How do I change hyperlink color...





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC