WEBVTT

1
00:00:01.130 --> 00:00:03.150
<v Narrator>Let's now learn how to handle</v>

2
00:00:03.150 --> 00:00:04.653
the Key Press events.

3
00:00:06.240 --> 00:00:09.060
So right now we can already close the modal

4
00:00:09.060 --> 00:00:10.790
by clicking the close button

5
00:00:10.790 --> 00:00:13.800
and by clicking outside of the model.

6
00:00:13.800 --> 00:00:17.060
But usually there is also a third way

7
00:00:17.060 --> 00:00:20.550
and that's by hitting the escape key on the keyboard.

8
00:00:20.550 --> 00:00:21.610
Right?

9
00:00:21.610 --> 00:00:24.940
And so this is actually a great use case

10
00:00:24.940 --> 00:00:28.570
to learn how to respond to keyboard events.

11
00:00:28.570 --> 00:00:31.620
So in order to listen for keyboard events,

12
00:00:31.620 --> 00:00:34.720
we still need to use add event listener.

13
00:00:34.720 --> 00:00:37.310
Because the key press event is simply just

14
00:00:37.310 --> 00:00:39.260
another type of event.

15
00:00:39.260 --> 00:00:43.110
Now, keyboard events are so-called global events

16
00:00:43.110 --> 00:00:47.000
because they do not happen on one specific element.

17
00:00:47.000 --> 00:00:49.900
And for global events like keyboard events

18
00:00:49.900 --> 00:00:53.240
we usually list and on the whole document.

19
00:00:53.240 --> 00:00:54.173
So,

20
00:00:55.320 --> 00:00:57.810
let's close this terminal here

21
00:00:57.810 --> 00:01:01.340
and now let's write document.

22
00:01:01.340 --> 00:01:06.070
So that's the same document that we use for query selector.

23
00:01:06.070 --> 00:01:09.830
And so basically it's a big object which contains a bunch

24
00:01:09.830 --> 00:01:12.370
of methods for all kinds of stuff.

25
00:01:12.370 --> 00:01:15.363
And that includes the add event listener method.

26
00:01:16.920 --> 00:01:21.640
So by using add a vent listener here on the document

27
00:01:21.640 --> 00:01:24.560
we are basically listening for events everywhere.

28
00:01:24.560 --> 00:01:26.950
So no matter where they happen on the page,

29
00:01:26.950 --> 00:01:29.420
they will always trigger the event handler

30
00:01:29.420 --> 00:01:31.430
that we're going to specify here.

31
00:01:31.430 --> 00:01:32.810
Now right,

32
00:01:32.810 --> 00:01:35.720
Now here about the name of the event itself

33
00:01:35.720 --> 00:01:39.720
there are actually three types of events for the keyboard.

34
00:01:39.720 --> 00:01:43.840
There is the key down the key press or the key up.

35
00:01:43.840 --> 00:01:47.090
key up, which is so it's this one

36
00:01:47.090 --> 00:01:49.560
this one only happens when we lift or finger

37
00:01:49.560 --> 00:01:53.080
off the keyboard basically Or off the key.

38
00:01:53.080 --> 00:01:55.560
Key press is fired continuously

39
00:01:55.560 --> 00:01:58.430
as we keep our finger on a certain key

40
00:01:58.430 --> 00:02:03.050
and key down is fired as soon as we just press down the key.

41
00:02:03.050 --> 00:02:05.940
And so usually that is the one that we use.

42
00:02:05.940 --> 00:02:06.840
Okay,

43
00:02:06.840 --> 00:02:09.830
so the name of this event is just key down

44
00:02:09.830 --> 00:02:11.750
and this event will happen as soon

45
00:02:11.750 --> 00:02:14.620
as we hit any key on the keyboard.

46
00:02:14.620 --> 00:02:15.660
Okay.

47
00:02:15.660 --> 00:02:20.180
And then just like before we specify a function here

48
00:02:20.180 --> 00:02:23.130
and this time let's specify it here directly.

49
00:02:23.130 --> 00:02:25.623
So without creating a separate function.

50
00:02:27.050 --> 00:02:28.363
So function,

