1
00:00:00,330 --> 00:00:05,670
Welcome back, this is a lesson where we do a quick overview and a code review of what we're doing and

2
00:00:05,700 --> 00:00:08,120
what we've been working on in the earlier lessons.

3
00:00:08,430 --> 00:00:14,640
So when I refresh the page, I see that I've got already an existing value sitting within my input field.

4
00:00:14,640 --> 00:00:19,050
And we've added that in so that we can leave the page, go back to it.

5
00:00:19,140 --> 00:00:24,720
And we always have our countdown timer counting that down to whatever value is sitting within the input

6
00:00:24,720 --> 00:00:25,050
field.

7
00:00:25,230 --> 00:00:29,280
And when we change this, this is actually resetting the countdown value to the new date.

8
00:00:29,430 --> 00:00:33,030
And even when we refresh it, we still have that same date and time.

9
00:00:33,270 --> 00:00:34,500
So that's exactly what we wanted.

10
00:00:34,500 --> 00:00:37,190
And this is exactly what we wanted for our countdown timer.

11
00:00:37,320 --> 00:00:43,160
And once we reach our date, we want the countdown timer to stop running and we're still putting them

12
00:00:43,190 --> 00:00:44,880
down the calculations here.

13
00:00:45,030 --> 00:00:49,830
And we can also update this to date reached or something like that if we wanted to as well.

14
00:00:50,460 --> 00:00:59,970
So now going into our code, we set up our main input area for the user to input a date as well as where

15
00:00:59,970 --> 00:01:02,010
we can output the clock values.

16
00:01:02,250 --> 00:01:06,900
And we strategically added in classes of days, hours, minutes and seconds.

17
00:01:07,050 --> 00:01:11,700
And these actually are going to correspond to the object names that we're going to use later on when

18
00:01:11,700 --> 00:01:13,410
we're calculating the amount of time left.

19
00:01:13,680 --> 00:01:20,220
And the reason we did that is saves a little bit of time with the coding and also outputs it more directly

20
00:01:20,220 --> 00:01:21,470
into the HTML.

21
00:01:21,900 --> 00:01:29,670
So first we started out by selecting our elements that we needed to use from our HTML and putting them

22
00:01:29,670 --> 00:01:31,040
in as JavaScript objects.

23
00:01:31,050 --> 00:01:35,450
So we had our main input area and we went specific with the name of it.

24
00:01:35,940 --> 00:01:38,730
We only have one, so we could have stuck with input as well.

25
00:01:39,150 --> 00:01:43,950
But we did want to show you how you can do more specific selections of inputs in case you have more

26
00:01:43,950 --> 00:01:45,350
than one on the page.

27
00:01:45,630 --> 00:01:51,420
Also, you selected the whole clock element with all of the content that's contained within insight

28
00:01:51,600 --> 00:01:52,910
into the object.

29
00:01:53,340 --> 00:01:56,840
Then we set up a few global variables that we needed to make use of.

30
00:01:57,090 --> 00:02:04,170
So that was the interval time and the stopping of the counter also set up a variable to check to see

31
00:02:04,170 --> 00:02:06,750
if we have any content in the local storage.

32
00:02:06,990 --> 00:02:11,880
And if we do have an item called Countdown, then we know that we've already been through this before

33
00:02:11,880 --> 00:02:17,340
and we've already set account countdown time so we can utilize that within our code where we're outputting

34
00:02:17,340 --> 00:02:17,670
that.

35
00:02:17,760 --> 00:02:20,490
I'm going to get the console message there because we don't need that.

36
00:02:21,000 --> 00:02:26,490
So we know that if there is a save value, we can start the clock with whatever that save value is.

37
00:02:26,680 --> 00:02:30,570
And we also want it to update the input with whatever that save value is.

38
00:02:30,690 --> 00:02:36,390
And notice the one thing that we was different here with the input type that is date.

39
00:02:36,720 --> 00:02:43,560
We need to specify that not only has value, but value as date in order for it to output properly.

40
00:02:43,890 --> 00:02:47,160
We added an event listener for that particular field as well.

41
00:02:47,170 --> 00:02:53,970
So if anyone changes those values, then that's where we set the new countdown time we added in to prevent

42
00:02:53,970 --> 00:02:54,450
default.

43
00:02:54,570 --> 00:02:59,520
And quite honestly, it's not actually needed because we don't have any default actions on that change.

44
00:02:59,670 --> 00:03:03,460
But in case we did, or if we had a button that we were selecting, we'll keep that in there.

