1
00:00:00,700 --> 00:00:06,310
In this section, we're going to be building out an HTML JavaScript countdown timer and we're going

2
00:00:06,310 --> 00:00:09,650
to need a few HTML elements within the page.

3
00:00:10,060 --> 00:00:16,750
First of all, we need an input area that the user can come and input the date that they want to enter

4
00:00:16,750 --> 00:00:16,990
in.

5
00:00:17,010 --> 00:00:22,630
So this is the end date that we're going to be using for the counter in order to calculate how much

6
00:00:22,630 --> 00:00:25,400
time is left until that selected date.

7
00:00:25,660 --> 00:00:31,010
So going in and refreshing it, we're using the H simple five dete input.

8
00:00:31,030 --> 00:00:36,940
So just using type date, this gives us the ability to select to date and we can use that within our

9
00:00:36,940 --> 00:00:40,630
JavaScript in order to calculate how much time is left.

10
00:00:40,870 --> 00:00:47,710
We also need a visual that we're going to use in order to output the time for the user and we can call

11
00:00:47,710 --> 00:00:48,680
this one clock.

12
00:00:49,300 --> 00:00:55,240
So giving it a class of clock, this will be a div and within this div we're going to have some span's.

13
00:00:55,630 --> 00:00:59,360
So the first span that we have is going to be a class of days.

14
00:00:59,710 --> 00:01:07,570
So this is how many days are left until that particular element or this is how many days are left in

15
00:01:07,570 --> 00:01:08,250
the countdown.

16
00:01:08,650 --> 00:01:16,810
And we can wrap all of this inside of a span and duplicating this so that we have a visual for hours

17
00:01:16,810 --> 00:01:23,980
as well, updating the class so that we have a way to select it and we can output the word hours for

18
00:01:23,980 --> 00:01:25,690
the person using the application.

19
00:01:26,080 --> 00:01:28,560
The other parameter that we need is minutes.

20
00:01:28,690 --> 00:01:35,530
So just give it a class of minutes and we can output the value of minutes as well for the user to be

21
00:01:35,530 --> 00:01:37,450
able to see the number of minutes.

22
00:01:37,690 --> 00:01:40,600
I'll make this bigger since these statements are fairly long.

23
00:01:41,740 --> 00:01:47,230
And one last one, and this is going to be how many seconds are left within the countdown.

24
00:01:47,230 --> 00:01:48,040
So seconds.

25
00:01:48,940 --> 00:01:52,410
And we're just writing that out for the user to be able to see that.

26
00:01:53,020 --> 00:01:59,950
Let's shrink this down, refresh our content, and we can see that we've got days, hours, minutes,

27
00:01:59,950 --> 00:02:04,010
seconds left until our countdown is completed.

28
00:02:04,330 --> 00:02:06,520
So now we need to bring in the JavaScript.

29
00:02:06,520 --> 00:02:12,280
And the JavaScript is where all of the magic happens, where we can do all of the calculations in order

30
00:02:12,280 --> 00:02:15,430
to account for what those values are.

31
00:02:15,910 --> 00:02:18,730
So now let's select our elements.

32
00:02:18,730 --> 00:02:23,250
Our main element that we're going to be using is going to be the DETE.

33
00:02:23,290 --> 00:02:26,680
So this is going to be our input and we only have one input.

34
00:02:27,070 --> 00:02:30,310
So selecting that element, this is the end date.

35
00:02:30,310 --> 00:02:35,710
We can call it end date using documents and query selector.

36
00:02:36,010 --> 00:02:40,130
Let's select that input and if we had more than one input.

37
00:02:40,150 --> 00:02:45,730
So right now we only have the one input, but if we had more than one inputs, we could identify it

38
00:02:45,730 --> 00:02:47,260
using the name as well.

39
00:02:47,560 --> 00:02:50,600
So this could be an end date potentially as the name.

40
00:02:51,940 --> 00:02:58,810
So going up here are going to add that in this is just in case you want to add in any additional inputs

41
00:02:59,110 --> 00:03:04,900
so that they don't overlap and that we're always selecting that particular one that we want to use and

42
00:03:04,900 --> 00:03:07,170
console log out and date.

43
00:03:08,470 --> 00:03:12,430
And this is just to double check to make sure that we're getting that right input area.

44
00:03:12,610 --> 00:03:13,300
So we are.

45
00:03:14,480 --> 00:03:20,920
Next, we want to select all of these elements, and the main one that we need to select is the clock.

46
00:03:20,930 --> 00:03:26,510
And then from the clock we can go down and we can select the elements that have the span of hours,

47
00:03:26,510 --> 00:03:27,830
minutes and seconds.

48
00:03:28,160 --> 00:03:35,720
So let's select our main element that has the clock and we can give it a name of clock as well as so

49
00:03:35,720 --> 00:03:36,260
document.

50
00:03:36,710 --> 00:03:43,520
And selecting the element with the class of clock is the one that we're going to be selecting here.

51
00:03:43,910 --> 00:03:49,750
So for classes we use, we prefix it with period the same way we do with access.

52
00:03:50,710 --> 00:03:57,460
And we want to add in an event listener on the end date element, so whenever that gets changed, then

53
00:03:57,460 --> 00:03:59,110
we want to trigger off an event.

54
00:03:59,200 --> 00:04:03,670
So attending an event listener, the event listener that we're going to use is change.

55
00:04:03,880 --> 00:04:08,830
So whenever the value here changes that we're going to recalculate how much time is left until the end

56
00:04:08,830 --> 00:04:14,590
time and let's set up an anonymous function are going to add in the prevent default.

57
00:04:15,100 --> 00:04:18,630
So what this does in JavaScript, this prevents the default action.

58
00:04:19,390 --> 00:04:24,720
So in case you have something submitting it, there's a default action sometimes to two fields.

59
00:04:24,970 --> 00:04:26,410
So this is the way to prevent it.

60
00:04:26,530 --> 00:04:28,480
And in this case, it's just an input field.

61
00:04:28,480 --> 00:04:30,250
So it's not doing anything when we're changing it.

62
00:04:30,370 --> 00:04:35,170
But I'll leave that in there for reference in case you want to use it later on to prevent the default.

63
00:04:35,440 --> 00:04:40,840
So coming up in the next lesson, we're going to continue to build out this application, the countdown

64
00:04:40,840 --> 00:04:41,260
timer.

65
00:04:41,470 --> 00:04:47,140
So for now, go into your editor, open it up, build out the HTML that you're going to need in order

66
00:04:47,140 --> 00:04:52,390
to provide the user the interaction screen that they're going to need in order to create the countdown

67
00:04:52,390 --> 00:04:52,780
timer.

68
00:04:52,930 --> 00:04:59,560
So they're going to need an input and they're also going to need an output view of how many how much

69
00:04:59,560 --> 00:05:06,250
time is left before their end date and then using JavaScript, select those elements into JavaScript

70
00:05:06,250 --> 00:05:10,030
objects so that we can make use of them in the upcoming lessons and code.