51
00:02:29.330 --> 00:02:30.830
and then the usual way

52
00:02:30.830 --> 00:02:33.180
just like we have been doing.

53
00:02:33.180 --> 00:02:35.610
Now, as I just mentioned here.

54
00:02:35.610 --> 00:02:39.130
So this function here will actually be executed

55
00:02:39.130 --> 00:02:41.890
for any key press that happens.

56
00:02:41.890 --> 00:02:44.210
So let me prove that to you.

57
00:02:44.210 --> 00:02:46.070
And actually it will be hard to prove

58
00:02:46.070 --> 00:02:49.480
because you cannot see what key I'm pressing

59
00:02:49.480 --> 00:02:50.790
but anyway,

60
00:02:50.790 --> 00:02:54.743
a key was pressed.

61
00:02:56.760 --> 00:02:59.540
And so now as I go to the console

62
00:02:59.540 --> 00:03:01.370
and just press any key

63
00:03:01.370 --> 00:03:02.987
you see achy was pressed.

64
00:03:02.987 --> 00:03:04.290
And it doesn't matter which one.

65
00:03:04.290 --> 00:03:07.870
So Q three P enter

66
00:03:07.870 --> 00:03:09.130
Esc

67
00:03:09.130 --> 00:03:09.963
any key,

68
00:03:09.963 --> 00:03:12.370
just renders here,

69
00:03:12.370 --> 00:03:14.540
the same message.

70
00:03:14.540 --> 00:03:17.100
However, we only want to close the popup

71
00:03:17.100 --> 00:03:19.750
when the escape key was pressed.

72
00:03:19.750 --> 00:03:22.150
Okay. So that key in the top left corner,

73
00:03:22.150 --> 00:03:23.720
which says Esc

74
00:03:23.720 --> 00:03:24.610
right.

75
00:03:24.610 --> 00:03:28.530
So how will we know which key was actually pressed

76
00:03:28.530 --> 00:03:31.540
If this event here happens for all the keys?

77
00:03:31.540 --> 00:03:32.373
Well

78
00:03:32.373 --> 00:03:35.420
the information about which key was pressed will be stored

79
00:03:35.420 --> 00:03:38.600
in the event that is going to occur as soon

80
00:03:38.600 --> 00:03:40.460
as any key is pressed.

81
00:03:40.460 --> 00:03:43.790
So remember, as I hit any key here on the keyboard,

82
00:03:43.790 --> 00:03:46.410
a key down event is generated

83
00:03:46.410 --> 00:03:48.350
and our list and our function here.

84
00:03:48.350 --> 00:03:53.330
So our handler function is waiting for that event to happen.

85
00:03:53.330 --> 00:03:56.250
And anytime that an event like this occurs

86
00:03:56.250 --> 00:03:59.810
JavaScript does in fact generate an object.

87
00:03:59.810 --> 00:04:02.210
And that object contains all the information

88
00:04:02.210 --> 00:04:03.970
about the event itself,

89
00:04:03.970 --> 00:04:05.830
and we can then actually access that

90
00:04:05.830 --> 00:04:09.170
object indie event handler function.

91
00:04:09.170 --> 00:04:10.003
All right.

92
00:04:10.003 --> 00:04:12.110
So again, when an event happened

93
00:04:12.110 --> 00:04:15.200
we can have access to information about that event

94
00:04:15.200 --> 00:04:19.180
in the event handler function just like this one.

95
00:04:19.180 --> 00:04:20.540
Now up until this point,

96
00:04:20.540 --> 00:04:23.330
we have never looked at debt event.

97
00:04:23.330 --> 00:04:27.000
We only just listened for it and then reacted to it.

98
00:04:27.000 --> 00:04:27.940
Right?

99
00:04:27.940 --> 00:04:30.380
But this time we actually need to look

100
00:04:30.380 --> 00:04:33.130
at the event object in order to figure out

101
00:04:33.130 --> 00:04:35.330
which key was pressed.

102
00:04:35.330 --> 00:04:37.460
And how can we do that?

103
00:04:37.460 --> 00:04:40.950
Well, what we need to do is to give this function here