45
00:03:03,870 --> 00:03:06,720
Also, we want to clear out any existing intervals.

46
00:03:07,230 --> 00:03:11,880
So the countdown timer is on an interval and this will run blocks of code.

47
00:03:11,980 --> 00:03:16,800
So if you have multiple intervals running, that's not a good thing, and especially if you're not displaying

48
00:03:16,800 --> 00:03:16,980
them.

49
00:03:17,160 --> 00:03:23,130
So we want to have that one interval running so we clear out whatever interval is there and we reset

50
00:03:23,130 --> 00:03:25,470
all the all of the calculations.

51
00:03:25,800 --> 00:03:27,390
We get a new date value.

52
00:03:28,020 --> 00:03:32,080
We return that date value and we set it in the local storage.

53
00:03:32,090 --> 00:03:36,660
So if the pages are refreshed right at that moment, we're still going to have that within our local

54
00:03:36,660 --> 00:03:37,080
storage.

55
00:03:37,410 --> 00:03:41,550
We send it over to start the clock and we set the stop time to true.

56
00:03:41,670 --> 00:03:46,290
So that means that we're not stopping the time in our start clock function.

57
00:03:46,650 --> 00:03:50,160
We have a function within there and that's to update the counter.

58
00:03:50,430 --> 00:03:54,000
And we also launch a function in there that updates the counter.

59
00:03:54,630 --> 00:03:58,280
We can remove this one and then it can run off the interval one.

60
00:03:58,290 --> 00:04:00,510
So there might be a little bit of a delay on the change.

61
00:04:00,630 --> 00:04:02,070
So that's why we've kept that one in.

62
00:04:02,550 --> 00:04:04,170
We have enough stop time.

63
00:04:04,170 --> 00:04:07,050
So we're checking to see if that stop time is still true.

64
00:04:07,320 --> 00:04:10,500
And if it is, then we can set that interval.

65
00:04:10,800 --> 00:04:17,700
And if it's not, then we want to clear that interval and the interval is running that update counter.

66
00:04:17,730 --> 00:04:21,210
So it's running this function, the content here and within here.

67
00:04:21,360 --> 00:04:27,990
What we're doing is we're calculating how much time is left between the current time and our selecta

68
00:04:27,990 --> 00:04:31,590
time in the input using our time left function.

69
00:04:31,980 --> 00:04:34,170
We're getting the current time of our system.

70
00:04:34,500 --> 00:04:37,740
So a new date and then we're calculating the difference.

71
00:04:37,980 --> 00:04:41,490
So bring it down to the Unix timestamp for January 1st.

72
00:04:41,490 --> 00:04:47,610
Nineteen seventy, calculating out the minutes, hours, days, seconds, and then returning it within

73
00:04:47,610 --> 00:04:53,310
an object format so that we can pick that information up and loop through that object.

74
00:04:53,790 --> 00:04:59,130
And as we loop through that object, we're selecting out all of the properties which were the values

75
00:04:59,130 --> 00:04:59,910
here that we set.

76
00:05:00,080 --> 00:05:05,960
Within that object, and we're checking to see if we can use query selector and they actually exist

77
00:05:05,960 --> 00:05:10,180
within our HTML as classes, so are indicating it by the DOT.

78
00:05:10,880 --> 00:05:17,000
So we're looping through and if the classes match our object names, then we know that we have a match

79
00:05:17,000 --> 00:05:21,250
and we want to output that value and update the inner turmoil of that element.

80
00:05:21,530 --> 00:05:24,530
So we've got that condition there and we're updating that inner HTML.

81
00:05:24,830 --> 00:05:30,800
So we're looping through that full object and outputting and updating the appropriate elements that

82
00:05:30,800 --> 00:05:31,310
are needed.

83
00:05:32,840 --> 00:05:38,390
And that's it, so that's built out our application, and coming up next, I'll do a quick bonus lesson,

84
00:05:38,390 --> 00:05:42,260
will update some of the styling and update this and make this look a little bit better.

85
00:05:42,770 --> 00:05:47,700
But as for the JavaScript, this concludes the JavaScript part of this section.

86
00:05:48,170 --> 00:05:49,160
So hope you enjoyed it.

87
00:05:49,160 --> 00:05:53,520
And thanks again for taking the section about the countdown timer.

88
00:05:53,810 --> 00:05:54,820
Try it out for yourself.

89
00:05:55,010 --> 00:05:55,940
Have some fun with it.

90
00:05:56,090 --> 00:06:00,290
Update the code and try out all the different functionality that we looked at in the earlier lessons.