Original subtitles

1 1

Let's now actually learn how 2

2

to manipulate classes with JavaScript. 3

3

But the first thing that we have to do is 4

4

to actually react to a click on each of these buttons here. 5

5

So right now, of course, nothing happens. 6

6

So now we need to attach an event handler 7

7

to each of these three buttons. 8

8

We finished the last video 9

9

by learning how we can do something for all 10

10

of these three buttons at the same time. 11

11

Right. 12

12

So for that, we used a for loop which loops 13

13

over this note list, 14

14

which is basically an array holding all of the buttons. 15

15

And so, this "btnsOpenModal", 16

16

at position number "I" 17

17

is the current button element in each iteration. 18

18

And then from there we simply write 19

19

the text content property 20

20

just like on any other element. 21

21

But now, let's take it one step further 22

22

and instead of simply reading the text content property, 23

23

we will call the add event listener method, 24

24

just like we learned in the last project. 25

25

Okay. 26

26

So remember, in order to respond to a click event, 27

27

we will attach an event handler function to the element. 28

28

And event handler and event listener 29

29

are pretty much the same thing. 30

30

So that's why this method is called "event listener." 31

31

So let's say, add event listener, 32

32

and then the name of the event. 33

33

And that is, once more, the click event. 34

34

And then the second argument is the function 35

35

which will contain the code that should be executed 36

36

once the button is clicked. 37

37

So, that will be an anonymous function. 38

38

Remember, so a function without a name, 39

39

and it is of course also a function expression. 40

40

Because it's simply this value here. 41

41

So this function value. 42

42

So just as I explained multiple times already, 43

43

but it's important to keep remembering this stuff 44

44

as we go here through this section. 45

45

And to start, let's simply log 46

46

to the console the text content of the button 47

47

that was clicked. 48

48

Now here was actually a mistake, 49

49

because of course we don't want 50

50

to log to the console this event listener. 51

51

Right. 52

52

It doesn't make any sense. 53

53

Instead we now want to log something 54

54

to the console right here, inside this handler function. 55

55

So that's just "CL" again. 56

56

And then let's just say, "Button clicked." 57

57

Give it a save. 58

58

And now each of these three buttons here 59

59

has their own event handler function attached to it. 60

60

So, button clicked 61

61

and when we click on this one then the same should appear. 62

62

And indeed, now we have two. 63

63

So that's what this two means. 64

64

And as we click here, we get another one, 65

65

and another, and another. 66

66

And so, yeah, this worked. 67

67

So we attached this function here now 68

68

to all of the three buttons. 69

69

And again, because we did it here in the loop, 70

70

while we were looping over this note list, 71

71

which contains all of these three buttons. 72

72

Okay, but now of course, this is not the only thing 73

73

that we want to do. 74

74

Instead, we want to display the model. 75

75

And remember that this model is already in the HTML. 76

76

It is hidden right now because it has the hidden class. 77

77

If it didn't have this hidden class, it would be visible. 78

78

Let me actually show that. 79

79

So I delete it, and if I save it now, 80

80

then you see here is the modal. 81

81

Right. 82

82

Here it is. 83

83

And that's because the hidden class is now gone. 84

84

Basically this is exactly what we will do using JavaScript. 85

85

So, we're moving this class. 86

86

So, what we want to do is take the modal. 87

87

So this element that we selected here previously. 88

88

So we selected it, then stored it into this variable. 89

89

And so now we take that selected element 90

90

and on there we can read the class list property. 91

91

So that's class list. 92

92

And then this class list property itself 93

93

has a couple of methods. 94

94

And the one we're gonna use now is "remove." 95

95

And as I just explained, the class 96

96

that we're gonna remove is the class called "hidden." 97

97

Okay. 98

98

And we can actually also remove multiple classes. 99

99

For that we just have to pass them in with commas, 100

100

like this. 101

101

So here we then specify more classes. 102

102

Just keep in mind that we do not use the dot here. 103

103

So not like this, okay. 104

104

And I'm telling you that because I used to do 105

105

that mistake myself. 106

106

And I remembered that. 107

107

And so, I want you to avoid it. 108

108

So the dot is only for the selector. 109

109

But here we are not anymore selecting anything. 110

110

We're just passing in the name of the class. 111

111

And so all we need is a string with that name. 112

112

Now besides removing classes, we can also add classes 113

113

and we can even check 114

114

if an element contains a certain class or not. 115

115

And we will use all of them in this video and the next one. 116

116

Okay. 117

117

And this should actually already do the trick. 118

118

