1
00:00:00,060 --> 00:00:05,310
Here in this lesson, we are going to create some elements on the page that click a button as well as

2
00:00:05,310 --> 00:00:11,970
an output and then use the date object and get some date information to display the hour that it's being

3
00:00:11,970 --> 00:00:13,800
clicked whenever the button gets clicked.

4
00:00:13,810 --> 00:00:15,720
So we're going to display that on the page.

5
00:00:16,050 --> 00:00:17,010
So let's get to it.

6
00:00:17,040 --> 00:00:25,410
So, first of all, let's create our button and we're using the document to create elements and element

7
00:00:25,410 --> 00:00:28,350
that we're creating is going to be the button tag element.

8
00:00:29,070 --> 00:00:35,040
And also, let's take the button and add some text content to the button.

9
00:00:35,280 --> 00:00:38,370
And how about we click me?

10
00:00:39,780 --> 00:00:41,940
So that's going to be the button label.

11
00:00:42,240 --> 00:00:48,810
And then we also want to add the button to the body so that or actually we need a mean container area.

12
00:00:48,820 --> 00:00:55,080
So let's create another element so we don't want to just have the button on itself within the body.

13
00:00:55,800 --> 00:00:56,880
We want the container.

14
00:00:57,120 --> 00:01:02,510
So document create elements and we'll create a div for that.

15
00:01:02,520 --> 00:01:05,690
So the div is going to be the main container element.

16
00:01:06,990 --> 00:01:15,690
And then for the output itself, we're just going to leave it blank right now, but we will be adding

17
00:01:15,690 --> 00:01:17,370
it to the document.

18
00:01:17,550 --> 00:01:23,880
So just select the document and then the body object is already an object within the document and we

19
00:01:23,880 --> 00:01:34,050
can use the append method to upend the output to there and then select output and append the button

20
00:01:34,440 --> 00:01:40,650
to be within the output div and then const.

21
00:01:40,650 --> 00:01:42,920
And we should also create a message area.

22
00:01:42,970 --> 00:01:52,680
So document create elements and this can also be another div and we'll have that message area appended

23
00:01:52,890 --> 00:01:55,690
to the output.

24
00:01:55,950 --> 00:01:58,550
So just underneath or we're going to put it above the button.

25
00:01:58,950 --> 00:02:00,240
So that means that we.

26
00:02:02,920 --> 00:02:11,080
Need to add it before we add the button with an output so it appears above and let's add in some content

27
00:02:11,080 --> 00:02:11,950
into message.

28
00:02:17,180 --> 00:02:19,040
And this will just say hello, world.

29
00:02:20,690 --> 00:02:27,920
Now, we've constructed our basic HTML that we can use, so it's refresh and do a quick inspect on it.

30
00:02:27,920 --> 00:02:29,870
So open up the dev tools.

31
00:02:31,700 --> 00:02:38,540
We've got the hello world and the click me, so that's all there and we're already to add in some.

32
00:02:43,190 --> 00:02:45,360
Click event, some functionality to it.

33
00:02:45,500 --> 00:02:52,880
So let's move all of the stuff up and select the button object that we've already identified.

34
00:02:54,100 --> 00:02:55,490
We're going to add an event listener.

35
00:02:55,700 --> 00:02:58,340
The event that we're adding in is going to be a click.

36
00:02:58,850 --> 00:03:01,130
So this is going to run whenever it gets clicked.

37
00:03:01,220 --> 00:03:05,120
So we're going to use the Arrow format for the function.

38
00:03:06,370 --> 00:03:15,390
And so what we want to happen whenever it gets run, we want to get the current date value and to the

39
00:03:15,400 --> 00:03:21,280
new date, so it's going to return back to the new date value and from the date, we want to get the

40
00:03:21,280 --> 00:03:21,830
hours.

41
00:03:22,180 --> 00:03:32,410
So let's take a message and text content and we'll update the text content to show the date.

42
00:03:35,420 --> 00:03:41,670
And actually, we shouldn't use state, we'll just use DEET, we'll just do today, actually.

43
00:03:42,380 --> 00:03:50,120
So instead of using DEET will use today and today and we've got a number of methods so we can get the

44
00:03:50,120 --> 00:03:54,580
day Sauternes, the day of the week, returns the year and returns the hours.

45
00:03:54,800 --> 00:03:57,380
And this is specific for the local hours.

46
00:03:57,830 --> 00:04:00,490
So it's going to return back whatever the local hours are.

47
00:04:01,070 --> 00:04:05,290
We can also add and add in the local minutes as well.

48
00:04:05,690 --> 00:04:09,770
So how about we do that and we can use the template literals.

49
00:04:11,720 --> 00:04:18,680
So that's where we use the curly brackets and the dollar sign and the tactics to open and close it.

50
00:04:19,520 --> 00:04:23,460
So that way we can add in the spacing and we'll do one more.

51
00:04:23,480 --> 00:04:31,160
So we've got today and still to get ours, let's do get minutes.

52
00:04:32,360 --> 00:04:33,410
And this is a method.

53
00:04:33,410 --> 00:04:37,100
So we do need to have the rounded brackets and let's see what this looks like.

54
00:04:37,110 --> 00:04:38,890
So refresh and click me.

55
00:04:39,470 --> 00:04:41,100
So it's getting the hours.

56
00:04:41,120 --> 00:04:44,780
So right now it's 5:00 p.m. 553, actually.

57
00:04:44,810 --> 00:04:50,990
And whenever we click it, we're getting the hours in the minutes so we can also get the seconds if

58
00:04:50,990 --> 00:04:51,800
we want as well.

59
00:04:53,380 --> 00:05:01,330
So there's some other options there, so get seconds, it's going to return the second round of brackets

60
00:05:01,330 --> 00:05:07,110
again because to indicate that this is going to be a method that gets invoked.

61
00:05:08,290 --> 00:05:12,310
So now we're getting the seconds, we're getting the hours, minutes and the second.

62
00:05:12,320 --> 00:05:19,420
So whenever the button gets clicked, then we invoke the function which updates the content and outputs

63
00:05:19,420 --> 00:05:20,630
the new content to the page.

64
00:05:21,340 --> 00:05:23,460
So go ahead and try that out as well.

65
00:05:25,790 --> 00:05:31,250
And have some fun with it, creating elements on the page and then updating it dynamically with event

66
00:05:31,250 --> 00:05:31,640
listener.