Customized Pace Calculator

Customize Your Own Pace Calculator

The "Generated HTML" below, and the two javascript files, "pacecalc.js" and "pacecalc_example.js", are considered to be public domain, as defined in the Terms and Conditions.

This page provides an easy way for you to customize the Pace Calculator layout. As you make changes, and click "Update", the HTML will be displayed in the text box below.

The Customization

Border Color
		red
		green
		blue

Outer Border

Cell Border

Border Color :
Each value (Red, Green, Blue) can be a number from 0 to 255. These values will be converted into hexadecimal numbers below in the HTML. Note that if red, green, and blue are all 255, the result is white. If they are all 0, then the result is black.

Outer Border :
The size of the perimeter border.

Cell Border :
The size of the borders within the table. The Cell Border also includes the perimeter, so the perimeter is the Outer Border plus the Cell Border.

The Resulting Pace Calculator

The Generated HTML

The HTML below is for the layout.

<form name="Calc">



<table border="0" cellpadding="1" cellspacing="0">
<tr>

<td bgcolor="#000000">
	
	
	<table border="0" cellpadding="5" cellspacing="1">
	
	<tr>
		<td bgcolor="white" colspan="3" align="center">
		<b>Calculate for: &nbsp;</b>
		<select name="CalcWhat">
		<option value="0">Time
		<option value="1">Distance
		<option value="2" selected>Pace
		</select>
		</td>
	</tr>
	
	<tr>
		<td bgcolor="white">
		<b>Time</b> (h:m:s)
		</td>
	
		<td bgcolor="white">
		<b>Distance</b>
	 	</td>
	
		<td bgcolor="white">
		<b>Pace</b> (h:m:s)
		</td>
	</tr>
	
	<tr>
		<td bgcolor="white">
		<input type="text" name="timeH" size="3">:
		<input type="text" name="timeM" size="3">:
		<input type="text" name="timeS" size="3">
	 	</td>
	
		<td bgcolor="white">
		<input type="text" name="distance" size="9">
	 	</td>
	
		<td bgcolor="white">
		<input type="text" name="paceH" size="3">:
		<input type="text" name="paceM" size="3">:
		<input type="text" name="paceS" size="3">
		</td>
	</tr>
	
	<tr>
		<td bgcolor="white">
		&nbsp;
		</td>
	
		<td bgcolor="white">
		<input type="radio" name="optDist" value="miles" checked>Miles<br>
		<input type="radio" name="optDist" value="meters">Meters<br>
		<input type="radio" name="optDist" value="yards">Yards<br>
		<input type="radio" name="optDist" value="kilometers">Kilometers
		</td>
	
		<td bgcolor="white">
		<input type="radio" name="optPace" value="miles" checked>Mile<br>
		<input type="radio" name="optPace" value="400meters">400m<br>
		<input type="radio" name="optPace" value="kilometers">Kilometer
		</td>
	</tr>
	
	<tr>
		<td bgcolor="white" colspan="3" align="center">
		<input type="button" value="Calculate" onClick="calcIT()">
		<input type="button" value="Clear" onClick="clearNums()">
	 	</td>
	</tr>
	</table>

</td>
</tr>

<tr>
<td align="center">
<a href="http://www.mredkj.com" target="_blank" style="color: #000000; font-size: 75%">MREDKJ.com</a>
</td>
</tr>

</table>
</form>

The JavaScript

For the Pace Calculator logic, include the dot-js files using the following HTML, which supplements the HTML generated above.
<script language="JavaScript" src="pacecalc.js"></script>
<script language="JavaScript" src="pacecalc_example.js"></script>
pacecalc.js has the core logic, and pacecalc_example.js implements it to match up with the field names in the above HTML.

Download the files here:
pacecalc.js
pacecalc_example.js

The JavaScript - Alternate Method

If you find it easier, copy the contents of the dot-js files from below. They will still need to be placed in separate files with the appropriate names. Or the code can be placed in the HTML file between <SCRIPT> tags. Refer to the MREDKJ JavaScript Intro for more information about using JavaScript.

pacecalc.js

<!--
// * * * * * * * * * * * * *
// Pace Calculator JavaScript Base
// created by: Keith Jenci
// modified 01/02/2001
// http://www.mredkj.com
// * * * * * * * * * * * * *

/* * * * 
 * TimeObject
 * @param hour is the hour value.
 * @param min is the minutes value.
 * @param sec is the seconds value.
 */
