1
00:00:01,710 --> 00:00:02,630
Welcome back, my friends.

2
00:00:02,850 --> 00:00:11,820
Come to another lecture where we are going to build our logic when some of the buttons are clicked.

3
00:00:12,000 --> 00:00:14,440
So are we going to add a couple of events, listeners?

4
00:00:14,730 --> 00:00:22,890
So first is to create some comments here and I'm going to say calories module controller.

5
00:00:23,760 --> 00:00:29,030
And the second one will be the app.

6
00:00:30,480 --> 00:00:39,210
You are modules controller and the last one, the controller will be our main hub controller.

7
00:00:40,500 --> 00:00:41,970
Main module controller.

8
00:00:42,000 --> 00:00:42,540
Very good.

9
00:00:43,200 --> 00:00:46,740
Now I do have this three controllers.

10
00:00:47,250 --> 00:00:53,610
So what I'm trying to say is when I click this button here, I want something to happen.

11
00:00:53,610 --> 00:00:53,900
Right.

12
00:00:54,450 --> 00:00:58,880
And that is we can add event listener.

13
00:00:59,190 --> 00:01:09,690
So if you go back to your where it is disclosers, if you go back to the index, it should be here.

14
00:01:10,170 --> 00:01:14,810
This button show actual form and in this is the name of the button.

15
00:01:14,820 --> 00:01:21,810
But what I will do, because you already know, we discussed about the layout here, the markup, what

16
00:01:21,810 --> 00:01:28,890
I will do in future, I will just go here and I will respect the element here and I will grab it.

17
00:01:29,100 --> 00:01:33,210
So this is actually the the the the AI class.

18
00:01:33,210 --> 00:01:35,100
This is the font awesome icon.

19
00:01:35,400 --> 00:01:38,420
But I actually am interested in this part here.

20
00:01:38,700 --> 00:01:44,790
This is show form activity in class and we're going to use the query where we select.

21
00:01:45,210 --> 00:01:54,810
So what I'm going to do is I'm going to see document not query selector and I'm going to say dot show

22
00:01:54,810 --> 00:02:06,150
for it and I'm going to attach event listener so it will be unclick and we will have a function.

23
00:02:06,900 --> 00:02:09,240
Remember that this function can happen.

24
00:02:09,240 --> 00:02:12,180
Arguments in that arguments can be events.

25
00:02:12,180 --> 00:02:21,600
So I'm going to say e here right now, what we will do is actually when we see when we hit this when

26
00:02:21,600 --> 00:02:22,530
we hit this button.

27
00:02:24,390 --> 00:02:31,050
I just want something here, and there are a lot of I'm annoyed by all of these things.

28
00:02:32,100 --> 00:02:32,520
All right.

29
00:02:33,120 --> 00:02:40,200
So I just want when this is clicked in future, I want to grab all of the information in storage.

30
00:02:40,560 --> 00:02:40,910
Right.

31
00:02:41,160 --> 00:02:48,630
Regarding maybe it's for food or for exercise one on this button to have that event.

32
00:02:48,840 --> 00:02:52,480
So I'm just going to say comes along and I'm going to store it.

33
00:02:52,950 --> 00:02:58,050
So what I'm going to say here, it's BGN clicked, right.

34
00:02:58,440 --> 00:02:59,730
So let's see if it's going to work.

35
00:03:02,880 --> 00:03:07,860
It is beedi enclaved, so if I hit twice, it will be beedi and clicked twice.

36
00:03:07,890 --> 00:03:10,170
Now look what will happen.

37
00:03:10,180 --> 00:03:14,810
I will add food here and the quantity and 150 calories.

38
00:03:15,000 --> 00:03:17,130
So when I eat now enter.

39
00:03:17,880 --> 00:03:19,110
I don't want this to happen.

40
00:03:19,140 --> 00:03:24,380
Why it's happening because this is a form and it's submitting it right.

41
00:03:25,200 --> 00:03:35,340
So these event last time we say to either prevent default so it will prevent the default or default

42
00:03:35,340 --> 00:03:37,970
action on the form and that is actually the submitting.

43
00:03:38,340 --> 00:03:41,420
So it will prevent to the form to be submitted somewhere.

44
00:03:41,700 --> 00:03:43,850
So let's save it now and let's test it out again.

