1
00:00:00,090 --> 00:00:04,800
In this lesson, we're going to be setting up our kallick counter and what the click counter will do

2
00:00:04,800 --> 00:00:06,290
is it will count clicks.

3
00:00:06,510 --> 00:00:12,660
There's going to be a message area for the user to be able to see messages, essentially how many clicks

4
00:00:12,660 --> 00:00:17,190
they've made and also a button that the user can click.

5
00:00:17,370 --> 00:00:22,200
And we're going to do this all in JavaScript is going to be no additional HTML.

6
00:00:22,480 --> 00:00:24,570
It's all going to be within JavaScript.

7
00:00:24,580 --> 00:00:25,800
We're going to create the element.

8
00:00:25,950 --> 00:00:30,660
We're going to create the interaction for that element, all using JavaScript.

9
00:00:30,660 --> 00:00:32,700
And I know you've come here to learn JavaScript.

10
00:00:32,860 --> 00:00:36,370
So this lesson is going to deliver all pure JavaScript.

11
00:00:36,690 --> 00:00:43,380
So first of all, let's set up some variables and we need to have one variable that will count our clicks

12
00:00:43,380 --> 00:00:45,750
so we can call it counter next.

13
00:00:45,780 --> 00:00:49,230
We want to make sure that the document object is loading.

14
00:00:49,410 --> 00:00:54,280
And if you're familiar with the query, then you might be familiar with document ready.

15
00:00:54,570 --> 00:01:00,270
There's also a function in JavaScript, just plain JavaScript that you can use that will accomplish

16
00:01:00,270 --> 00:01:01,020
the same thing.

17
00:01:01,140 --> 00:01:08,190
And that's adding an event listener and the event listener is going to listen for DAUn content loaded

18
00:01:08,880 --> 00:01:16,980
and dom content loaded gets invoked when the DOM finishes loading and that gives you the ability to

19
00:01:16,980 --> 00:01:21,210
interact with the DOM and then the event that we're passing through.

20
00:01:21,220 --> 00:01:29,250
So we're going to pass in that event object and contain all of the the loaded content within this function.

21
00:01:29,490 --> 00:01:37,140
And for now I'm going to type in a console message and I'm just going to type ready and we'll go out

22
00:01:37,140 --> 00:01:39,840
to our browser and try that out.

23
00:01:40,320 --> 00:01:45,720
And of course, probably not going to see much of a delay because the DOM is loading fairly quickly.

24
00:01:45,990 --> 00:01:51,450
So all of the document object is ready to go and that means that we're ready to start building out our

25
00:01:51,450 --> 00:01:52,230
application.

26
00:01:53,290 --> 00:01:58,900
Next, we want to select an element on the page, and the only one that we have is body, so I'm going

27
00:01:58,900 --> 00:02:01,750
to put that into a variable that we can utilize.

28
00:02:01,990 --> 00:02:07,900
And with JavaScript, you can also do document body as well, and that will connect to the body object.

29
00:02:08,860 --> 00:02:15,310
So we're making a selection using query selector and we're selecting the body element, so that's going

30
00:02:15,310 --> 00:02:18,790
to be that whole body element because we want to utilize that.

31
00:02:18,790 --> 00:02:21,030
We want append elements to the body.

32
00:02:21,190 --> 00:02:27,070
So it's good to have it within an object format so that you can really easily append it and you can

33
00:02:27,070 --> 00:02:29,920
do the same thing if you had some elements on your page.

34
00:02:30,070 --> 00:02:36,970
And selecting them as JavaScript objects gives you the ability as well to interact with them within

35
00:02:36,970 --> 00:02:37,480
your code.

36
00:02:37,930 --> 00:02:44,950
Next, let's create an output area so we can call that output and using documents and this time we're

37
00:02:44,950 --> 00:02:46,630
using create element.

38
00:02:46,870 --> 00:02:53,650
And just as the name implies, what it's going to do is it's a method in order to create elements on

39
00:02:53,650 --> 00:02:55,510
the fly with JavaScript.

40
00:02:56,050 --> 00:03:02,620
So now that we've got our body and we've created an element, we need to place that element on the page

41
00:03:02,770 --> 00:03:04,750
and I'll show you what that element looks like.

42
00:03:04,780 --> 00:03:10,840
So right now, when we refresh it, this div, it's not sitting on the page yet because I haven't appended

43
00:03:10,840 --> 00:03:11,700
it to the page.

44
00:03:11,980 --> 00:03:15,790
So going back into our code, let's append that.

45
00:03:16,000 --> 00:03:21,090
So using the body object that we created, we want to use append child.

46
00:03:21,100 --> 00:03:27,520
And again, like the name implies, this gives you the ability to append an object to another object

47
00:03:27,520 --> 00:03:28,990
element on the page.

48
00:03:29,180 --> 00:03:35,530
And in this case where spending body or pending output to the body element and that's the body object

49
00:03:35,530 --> 00:03:36,220
that we created.

50
00:03:36,250 --> 00:03:40,840
So now let's save that and we'll go to the browser and we'll let the magic happen.

51
00:03:41,050 --> 00:03:45,910
So we refresh and we see nothing within the browser yet.

52
00:03:45,910 --> 00:03:49,000
And that's because that element is there.

53
00:03:49,000 --> 00:03:56,980
So we go into the body, we can see that that div has been added in and we know that we don't have any

54
00:03:56,980 --> 00:03:59,560
contents in the div and that's why we're not seeing it.

55
00:03:59,710 --> 00:04:04,300
But it is actually physically there on the page and it's ready to be manipulated.

56
00:04:04,450 --> 00:04:07,050
So we're going to be taking care of that in the upcoming lesson.

57
00:04:07,390 --> 00:04:09,820
So for now, before you start the next lesson.

58
00:04:10,760 --> 00:04:17,300
Take a look at adding an event listener Dom Content loaded, and this is, again, to make sure that

59
00:04:17,300 --> 00:04:19,220
your dorm content has loaded.

60
00:04:19,610 --> 00:04:21,080
So add that event listener.

61
00:04:21,380 --> 00:04:27,320
And then within here is where you can set up your function or you can have a named function that you

62
00:04:27,320 --> 00:04:29,720
can invoke with this event listener as well.

63
00:04:29,810 --> 00:04:34,400
And then you can have all of your code in there so you can have an invite function or something like

64
00:04:34,400 --> 00:04:36,500
that and then have the code in there as well.

65
00:04:36,710 --> 00:04:38,510
So it'll accomplish the same purpose.

66
00:04:39,080 --> 00:04:42,520
And that's just giving you access to that particular object.

67
00:04:42,770 --> 00:04:47,120
So if you need to have this on a global scope, then you could add it outside.

68
00:04:47,240 --> 00:04:51,500
But everything that we're doing is going to be sitting within this function.

69
00:04:51,680 --> 00:04:56,480
So we're not going to need to make any manipulations outside and make sure that it's working.

70
00:04:56,480 --> 00:05:02,300
So log out the element to the console, add it to the body, and you're going to be ready to move on

71
00:05:02,300 --> 00:05:03,110
to the next lesson.