function TimeObject(hour, min, sec)
{
	// variables
	this.timeInSeconds = (hour*3600) + (min*60) + (sec*1);
	this.h;
	this.m;
	this.s;

// method setup
	this.getHours = getHoursTObj;
	this.getMinutes = getMinutesTObj;
	this.getSeconds = getSecondsTObj;
	this.calculate = calculateTObj;
	this.adjust = adjustTObj;
	
}

/*
 * Calculate and save into the variable "timeInSeconds".
 * @param dist is the Distance Object.
 * @param pace is the Pace Object.
 */
function calculateTObj(distObj, paceObj)
{
	// convert distance to pace units
	var d = distObj.convert(paceObj.unit);
	var p = paceObj.timeInSeconds;
	
	// the result will be in seconds, given paceObj is in seconds.
	this.timeInSeconds = d * p;
	
	this.adjust();
}

function adjustTObj()
{
	var h,m,s;

h = Math.floor(this.timeInSeconds/3600);
	m = Math.floor((this.timeInSeconds - (3600*h))/60);
	s = Math.round((this.timeInSeconds - (3600*h) - (60*m)));

// adjustment (to account for rounding up to 60 seconds or 60 minutes)
	if (s==60)
	{
		s = 0;
		m++;
	}
	if (m==60)
	{
		m = 0;
		h++;
	}
	
	// adjustment for single digit numbers
	if (s<10)
	{
		s = '0' + s;
	}
	if (m<10)
	{
		m = '0' + m;
	}
	if (h<10)
	{
		h = '0' + h;
	}

this.h = h;
	this.m = m;
	this.s = s;
}

function getHoursTObj()
{
	return this.h;
}

function getMinutesTObj()
{
	return this.m;
}

function getSecondsTObj()
{
	return this.s;
}

//end TimeObject methods
// * * * *

/* * * * *
 * Distance Object
 */
function DistanceObject(val, unit)
{
	// variables
	this.val = val;
	this.unit = unit;

// method setup
	this.calculate = calculateDistObj;
	this.convert = convertDistObj;
	this.decimalPlaces = decimalPlacesDistObj;
}

/*
 * @param timeObj is the Time Object.
 * @param paceObj is the Pace Object.
 */
function calculateDistObj(timeObj, paceObj)
{
	// convert from pace unit to distance unit.
	var p = paceObj.convert(this.unit);
	var t = timeObj.timeInSeconds;
	this.val = t / p;
}

/*
 * Distance Conversion
 * this.val is the distance quantity.
 * this.unit is the "from" distance unit in meters (or another common measurement).
 * @param distTo is the "to" distance unit in meters (or another common measurement).
 * @return the new value for distance.
 */
function convertDistObj(distTo)
{
	return ((this.val * this.unit) / distTo);
}

/*
 * This function returns the value
 * with the number of decimal places requested.
 * @param places is the number of decimal places.
 * @return the new value.
 */
function decimalPlacesDistObj(places)
{
	var newVal = this.val;

factor = 1;
	for (i=0; i<places; i++)
	{	factor *= 10; }
	newVal *= factor;
	newVal = Math.round(newVal);
	newVal /= factor;
	
	return newVal;
}
// end Distance Object
// * * * *

/* * * *
 * Pace Object
 * @param hour is the hour value.
 * @param min is the minutes value.
 * @param sec is the seconds value.
 * @param unit is the unit of distance for the pace.
 */
function PaceObject(hour, min, sec, unit)
{
	// variables
	this.timeInSeconds = (hour*3600) + (min*60) + (sec*1);
	this.h;
	this.m;
	this.s;
	this.unit = unit;
	
	// method setup
	this.calculate = calculatePaceObj;
	this.convert = convertPaceObj;
	this.adjust = adjustTObj; // also used by TimeObject
	this.getHours = getHoursPaceObj;
	this.getMinutes = getMinutesPaceObj;
	this.getSeconds = getSecondsPaceObj;
}

/*
 * timeObj is the Time Object.
 * distObj is the Distance Object.
 */
function calculatePaceObj(timeObj, distObj)
{
	// conversion from distance unit to pace unit.
	var d = distObj.convert(this.unit);
	var t = timeObj.timeInSeconds;

var p = t / d;

this.timeInSeconds = p;
	this.adjust();
}

/*
 * Pace Conversion
 * this.timeInSeconds is the pace quantity (time per distance)
 * this.unit is the "from" distance unit in meters (or another common measurement).
 * @param paceTo is the "to" distance unit in meters (or another common measurement).
 */
