Viewers: in countries Watching now:
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions
And then finally these last two lines simply take my two new elements and they add them to the div called inputArea. So that's what creates these parts of the page. Now if I put in, say, some text here and click this button, it's going to pop up on alert called Please enter a number! which makes sense. Let's see what's happening. I said the click event is associated with the function called startCountdown, and here it is. The first thing we do is try and grab the contents of that text box, which we are using the.value property of, and then I am using the isNaN function to check, is it not the number? So if this minutes variable is not a number, I will pop up an alert, and then I am just going to hit return, which basically means I'm done with this function, I'm not going any further, I can't do anything else it doesn't make sense anymore.
And if you remember from when we originally talked about setInterval, if you ever want to be able to clear the interval, i.e., to stop this interval from reoccurring, you need to grab a variable to it. You need to grab a handle on it, which you can then call later to call clearInterval. So we count the number of seconds. We kick off the tick function every one second, and then what I am going to do is actually hide--it's not really a form, but I am going to hide that input area that has the text box and the button, because I don't need to show it when the clock is ticking.
So this must be more interesting function, which is tick, which is defined a little bit up here. Let's bring this up and just going through this one, first line I will grab hold of a variable called timeDisplay, and that is simply grabbing hold all of h1, which is showing the time. So it's just grabbing hold of this part of the page. Then what I'm going to do is turn the seconds that I have, which is stored in the seconds remaining variable, into minutes and seconds. The first thing I do is divide seconds by 60. That will give me the amount of minutes and then some number after the decimal point.
That will give me the remainder. Several ways of course I could calculate this. On line 18 I am asking one question: how many seconds are left? And if those seconds are less than 10, I want to add a leading 0 to it, because if we are counting down, I don't want it to say 1:1. Most digital watches and so on will always have a leading zero when your seconds get down beyond 10. So this is what I'm doing here, and I am using 0 as a string, so in the double quotes, so that when these two are added together, it will turn the number 5 into 05 or the number 9 into 09.
I finally take both my min variable and my seconds variable and add them together. If you are bothered about official type conversion, meaning that if min is a number, how can I explicitly say it's a string, I could use the dot to string method here. I don't need to do that. This would work just fine. This concatenation will join the number that's stored in min, then a colon, and then finally, we change what the page actually displays. The last couple of things to check is did our seconds get down to 0, and if so, we can pop-up an alert saying we are done.
We don't need to start calling this tick function anymore. So I will click clearInterval, and I will finally call resetPage, which is going to show the section of the page that would allow me to kick the countdown off again. And the very last line here is subtract one from seconds remaining, because this is a function that's called every second. We want to make sure that we are counting down. Finally, the resetPage function is this one line here that's going to make the input area display itself again. And that's what's going to allow us to do a little bit of error checking here and then feed in a little bit of information.
So take a look at it and see what you can do.