104
00:04:40.950 --> 00:04:42.290
a parameter.

105
00:04:42.290 --> 00:04:46.220
and let's call it E which stands for event.

106
00:04:46.220 --> 00:04:48.810
So we could also call it event

107
00:04:48.810 --> 00:04:52.890
or we could call it X or Q I,

108
00:04:52.890 --> 00:04:54.310
so it doesn't matter

109
00:04:54.310 --> 00:04:59.130
but I like to call it E which dance again for event.

110
00:04:59.130 --> 00:05:00.240
Okay.

111
00:05:00.240 --> 00:05:02.350
So then as the event occurs

112
00:05:02.350 --> 00:05:06.010
JavaScript, we'll call this function with the event object

113
00:05:06.010 --> 00:05:07.750
as an argument.

114
00:05:07.750 --> 00:05:09.720
And once more, this works

115
00:05:09.720 --> 00:05:13.680
because we do not call this function here or selves.

116
00:05:13.680 --> 00:05:14.513
Right?

117
00:05:14.513 --> 00:05:15.490
We do not call the function.

118
00:05:15.490 --> 00:05:17.610
We only define it here.

119
00:05:17.610 --> 00:05:18.443
So we say

120
00:05:18.443 --> 00:05:22.910
Hey, JavaScript call function when a key down event happens.

121
00:05:22.910 --> 00:05:24.250
And when you do so

122
00:05:24.250 --> 00:05:27.690
please pass in the event object as an argument.

123
00:05:27.690 --> 00:05:29.150
Okay. And we will learn

124
00:05:29.150 --> 00:05:32.690
about the mechanics of this a bit better later.

125
00:05:32.690 --> 00:05:36.680
But it's probably still a good idea to already take notes

126
00:05:36.680 --> 00:05:39.160
of this stuff that I'm explaining.

127
00:05:39.160 --> 00:05:39.993
Anyway,

128
00:05:39.993 --> 00:05:44.290
now that you know why this function has access to an event,

129
00:05:44.290 --> 00:05:46.230
So to this E here,

130
00:05:46.230 --> 00:05:48.513
let's now actually take a look at it.

131
00:05:49.700 --> 00:05:53.440
So simply logging it to the console for now.

132
00:05:53.440 --> 00:05:55.740
And we can actually get rid of this one here

133
00:05:57.560 --> 00:06:01.660
and now I will hit the enter key,

134
00:06:01.660 --> 00:06:05.010
and so you see now we get this event.

135
00:06:05.010 --> 00:06:08.050
And it's called a keyboard event.

136
00:06:08.050 --> 00:06:11.900
It is just an object that is generated by a JavaScript.

137
00:06:11.900 --> 00:06:13.500
So you see that here in the console,

138
00:06:13.500 --> 00:06:14.520
it actually looks

139
00:06:14.520 --> 00:06:18.410
like the objects that we generated ourselves previously.

140
00:06:18.410 --> 00:06:20.480
So with a key here

141
00:06:20.480 --> 00:06:22.390
and then a value.

142
00:06:22.390 --> 00:06:24.220
For property and the value.

143
00:06:24.220 --> 00:06:27.600
and what matters here is basically the key

144
00:06:28.580 --> 00:06:30.880
which as I said, was enter.

145
00:06:30.880 --> 00:06:34.780
So I hit the enter key and then this event was generated

146
00:06:34.780 --> 00:06:37.513
with the key property set to enter.

147
00:06:40.160 --> 00:06:42.130
So that's great information

148
00:06:42.130 --> 00:06:45.560
because now when I hit the escape key,

149
00:06:45.560 --> 00:06:46.393
then you see

150
00:06:46.393 --> 00:06:48.480
that the key was now escape.

151
00:06:48.480 --> 00:06:50.550
Or I can of course, at any key.

152
00:06:50.550 --> 00:06:52.800
So this was the space key.

153
00:06:52.800 --> 00:06:53.800
So you see here

154
00:06:53.800 --> 00:06:58.800
we have a space or the Q or Z or control or shift.

155
00:07:02.760 --> 00:07:04.490
And so whatever key you press,

156
00:07:04.490 --> 00:07:06.410
we now get this information

