0:00:00.639,0:00:03.875
I've got this webpage[br]with a picture of Oh Noes,

0:00:03.875,0:00:07.862
who is freaking out that[br]the world is going to end soon--

0:00:07.862,0:00:10.473
specifically, in 500 seconds.

0:00:10.473,0:00:13.356
I want to make this webpage[br]way more useful,

0:00:13.356,0:00:16.934
by turning this number into[br]a live countdown,

0:00:16.934,0:00:20.781
so that visitors can see exactly[br]how much time they have left.

0:00:20.781,0:00:23.934
Now, when we animate[br]part of a webpage,

0:00:23.934,0:00:26.708
the strategy is to find [br]some element in it,

0:00:26.708,0:00:29.303
then change something[br]about that element,

0:00:29.303,0:00:32.779
and do that a particular[br]number of times a second.

0:00:32.779,0:00:37.693
So, for the first step,[br]I will find the countdown by ID.

0:00:37.693,0:00:39.490
Simple.

0:00:39.490,0:00:44.417
[typing]

0:00:47.536,0:00:51.612
For the second step, I'll make[br]a function that counts down.

0:00:51.612,0:00:54.588
[typing]

0:00:54.588,0:00:56.856
And what we'll do--

0:00:56.856,0:01:01.217
I want to set the `textContent`,[br]and I want to set it equal to

0:01:01.217,0:01:03.755
the previous number minus one.

0:01:03.755,0:01:06.798
And the `textContent`[br]will actually be a string,

0:01:06.798,0:01:09.947
so we want to turn it into a number.

0:01:09.947,0:01:12.853
We can do that using `parsefloat()`.

0:01:12.853,0:01:15.753
And then we can subtract one from it.

0:01:15.753,0:01:21.541
Okay, so finally, we want to[br]call this function on an interval,

0:01:21.541,0:01:25.328
which means a certain[br]number of times per second.

0:01:25.328,0:01:30.415
And we can use that using[br]`window.setInterval()`.

0:01:30.415,0:01:33.691
And this function takes two arguments:

0:01:33.691,0:01:38.096
the callback function, and[br]the number of milliseconds to wait

0:01:38.096,0:01:40.885
before that function gets[br]called back again.

0:01:40.885,0:01:43.369
We can specify the callback function[br]

0:01:43.369,0:01:46.809
just like we specify it[br]for event listeners: by name.

0:01:46.809,0:01:49.350
And then-- it's going really[br]fast right now

0:01:49.350,0:01:51.827
because we haven't specified[br]the second argument--

0:01:51.827,0:01:55.250
so for that, we want it to be[br]a certain number of milliseconds,

0:01:55.250,0:01:58.520
and we want it once per second,[br]so we're going to say a thousand,

0:01:58.520,0:02:01.558
because there are[br]a thousand milliseconds in a second.

0:02:01.558,0:02:05.218
There we go, now it's[br]counting down one per second.

0:02:05.218,0:02:10.245
So you'd better learn as much as you can[br]in the next 490 seconds!

0:02:10.245,0:02:15.036
There is one more window function that we[br]sometimes use instead of `setInterval`,

0:02:15.036,0:02:17.227
and that's setTimeout.

0:02:17.227,0:02:21.782
And I'll just change it to that,[br]and see if you can see the difference.

0:02:21.782,0:02:23.681
Have to wait a second.

0:02:23.681,0:02:28.297
Okay, so, now maybe you can see[br]that when we use `setTimeout`,

0:02:28.297,0:02:33.881
the browser only calls[br]the function once, not repeatedly.

0:02:33.881,0:02:38.705
That's not so useful for[br]when we're making animations.

0:02:38.705,0:02:41.732
But it can be super useful in other cases,

0:02:41.732,0:02:45.866
like if we showed a warning banner[br]to our users, and then we wanted

0:02:45.866,0:02:48.090
to hide it after 10 seconds.