45
00:03:43,860 --> 00:03:49,620
I'm just going to remove these jibberish from up here and I'm just going to say food.

46
00:03:50,730 --> 00:03:51,360
I don't know.

47
00:03:51,570 --> 00:03:53,490
Food doesn't matter what we write.

48
00:03:53,820 --> 00:03:55,950
I just don't want this form to be submitted.

49
00:03:56,880 --> 00:04:00,630
Here is I just want to grab this blank clicked.

50
00:04:00,660 --> 00:04:01,020
Right.

51
00:04:01,410 --> 00:04:06,450
We can if we use allured, it will stop the window for a second from submitting.

52
00:04:06,450 --> 00:04:12,390
But after that, when we close, let me just show you, this is something that probably I haven't shown

53
00:04:12,390 --> 00:04:12,630
yet.

54
00:04:14,400 --> 00:04:18,720
So we can see alert here and here and click.

55
00:04:19,140 --> 00:04:21,060
And this will give us a pop up window.

56
00:04:21,180 --> 00:04:21,530
Right.

57
00:04:21,840 --> 00:04:25,650
So the form again, we will fill the form food.

58
00:04:25,650 --> 00:04:31,560
One hundred and fifty and I will enter now BTD click there.

59
00:04:31,800 --> 00:04:35,250
Look what will happen here after I click.

60
00:04:36,210 --> 00:04:42,120
Because I don't do I'm not preventing the default action of the form and that is submitting somewhere

61
00:04:43,110 --> 00:04:44,580
it will submit right.

62
00:04:44,670 --> 00:04:45,240
There it is.

63
00:04:45,840 --> 00:04:48,240
That is why you prevent default.

64
00:04:49,710 --> 00:04:50,180
Right.

65
00:04:50,310 --> 00:04:52,170
That's what we can do.

66
00:04:52,550 --> 00:04:59,970
OK, now one more thing that I want to show you is that we need to use another event listener.

67
00:04:59,970 --> 00:05:03,540
But this event listener, we're not going to attach to some button here.

68
00:05:03,750 --> 00:05:13,050
Right, because sometimes the people feel here for one, some mentoring tap, actually tap 150 calories

69
00:05:13,050 --> 00:05:14,550
and hit, enter or return.

70
00:05:15,240 --> 00:05:18,630
And when they do this now, the button will be clicked.

71
00:05:18,630 --> 00:05:18,950
Right.

72
00:05:19,410 --> 00:05:25,800
But I want this to happen on specific keko, so how we can do this.

73
00:05:26,580 --> 00:05:31,140
So I'm going to say document dot, event listener and look what I'm doing here.

74
00:05:31,140 --> 00:05:31,920
I'm going to say keep.

75
00:05:34,600 --> 00:05:35,300
Not kidding.

76
00:05:35,320 --> 00:05:40,000
We have a couple of things, but we are going to be concerned about key prayers in here, I'm going

77
00:05:40,000 --> 00:05:45,480
to pass in the function with an argument of E. just like death.

78
00:05:46,030 --> 00:05:48,420
And I'm going to close this one from here now.

79
00:05:50,140 --> 00:05:54,010
So how we will know which key from the keyboard is pressed.

80
00:05:54,310 --> 00:05:59,170
And I'm not attaching to any or I'm not doing any query selector.

81
00:05:59,170 --> 00:06:04,620
I'm not attaching to any buttons I'm attaching to the entire document object.

82
00:06:05,230 --> 00:06:09,940
So what I'm can do, I can see a log in.

83
00:06:09,940 --> 00:06:12,430
I can cancel the event.

84
00:06:12,940 --> 00:06:13,320
Right.

85
00:06:14,470 --> 00:06:25,510
So what we will try to see now is when I start typing Irrealis, I type as the Yulieski as the P, for

86
00:06:25,510 --> 00:06:26,620
example, enter.

87
00:06:27,190 --> 00:06:33,460
OK, now this is a keyboard event and the button is click.

88
00:06:33,500 --> 00:06:35,940
Actually it's it's going there but don't worry about it.

89
00:06:36,130 --> 00:06:37,620
So the key is enter.

90
00:06:37,630 --> 00:06:39,850
But this is actually an object.

91
00:06:40,210 --> 00:06:51,040
And from this object, what we can grab is this key code because every prest keyboard element like this

92
00:06:51,040 --> 00:06:53,990
D has different key code right.