157
00:07:06.410 --> 00:07:08.360
about the event itself.

158
00:07:08.360 --> 00:07:11.030
And in this case, since it was a keyboard event

159
00:07:11.030 --> 00:07:14.720
we get information about which key was pressed.

160
00:07:14.720 --> 00:07:17.290
So as you see the information about the key

161
00:07:17.290 --> 00:07:21.040
I was always getting it from this key property.

162
00:07:21.040 --> 00:07:25.290
So let's just log E dot key because remember we use dot

163
00:07:26.390 --> 00:07:29.000
and then the property name to read any property

164
00:07:29.000 --> 00:07:29.873
from an object.

165
00:07:31.890 --> 00:07:36.670
And so escape is now the key that I pressed

166
00:07:36.670 --> 00:07:40.743
or enter or shift and so on and so forth.

167
00:07:41.620 --> 00:07:42.520
Great.

168
00:07:42.520 --> 00:07:45.500
And now that I know which key was actually pressed

169
00:07:45.500 --> 00:07:48.820
I can use that information to actually close the modal,

170
00:07:48.820 --> 00:07:51.893
whenever the escape key is pressed.

171
00:07:53.370 --> 00:07:58.370
So we can simply do if E dot key,

172
00:07:59.630 --> 00:08:02.633
triple equal is Cape.

173
00:08:04.420 --> 00:08:05.253
And then again,

174
00:08:05.253 --> 00:08:07.470
let's just lock to the consult to see if it works,

175
00:08:08.356 --> 00:08:11.900
Esc was pressed.

176
00:08:11.900 --> 00:08:13.790
And so now I can hit any key

177
00:08:13.790 --> 00:08:14.820
and nothing happens

178
00:08:17.430 --> 00:08:19.450
or actually some stuff happens

179
00:08:19.450 --> 00:08:23.280
because we're still logging here the E dot key.

180
00:08:23.280 --> 00:08:26.600
But the string that I just wrote here does not appear

181
00:08:26.600 --> 00:08:31.060
unless I hit the escape key.

182
00:08:31.060 --> 00:08:33.143
So now you see S cape was pressed.

183
00:08:35.090 --> 00:08:36.580
Alright,

184
00:08:36.580 --> 00:08:39.010
so that's of course not what we want

185
00:08:39.010 --> 00:08:41.890
but instead we want to close the modal.

186
00:08:41.890 --> 00:08:44.580
However, I only want to close the model

187
00:08:44.580 --> 00:08:47.370
when the model is actually visible.

188
00:08:47.370 --> 00:08:48.380
Right.

189
00:08:48.380 --> 00:08:52.350
And how do we know if the model is currently invisible?

190
00:08:52.350 --> 00:08:55.190
Well, if the model contains the class hidden

191
00:08:55.190 --> 00:08:57.570
it means that it's not visible.

192
00:08:57.570 --> 00:09:00.970
And so basically when it does not contain the class hidden

193
00:09:00.970 --> 00:09:02.750
it means that it's visible

194
00:09:02.750 --> 00:09:06.117
and then that's the condition in which we want to close it.

195
00:09:06.117 --> 00:09:07.340
All right.

196
00:09:07.340 --> 00:09:10.040
And so we talked in the last lecture about adding

197
00:09:10.040 --> 00:09:11.860
and removing classes

198
00:09:11.860 --> 00:09:14.840
but as I mentioned back then we can also check

199
00:09:14.840 --> 00:09:18.220
if an element already has a certain class.

200
00:09:18.220 --> 00:09:19.053
And so now,

201
00:09:19.053 --> 00:09:20.700
that becomes really handy.

202
00:09:20.700 --> 00:09:22.650
Because now I can do this.

203
00:09:22.650 --> 00:09:25.680
So if the escape key is pressed,

204
00:09:25.680 --> 00:09:27.530
then we can now check

205
00:09:27.530 --> 00:09:30.150
if the model contains the hidden class.

206
00:09:30.150 --> 00:09:32.380
So another F,

207
00:09:32.380 --> 00:09:34.120
so if modal

