So first we need to create the webpage. Fire up your favorite text editor and put in your html header and body tags.
Now we know that to do a counter we need to have some sort of timer mechanism. I've been looking to jQuery recently, so I did a search of "jquery timers" and came across the jQuery plugin page for timers.
I downloaded this one http://plugins.jquery.com/files/jquery.timers-1.2.js.txt
In the documentation on this page: http://plugins.jquery.com/project/timers, it says that you can use something called "Limited Timers" in order to do something repeatedly for a set number of repetitions.
The above snippet will call doSomething() function 10 times, with a frequency of once a second. That's perfect for the cardio routine because we want to have a total duration of 20 minutes. 20 minutes * 60 seconds per minute gives us 1200 seconds total.var times = 10;
$(document).everyTime(1000, function(i) {
doSomething(i);
}, times);
In place of doSomething(), we will use jQuery to update the display to show the minute:second just like a stop watch. We will update a "seconds" variable to count up the seconds as our application is running. Then we will use seconds mod 60 to determine when 60 seconds have passed and increment a minutes variable. Finally we will increase intensity at the same time minutes are incremented with a rule that when minutes get to 9, we reset to 5 in the next minute.
Not too complicated right?
Here is my first version of the code. I included the javascript sources for jQuery and jquery timer, as well as put in a function to pad-with-zeros the counter output so it looks like a real stop watch.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--<p>Total Seconds</p>
<div id="message">
</div>-->
<div style="font-size:100px;" align="center">
<div>
<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
<p>Intensity:</p>
<div style="font-size:200px;" id="intensity">
5
</div>
</div>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript" src="jquery_timers.js"></script>
<!--
<pre>
work out is 20 min
each min is 60 sec x 20 min = 1200 sec duration in total
each full minute show the intensity
intensity starts at 5
increments each full minute, until 9
then reset to 5
</pre>
-->
<script type="text/JavaScript">
function zeroPad(num,count)
{
var numZeropad = num + '';
while(numZeropad.length < count) {
numZeropad = "0" + numZeropad;
}
return numZeropad;
}
$(document).ready(function() {
minute = 0;
intensity = 5;
seconds = 0;
$(document).everyTime(1000, function(i) {
seconds++;
if (seconds > 59) {
seconds = 0;
}
$('#seconds').html(zeroPad(seconds,2));
// $('div#message').html(i);
if (i % 60 == 0) {
minute++;
intensity++;
if (intensity > 9 && minute < 20) {
intensity = 5;
}
$('#minutes').html(zeroPad(minute,2));
$('div#intensity').html(intensity);
}
}, 1200);
});
</script>
</body>
</html>
So there you have it. Save this to an index.html file and open this in your javascript enabled browser and you should see a counter counting up the minutes and seconds and also the intensity number that you should be at. Not too bad.
But there are couple of limitations to this app. You can't start or stop it interactively. The timer starts as soon as the page is loaded and there is no stopping it or pausing it. Also, this isn't much of an iphone app yet. If you're on a mac computer like I am, you can throw this webpage into your home ~/Sites directory (you need to enable Sharing > WebSharing) so that the page is served up by your computer's web server. Then you can point your iphone's safari browser at your computer's ip address with address of the index.html page and you will see the timer on your iphone. Not very distributable at this point.
So what we really want to do is make this app a little nicer and covert it into a native app on the iphone with Phone Gap which we will get into next time.
