1
00:00:00,210 --> 00:00:05,940
This lesson is going to be a quick code review of all the functionality that we looked at in the earlier

2
00:00:05,940 --> 00:00:13,140
lessons, we created d'Hiv in order to contain a message for the user, as well as a button to create

3
00:00:13,140 --> 00:00:19,310
interaction for the user in order to interact with our application, setting up a global variable.

4
00:00:19,320 --> 00:00:25,440
We called it counter so that we can interact with this value and we can use it within our coding.

5
00:00:25,920 --> 00:00:27,390
Let's open this up bigger.

6
00:00:27,420 --> 00:00:31,860
We contained all of our functionality within one main function.

7
00:00:32,190 --> 00:00:39,060
We add an event listener to the document object and this event listener was listening for the DOM content

8
00:00:39,060 --> 00:00:40,620
loaded event.

9
00:00:40,650 --> 00:00:45,240
Once that event fires up was so that loads the page, we invoked the functions.

10
00:00:45,270 --> 00:00:50,130
This was an anonymous function that's contained within the event listener and we had all of our functionality.

11
00:00:50,190 --> 00:00:51,810
So we selected elements.

12
00:00:51,810 --> 00:00:53,220
We selected the body element.

13
00:00:53,220 --> 00:00:54,780
That's only HTML one that we had.

14
00:00:54,780 --> 00:00:57,960
We also selected output, we created an output.

15
00:00:58,200 --> 00:01:04,170
We created an object called output and created an element which was a div added text to the div applied

16
00:01:04,170 --> 00:01:06,210
some styling to that element.

17
00:01:06,420 --> 00:01:14,400
We also added in a class of message to the element and then we added it in to our body object that we

18
00:01:14,400 --> 00:01:18,870
had that we had selected earlier from our HTML.

19
00:01:18,900 --> 00:01:20,580
Next we went onto the button.

20
00:01:20,580 --> 00:01:26,610
So the same as when we created the div, we created a button element using the crit element method in

21
00:01:26,610 --> 00:01:28,560
JavaScript, added some HTML.

22
00:01:28,560 --> 00:01:30,260
It could also be in our text as well.

23
00:01:30,300 --> 00:01:36,000
We played a whole bunch of styling it, probably looking at this and saying, OK, well, this was probably

24
00:01:36,000 --> 00:01:39,270
easier done in class and you're probably right.

25
00:01:39,540 --> 00:01:42,030
But of course we do want to practice JavaScript.

26
00:01:42,150 --> 00:01:44,040
So hence all of the different statements.

27
00:01:44,040 --> 00:01:48,050
They're playing various staling properties to that element.

28
00:01:48,330 --> 00:01:53,700
So once we've constructed the element, we add the event listener and it actually doesn't matter which

29
00:01:53,700 --> 00:01:58,190
order C could do the HTML after the styling, you can mix and mingle them.

30
00:01:58,290 --> 00:02:03,450
I usually like to keep them all separated out, but it's up to you, whatever your format and you're

31
00:02:03,450 --> 00:02:04,390
most comfortable with.

32
00:02:04,410 --> 00:02:10,140
We had an event listener, so just as if we were to select the element from the page into an object

33
00:02:10,140 --> 00:02:12,720
format in JavaScript, and then the rest is the same.

34
00:02:12,720 --> 00:02:16,830
Where we add the event listener, the event listener that we added in was a click event.

35
00:02:17,040 --> 00:02:21,930
We can get rid of this console message because we don't need that anymore and we're incrementing that

36
00:02:21,930 --> 00:02:28,320
counter object, that counter value that we set as a global value and creating a message that we can

37
00:02:28,320 --> 00:02:29,820
output to the user.

38
00:02:29,850 --> 00:02:33,930
And then using our document query selector, we're selecting an element on the page.

39
00:02:34,110 --> 00:02:36,540
And the element that we're selecting is message.

40
00:02:36,660 --> 00:02:42,450
And we know that this exists because we created it up here and then updating the inner HTML of that

41
00:02:42,450 --> 00:02:46,230
message object to whatever the value of mass is.

42
00:02:46,260 --> 00:02:47,760
So that's the one that we created over here.

43
00:02:48,030 --> 00:02:55,230
And then once we've added in the event listener, what we do is we append that that button to the body

44
00:02:55,440 --> 00:03:01,680
and that makes it show up within our HTML and gives the user the ability to see the button and also

45
00:03:01,680 --> 00:03:02,390
click the button.

46
00:03:02,400 --> 00:03:08,310
So go ahead and try this out for yourself, get familiar with creating elements and also adding event

47
00:03:08,310 --> 00:03:10,110
listeners to those elements.