Original subtitles

1 1

Let's now learn how to handle 2

2

the Key Press events. 3

3

So right now we can already close the modal 4

4

by clicking the close button 5

5

and by clicking outside of the model. 6

6

But usually there is also a third way 7

7

and that's by hitting the escape key on the keyboard. 8

8

Right? 9

9

And so this is actually a great use case 10

10

to learn how to respond to keyboard events. 11

11

So in order to listen for keyboard events, 12

12

we still need to use add event listener. 13

13

Because the key press event is simply just 14

14

another type of event. 15

15

Now, keyboard events are so-called global events 16

16

because they do not happen on one specific element. 17

17

And for global events like keyboard events 18

18

we usually list and on the whole document. 19

19

So, 20

20

let's close this terminal here 21

21

and now let's write document. 22

22

So that's the same document that we use for query selector. 23

23

And so basically it's a big object which contains a bunch 24

24

of methods for all kinds of stuff. 25

25

And that includes the add event listener method. 26

26

So by using add a vent listener here on the document 27

27

we are basically listening for events everywhere. 28

28

So no matter where they happen on the page, 29

29

they will always trigger the event handler 30

30

that we're going to specify here. 31

31

Now right, 32

32

Now here about the name of the event itself 33

33

there are actually three types of events for the keyboard. 34

34

There is the key down the key press or the key up. 35

35

key up, which is so it's this one 36

36

this one only happens when we lift or finger 37

37

off the keyboard basically Or off the key. 38

38

Key press is fired continuously 39

39

as we keep our finger on a certain key 40

40

and key down is fired as soon as we just press down the key. 41

41

And so usually that is the one that we use. 42

42

Okay, 43

43

so the name of this event is just key down 44

44

and this event will happen as soon 45

45

as we hit any key on the keyboard. 46

46

Okay. 47

47

And then just like before we specify a function here 48

48

and this time let's specify it here directly. 49

49

So without creating a separate function. 50

50

So function, 51

51

and then the usual way 52

52

just like we have been doing. 53

53

Now, as I just mentioned here. 54

54

So this function here will actually be executed 55

55

for any key press that happens. 56

56

So let me prove that to you. 57

57

And actually it will be hard to prove 58

58

because you cannot see what key I'm pressing 59

59

but anyway, 60

60

a key was pressed. 61

61

And so now as I go to the console 62

62

and just press any key 63

63

you see achy was pressed. 64

64

And it doesn't matter which one. 65

65

So Q three P enter 66

66

Esc 67

67

any key, 68

68

just renders here, 69

69

the same message. 70

70

However, we only want to close the popup 71

71

when the escape key was pressed. 72

72

Okay. So that key in the top left corner, 73

73

which says Esc 74

74

right. 75

75

So how will we know which key was actually pressed 76

76

If this event here happens for all the keys? 77

77

Well 78

78

the information about which key was pressed will be stored 79

79

in the event that is going to occur as soon 80

80

as any key is pressed. 81

81

So remember, as I hit any key here on the keyboard, 82

82

a key down event is generated 83

83

and our list and our function here. 84

84

So our handler function is waiting for that event to happen. 85

85

And anytime that an event like this occurs 86

86

JavaScript does in fact generate an object. 87

87

And that object contains all the information 88

88

about the event itself, 89

89

and we can then actually access that 90

90

object indie event handler function. 91

91

All right. 92

92

So again, when an event happened 93

93

we can have access to information about that event 94

94

in the event handler function just like this one. 95

95

Now up until this point, 96

96

we have never looked at debt event. 97

97

We only just listened for it and then reacted to it. 98

98

Right? 99

99

But this time we actually need to look 100

100

at the event object in order to figure out 101

101

which key was pressed. 102

102

And how can we do that? 103

103

Well, what we need to do is to give this function here 104

104

a parameter. 105

105

and let's call it E which stands for event. 106

106

So we could also call it event 107

107

or we could call it X or Q I, 108

108

so it doesn't matter 109

109

but I like to call it E which dance again for event. 110

110

Okay. 111

111

So then as the event occurs 112

112

JavaScript, we'll call this function with the event object 113

113

as an argument. 114

114

And once more, this works 115

115

because we do not call this function here or selves. 116

116

Right? 117

117

We do not call the function. 118

118

We only define it here. 119

119

So we say 120

120

Hey, JavaScript call function when a key down event happens. 121

121

And when you do so 122

122

please pass in the event object as an argument. 123

123

Okay. And we will learn 124

124

about the mechanics of this a bit better later. 125

125

But it's probably still a good idea to already take notes 126

126

of this stuff that I'm explaining. 127

127

Anyway, 128

128

now that you know why this function has access to an event, 129

129

So to this E here, 130

130

let's now actually take a look at it. 131

131

So simply logging it to the console for now. 132

132

And we can actually get rid of this one here 133

133

and now I will hit the enter key, 134

134

and so you see now we get this event. 135

135

And it's called a keyboard event. 136

136

It is just an object that is generated by a JavaScript. 137

137

So you see that here in the console, 138

138

it actually looks 139

139

like the objects that we generated ourselves previously. 140

140

So with a key here 141

141

and then a value. 142

142

For property and the value. 143

143

and what matters here is basically the key 144

144

which as I said, was enter. 145

145

So I hit the enter key and then this event was generated 146

146

with the key property set to enter. 147

147

So that's great information 148

148

because now when I hit the escape key, 149

149

then you see 150

150

that the key was now escape. 151

151

Or I can of course, at any key. 152

152

So this was the space key. 153

153

So you see here 154

154

we have a space or the Q or Z or control or shift. 155

