DaniWeb IT Discussion Community
1 2
Show 40 post(s) from this thread on one page

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)
-   HTML and CSS (http://www.daniweb.com/forums/forum143.html)
-   -   Code Snippet: A four function calculator (HTML) (http://www.daniweb.com/forums/thread216407.html)

vegaseat Jan 10th, 2005 2:02 pm
A four function calculator (HTML)
 
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.
 

  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>
Blade10878 Aug 10th, 2005 2:31 pm
this is alsome!

bhadz Dec 21st, 2005 1:56 pm
wow.. its great...

bhadz Dec 21st, 2005 1:57 pm
how can I come up with the if and else, for loop, cases with html?

debasispradhan Nov 6th, 2006 7:26 am
:) 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 Jul 25th, 2008 5:14 am
using vb6

mybaby567 Jul 25th, 2008 5:15 am
hello! can you give the code of the 4 basic operation in calculator?
such sa addtion, subtraction, addition and multiplication..

tnx a lot..

learnin Dec 14th, 2008 2:39 pm
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 Jan 28th, 2009 5:00 pm
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 Feb 17th, 2009 8:08 am
Wow! This is really awesome!!. .


All times are GMT -4. The time now is 3:33 pm.
1 2
Show 40 post(s) from this thread on one page

Forum system based on vBulletin Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
©2003 - 2009 DaniWeb® LLC