93
00:06:54,380 --> 00:06:54,760
In these.

94
00:06:54,760 --> 00:06:57,330
Checo is one hundred from here.

95
00:06:57,700 --> 00:07:05,080
Now in future, when you watch this lecture, they're not going to change probably the key codes, but

96
00:07:05,260 --> 00:07:12,040
you need if you want to use, for example, instead of pressing enter or return key, if you want to

97
00:07:12,040 --> 00:07:19,720
use some other key, for example, for submitting of the form, you can just go here and grab this key

98
00:07:19,720 --> 00:07:20,170
code.

99
00:07:20,230 --> 00:07:21,820
Right now.

100
00:07:21,820 --> 00:07:30,520
What I would do want is I want for the enter and the enter key code is the number 13.

101
00:07:30,700 --> 00:07:33,670
Right, so I can do something interesting about it.

102
00:07:33,910 --> 00:07:44,740
So I just want this form with these values to be submitted when I hit enter, but not when I hit space

103
00:07:44,740 --> 00:07:48,880
or when I hit, I don't know, backspace or P, for example.

104
00:07:49,030 --> 00:07:50,250
But you can do it as well.

105
00:07:50,710 --> 00:07:53,110
So what I can do here, I'm just going to commandeers.

106
00:07:54,430 --> 00:07:55,420
Actually, I'm not going to comment.

107
00:07:55,420 --> 00:07:56,080
I'm going to use it.

108
00:07:56,200 --> 00:08:04,810
So I'm going to say e that key code, if that is equal to what does the number 13.

109
00:08:05,260 --> 00:08:06,520
So this is for enter.

110
00:08:06,700 --> 00:08:07,810
I'm going to say, OK.

111
00:08:12,060 --> 00:08:20,640
Here we can see enter is clicked now let's see space, this one a little bit more.

112
00:08:20,790 --> 00:08:21,530
Save it.

113
00:08:22,290 --> 00:08:23,960
Let's go down here like that.

114
00:08:24,210 --> 00:08:28,530
Yeah, so I'm going to add so I don't see the Nike coats now.

115
00:08:28,530 --> 00:08:35,220
I don't see the key keyboard event, their food one Ellery's in a head space.

116
00:08:35,220 --> 00:08:37,170
Nothing happened when I hit enter.

117
00:08:37,980 --> 00:08:40,350
So enter is clicked.

118
00:08:41,250 --> 00:08:41,670
Right.

119
00:08:42,150 --> 00:08:43,920
That is what is happening.

120
00:08:44,160 --> 00:08:46,830
The enter is click in that.

121
00:08:46,830 --> 00:08:55,950
Well it's what we want also here we can use, we can use here because it's a meeting somewhere what

122
00:08:55,950 --> 00:08:59,340
we can say died prevent default.

123
00:09:00,270 --> 00:09:05,610
And now I'm just going to say food.

124
00:09:06,420 --> 00:09:08,460
One hundred and fifty calories.

125
00:09:08,700 --> 00:09:10,410
Enter, enter is click.

126
00:09:11,010 --> 00:09:12,660
This button is clicked.

127
00:09:12,720 --> 00:09:13,110
Right.

128
00:09:13,980 --> 00:09:15,250
How cool is this video.

129
00:09:15,250 --> 00:09:17,580
This click enter is clicked.

130
00:09:17,940 --> 00:09:20,900
That is the beauty with no what.

131
00:09:20,940 --> 00:09:27,660
Basically one is these two event listeners to have the same body here.

132
00:09:27,660 --> 00:09:32,700
I mean what we are going to write the function here for adding a calories.

133
00:09:33,330 --> 00:09:35,670
I want the same function to go here as well.

134
00:09:35,850 --> 00:09:43,140
So if I add content here, I don't want to repeat the same content here because these two actually will

135
00:09:43,140 --> 00:09:46,290
do the same job is actually to submit the form somewhere.

136
00:09:46,770 --> 00:09:51,360
Now, how we can just get rid of that cold repetition?

137
00:09:52,290 --> 00:09:53,970
Well, that is pretty much easy.

138
00:09:54,210 --> 00:10:00,720
We can create a function here outside and that function, we can name it at calories and we will use

139
00:10:00,720 --> 00:10:01,320
it later.

140
00:10:01,650 --> 00:10:06,870
So I'm just going to create for add calories.