208
00:09:34.120 --> 00:09:36.163
and again, dot class list,

209
00:09:37.470 --> 00:09:39.440
and then dot contains

210
00:09:41.350 --> 00:09:43.740
and then again, the class name.

211
00:09:43.740 --> 00:09:46.670
So that's hidden in this case.

212
00:09:46.670 --> 00:09:51.670
So if the modal dot class name contains the hidden class

213
00:09:52.260 --> 00:09:55.700
it means that the model is currently hidden.

214
00:09:55.700 --> 00:09:56.700
And so in this condition,

215
00:09:56.700 --> 00:09:58.920
we actually don't want to do anything.

216
00:09:58.920 --> 00:10:00.700
We only want to close the modal

217
00:10:00.700 --> 00:10:03.470
if it does not contain the hidden class.

218
00:10:03.470 --> 00:10:04.303
Right?

219
00:10:04.303 --> 00:10:08.870
And so here we can once more invert that Boolean value.

220
00:10:08.870 --> 00:10:09.703
Now right?

221
00:10:09.703 --> 00:10:12.340
So this knot here is very important

222
00:10:12.340 --> 00:10:15.330
as you probably start to see.

223
00:10:15.330 --> 00:10:17.070
So let's read this again.

224
00:10:17.070 --> 00:10:22.070
If the model does not contain the hidden class

225
00:10:22.240 --> 00:10:23.543
then close the model.

226
00:10:25.640 --> 00:10:27.830
And so how do we close the model?

227
00:10:27.830 --> 00:10:32.650
Well, we can simply call this close model function.

228
00:10:32.650 --> 00:10:33.483
Right?

229
00:10:33.483 --> 00:10:34.840
So let's do that.

230
00:10:34.840 --> 00:10:37.100
Close model.

231
00:10:37.100 --> 00:10:40.890
And here we do actually need to call this function.

232
00:10:40.890 --> 00:10:44.830
Okay? Because when this function here is executing

233
00:10:44.830 --> 00:10:48.280
so this one here as a den reaches this line

234
00:10:48.280 --> 00:10:50.660
of course, something needs to happen.

235
00:10:50.660 --> 00:10:54.600
And what needs to happen is basically this coat.

236
00:10:54.600 --> 00:10:57.620
So we could just copy this coat down here

237
00:10:57.620 --> 00:10:59.790
but that's of course not what we want.

238
00:10:59.790 --> 00:11:03.820
Instead, we can simply use this function here again.

239
00:11:03.820 --> 00:11:06.210
And using means here to call it.

240
00:11:06.210 --> 00:11:09.040
So to execute the code that is in here.

241
00:11:09.040 --> 00:11:09.873
So this,

242
00:11:11.550 --> 00:11:13.300
so let's test this now

243
00:11:13.300 --> 00:11:15.850
and then we can improve the code even a little bit.

244
00:11:16.980 --> 00:11:18.230
So we open it.

245
00:11:18.230 --> 00:11:20.820
Now I'm gonna to press just any key,

246
00:11:20.820 --> 00:11:22.640
let's say enter,

247
00:11:22.640 --> 00:11:24.190
so you see enter,

248
00:11:24.190 --> 00:11:27.270
and now as I hit the escape key,

249
00:11:27.270 --> 00:11:28.633
watch what happens.

250
00:11:29.840 --> 00:11:31.250
Yes indeed,

251
00:11:31.250 --> 00:11:33.150
the modal is gone.

252
00:11:33.150 --> 00:11:33.983
Great.

253
00:11:34.940 --> 00:11:37.420
Let's see where this button clicked here

254
00:11:37.420 --> 00:11:39.900
comes from in line nine.

255
00:11:39.900 --> 00:11:41.070
Now that's of course

256
00:11:41.070 --> 00:11:43.020
because of this console dot log

257
00:11:43.020 --> 00:11:44.320
and let's get rid of this.

258
00:11:46.200 --> 00:11:47.160
Okay.

259
00:11:47.160 --> 00:11:48.090
Let's try it again,

260
00:11:48.090 --> 00:11:49.920
open it on this button.

261
00:11:49.920 --> 00:11:51.620
I hit any other key,

