WEBVTT

00:00:00.639 --> 00:00:03.875
I've got this webpage
with a picture of Oh Noes,

00:00:03.875 --> 00:00:07.862
who is freaking out that
the world is going to end soon--

00:00:07.862 --> 00:00:10.473
specifically, in 500 seconds.

00:00:10.473 --> 00:00:13.356
I want to make this webpage
way more useful,

00:00:13.356 --> 00:00:16.934
by turning this number into
a live countdown,

00:00:16.934 --> 00:00:20.781
so that visitors can see exactly
how much time they have left.

00:00:20.781 --> 00:00:23.934
Now, when we animate
part of a webpage,

00:00:23.934 --> 00:00:26.708
the strategy is to find 
some element in it,

00:00:26.708 --> 00:00:29.303
then change something
about that element,

00:00:29.303 --> 00:00:32.779
and do that a particular
number of times a second.

00:00:32.779 --> 00:00:37.693
So, for the first step,
I will find the countdown by ID.

00:00:37.693 --> 00:00:39.490
Simple.

00:00:39.490 --> 00:00:44.417
[typing]

00:00:47.536 --> 00:00:51.612
For the second step, I'll make
a function that counts down.

00:00:51.612 --> 00:00:54.588
[typing]

00:00:54.588 --> 00:00:56.856
And what we'll do--

00:00:56.856 --> 00:01:01.217
I want to set the `textContent`,
and I want to set it equal to

00:01:01.217 --> 00:01:03.755
the previous number minus one.

00:01:03.755 --> 00:01:06.798
And the `textContent`
will actually be a string,

00:01:06.798 --> 00:01:09.947
so we want to turn it into a number.

00:01:09.947 --> 00:01:12.853
We can do that using `parsefloat()`.

00:01:12.853 --> 00:01:15.753
And then we can subtract one from it.

00:01:15.753 --> 00:01:21.541
Okay, so finally, we want to
call this function on an interval,

00:01:21.541 --> 00:01:25.328
which means a certain
number of times per second.

00:01:25.328 --> 00:01:30.415
And we can use that using
`window.setInterval()`.

00:01:30.415 --> 00:01:33.691
And this function takes two arguments:

00:01:33.691 --> 00:01:38.096
the callback function, and
the number of milliseconds to wait

00:01:38.096 --> 00:01:40.885
before that function gets
called back again.

00:01:40.885 --> 00:01:43.369
We can specify the callback function


00:01:43.369 --> 00:01:46.809
just like we specify it
for event listeners: by name.

00:01:46.809 --> 00:01:49.350
And then-- it's going really
fast right now

00:01:49.350 --> 00:01:51.827
because we haven't specified
the second argument--

00:01:51.827 --> 00:01:55.250
so for that, we want it to be
a certain number of milliseconds,

00:01:55.250 --> 00:01:58.520
and we want it once per second,
so we're going to say a thousand,

00:01:58.520 --> 00:02:01.558
because there are
a thousand milliseconds in a second.

00:02:01.558 --> 00:02:05.218
There we go, now it's
counting down one per second.

00:02:05.218 --> 00:02:10.245
So you'd better learn as much as you can
in the next 490 seconds!

00:02:10.245 --> 00:02:15.036
There is one more window function that we
sometimes use instead of `setInterval`,

00:02:15.036 --> 00:02:17.227
and that's setTimeout.

00:02:17.227 --> 00:02:21.782
And I'll just change it to that,
and see if you can see the difference.

00:02:21.782 --> 00:02:23.681
Have to wait a second.

00:02:23.681 --> 00:02:28.297
Okay, so, now maybe you can see
that when we use `setTimeout`,

00:02:28.297 --> 00:02:33.881
the browser only calls
the function once, not repeatedly.

00:02:33.881 --> 00:02:38.705
That's not so useful for
when we're making animations.

00:02:38.705 --> 00:02:41.732
But it can be super useful in other cases,

00:02:41.732 --> 00:02:45.866
like if we showed a warning banner
to our users, and then we wanted

00:02:45.866 --> 00:02:48.090
to hide it after 10 seconds.

