View the Pace Calculator source
Let's look at the HTML layout first. To organize the layout, HTML tables are used. In fact, one table is embedded inside another to make a border around the pace calculator. Learn more at the <TABLE> reference.
Form Elements<FORM> reference
Refer to the source again. The <form> tag is located after the <body> tag. The first form element in the pace calculator is an option list. The other type of form element used here is the input element. The pace calulator uses the text, radio, and button inputs. Learn more at the <FORM> reference.
Refer to the source again. To get the form elements to react to user actions, they need to have events. In the pace calculator, the first event to occur is the onLoad event. This calls a function defaultStuff(), which sets up some default values.
Note. The argument document.Calc.CalcWhat.selectedIndex can be replaced with this.selectedIndex. The keyword this references the CalcWhat object, because it is located within that object.
Learn more about Events
Pre-loading the imagesRefer to the source again. After the constants is some logic to preload the images for the pace calculator. Preloading the images helps to avoid a lag later, when the images are switched. The "Distance", "Pace", and "Time" images are preloaded by creating a new Image, and setting the source for that image to the name of an actual image file. The reference may seem a little complicated. It is located in a folder called "images" in the root directory of the web site. In this example, ../images/runPaceOff.gif, the ../ points the reference up one directory to the root. Then, images/runPaceOff.gif points to the picture in a subdirectory of the root.
These references may help to clarify some things.
changePics(calculateFor)Refer to the source again. Look at the function changePics(calculateFor). It switches all the images to be their "On" image, then checks which option is picked. (The selected option is passed as the variable calculateFor). Then, the image for this selected option is set to its "Off" image.
calcIt()Refer to the source again. The next section of code is separated into it's own script tags. And once again this is only for organizational purposes. The function calcIt() begins this section, and it is this function that is the main part of the whole program.
First, we retrieve the text inputs for time, distance, and pace. These can be referenced using the value property, like this document.Calc.timeM.value. The time and pace variables have to combine minutes and seconds. I decided to convert seconds into a percentage of minutes, but it could be done the other way. (In fact, I do this in other versions of the pace calculator, and I now prefer to have time measurements in seconds.) The point is to have a common unit of measure when doing calculations.
The next section of calcIt() uses if statements to calculate for either time, distance, or pace. The appropriate result is determined by the selectedIndex of the option list. Let's start with an overview for calculating TIME, DISTANCE, and PACE. For TIME, the distance and pace are converted to meters (it's the common measurement I chose). TIME is calculated as distance multiplied by pace. The result is rounded and split up into minutes and seconds. An adjustment is made and the results are displayed to the appropriate input text fields. DISTANCE and PACE are similar, but have some logic differences.
The function distConversion(d, toMeters) is fairly simple, but some of the code looks a little tricky. The if statements are straightforward; they check which of the DISTANCE radio buttons is chosen.
The next part to calculating the TIME is a little adjustment. Seconds can be from 59.5 to nearly 60. This will cause problems because I round seconds to the nearest whole number. If seconds are rounded to 60, then it looks funny saying the TIME is 4 minutes, 60 seconds. The adjustment simply changes the 60 to 0 and increments the minutes by one if seconds equals 60.
The last step to calculating the TIME is to display the results. Minutes and seconds are set to the timeM and timeS text inputs, using the value property.