262
00:11:51.620 --> 00:11:52.780
nothing happens,

263
00:11:52.780 --> 00:11:56.700
I hit escape and it's gone.

264
00:11:56.700 --> 00:11:57.583
Great.

265
00:11:58.860 --> 00:12:01.190
Now let's read this code here a little bit.

266
00:12:01.190 --> 00:12:04.460
So basically this means if depressed key is escape

267
00:12:05.490 --> 00:12:09.710
and if the model does not contain the hidden class

268
00:12:09.710 --> 00:12:13.890
then execute disfunction to close the model.

269
00:12:13.890 --> 00:12:15.910
Now notice how I just said

270
00:12:15.910 --> 00:12:17.080
if this,

271
00:12:17.080 --> 00:12:19.710
and then if this,

272
00:12:19.710 --> 00:12:20.960
and so what I mean

273
00:12:20.960 --> 00:12:22.880
is that we can actually aggregate

274
00:12:22.880 --> 00:12:25.163
these two if statements together.

275
00:12:26.680 --> 00:12:30.190
And so this is the same as having just...

276
00:12:31.680 --> 00:12:33.500
and I'm cutting it here.

277
00:12:33.500 --> 00:12:36.253
So it's the same as having just this.

278
00:12:37.450 --> 00:12:41.110
Now we can get rid of this stuff here

279
00:12:42.010 --> 00:12:43.280
and that's it.

280
00:12:43.280 --> 00:12:46.320
And so now it reads the exact same way as before.

281
00:12:46.320 --> 00:12:48.173
If depressed key is escape.

282
00:12:49.040 --> 00:12:54.040
And if the model does not contain the class of hidden,

283
00:12:55.370 --> 00:12:57.053
then close the model.

284
00:12:58.070 --> 00:13:01.113
So give it another try just to make sure,

285
00:13:02.220 --> 00:13:03.950
And yes,

286
00:13:03.950 --> 00:13:06.000
that works perfect.

287
00:13:06.000 --> 00:13:07.100
Beautiful.

288
00:13:07.100 --> 00:13:07.933
And with this,

289
00:13:07.933 --> 00:13:11.060
or modal is actually feature complete.

290
00:13:11.060 --> 00:13:15.640
It works exactly as or demo here.

291
00:13:15.640 --> 00:13:17.040
And so with this,

292
00:13:17.040 --> 00:13:21.260
we finished this very small second project.

293
00:13:21.260 --> 00:13:22.093
So once again,

294
00:13:22.093 --> 00:13:23.990
I hope you liked this one

295
00:13:23.990 --> 00:13:26.090
and I hope you can start to see the power

296
00:13:26.090 --> 00:13:27.710
of Dom manipulation.

297
00:13:27.710 --> 00:13:28.860
So that in the future

298
00:13:28.860 --> 00:13:31.990
you will be able to build anything you can imagine just

299
00:13:31.990 --> 00:13:33.740
with JavaScript.

300
00:13:33.740 --> 00:13:36.620
Now that is of course still a long way to go,

301
00:13:36.620 --> 00:13:39.940
but that's also why we have the next project.

302
00:13:39.940 --> 00:13:42.210
Which is going to be a really nice project

303
00:13:42.210 --> 00:13:43.670
to basically train

304
00:13:43.670 --> 00:13:46.860
and reinforce most of the things that we already did

305
00:13:46.860 --> 00:13:49.810
in this project and to previous one.

306
00:13:49.810 --> 00:13:51.900
So the next project is gonna to be more

307
00:13:51.900 --> 00:13:53.800
like a practice project

308
00:13:53.800 --> 00:13:57.870
but I still believe it's very important to do that project

309
00:13:57.870 --> 00:13:59.460
in case you have to time.

310
00:13:59.460 --> 00:14:00.800
And believe me it's

311
00:14:00.800 --> 00:14:03.810
by far the most exciting thing we have done yet

312
00:14:03.810 --> 00:14:05.150
in this course.

313
00:14:05.150 --> 00:14:06.760
So I hope to see you there soon

314
00:14:06.760 --> 00:14:09.393
after you take a well deserved break.