|
Calculators For Your Web Site : Length Units Converter
By Stephen Bucaro
The goal for any Web site owner is get to attract visitors and get them to stick around.
This is referred to as making your Web site "sticky". One way to do that is to provide
useful features like online calculators. In this article, I provide you with Java Script
code for a Length Units Converter. For example, your visitor can enter a length in English
feet and it will be converted to a length in metric meters.
I keep the code as simple as possible and I will explain the code in detail so that you
will feel confident enough to modify the code for your own Web site. If you follow the
description here, you can use this same basic structure to design all kinds of units converters,
for example, weight, volume, and area units converters. You could create a Web site that
is totally dedicated to providing calculators and converters; that should draw plenty
of traffic.
The Length Units Converter has three parts; the form where the user enters a length
value and selects measurement units, a matrix of conversion factors, and a small Java
Script function to perform the units conversion. At the end of this article is a working
model of the application to check out.
The code for the form is shown below.
<form name="convForm" onSubmit="javascript:return false;">
Length: <input type="text" name="fromLength" value="1"
size=6 style="text-align:right" onChange="Convert()";>
<select name="fromUnits" onChange="Convert()";>
<option>inches</option>
<option>feet</option>
<option>yards</option>
<option>miles</option>
<option>centimeters</option>
<option>meters</option>
<option>kilometers</option>
</select>
=
<span id="toLength" style="border-style:solid;
border-width:1px; width:90px; text-align:right">1</span>
<select name="toUnits" onChange="Convert()";>
<option>inches</option>
<option>feet</option>
<option>yards</option>
<option>miles</option>
<option>centimeters</option>
<option>meters</option>
<option>kilometers</option>
</select>
</form>
There are several interesting things to note about this code. The form does not provide a
submit button (or any button at all). In fact, the onSubmit event of the form is disabled
by making it return a value of "false". The reason for this is because if the user hits
the "Enter" key after entering a value in the form's text box, the form would be submitted,
causing it to lose the values entered. Not a big deal, but annoying to the user.
The form works by executing a function named "Convert" in response to the onChange events
of the text box and select boxes (drop-down lists). The "Convert" function will display
the results of the conversion in the html span. Note the style rule applied to the text
box to make the text align to the right, and the style rules applied to the span to make it
appear as a box with text aligned to the right.
The order that the units are listed in the options list is important. They must be listed
in the same order as the converion factors are listed in the matrix. A matrix is defined
in Java Script as an "array of arrays". The code for this is shown below.
var factors = new Array(inches,feet,yards,miles,
centimeters,meters,kilometers);
Each of the elements of this array (inches, feet, yards, and so on) is an array itself.
The array elements must be listed in the same order as the options are listed in the
select element. I emphasize this because if you modify the application, for example
add millimeters, you must put the conversion factors in the proper order in the arrays.
| 
Free Downloads
RSS Feed