HTML Code for calculator

**jonnycash** · 08-02-2006, 03:28 PM

Hi,

I want to include a calculator on my website. But I'm struggling with the code. I know I have to have a form for it and a html file on my server but that is about it. I don't know very much about forms.

I've got a lot of the general code done but don't know what to do now.

Can you please help?
Thanks
So far this is what I've got:-

<body>
<form name="calc" method="post" action="../Cost_of_smoking_calculator/">
<table align="center" cellspacing="0" cellpadding="0" border="0" width="70%">
<tr>
<td width= "50%">How much does a pack of 20 cigarettes cost you?   </td>
<td width= "20%"><input type="text" name="howmuch" size="5" maxlength="5" value="£0.00"></td>
</tr>
<tr>
<td width= "50%">How many cigarettes do you smoke a day?</td>
<td width= "20%"><input type="text" name="howmany" size="5" maxlength="5" value=""></td>
</tr>
<tr>
<td width= "50%">How many years have you been smoking?</td>
<td width= "20%"> <input type="text" name="years" size="5" maxlength="5" value=""></td>
</tr>
<tr>
<td width= "50%"> </td>
<td width= "20%"> </td>
</tr>
<tr>
<td width= "50%"> </td>
<td width= "20%"><input type="submit" name="Submit" value="Calculate"></td>
</tr>
</table>
</form>
<br>
<br>
<table cellspacing="0" cellpadding="0" border="0" width="70%">
<table align="center" bordercolor="#CCCCCC" border="4" width="60%">
<tr>
<td bgcolor="#FFFF33" width= "50%" height="40"><center>Each <b>week</b> smoking costs you</center></td>
<td width= "20%"><b>£ 0</b></td>
</tr>
<tr>
<td bgcolor="#FFFF33" width= "50%" height="40"><center>Each <b>month</b> smoking costs you</center></td>
<td width= "20%"><b>£ 0</b></td>
</tr>
<tr>
<td bgcolor="#FFFF33" width= "50%" height="40"><center>Each <b>year</b> smoking costs you</center></td>
<td width= "20%"><b>£ 0</b></td>
</tr>
<tr>
<td bgcolor="#FFFF33" width= "50%" height="40"><center>So far cigarettes have cost you a <b>grand total</b> of</center></td>
<td width= "20%" height="40"><b>£ 0</b></td>
</tr>
</table>
<p> </p>
<p><font size="+2"><b>The money you have spent on cigarettes could have been spent on...</b></font></p>
<br>
<br>
<table align="center" bordercolor="#CCCCCC" border="4" width="60%">
<tr>
<td width= "4%" height="30">0</td>
<td bgcolor="#FFFF33" width= "56%" height="30">Flights to Australia</td>
</tr>
<tr>
<td width= "4%">0</td>
<td bgcolor="#FFFF33" width= "56%" height="30">MP3 Players</td>
</tr>
<tr>
<td width= "4%" height="30">0</td>
<td bgcolor="#FFFF33" width= "56%" height="30">CDs</td>
</tr>
<tr>
<td width= "4%" height="30">0</td>
<td bgcolor="#FFFF33" width= "56%" height="30">Sports cars</td>
</tr>
<tr>
<td width= "4%" height="30">0</td>
<td bgcolor="#FFFF33" width= "56%" height="30">Sun-drenched holidays in the Mediterranean</td>
</tr>
<tr>
<td width= "4%" height="30">0</td>
<td bgcolor="#FFFF33" width= "56%" height="30">Months repayments on a 2 bedroom flat</td>
</tr>
<tr>
<td width= "4%" height="30">0</td>
<td bgcolor="#FFFF33" width= "56%" height="30">Pairs of jeans</td>
</tr>
</table>
<p><font size="+2"><b>If you dont stop smoking now: -</b></font></p>
<table align="center" bordercolor="#CCCCCC" border="4" width="60%">
<tr><td bgcolor="#FFFF33" height="40"><center>In <b>two</b> years you will have spent</center></td><td width= "20%" height="40"><b>£ 0</b></td>
</tr>
<tr><td bgcolor="#FFFF33"height="40"><center>In <b>five</b> years you will have spent</center></td><td width= "20%" height="40"><b>£ 0</b></td>
</tr>
<tr><td bgcolor="#FFFF33" height="40"><center>In <b>ten</b> years you will have spent</center></td><td width= "20%" height="40"><b>£ 0</b></td>
</table>

</body>

**mwinter** · 08-02-2006, 05:44 PM

I've produced a fairly quick-and-dirty example. I haven't bothered to style it, but notice that the markup is much simpler.

The script code is fairly complex, though I took a few shortcuts; the parseCurrency function, for example, is overly simplified. In case you're wondering why the literal numbers are so large, they're scaled by 100 so that the calculations are in pennies. Standard practice for financial work and though it's not necessary here, it was easier than changing my Number.prototype.toCurrency method, which expects pennies.