00:02:48.090 --> 00:02:52.894
So let me change this
back to `setInterval`.

00:02:52.894 --> 00:02:56.507
Now, when we're testing
animations like this,

00:02:56.507 --> 00:03:00.410
we should really see what they look like
at all points in the animation,

00:03:00.410 --> 00:03:02.460
like what happens
when it gets down to zero.

00:03:02.460 --> 00:03:05.258
Well that's going to take
a really long time to get there,

00:03:05.258 --> 00:03:07.206
and you're going to
get really bored, so

00:03:07.206 --> 00:03:10.581
we'll just change
our beginning data to 5,

00:03:10.581 --> 00:03:12.538
and watch what happens.

00:03:12.538 --> 00:03:16.732
Four, three, two, one, zero...

00:03:16.732 --> 00:03:19.289
negative one, negative two.

00:03:19.289 --> 00:03:21.878
Okay, so now it's getting weird.

00:03:21.878 --> 00:03:26.292
When the world ends, it should just go
"Kaboom!" and stop counting.

00:03:26.292 --> 00:03:30.111
So what we actually want to do,
is stop this animation

00:03:30.111 --> 00:03:32.734
once it gets to that zero point.

00:03:32.734 --> 00:03:36.319
And we can do that using
an `if` condition inside the function.

00:03:36.319 --> 00:03:42.227
So, let me start by storing
the current time in a variable

00:03:42.227 --> 00:03:44.517
since we're going to use it a few times.

00:03:44.517 --> 00:03:47.513
So I'll just take this,
put it here,

00:03:47.513 --> 00:03:51.273
and replace this with `currentTime`.

00:03:51.273 --> 00:03:55.564
Now what I can do is
have an `if` condition

00:03:55.564 --> 00:04:01.097
that makes sure we only update the text
if `currentTime` is greater than zero.

00:04:01.097 --> 00:04:04.938
So that's the only time we want
to actually subtract one.

00:04:04.938 --> 00:04:10.497
So I need to move this inside here.

00:04:10.497 --> 00:04:15.012
This works, but there is something
really bad about this approach.

00:04:15.012 --> 00:04:19.444
The browser is still calling the
`countItDown` function once per second

00:04:19.444 --> 00:04:21.559
as long as this webpage is open.

00:04:21.559 --> 00:04:24.842
You shouldn't make browsers
call functions for no reason--

00:04:24.842 --> 00:04:27.581
they have lots of other
important things to do.

00:04:27.581 --> 00:04:30.935
What we really want to do
is to tell the browser that

00:04:30.935 --> 00:04:35.585
once it gets to zero, it doesn't need
to call this function anymore at all.

00:04:35.585 --> 00:04:40.384
We can do that using a new method:
`window.clearInterval()`.

00:04:40.384 --> 00:04:47.354
We can stick that in this `else` here--
`window.clearInterval()`.

00:04:47.354 --> 00:04:52.189
Now, we need to pass it an argument,
so that it knows which interval to clear.

00:04:52.189 --> 00:04:55.799
Because we might actually have
multiple intervals on a page.

00:04:55.799 --> 00:04:58.902
The way that we know
which interval to clear

00:04:58.902 --> 00:05:02.983
is to store the result
of `setInterval` in a variable.

00:05:02.983 --> 00:05:07.816
So now I've got it in a timer variable,
I can copy and paste it into there,

00:05:07.816 --> 00:05:11.122
and now it knows what to clear,
so when it gets to zero,

00:05:11.122 --> 00:05:15.571
it should stop updating, and
it should stop calling that function.

00:05:15.571 --> 00:05:19.332
For every animation that you make,
you should think carefully about

00:05:19.332 --> 00:05:21.695
what the condition
should be for stopping it.

00:05:21.695 --> 00:05:26.132
And yes, you might have some animations
that should go on and on, my friends--

00:05:26.132 --> 00:05:29.023
but they'd better be
really sweet animations.

00:05:29.023 --> 00:05:33.600
Because your browser is working every time
it calls that callback function.

00:05:33.600 --> 00:05:37.721
Now spin this off, and make the world
actually go kaboom!