1
00:00:00,700 --> 00:00:05,710
The previous lessons we saw how we can produce this countdown timer, and it will count the number of

2
00:00:05,710 --> 00:00:11,700
days, hours, minutes, seconds until we hit the selected date and that date change.

3
00:00:12,100 --> 00:00:16,060
So that gives us an accurate representation of those values.

4
00:00:16,390 --> 00:00:21,550
Now, let's make this a little bit better, because if we were sitting here, we don't see the seconds

5
00:00:21,550 --> 00:00:22,230
changing.

6
00:00:22,240 --> 00:00:26,620
And right now, if I was to select that time again, the seconds would have gone down because there's

7
00:00:26,620 --> 00:00:27,610
not as much time.

8
00:00:27,760 --> 00:00:30,520
So this really isn't quite a countdown timer yet.

9
00:00:30,730 --> 00:00:31,780
So let's update it.

10
00:00:31,780 --> 00:00:35,710
And we're going to use intervals in JavaScript in order to accomplish this.

11
00:00:36,040 --> 00:00:43,120
And the way that intervals work is they allow us to set certain time outs within JavaScript.

12
00:00:43,510 --> 00:00:48,970
So I'm going to set a global value and we can call it the time interval.

13
00:00:50,470 --> 00:00:56,620
And right now, we're not going to attach any values to it, so using that time interval, whenever

14
00:00:56,620 --> 00:01:01,630
we start the clock, this is where we want to start all of that interval content.

15
00:01:02,930 --> 00:01:10,790
And have that reoccurring value constantly launching, so we've got our intervale and we also want to

16
00:01:10,790 --> 00:01:13,400
clear the interval whenever we set a new time.

17
00:01:13,580 --> 00:01:14,720
So we'll do that as well.

18
00:01:15,290 --> 00:01:19,220
So right now, within the start clock, I'm going to add in another function.

19
00:01:19,440 --> 00:01:24,060
This is a function within a function and I'm going to call it update counter.

20
00:01:25,010 --> 00:01:30,020
So this will serve as a way to update our counter constantly.

21
00:01:30,380 --> 00:01:37,070
And then just outside of that, outside of the update counter function, I'm going to run a launch update

22
00:01:37,190 --> 00:01:43,340
counter so that we launch the update counter and I'm going to use that interval, that time interval

23
00:01:44,150 --> 00:01:45,710
to set an interval.

24
00:01:45,710 --> 00:01:47,780
So using JavaScript set interval.

25
00:01:49,700 --> 00:01:58,010
And as you saw, what that does is it executes quite a snippet of code repeatedly within a fixed time

26
00:01:58,010 --> 00:01:58,280
delay.

27
00:01:58,700 --> 00:02:05,360
So this is a little bit different than when we're setting that interval as this will continuously run

28
00:02:05,360 --> 00:02:06,820
until we stop it from running.

29
00:02:07,160 --> 00:02:13,130
And what we want it to run is constantly update counter and let's update that every second.

30
00:02:13,680 --> 00:02:15,280
So I show you what happens now.

31
00:02:16,220 --> 00:02:23,580
And when we refresh, we select a time and now we are updating that counter every second.

32
00:02:24,350 --> 00:02:27,170
Now we'll show you how to clear out that interval.

33
00:02:27,440 --> 00:02:32,900
And the way that we're going to clear out this interval is that we want to clear that out if this date

34
00:02:32,900 --> 00:02:33,410
changes.

35
00:02:33,620 --> 00:02:39,760
So if the user changes the date, we want to clear the interval where we've got our clear interval.

36
00:02:40,190 --> 00:02:46,070
So let's do that first, where we clear an interval and then we just need to identify the interval object.

37
00:02:46,260 --> 00:02:51,650
So we had a value called time interval, and that was how we were connecting that interval object.

38
00:02:51,890 --> 00:02:55,070
So if we clear that out, that interval should stop.

39
00:02:55,370 --> 00:02:57,880
So our clock starts when we change it.

40
00:02:58,220 --> 00:03:01,340
And then if we change it again, then it's going to start again.

41
00:03:01,370 --> 00:03:04,840
But it's going to be clearing out that interval that's running in the background.

42
00:03:04,850 --> 00:03:07,070
So it's not going to have to interval is running in the background.

43
00:03:07,310 --> 00:03:12,900
And we can also clear out that interval if the time is set to stop.

44
00:03:13,640 --> 00:03:15,710
So let's set one more global variable.

45
00:03:15,950 --> 00:03:19,940
So a set time stop and we'll set it to true.

46
00:03:20,060 --> 00:03:24,710
And once we launch it and once we start it, we're going to set this to false.

47
00:03:24,720 --> 00:03:33,650
And if time stop, so check to see if time stop is true, then what we're going to do is we're not going

48
00:03:33,650 --> 00:03:40,270
to we're going to only have the interval if time stop is true or else we're going to clear that interval.

49
00:03:40,280 --> 00:03:44,840
So the same thing that we're doing over here where we're taking that interval and we're going to clear

50
00:03:44,840 --> 00:03:45,260
that out.

51
00:03:46,350 --> 00:03:54,390
So now all we have to do is check to see if the value of time left is less, the total time left is

52
00:03:54,390 --> 00:03:55,230
less than zero.

53
00:03:55,230 --> 00:03:58,590
And if it is, then we just set time stop to false.

54
00:03:59,250 --> 00:04:00,300
So check to see.

55
00:04:00,630 --> 00:04:07,100
And this is coming back from that T.L. object, and that was the total for T is less than.

56
00:04:07,130 --> 00:04:09,120
And remember, we had the total that we're setting there.

57
00:04:09,510 --> 00:04:10,900
So actually that should be total.

58
00:04:10,980 --> 00:04:17,480
So if this value is less than zero, then we want to stop the execution of the interval.

59
00:04:17,500 --> 00:04:22,880
So take time, stop and set that value to equal force.

60
00:04:24,000 --> 00:04:25,170
So that should stop our time.

61
00:04:25,350 --> 00:04:26,070
Let's try that at.

62
00:04:27,450 --> 00:04:32,520
So going into evalu we see that the interval is clearing and now if we have a negative value, we're

63
00:04:32,520 --> 00:04:35,970
not going to have that countdown because we cleared the interval and it's not going to be happening

64
00:04:35,970 --> 00:04:36,380
anymore.

65
00:04:36,540 --> 00:04:39,090
So it's only happening on those positive values.

66
00:04:39,830 --> 00:04:43,170
So now the countdown works, but only if it's in the positive.

67
00:04:43,320 --> 00:04:47,620
And that means that this countdown will actually stop once it hits the right value.

68
00:04:47,640 --> 00:04:52,230
So go ahead and try this out, add this into your own application and update that interval.

69
00:04:52,410 --> 00:04:56,820
And coming up next, I'm going to show you how you can store this in local storage so that every time

70
00:04:56,820 --> 00:05:02,850
you refresh the page, we're going to store that value of the current time of the countdown.

71
00:05:03,000 --> 00:05:03,510
It's coming up.