155

And so whatever key you press, 156

156

we now get this information 157

157

about the event itself. 158

158

And in this case, since it was a keyboard event 159

159

we get information about which key was pressed. 160

160

So as you see the information about the key 161

161

I was always getting it from this key property. 162

162

So let's just log E dot key because remember we use dot 163

163

and then the property name to read any property 164

164

from an object. 165

165

And so escape is now the key that I pressed 166

166

or enter or shift and so on and so forth. 167

167

Great. 168

168

And now that I know which key was actually pressed 169

169

I can use that information to actually close the modal, 170

170

whenever the escape key is pressed. 171

171

So we can simply do if E dot key, 172

172

triple equal is Cape. 173

173

And then again, 174

174

let's just lock to the consult to see if it works, 175

175

Esc was pressed. 176

176

And so now I can hit any key 177

177

and nothing happens 178

178

or actually some stuff happens 179

179

because we're still logging here the E dot key. 180

180

But the string that I just wrote here does not appear 181

181

unless I hit the escape key. 182

182

So now you see S cape was pressed. 183

183

Alright, 184

184

so that's of course not what we want 185

185

but instead we want to close the modal. 186

186

However, I only want to close the model 187

187

when the model is actually visible. 188

188

Right. 189

189

And how do we know if the model is currently invisible? 190

190

Well, if the model contains the class hidden 191

191

it means that it's not visible. 192

192

And so basically when it does not contain the class hidden 193

193

it means that it's visible 194

194

and then that's the condition in which we want to close it. 195

195

All right. 196

196

And so we talked in the last lecture about adding 197

197

and removing classes 198

198

but as I mentioned back then we can also check 199

199

if an element already has a certain class. 200

200

And so now, 201

201

that becomes really handy. 202

202

Because now I can do this. 203

203

So if the escape key is pressed, 204

204

then we can now check 205

205

if the model contains the hidden class. 206

206

So another F, 207

207

so if modal 208

208

and again, dot class list, 209

209

and then dot contains 210

210

and then again, the class name. 211

211

So that's hidden in this case. 212

212

So if the modal dot class name contains the hidden class 213

213

it means that the model is currently hidden. 214

214

And so in this condition, 215

215

we actually don't want to do anything. 216

216

We only want to close the modal 217

217

if it does not contain the hidden class. 218

218

Right? 219

219

And so here we can once more invert that Boolean value. 220

220

Now right? 221

221

So this knot here is very important 222

222

as you probably start to see. 223

223

So let's read this again. 224

224

If the model does not contain the hidden class 225

225

then close the model. 226

226

And so how do we close the model? 227

227

Well, we can simply call this close model function. 228

228

Right? 229

229

So let's do that. 230

230

Close model. 231

231

And here we do actually need to call this function. 232

232

Okay? Because when this function here is executing 233

233

so this one here as a den reaches this line 234

234

of course, something needs to happen. 235

235

And what needs to happen is basically this coat. 236

236

So we could just copy this coat down here 237

237

but that's of course not what we want. 238

238

Instead, we can simply use this function here again. 239

239

And using means here to call it. 240

240

So to execute the code that is in here. 241

241

So this, 242

242

so let's test this now 243

243

and then we can improve the code even a little bit. 244

244

So we open it. 245

245

Now I'm gonna to press just any key, 246

246

let's say enter, 247

247

so you see enter, 248

248

and now as I hit the escape key, 249

249

watch what happens. 250

250

Yes indeed, 251

251

the modal is gone. 252

252

Great. 253

253

Let's see where this button clicked here 254

254

comes from in line nine. 255

255

Now that's of course 256

256

because of this console dot log 257

257

and let's get rid of this. 258

258

Okay. 259

259

Let's try it again, 260

260

open it on this button. 261

261

I hit any other key, 262

262

nothing happens, 263

263

I hit escape and it's gone. 264

264

Great. 265

265

Now let's read this code here a little bit. 266

266

So basically this means if depressed key is escape 267

267

and if the model does not contain the hidden class 268

268

then execute disfunction to close the model. 269

269

Now notice how I just said 270

270

if this, 271

271

and then if this, 272

272

and so what I mean 273

273

is that we can actually aggregate 274

274

these two if statements together. 275

275

And so this is the same as having just... 276

276

and I'm cutting it here. 277

277

So it's the same as having just this. 278

278

Now we can get rid of this stuff here 279

279

and that's it. 280

280

And so now it reads the exact same way as before. 281

281

If depressed key is escape. 282

282

And if the model does not contain the class of hidden, 283

283

then close the model. 284

284

So give it another try just to make sure, 285

285

And yes, 286

286

that works perfect. 287

287

Beautiful. 288

288

And with this, 289

289

or modal is actually feature complete. 290

290

It works exactly as or demo here. 291

291

And so with this, 292

292

we finished this very small second project. 293

293

So once again, 294

294

I hope you liked this one 295

295

and I hope you can start to see the power 296

296

of Dom manipulation. 297

297

So that in the future 298

298

you will be able to build anything you can imagine just 299

299

with JavaScript. 300

300

Now that is of course still a long way to go, 301

301

but that's also why we have the next project. 302

302

Which is going to be a really nice project 303

303

to basically train 304

304

and reinforce most of the things that we already did 305

305

in this project and to previous one. 306

306

So the next project is gonna to be more 307

307

like a practice project 308

308

but I still believe it's very important to do that project 309

309

in case you have to time. 310

310

And believe me it's 311

311

by far the most exciting thing we have done yet 312

312

in this course. 313

313

So I hope to see you there soon 314

314

after you take a well deserved break.