141
00:10:09,020 --> 00:10:10,860
It will be a function, right.

142
00:10:14,460 --> 00:10:24,630
And I'm going to close this function here and let's say console mark and calories function.

143
00:10:26,020 --> 00:10:35,590
It's called No, what we can do here is that we can call add calories function, we can call it even

144
00:10:35,590 --> 00:10:39,940
here, we can just get rid of this part in college of calories function.

145
00:10:39,940 --> 00:10:47,320
But for sake of like the structure, for sake of having this structure and I'm just going to comment

146
00:10:47,320 --> 00:10:50,110
these two here because I don't need it now.

147
00:10:50,110 --> 00:10:52,240
I'm just going to call that function here.

148
00:10:52,420 --> 00:10:59,980
And what we have in this function, it will be one code and that code will be borrowed by these to add

149
00:10:59,980 --> 00:11:00,860
event listeners.

150
00:11:01,420 --> 00:11:02,540
So let's see if it's going to work.

151
00:11:02,890 --> 00:11:04,930
Now, I'm just going to first I'm going to talk it.

152
00:11:04,930 --> 00:11:07,000
I'm going to say hamburger.

153
00:11:07,720 --> 00:11:10,210
One hundred and fifty and I'm going to hit enter.

154
00:11:10,630 --> 00:11:11,020
Right.

155
00:11:11,650 --> 00:11:14,730
And I'm going to hit again this button.

156
00:11:14,920 --> 00:11:17,290
So the function is called twice.

157
00:11:17,470 --> 00:11:19,270
So mean is working.

158
00:11:19,270 --> 00:11:25,210
And in future, we're going to update these add calories with our own logic.

159
00:11:25,210 --> 00:11:25,600
Right.

160
00:11:25,630 --> 00:11:27,750
So we will see what we will do inside.

161
00:11:28,120 --> 00:11:29,080
But don't worry about it.

162
00:11:29,080 --> 00:11:35,170
Now you know how to grab this, the how to write event listeners.

163
00:11:35,180 --> 00:11:36,490
We already have done this.

164
00:11:37,600 --> 00:11:39,070
And also about key press.

165
00:11:39,400 --> 00:11:42,820
The main point of the key press is to find the key code.

166
00:11:43,960 --> 00:11:48,280
And based on that key code, you can add calories.

167
00:11:48,430 --> 00:11:55,300
In the past they used which so some of the browser, they don't support the key codes and they use,

168
00:11:55,300 --> 00:12:01,240
I think e which and after that the rest is history.

169
00:12:01,250 --> 00:12:03,310
So you can do it like that each.

170
00:12:03,670 --> 00:12:09,010
And but we're not going to do it because most of the modern browser now supports this key code.

171
00:12:09,010 --> 00:12:14,310
And if they don't let me know, I just will let you know how you can write it down.

172
00:12:14,320 --> 00:12:15,460
So thank you very much.

173
00:12:15,640 --> 00:12:18,130
I think we're done here in.

174
00:12:18,610 --> 00:12:19,540
Yeah, we have.

175
00:12:19,600 --> 00:12:23,860
We will just need to write some comments here.

176
00:12:23,860 --> 00:12:31,830
So if event listener for at the end of the forum.

177
00:12:32,110 --> 00:12:33,910
Very good now.

178
00:12:36,750 --> 00:12:58,590
Event listener for when when user hit, enter or return key, and we are calling the calories

179
00:13:01,890 --> 00:13:02,400
function

180
00:13:05,850 --> 00:13:06,910
function like that.

181
00:13:06,930 --> 00:13:08,070
So that is pretty much it.

182
00:13:08,080 --> 00:13:13,950
You what you can do, you can get rid of these bad boys here and you can get rid of this because you

183
00:13:13,950 --> 00:13:15,050
don't need it.

184
00:13:15,480 --> 00:13:17,340
And yeah, that's pretty much it.

185
00:13:17,370 --> 00:13:25,350
Now our application is getting somewhere, so we start working on our application and next lecture we

186
00:13:25,350 --> 00:13:30,540
will work on add calories in what we will do in the in that in this function.

187
00:13:30,660 --> 00:13:31,740
So thank you very much.

188
00:13:31,740 --> 00:13:34,200
I hope you enjoyed this lecture and I will see you in the next one.