The numbers in the list of equivalences are rounded to 1 decimal place.

You're welcome to ask any questions about the markup or the code, especially if you're having problems changing parts to fit what you really after.

Hope that helps,
Mike

**jonnycash** · 08-10-2006, 01:56 PM

Hi, sorry in the delay I'v been away.

Thanks for the help but I'm totally lost there!!

I can generally get the idea of what is going on there but I don't understand how to implement it on my site.

Surely I have to have a page / file on my server?? I'm a novice here so I'd appreciate the help. I've copied the html into my browser and when I press calculate I get nothing! Does that mean that I have to have an additional html or other type of file /document on my server's httpdocs or my local file when working on the local copy?

The style I've used on the original html above is consistent with my site, can I modify your html addint my style easily?

thanks

**blm126** · 08-10-2006, 02:15 PM

You also need to copy everything on the <head> tag

**mwinter** · 08-10-2006, 02:54 PM

Originally Posted by jonnycash

I can generally get the idea of what is going on there but I don't understand how to implement it on my site.

I would suggest that you start by editing a copy of the file, rather than trying to copy bits and pieces from it. You're more likely to miss something that way.

Surely I have to have a page / file on my server??

Of course.

I've copied the html into my browser and when I press calculate I get nothing!

If you get further problems like this, please post a link to what you've attempted.

Does that mean that I have to have an additional html or other type of file /document on my server's httpdocs or my local file when working on the local copy?

No. It probably just means that you didn't copy the contents correctly. As I suggested above, work from a complete copy.

The style I've used on the original html above is consistent with my site, can I modify your html addint my style easily?

More than likely. The elements with id attributes (one div, three input, fourteen span) are the targets for the script. It doesn't matter (from a practical viewpoint) what markup is used to contain them, as long as they exist somewhere.

Mike

**jonnycash** · 08-11-2006, 12:07 AM

Hi again,

Ok I've copied and eddited your original to suit the style of my site, however I'm guessing that the javascript, which I don't totally understand, has got mixed up somewhere.

Also what do I need to do to change the figues to whole numbers without decimals please?

Can you point me out where I've gone wrong?

I've just edited the local copy so it is attached.

thanks

**mwinter** · 08-11-2006, 08:59 PM

Originally Posted by jonnycash

Also what do I need to do to change the figues to whole numbers without decimals please?

Remove the toFixed method call, and call the Math.round method instead. For example,

Code:

setText("flights", Math.round(lifetimeCost / 75000));

You should also remove the argument from the toCurrency method call. For example:

Code:

setText("weekly-cost", (dailyCost * 7).toCurrency());

Can you point me out where I've gone wrong?

Your markup is invalid. As a result, the document tree has required heavy error correction by the browser.

The first clear example is the inclusion of the html start-tag and script start- and end-tags within a script element. Far more obscure is the badly nested table elements; the only way I found that was to reformat your markup (by hand) to establish which start-tags match which end-tags.

Mike

**jonnycash** · 08-15-2006, 10:16 PM

Hi, I've changed the code as described above for the Math.round method and the toCurrency method. thanks

However,

As i mentioned earlier I've not been writing code long so I'm lost when you say my mark up is invalid. I'm using dreamweaver and if I go to 'validate markup' I get loads of errors, even though my browsers display the pages no problem.

I don't know what exactly is wrong with the table elements?

Also, I don't understand what you mean by the "inclusion of the html start-tag and script start- and end-tags within a script element."

I've written all my code by hand - I take it this is where I've messed up the table tags?

Dreamweaver told me to include the html tag after the <script language="JavaScript"> tag

I'm not sure what to do with the script tags because I've never really used them.

Seein as I'm constantly adding new elements to the webpage, where do I put this tag you made?

<SCRIPT type=text/javascript>
var projections;

if (document.getElementById
&& (projections = document.getElementById("projections"))
&& projections.style)
projections.style.display = "none";
</SCRIPT>

I have no idea about some of the elements,

Does the code require a lot of work to be corrected please?

thanks

**mwinter** · 08-16-2006, 01:06 AM

Originally Posted by jonnycash

As i mentioned earlier I've not been writing code long so I'm lost when you say my mark up is invalid.

As I'm sure you can appreciate, as a language, HTML has various rules on what's allowed and not allowed. Some of these rules are inherent to the language itself, whilst others vary based on the document type (Strict, Transitional, or Frameset). A document is valid when it obeys these all of these syntax rules.

Most of these rules are intuitive, like making sure tags don't overlap:

HTML Code:

<strong><a href="/somewhere">Link text</strong></a>  <!-- Wrong! -->
<strong><a href="/somewhere">Link text</a></strong>  <!-- Right -->

