1
00:00:00,470 --> 00:00:06,320
As promised in this lesson, we're going to be delivering our click counter, so so far we have an area

2
00:00:06,320 --> 00:00:10,390
that we can output a message to the user and we've also created a button.

3
00:00:10,520 --> 00:00:14,840
And when we click that button, we've got the interaction, we've got our event listener added to it.

4
00:00:14,960 --> 00:00:18,650
And right now it outputs a message into the console that just says click.

5
00:00:19,010 --> 00:00:25,670
So what we ultimately want to do is update our counter value so we can increment that global value of

6
00:00:25,670 --> 00:00:27,920
the counter that we had already set up.

7
00:00:28,220 --> 00:00:34,850
So sucked in that counter object and now we can output some information to the person that's interacting

8
00:00:34,850 --> 00:00:35,890
with our application.

9
00:00:36,260 --> 00:00:43,210
So we've got our value that's increasing and we can use the document, query selectors.

10
00:00:43,230 --> 00:00:48,980
It's going to be a fairly long statement and we need to select the element with the class of message

11
00:00:49,460 --> 00:00:55,010
and notice that we set a class of message just to that object that's above us.

12
00:00:55,040 --> 00:01:02,180
So luckily for us, we already have an element with the message there and we can update the entire HTML.

13
00:01:02,360 --> 00:01:04,940
And now all we need to do is set up a message.

14
00:01:05,180 --> 00:01:11,120
You could also set a separate a separate variable for that message.

15
00:01:12,040 --> 00:01:17,320
And then you could just simply add that to the to the end there, so you clicked this.

16
00:01:18,530 --> 00:01:21,420
And then concatenate together into a string.

17
00:01:22,280 --> 00:01:26,770
So this is the message that we're outputting to the person that's interacting with their application,

18
00:01:27,050 --> 00:01:30,620
and then we just equal the inner turmoil to whatever the value of messages.

19
00:01:30,950 --> 00:01:34,680
So now we have our counter is increasing.

20
00:01:34,770 --> 00:01:37,740
You see that number is increasing every time we click it.

21
00:01:38,270 --> 00:01:44,860
You can also, because this is HTML, you can add in a board to it that stands out a little bit more.

22
00:01:45,140 --> 00:01:46,990
So those are the numbers that are being clicked.

23
00:01:47,240 --> 00:01:49,560
So effectively, we've created our clicker.

24
00:01:49,850 --> 00:01:52,180
Everything is working to try that out.

25
00:01:52,190 --> 00:01:57,740
And let's add in let's practice a little bit more styling before we conclude and within the button,

26
00:01:57,740 --> 00:01:59,500
let's make it look more like a button.

27
00:01:59,660 --> 00:02:03,110
So it looks rather small and we want to make it look a little bit more clickable.

28
00:02:03,290 --> 00:02:09,930
So this is just another exercise in getting familiar with what you can do with the style object in a

29
00:02:09,950 --> 00:02:10,630
JavaScript.

30
00:02:10,940 --> 00:02:16,150
So selecting our border and just as we would with our scissors.

31
00:02:16,460 --> 00:02:20,840
So if we selected a border, we could set whatever border color we wanted to.

32
00:02:21,200 --> 00:02:28,570
Also getting that button style, we can add in padding just as we did within our output object.

33
00:02:29,000 --> 00:02:35,180
So selecting whatever padding, don't forget the picks to identify that it's pixels that you want to

34
00:02:35,180 --> 00:02:38,530
set that we can set up with for the button.

35
00:02:38,690 --> 00:02:40,390
So let's make it a nice big button.

36
00:02:40,490 --> 00:02:46,340
We can also set a font size so that a number of objects and within brackets, it's showing me all the

37
00:02:46,340 --> 00:02:51,110
different options that I have for my when I do the button style.

38
00:02:51,260 --> 00:02:53,720
You can see that we've got all of these options.

39
00:02:53,720 --> 00:02:55,310
So you can do border bottom.

40
00:02:55,580 --> 00:02:59,330
We can do all kinds of border properties that we can apply.

41
00:02:59,750 --> 00:03:01,820
So there's just a ton of stuff that we can do.

42
00:03:01,880 --> 00:03:04,100
There's also text a line as well.

43
00:03:04,100 --> 00:03:09,210
So setting up our text line so we can send her our text in the middle of the button.

44
00:03:09,260 --> 00:03:10,400
There's also background.

45
00:03:10,490 --> 00:03:14,780
You probably saw that within the dropdown we can set our background color.

46
00:03:15,050 --> 00:03:18,620
So whatever color we want to set it to, to make it a nice red button.

47
00:03:18,630 --> 00:03:21,810
So it stands out and also update our color.

48
00:03:21,920 --> 00:03:24,320
A lot of these are very intuitive words.

49
00:03:24,350 --> 00:03:25,790
Try it out and refresh it.

50
00:03:25,800 --> 00:03:29,750
So now we have a nice big click me button and that's it for our project.

51
00:03:29,770 --> 00:03:35,300
So this was a great exercise to really get familiar with creating content with JavaScript.

52
00:03:35,510 --> 00:03:40,280
And if you go to the page source, you're going to see that within the page source.

53
00:03:40,310 --> 00:03:43,090
There's no HTML, so within body there's nothing.

54
00:03:43,100 --> 00:03:47,360
And then we've just got our script content so we don't have any HTML elements.

55
00:03:47,540 --> 00:03:50,680
We're creating all of those dynamically using JavaScript.

56
00:03:50,930 --> 00:03:52,400
So do try it out for yourself.

57
00:03:52,670 --> 00:03:57,530
Get familiar with creating elements on the fly using JavaScript.

58
00:03:57,530 --> 00:04:01,450
And this is our button that we just created with all of its style properties that we added in.

59
00:04:01,470 --> 00:04:06,530
And next lesson, we'll do a quick overview of the functionality of all the different statements that

60
00:04:06,530 --> 00:04:07,040
we created.