function convertPaceObj(paceTo)
{
	return ((this.timeInSeconds / this.unit) * paceTo);
}

function getHoursPaceObj()
{
	return this.h;
}

function getMinutesPaceObj()
{
	return this.m;
}

function getSecondsPaceObj()
{
	return this.s;
}
// end Pace Object
// * * * *

// -->

pacecalc_example.js

<!--

// constants
var TIME = 0;
var DISTANCE = 1;
var PACE = 2;
var MILES = 0;
var METERS = 1;
var YARDS = 2;
var KILOMETERS = 3;
var PER_MILE = 0;
var PER_400 = 1;
var PER_KM = 2;

// number constants
var YARDS_IN_MILE = 1760;
var METERS_IN_METER = 1;
var METERS_IN_400 = 400;
var METERS_IN_MILE = 1609.344;
var METERS_IN_KM = 1000;
var METERS_IN_YARD = METERS_IN_MILE / YARDS_IN_MILE;

/*
 * Clear the fields.
 */
function clearNums()
{
	document.Calc.timeH.value=0;
	document.Calc.timeM.value=0;
	document.Calc.timeS.value=0;
	document.Calc.distance.value=0;
	document.Calc.paceH.value=0;
	document.Calc.paceM.value=0;
	document.Calc.paceS.value=0;
}

/*
 * defaultStuff sets the defaults. It is called by the onLoad event.
 */
function defaultStuff()
{
	// set list box default to PACE
	document.Calc.CalcWhat.selectedIndex=2;
	
	// set option buttons to defaults
	document.Calc.optDist[0].checked=true;
	document.Calc.optPace[0].checked=true;
}

/*
 * This function is called to perform the calculation.
 */
function calcIT()
{
	// Time (converted to seconds)
	var hour = document.Calc.timeH.value;
	var min = document.Calc.timeM.value;
	var sec = document.Calc.timeS.value;
	var timeObj = new TimeObject(hour, min, sec);

// Distance
	var distVal = document.Calc.distance.value;
	var distUnit = getDistanceUnit();
	var distObj = new DistanceObject(distVal, distUnit);

// Pace (converted to seconds per)
	var hourP =document.Calc.paceH.value;
	var minP=document.Calc.paceM.value;
	var secP=document.Calc.paceS.value;
	var paceUnit = getPaceUnit();
	var paceObj = new PaceObject(hourP, minP, secP, paceUnit);
	
	// Which result
	var resultValue=document.Calc.CalcWhat.options[document.Calc.CalcWhat.selectedIndex].value;

if (resultValue==TIME)
	{				
		timeObj.calculate(distObj, paceObj);

document.Calc.timeH.value = timeObj.getHours();
		document.Calc.timeM.value = timeObj.getMinutes();
		document.Calc.timeS.value = timeObj.getSeconds();
	}
	else if (resultValue==DISTANCE)
	{
		distObj.calculate(timeObj, paceObj);

// rounding
		document.Calc.distance.value = distObj.decimalPlaces(2);
	}
	else if (resultValue==PACE)
	{
		paceObj.calculate(timeObj, distObj);

document.Calc.paceH.value = paceObj.getHours();
		document.Calc.paceM.value = paceObj.getMinutes();
		document.Calc.paceS.value = paceObj.getSeconds();
	}
}//end CalcIt

/*
 * Get the unit of measure for distance.
 */
function getDistanceUnit()
{
	var unit;
	if (document.Calc.optDist[MILES].checked)
	{
		unit = METERS_IN_MILE;
	}
	else if (document.Calc.optDist[METERS].checked)
	{
		unit = METERS_IN_METER;
	}
	else if (document.Calc.optDist[KILOMETERS].checked)
	{
		unit = METERS_IN_KM;
	}
	else if (document.Calc.optDist[YARDS].checked)
	{
		unit = METERS_IN_YARD;
	}
	
	return unit;
}

/*
 * Get the unit of measure for pace.
 */
function getPaceUnit()
{
	var unit;
	if (document.Calc.optPace[PER_MILE].checked)
	{	
		unit = METERS_IN_MILE;
	}
	else if (document.Calc.optPace[PER_400].checked)
	{
		unit = METERS_IN_400;
	}
	else if (document.Calc.optPace[PER_KM].checked)
	{
		unit = METERS_IN_KM;
	}

return unit;
}

//-->

MREDKJ Pace Calculators
JavaScript Table of Contents
MREDKJ.com