attributes don't appear twice within the same start-tag, and the value of each id attribute is unique within a document.

The others - those that vary based on document type - are sensible, but require a familiarity with the various elements in HTML. What these rules basically boil down to is:

Which start- and end-tags are optional, required, or forbidden
Which attributes (if any) are required for a given element
What content is allowed within a given element

For example, both start- and end-tags are required for anchors (a elements).

HTML Code:

<a ...>Anchor text</a>

With paragraphs (p elements), the end-tag is optional, so:

HTML Code:

<p>Some text.

is legal (but it's good form to always include optional end-tags). With input elements, the end-tag is forbidden; only the start-tag is used to include the element.

Examples of required attributes include the type attribute for script and style elements, and the action attribute for form elements.

Permitted content gets a little trickier to summarise, particularly because there are many elements that have their own restrictions.

First of all, it's convenient to categorise elements into two groups: in-line elements, and block-level elements. Block-level elements are typically used as containers or to group elements. Examples include tables, paragraphs, lists, headings, and divisions (div elements). Some block-level elements (like divisions, forms, lists and tables) can contain other block-level elements, whilst others (such as paragraphs and headings) can only contain in-line elements. In-line elements are typically related to text, or that sort of content. They include anchors (a elements), images (img elements), phrase elements (strong, em, code, dfn), and form controls (input, select, textarea).

The limitations of element content again follow the pattern of optional, required, and forbidden. For example, the table element itself cannot directly contain anything other than table-related elements, namely captions, columns and column groups (col and colgroup, respectively), table sections (tbody, thead, and tfoot) and table rows (tr elements). Similarly, table rows can only contain table cells and table headers (td and th, respectively). As another example, though anchors can contain in-line elements, that cannot include other anchors.

The HTML Specification lists all of the elements, and discusses all of these rules, but it's a lot to read (though it's something that should be read). It also uses SGML to describe elements, attributes, and their contents, so the SGML primer in chapter 3 is a "must read".

I'm using dreamweaver and if I go to 'validate markup' I get loads of errors, even though my browsers display the pages no problem.

Browsers have been engineered over time to try and make sense of errors. If a browser simply gave up upon encountering an invalid construct (something that's perfectly acceptable, by the way), most of the Web would be unusable with that browser. However, error correction mechanisms vary from browser-to-browser, with each sometimes making subtly different alterations. As such, it's not a good idea to rely on that feature. Moreover, I would hope a little personal pride would drive people into authoring well-written documents.

I don't know what exactly is wrong with the table elements?

In some cases, you have table cells as children of the table element itself:

HTML Code:

<table>
  <td>...</td>

and in others, you have table rows without table cells:

HTML Code:

<table>
  <tr>
    <div id="projections">

Both of these are forbidden.

Also, I don't understand what you mean by the "inclusion of the html start-tag and script start- and end-tags within a script element."

In the first script element, you've included a html element start-tag:

HTML Code:

<script language="JavaScript"><html>

That is wrong. Later on, you also include the start- and end-tags for a script element, but within a script element. That is, something that would look like:

HTML Code:

<script ...>
  <script ...>
  </script>
</script>

if there was no intervening text. Again, that is wrong.

Whilst we're here: you should use the type attribute instead of the language attribute.

HTML Code:

<script type="text/javascript">

The former has been deprecated for over nine years. You should also not used markup comments () within either script or style elements.

I've written all my code by hand - I take it this is where I've messed up the table tags?

One doesn't necessarily follow from the other: I write markup by hand. However, you might help yourself spot mistakes by indenting tags, and for elements with end-tags, you might want to write them in pairs. For instance:

HTML Code:

<table>
</table>

HTML Code:

<table>
  <tr>
  </tr>
</table>

HTML Code:

<table>
  <tr>
    <td></td>
  </tr>
</table>

and so on.

Dreamweaver told me to include the html tag after the <script language="JavaScript"> tag

I must say that even though I dislike Dreamweaver on principle (it's WYSIWYG, which is generally inappropriate for the Web), I find that statement a little hard to believe. Whilst it can produce abysmal markup, even Frontpage (one of the worst authoring programs) isn't that bad.

Seein as I'm constantly adding new elements to the webpage, where do I put this [script] tag you made?

Anywhere after the end-tag for the div element with the id "projections":

HTML Code:

<div id="projections">
  <!-- Projected smoking expenses, etc. -->
</div>

<!-- The script element can be inserted at any valid location after this point. -->

As a rule, quote all attribute values. Though it isn't strictly necessary in some cases (but it is required, here), it'll be easier for the moment than learning when you're allowed to omit them.

Does the code require a lot of work to be corrected please?

Yes. If it didn't, I'd have done you the favour of rewriting it, pointing out the individual problems.

Mike