1
00:00:00,639 --> 00:00:03,875
I've got this webpage
with a picture of Oh Noes,

2
00:00:03,875 --> 00:00:07,862
who is freaking out that
the world is going to end soon--

3
00:00:07,862 --> 00:00:10,473
specifically, in 500 seconds.

4
00:00:10,473 --> 00:00:13,356
I want to make this webpage
way more useful,

5
00:00:13,356 --> 00:00:16,934
by turning this number into
a live countdown,

6
00:00:16,934 --> 00:00:20,781
so that visitors can see exactly
how much time they have left.

7
00:00:20,781 --> 00:00:23,934
Now, when we animate
part of a webpage,

8
00:00:23,934 --> 00:00:26,708
the strategy is to find 
some element in it,

9
00:00:26,708 --> 00:00:29,303
then change something
about that element,

10
00:00:29,303 --> 00:00:32,779
and do that a particular
number of times a second.

11
00:00:32,779 --> 00:00:37,693
So, for the first step,
I will find the countdown by ID.

12
00:00:37,693 --> 00:00:39,490
Simple.

13
00:00:39,490 --> 00:00:44,417
[typing]

14
00:00:47,536 --> 00:00:51,612
For the second step, I'll make
a function that counts down.

15
00:00:51,612 --> 00:00:54,588
[typing]

16
00:00:54,588 --> 00:00:56,856
And what we'll do--

17
00:00:56,856 --> 00:01:01,217
I want to set the `textContent`,
and I want to set it equal to

18
00:01:01,217 --> 00:01:03,755
the previous number minus one.

19
00:01:03,755 --> 00:01:06,798
And the `textContent`
will actually be a string,

20
00:01:06,798 --> 00:01:09,947
so we want to turn it into a number.

21
00:01:09,947 --> 00:01:12,853
We can do that using `parsefloat()`.

22
00:01:12,853 --> 00:01:15,753
And then we can subtract one from it.

23
00:01:15,753 --> 00:01:21,541
Okay, so finally, we want to
call this function on an interval,

24
00:01:21,541 --> 00:01:25,328
which means a certain
number of times per second.

25
00:01:25,328 --> 00:01:30,415
And we can use that using
`window.setInterval()`.

26
00:01:30,415 --> 00:01:33,691
And this function takes two arguments:

27
00:01:33,691 --> 00:01:38,096
the callback function, and
the number of milliseconds to wait

28
00:01:38,096 --> 00:01:40,885
before that function gets
called back again.

29
00:01:40,885 --> 00:01:43,369
We can specify the callback function


30
00:01:43,369 --> 00:01:46,809
just like we specify it
for event listeners: by name.

31
00:01:46,809 --> 00:01:49,350
And then-- it's going really
fast right now

32
00:01:49,350 --> 00:01:51,827
because we haven't specified
the second argument--

33
00:01:51,827 --> 00:01:55,250
so for that, we want it to be
a certain number of milliseconds,

34
00:01:55,250 --> 00:01:58,520
and we want it once per second,
so we're going to say a thousand,

35
00:01:58,520 --> 00:02:01,558
because there are
a thousand milliseconds in a second.

36
00:02:01,558 --> 00:02:05,218
There we go, now it's
counting down one per second.

37
00:02:05,218 --> 00:02:10,245
So you'd better learn as much as you can
in the next 490 seconds!

38
00:02:10,245 --> 00:02:15,036
There is one more window function that we
sometimes use instead of `setInterval`,

39
00:02:15,036 --> 00:02:17,227
and that's setTimeout.

40
00:02:17,227 --> 00:02:21,782
And I'll just change it to that,
and see if you can see the difference.

41
00:02:21,782 --> 00:02:23,681
Have to wait a second.

42
00:02:23,681 --> 00:02:28,297
Okay, so, now maybe you can see
that when we use `setTimeout`,

43
00:02:28,297 --> 00:02:33,881
the browser only calls
the function once, not repeatedly.

44
00:02:33,881 --> 00:02:38,705
That's not so useful for
when we're making animations.

45
00:02:38,705 --> 00:02:41,732
But it can be super useful in other cases,

46
00:02:41,732 --> 00:02:45,866
like if we showed a warning banner
to our users, and then we wanted

47
00:02:45,866 --> 00:02:48,090
to hide it after 10 seconds.

