3 Replies - 15074 Views - Last Post: 11 August 2015 - 10:29 PM

#1 nanowire  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 107
  • Joined: 05-January 10

A Simple HTML Calculator

Posted 11 January 2010 - 09:59 AM

Description: Just copy and paste into your website. A good site to test HTML is http://www.draac.com/htmltester.html
and yeah, good to test if you change the color. It is in Black, but you can change the color by changing the color on the lines that are shown in the code.
<html>
<head>
<title>My Very Simple HTML Calculator</title>       
</head>
<body>       
<form name="calculator">
<!-This is a line which you can change the color on the bordercolor and bgcolor->
<table border="4" cellpadding="1" bordercolor="#00000" bgcolor="#000000" cellspacing="2" width="222">
<tr>
<td>
<input type="text" size="25" length="25" value="" name="ans" style="background:beige;color:black;">
</td>
</tr>
</table>       
<!-This is a line which you can change the color in the bordercolor and bgcolor->
<table border="4" cellpadding="2" bordercolor="#00000" cellspacing="2" width="150" bgcolor="000000">
<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>


Is This A Good Question/Topic? 1
  • +

Replies To: A Simple HTML Calculator

#2 fanoo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 0
  • Joined: 10-October 12

Re: A Simple HTML Calculator

Posted 10 October 2012 - 03:01 AM

nice share.. like this (y)
Was This Post Helpful? 0
  • +
  • -

#3 SomeMan  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 01-April 14

Re: A Simple HTML Calculator

Posted 11 August 2015 - 05:02 PM

View Postnanowire, on 11 January 2010 - 09:59 AM, said:

Description: Just copy and paste into your website. A good site to test HTML is http://www.draac.com/htmltester.html
and yeah, good to test if you change the color. It is in Black, but you can change the color by changing the color on the lines that are shown in the code.


Thanks for the very good share.
One question: How does it work - "document.calculator.ans.value"?
What kind of file is it and where it is located?
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • say what now
  • member icon

Reputation: 6410
  • View blog
  • Posts: 25,916
  • Joined: 12-December 12

Re: A Simple HTML Calculator

Posted 11 August 2015 - 10:29 PM

calculator is the name of the form that is towards the top of the page, and ans is the name of the input.

Note that the page is missing the required DOCTYPE:
<!DOCTYPE html>

this should be the first line of the page.

Note also that it includes a number of table attributes (bgcolor, align, etc.) that are no longer supported in HTML5. In fact, most of the attributes are no longer supported.

The snippet will still work but readers should update it to modern HTML standards.

This post has been edited by andrewsw: 11 August 2015 - 10:30 PM

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1