I've got this webpage with a picture of Oh Noes,
who is freaking out that the world is going to end soon--
specifically, in 500 seconds.
I want to make this webpage way more useful,
by turning this number into a live countdown,
so that visitors can see exactly how much time they have left.
Now, when we animate part of a webpage,
the strategy is to find some element in it,
then change something about that element,
and do that a particular number of times a second.
So, for the first step, I will find the countdown by ID.
Simple.
[typing]
For the second step, I'll make a function that counts down.
[typing]
And what we'll do--
I want to set the `textContent`, and I want to set it equal to
the previous number minus one.
And the `textContent` will actually be a string,
so we want to turn it into a number.
We can do that using `parsefloat()`.
And then we can subtract one from it.
Okay, so finally, we want to call this function on an interval,
which means a certain number of times per second.
And we can use that using `window.setInterval()`.
And this function takes two arguments:
the callback function, and the number of milliseconds to wait
before that function gets called back again.
We can specify the callback function
just like we specify it for event listeners: by name.
And then-- it's going really fast right now
because we haven't specified the second argument--
so for that, we want it to be a certain number of milliseconds,
and we want it once per second, so we're going to say a thousand,
because there are a thousand milliseconds in a second.
There we go, now it's counting down one per second.
So you'd better learn as much as you can in the next 490 seconds!
There is one more window function that we sometimes use instead of `setInterval`,
and that's setTimeout.
And I'll just change it to that, and see if you can see the difference.
Have to wait a second.
Okay, so, now maybe you can see that when we use `setTimeout`,
the browser only calls the function once, not repeatedly.
That's not so useful for when we're making animations.
But it can be super useful in other cases,
like if we showed a warning banner to our users, and then we wanted
to hide it after 10 seconds.
So let me change this back to `setInterval`.
Now, when we're testing animations like this,
we should really see what they look like at all points in the animation,
like what happens when it gets down to zero.
Well that's going to take a really long time to get there,
and you're going to get really bored, so
we'll just change our beginning data to 5,
and watch what happens.
Four, three, two, one, zero...
negative one, negative two.
Okay, so now it's getting weird.
When the world ends, it should just go "Kaboom!" and stop counting.
So what we actually want to do, is stop this animation
once it gets to that zero point.
And we can do that using an `if` condition inside the function.
So, let me start by storing the current time in a variable
since we're going to use it a few times.
So I'll just take this, put it here,
and replace this with `currentTime`.
Now what I can do is have an `if` condition
that makes sure we only update the text if `currentTime` is greater than zero.
So that's the only time we want to actually subtract one.
So I need to move this inside here.
This works, but there is something really bad about this approach.
The browser is still calling the `countItDown` function once per second
as long as this webpage is open.
You shouldn't make browsers call functions for no reason--
they have lots of other important things to do.
What we really want to do is to tell the browser that
once it gets to zero, it doesn't need to call this function anymore at all.
We can do that using a new method: `window.clearInterval()`.
We can stick that in this `else` here-- `window.clearInterval()`.
Now, we need to pass it an argument, so that it knows which interval to clear.
Because we might actually have multiple intervals on a page.
The way that we know which interval to clear
is to store the result of `setInterval` in a variable.
So now I've got it in a timer variable, I can copy and paste it into there,
and now it knows what to clear, so when it gets to zero,
it should stop updating, and it should stop calling that function.
For every animation that you make, you should think carefully about
what the condition should be for stopping it.
And yes, you might have some animations that should go on and on, my friends--
but they'd better be really sweet animations.
Because your browser is working every time it calls that callback function.
Now spin this off, and make the world actually go kaboom!