0:02:48.090,0:02:52.894
So let me change this[br]back to `setInterval`.

0:02:52.894,0:02:56.507
Now, when we're testing[br]animations like this,

0:02:56.507,0:03:00.410
we should really see what they look like[br]at all points in the animation,

0:03:00.410,0:03:02.460
like what happens[br]when it gets down to zero.

0:03:02.460,0:03:05.258
Well that's going to take[br]a really long time to get there,

0:03:05.258,0:03:07.206
and you're going to[br]get really bored, so

0:03:07.206,0:03:10.581
we'll just change[br]our beginning data to 5,

0:03:10.581,0:03:12.538
and watch what happens.

0:03:12.538,0:03:16.732
Four, three, two, one, zero...

0:03:16.732,0:03:19.289
negative one, negative two.

0:03:19.289,0:03:21.878
Okay, so now it's getting weird.

0:03:21.878,0:03:26.292
When the world ends, it should just go[br]"Kaboom!" and stop counting.

0:03:26.292,0:03:30.111
So what we actually want to do,[br]is stop this animation

0:03:30.111,0:03:32.734
once it gets to that zero point.

0:03:32.734,0:03:36.319
And we can do that using[br]an `if` condition inside the function.

0:03:36.319,0:03:42.227
So, let me start by storing[br]the current time in a variable

0:03:42.227,0:03:44.517
since we're going to use it a few times.

0:03:44.517,0:03:47.513
So I'll just take this,[br]put it here,

0:03:47.513,0:03:51.273
and replace this with `currentTime`.

0:03:51.273,0:03:55.564
Now what I can do is[br]have an `if` condition

0:03:55.564,0:04:01.097
that makes sure we only update the text[br]if `currentTime` is greater than zero.

0:04:01.097,0:04:04.938
So that's the only time we want[br]to actually subtract one.

0:04:04.938,0:04:10.497
So I need to move this inside here.

0:04:10.497,0:04:15.012
This works, but there is something[br]really bad about this approach.

0:04:15.012,0:04:19.444
The browser is still calling the[br]`countItDown` function once per second

0:04:19.444,0:04:21.559
as long as this webpage is open.

0:04:21.559,0:04:24.842
You shouldn't make browsers[br]call functions for no reason--

0:04:24.842,0:04:27.581
they have lots of other[br]important things to do.

0:04:27.581,0:04:30.935
What we really want to do[br]is to tell the browser that

0:04:30.935,0:04:35.585
once it gets to zero, it doesn't need[br]to call this function anymore at all.

0:04:35.585,0:04:40.384
We can do that using a new method:[br]`window.clearInterval()`.

0:04:40.384,0:04:47.354
We can stick that in this `else` here--[br]`window.clearInterval()`.

0:04:47.354,0:04:52.189
Now, we need to pass it an argument,[br]so that it knows which interval to clear.

0:04:52.189,0:04:55.799
Because we might actually have[br]multiple intervals on a page.

0:04:55.799,0:04:58.902
The way that we know[br]which interval to clear

0:04:58.902,0:05:02.983
is to store the result[br]of `setInterval` in a variable.

0:05:02.983,0:05:07.816
So now I've got it in a timer variable,[br]I can copy and paste it into there,

0:05:07.816,0:05:11.122
and now it knows what to clear,[br]so when it gets to zero,

0:05:11.122,0:05:15.571
it should stop updating, and[br]it should stop calling that function.

0:05:15.571,0:05:19.332
For every animation that you make,[br]you should think carefully about

0:05:19.332,0:05:21.695
what the condition[br]should be for stopping it.

0:05:21.695,0:05:26.132
And yes, you might have some animations[br]that should go on and on, my friends--

0:05:26.132,0:05:29.023
but they'd better be[br]really sweet animations.

0:05:29.023,0:05:33.600
Because your browser is working every time[br]it calls that callback function.

0:05:33.600,0:05:37.721
Now spin this off, and make the world[br]actually go kaboom!