So when I save this now 119

119

and let's click here, and it worked. 120

120

Great. 121

121

So the hidden class is now gone 122

122

and I can show that to you here. 123

123

Using the inspect 124

124

and then we need to give it some more space back. 125

125

And then you see here the modal class 126

126

that used to be here is no longer there. 127

127

Now we can of course not close it 128

128

because that functionality is not yet there. 129

129

But at least now it is open. 130

130

Now we also have the overlay which is this one, 131

131

which also has the hidden class. 132

132

In order to show that overlay, 133

133

we need to remove the hidden class 134

134

from this element as well. 135

135

So that's easy enough. 136

136

It's just the same thing again. 137

137

So overlay dot class list, 138

138

dot remove, 139

139

and then again, hidden. 140

140

All right. 141

141

And, yeah. 142

142

Beautiful. 143

143

That's really nice. 144

144

So using classes like this is a really, really great 145

145

and handy way of manipulating webpages. 146

146

And in practice adding and removing classes, 147

147

like we just did here, 148

148

is the main way in which we change styles on websites. 149

149

That's because a class basically aggregates many styles 150

150

in just one class. 151

151

Now in this case actually, 152

152

the hidden class only contains this one style here. 153

153

So this would've been the same 154

154

as specifying the display style directly in JavaScript. 155

155

So like we learned in the last project. 156

156

So we could've done also, 157

157

modal, dot style, dot display 158

158

and then send it to block, 159

159

I guess, what was it? 160

160

Yeah, nothing. 161

161

So basically display none means that it's not visible. 162

162

And if we want it to be visible, 163

163

we would set it to display block. 164

164

Okay, so this would do the exact same thing. 165

165

But you can see that it's a bit more of a pain. 166

166

Because then we would have to memorize 167

167

what exactly we have to write here. 168

168

So these property name and the exact value. 169

169

And this is only for one style. 170

170

Imagine that the hidden class actually had 10 properties. 171

171

Then we would have to write all 172

172

of this properties here manually 173

173

and change all their values. 174

174

So that's a lot of work and it's not fun. 175

175

And so instead we can basically aggregate all 176

176

of this properties in one class, 177

177

that we identify here in CSS, 178

178

and then in JavaScript we simply add 179

179

and remove these classes as we need 180

180

or don't need these styles. 181

181

So, usually when you need to manipulate styles on a page, 182

182

then always just export the styles into a class, 183

183

and then use the class just like we did here. 184

184

All right. 185

185

Now what we just did here is for showing the modal window. 186

186

But now let's also add the ability of then hiding it 187

187

by clicking that button. 188

188

So, this button here. 189

189

Okay. 190

190

So right now, as I said, 191

191

it's not possible to close the window, 192

192

unless we reload the whole page. 193

193

So, let's take this button here that we already selected 194

194

and simply add an event listener to that one as well. 195

195

So, button close modal, dot add event listener. 196

196

And again waiting for the click event. 197

197

And then let's specify or function here again. 198

198

Okay. 199

199

So again we are just defining the function here. 200

200

We are not calling it itself. 201

201

It is the JavaScript engin who will call this function 202

202

as soon as the click event happens on exactly this element. 203

203

All right. 204

204

Anyway, here we now want to do the opposite. 205

205

So basically we want to add the class back on. 206

206

So modal dot class list, dot add, this time. 207

207

And so, we add the hidden class back on. 208

208

Which will then hide the modal. 209

209

And the same actually for the overlay. 210

210

So let's just duplicate this line here. 211

211

And change this to overlay 212

212

and yeah, this should already work. 213

213

So that already worked before, 214

214

and now let's check it. 215

215

And yes, it does. 216

216

And it should work for all the three buttons of course. 217

217

And yeah, it does. 218

218

Great. 219

219

So again, this is a very common thing to do. 220

220

We change the appearance of websites 221

221

and of elements like this all the time, 222

222

using this class technique. 223

223

Next up, usually when we click outside of a modal, 224

224

then the modal window also closes. 225

225

So that's pretty common, right. 226

226

So what I mean is, clicking this area here outside, 227

227

should also close this window. 228

228

So basically we want this in a code here 229

229

to also be executed when we click on the modal. 230

230

Or actually on the overlay. 231

231

So let's do that. 232

232

So overlay, dot add, 233

233

event listener, 234

234

click, and now what should I do? 235

235

Well, just to make it work, I can copy this code here. 236

236

But you already know that this is not a good idea, probably. 237

237

But let's just for now see if it works. 238

238

So if we click outside, 239

239