48
00:02:48,090 --> 00:02:52,894
So let me change this
back to `setInterval`.

49
00:02:52,894 --> 00:02:56,507
Now, when we're testing
animations like this,

50
00:02:56,507 --> 00:03:00,410
we should really see what they look like
at all points in the animation,

51
00:03:00,410 --> 00:03:02,460
like what happens
when it gets down to zero.

52
00:03:02,460 --> 00:03:05,258
Well that's going to take
a really long time to get there,

53
00:03:05,258 --> 00:03:07,206
and you're going to
get really bored, so

54
00:03:07,206 --> 00:03:10,581
we'll just change
our beginning data to 5,

55
00:03:10,581 --> 00:03:12,538
and watch what happens.

56
00:03:12,538 --> 00:03:16,732
Four, three, two, one, zero...

57
00:03:16,732 --> 00:03:19,289
negative one, negative two.

58
00:03:19,289 --> 00:03:21,878
Okay, so now it's getting weird.

59
00:03:21,878 --> 00:03:26,292
When the world ends, it should just go
"Kaboom!" and stop counting.

60
00:03:26,292 --> 00:03:30,111
So what we actually want to do,
is stop this animation

61
00:03:30,111 --> 00:03:32,734
once it gets to that zero point.

62
00:03:32,734 --> 00:03:36,319
And we can do that using
an `if` condition inside the function.

63
00:03:36,319 --> 00:03:42,227
So, let me start by storing
the current time in a variable

64
00:03:42,227 --> 00:03:44,517
since we're going to use it a few times.

65
00:03:44,517 --> 00:03:47,513
So I'll just take this,
put it here,

66
00:03:47,513 --> 00:03:51,273
and replace this with `currentTime`.

67
00:03:51,273 --> 00:03:55,564
Now what I can do is
have an `if` condition

68
00:03:55,564 --> 00:04:01,097
that makes sure we only update the text
if `currentTime` is greater than zero.

69
00:04:01,097 --> 00:04:04,938
So that's the only time we want
to actually subtract one.

70
00:04:04,938 --> 00:04:10,497
So I need to move this inside here.

71
00:04:10,497 --> 00:04:15,012
This works, but there is something
really bad about this approach.

72
00:04:15,012 --> 00:04:19,444
The browser is still calling the
`countItDown` function once per second

73
00:04:19,444 --> 00:04:21,559
as long as this webpage is open.

74
00:04:21,559 --> 00:04:24,842
You shouldn't make browsers
call functions for no reason--

75
00:04:24,842 --> 00:04:27,581
they have lots of other
important things to do.

76
00:04:27,581 --> 00:04:30,935
What we really want to do
is to tell the browser that

77
00:04:30,935 --> 00:04:35,585
once it gets to zero, it doesn't need
to call this function anymore at all.

78
00:04:35,585 --> 00:04:40,384
We can do that using a new method:
`window.clearInterval()`.

79
00:04:40,384 --> 00:04:47,354
We can stick that in this `else` here--
`window.clearInterval()`.

80
00:04:47,354 --> 00:04:52,189
Now, we need to pass it an argument,
so that it knows which interval to clear.

81
00:04:52,189 --> 00:04:55,799
Because we might actually have
multiple intervals on a page.

82
00:04:55,799 --> 00:04:58,902
The way that we know
which interval to clear

83
00:04:58,902 --> 00:05:02,983
is to store the result
of `setInterval` in a variable.

84
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,

85
00:05:07,816 --> 00:05:11,122
and now it knows what to clear,
so when it gets to zero,

86
00:05:11,122 --> 00:05:15,571
it should stop updating, and
it should stop calling that function.

87
00:05:15,571 --> 00:05:19,332
For every animation that you make,
you should think carefully about

88
00:05:19,332 --> 00:05:21,695
what the condition
should be for stopping it.

89
00:05:21,695 --> 00:05:26,132
And yes, you might have some animations
that should go on and on, my friends--

90
00:05:26,132 --> 00:05:29,023
but they'd better be
really sweet animations.

91
00:05:29,023 --> 00:05:33,600
Because your browser is working every time
it calls that callback function.

92
00:05:33,600 --> 00:05:37,721
Now spin this off, and make the world
actually go kaboom!