so this is the overlay. 240

240

So as we click it now, then indeed, 241

241

the modal and the overlay are both hidden again. 242

242

Great. 243

243

So this works now. 244

244

But again, we do not want the same code here 245

245

in these two places. 246

246

We want actually the exact same function to be executed, 247

247

no matter if we click the close button 248

248

or if we click the overlay. 249

249

So, how should we do that? 250

250

We can simply export this function 251

251

into a more real named function. 252

252

So let me cut the code from here 253

253

and then I will create a function called, "close modal". 254

254

So const, close modal, equals this function value. 255

255

Okay. 256

256

And so now, this variable here is 257

257

what holds the function value. 258

258

So what I can do now is to here specify 259

259

that close modal function. 260

260

And that's it. 261

261

That's the function right here. 262

262

So this what we have here, 263

263

is exactly the same as this. 264

264

And again, notice that we are not calling the function. 265

265

We are not doing this. 266

266

This would not work at all, 267

267

because it will immediately called a function, 268

268

as soon as JavaScript executes this line. 269

269

But that's not what we want to happen. 270

270

We want to close modal function to be executed 271

271

only as soon as the click event happens 272

272

on the close modal button. 273

273

And now, here we can just do the same thing. 274

274

So again, close modal. 275

275

And that's it, that's so much better 276

276

than what we had before. 277

277

Not only did we make our code more dry. 278

278

But we also made it more readable. 279

279

More expressive, and more declarative. 280

280

So right now, when we read this code here, 281

281

it's a lot easier to understand. 282

282

So, we just read, button close modal, 283

283

add the event listener of close the modal. 284

284

Okay, that makes sense. 285

285

So, just by looking at this line we see 286

286

that when this element is clicked, 287

287

then we want to close the modal. 288

288

The same when the overlay is clicked, 289

289

we want to close the modal. 290

290

All right. 291

291

And so, we know exactly what's gonna happen 292

292

when we read this code. 293

293

And so for that advantage alone, 294

294

let's do the same thing here with this function. 295

295

So the one that opens the modal. 296

296

So let me grab this one, 297

297

just put him up here. 298

298

Can also get rid of this console dot log. 299

299

So let's put the two functions here together. 300

300

So open modal. 301

301

And now this function will be just this. 302

302

Right? 303

303

So I'll just cut it again. 304

304

And paste it here. 305

305

And so now we assigned this function here 306

306

to this open modal variable. 307

307

So once more a nice function expression. 308

308

And now we'll just take that 309

309

and put it here. 310

310

Open modal. 311

311

And of course again, we don't call it. 312

312

We simply declare or we define it here. 313

313

And tell JavaScript, "Hey, whenever a click happens 314

314

"on one of these buttons, 315

315

"then please call this function 316

316

"that we just specified here." 317

317

All right. 318

318

And so, this is our code. 319

319

And it's a lot better. 320

320

So actually we just did some refactoring here. 321

321

And so, restructuring our code 322

322

without changing the functionality. 323

323

And so that means that our code should still work the same. 324

324

And indeed it does. 325

325

We can open and close in two ways 326

326

and we can open it on all of the three buttons. 327

327

Beautiful. 328

328

That's really, really great. 329

329

So to recap, if you want to use the same function 330

330

in multiple event listeners, 331

331

then you need to specify that function 332

332

as a separate function, like this one here. 333

333

And then you can pass that function 334

334

as an argument to multiple "add event listener" methods. 335

335

So just like we did it here. 336

336

Right. 337

337

So that's one of the takeaways of this video. 338

338

And the other one is that we really, in practice, 339

339

use the functionality 340

340

of adding and removing classes all the time 341

341

in order to change the appearance of elements on our page. 342

342

And that's because classes allow us 343

343

to basically aggregate multiple CSS properties in just one, 344

344

like a container. 345

345

So each class functions a bit like a container 346

346

with a lot of properties in it. 347

347

And then here, by adding and removing them, 348

348

we basically can activate and deactivate certain styles, 349

349

all at the same time. 350

350

Okay, so keep that in mind. 351

351

And even better, actually write notes maybe 352

352

with what I'm saying, 353

353

because this is really important stuff. 354

354

So working with classes is something 355

355

that we do all the time. 356

356

And there is a third thing that we do with classes, 357

357

which is to check if a class is actually present 358

358

on a certain element. 359

359

And that's gonna be the topic of the next video, 360

360

along with a learning how to actually deal 361

361

with a key press event. 362

362

So that's yet another really exciting video. 363

363

So, let's now check that out.