Original subtitles

1 1

Let's now continue building 2

2

our slider component. 3

3

And let's actually start by attaching an event handler 4

4

to a keyboard event 5

5

so that we can also slide through the slider 6

6

using the left and right arrow keys. 7

7

So let's do that after these ones here. 8

8

And remember that we actually handle keyboard events 9

9

right at the document.addEventListener. 10

10

And then we're gonna use the key down, 11

11

event and so that's gonna be fired 12

12

as soon as the key is pressed down. 13

13

And here we need the event. 14

14

And let's start by taking a look here at the event. 15

15

So that we can figure out 16

16

which keys we actually want to use. 17

17

So I'm gonna hit the right arrow key. 18

18

And so you see that we get the key here as ArrowRight. 19

19

And then the other way around, it is of course ArrowLeft. 20

20

And so I'm gonna use that key, ArrowLeft and ArrowRight. 21

21

So, that's very simple. 22

22

If e.key equals ArrowLeft, 23

23

then what we want to do is to call the previous slide, 24

24

function, right? 25

25

And so this is also a reason why I created 26

26

a separate function for this. 27

27

Okay, so otherwise, I could also have left the entire code 28

28

just here, instead of exporting it into its own function. 29

29

I still prefer it like this, 30

30

but it wouldn't have been necessary. 31

31

But now as we need to reuse the same code here as well, 32

32

then I really would have to create it, in its own function. 33

33

Now you might have noticed that here 34

34

we also could have used like, short circuiting 35

35

so we could do e.key equal ArrowRight, 36

36

and next slide. 37

37

So this would work the same way 38

38

because of short circuiting, right? 39

39

At least I hope so. 40

40

And yeah, it does. 41

41

So I just hit the right key and here the left key 42

42

and so it works just as fine. 43

43

So you can now choose which version you like the most 44

44

so I'm gonna leave both here, 45

45

and let you decide which one you want to use. 46

46

Now right, but now about the dots that I was talking about, 47

47

let's go here to our HTML 48

48

because, now here we actually already have a div 49

49

so an element for that. 50

50

So we have two buttons of course, these two 51

51

and then we also have this empty container, 52

52

in which we're gonna create the dots. 53

53

So let's start by selecting that element 54

54

and I'm gonna call it the dotContainer. 55

55

So that's just dots, 56

56

I think, yeah that's correct. 57

57

And so let's start by creating all these dots in there. 58

58

So I'm gonna create a new function here. 59

59

So basically, nicely organizing the entire code 60

60

of this slider here into different functions. 61

61

And so that's a good pattern to get used to , alright? 62

62

So just so you see what these dots will actually look like, 63

63

so each dot is gonna be one element 64

64

with the class of dots dot. 65

65

And then it will have this data attribute of slide 66

66

with the number of the slide 67

67

that clicking the button will go to, alright? 68

68

So one more time, the data attribute here holds some data 69

69

that we need in order to make the functionality work. 70

70

Let's actually grab this code here 71

71

so I'm copying all of it now, 72

72

and so what we want to do here now is to create one element 73

73

like this for each of the slides. 74

74

So the easiest way of doing that is to simply loop 75

75

over the slides, 76

76

because then we can do something for each of them. 77

77

But in this case, it's not even gonna be about the slides 78

78

it's just that we can do it four times, 79

79

because we have four slides. 80

80

So we have to slide again, and then the index, 81

81

but in this case, 82

82

we're really only gonna be interested in the index. 83

83

So missing the function keyword here 84

84

and actually since we're not interested in the slides, 85

85

we can again use this convention of the throwaway variable. 86

86

So a variable that we don't even need. 87

87

And so let's now say dotContainer.insertAdjacentHTML. 88

88

So as I mentioned, this is my favorite way 89

89

of creating HTML elements. 90

90

And so let's say beforeend so basically adding it 91

91

as the last child always. 92

92

And then here, we need the HTML code itself. 93

93

And so let me just paste that button 94

94

so that code that I copied from the demo site. 95

95

And now here, all we need to do is to add the index. 96

96

And so then the first button will get index zero, 97

97

then two, three and four. 98

98

So that in the next step we then can read this value 99

99

from here, and move exactly to that slide 100

100

once one of the dots is clicked. 101

101

So let's check that out. 102

102

Oh, and of course, we need to also call this function. 103

103

So in the beginning, we need to call, goToSlide 104

104

and also create dots. 105

105

So create dots. 106

106

And I will organize this a bit nicer by the end 107

107

for now let's just leave it like this. 108

108

Oh, and you see, we have the four dots now here. 109

109

Now right, let's check them out here just to see 110

110

the data slide attribute 111

111

and indeed, zero, one, two and three. 112

112

And now let's actually make them work. 113

113

So adding another event handler here 114

114

And I like to keep the event handlers or event listeners 115

115

here at the bottom. 116

116

And so of course, we are gonna use again, event delegation. 117

117

So we're not gonna attach one event handler to each dot, 118

118

but instead to the common parent. 119

119

And so that is of course, the dotContainer, 120

120

into which we just added the dots, 121

121

so addEventListener, 122

122

waiting for a click. 123

123

And now to actually match the element 124

124

that we're interested in, 125

125

we can simply now check for the class. 126

126

So that's event.target.classList.contains. 127

127

And then the class of the dots 128

128

is dots underscore, underscore dot. 129

129

Alright, then if so let's just lock that to the console 130

130

pretty quick. 131

131

So here we get dot if we click outside somewhere 132

132

nothing happens, 133

133

and then again, dot and dot. 134

134

Alright, so let's get the slide. 135

135

So const slide is equal e.target.dataset.slide 136

136

And so that's because it's called data slide. 137

137

And so as always, all the custom data attributes 138

138

are in the data set, and then dot this value. 139

139

So .slide. 140

140

So .slide and to make it even better, 141

141

we can now use destructuring because this value 142

142

is exactly the same as this. 143

143

And so we're reading from this object 144

144

and so we can simply do this. 145

145

So another nice use case of destructuring right there. 146

146

And so now, what we want to do is to basically go 147

147

to the slide that we just selected. 148

148

And so one more time, it's now very handy 149

149

to have this goToSlide function here, 150

150

inside its own separate function. 151

151

So goToSlide 152

152

and then with the slide number that we just read 153

153

from the data set. 154

154

So let's test that 155

155

and it works. 156

156

So slide two, let's see slide one 157

157

let's go straight to the last one, 158

158

and jumped over all the others 159

159

and now we are at the last one. 160

160

And of course we can combine this now with the buttons 161

161

and with the keyboard arrows. 162

162

And so yeah, great, this works as well. 163

163

Now all we need to do is to also show 164

164

which is the current slide. 165

165

So activate this dot basically. 166

166

So give it this different background color. 167

167

So that's also pretty common in a slider like this 168

168

and let me actually show it to you. 169

169

So all we do as always, is to give it a special class. 170

170

So the dots dot active class. 171

171

So let's go back and let's do that not here, 172

172

but in another function, 173

173

because we need this functionality in many places. 174

174

So whenever we change the slide, 175

175

we will also need to change the indicator here. 176

176

So no matter if we click on one of the dots, 177

177

or if we just use these buttons here, 178

178

whenever we changed the slide, 179

179

we want to change which slide is currently the active one. 180

180

And so we're gonna create a completely different function 181

181

for that. 182

182

And let's do it here after CreateDots 183

183

so activateDot 184

184

and here we need to again, 185

185

then pass in the current slide, basically. 186

186

So how will we do that? 187

187

Well it's gonna be a bit similar 188

188

to what we have here with these buttons. 189

189

So here we also have like an active class to show 190

190

which one is the active button here. 191

191

And to do that, remember, before we activated one of them, 192

192

we first dectivated all of them. 193

193

And so here, we are gonna do the same. 194

194

So we will select all of the dots, 195

195

each time that we want to activate one. 196

196

And we will then remove that active class, 197

197

and then add it only on the one that we're interested in. 198

198

So let's select all the dots. 199

199

So that's document.querySelector 200

200

and actually querySelectorAll, 201

201

and so the dots are the one that have this class. 202

202

And then for each of them, 203

203

so let's call it dot, 204

204

we want to say dot.classList.remove 205

205

this class dash dash active. 206

206

So that's the first step of removing all the active classes 207

207

and then we will edit on the on the one 208

208

that we are interested in. 209

209

So how do we select the one that we actually want? 210

210

Well, we can do that also based on the data attribute. 211

211

So that's gonna be a bit too complicated. 212

212

So let me show you how. 213

213

So document.query.Selector 214

214

and so here the query 215

215

is gonna be a little bit more complicated. 216

216

So it's still dots underscore, underscore dot 217

217

but now we want to select based on the data slide attribute. 218

218

So basically based on this attribute. 219

219

And we can create a selector for that. 220

220

So remember how previously we use these brackets 221

221

to select four images with a certain attribute 222

222

and so here we can do that as well, 223

223

and even check if they have a certain value. 224

224

So data slide equals, 225

225

and so they should have exactly the value of slide. 226

226

And so then, the selected dot 227

227

we can add to the classList or class. 228

228

So the active class, 229

229

just like this. 230

230

So let's say we pass in slide number two, 231

231

so we want to activate the dot corresponding 232

232

to slide number two. 233

233

And so here in this querySelector, 234

234

we can basically select the element with this class, 235

235

and with this data slide attribute set to two. 236

236

So right like this, okay, 237

237

and here that's active. 238

238

And so now, that should actually be working already. 239

239

All we need to do is now call this function here 240

240

in all the necessary places. 241

241

So when we go to the next slide, 242

242

we go to the slide of course, 243

243

and then we also want to activate the dot. 244

244

And also on the current slide, 245

245

and then the same when we go to the previous slide 246

246

activateDot with the current slide and finally, 247

247

when we click on one of the dots. 248

248

so activateDot 249

249

and here it's just called slide. 250

250

Okay, let's try that, 251

251

and did it work or not? 252

252

Well, it's hard to see, actually here 253

253

because of these images, 254

254

but, 255

255

yeah apparently it is working. 256

256

Although it looks kind of the same as all the other dots. 257

257

So let's change that here to style, 258

258

but it's very hard here. 259

259

So let me change the the class here. 260

260

So let's actually change it to white. 261

261

So we activate this one here, 262

262

now, and yeah, you can see that it actually works. 263

263

So now that's a bit better visible. 264

264

So that works just fine in all directions 265

265

so even with the arrow of course, 266

266

and when we click a dot, then the same works as well. 267

267

There's just one problem which is when we reload this, 268

268

then none of the slides is active. 269

269

So let's go back here and also in the beginning call 270

270

this activateDot function with slide zero. 271

271

So activateDot zero. 272

272

And so now you see the first dot is now active. 273

273

Great, so that's actually it, our slider is working now. 274

274

Let's just refactor our code just a little bit 275

275

and make it a bit better. 276

276

So for example, we have all of these function calls here. 277

277

So let's put them all in the same function, 278

278

which I'm gonna call init. 279

279

So an init function an initialization function. 280

280

So here we have our event handlers. 281

281

And then here, our functions. 282

282

So I'm calling the function that doesn't even exist yet. 283

283

So, 284

284

that's better. 285

285

And now I will simply put all of these here, 286

286

just so that we know a bit better what exactly 287

287

we are gonna do in the beginning, basically, 288

288

to initialize our slider. 289

289

And there should be one more, 290

290

Yeah that's to create the dots. 291

291

And that should probably happen before we activate any dot. 292

292

Otherwise that's not gonna work probably. 293

293

So here we have them or functions. 294

294

Let's just write that here as well. 295

295

And this one we don't need any more in fact. 296

296

And now just to finish, 297

297

let's actually put all of this code into a function as well. 298

298

And so this way, we do not pollute the global namespace. 299

299

So that's something we like to say. 300

300

And we're gonna talk a little bit more about this 301

301

also later in the course, though. 302

302

But for now just know that it is a good practice 303

303

to keep this kind of functionality here, 304

304

maybe in its own function. 305

305

So let me, 306

306

let me actually delete this one 307

307

and just put one curly brace at the very end here. 308

308

And then all we need to do is to call that function. 309

309

And that's it. 310

310

So now we have our slider working 311

311

and we could now actually even passed in some values here, 312

312

and to make this even more complete, 313

313

we could actually pass in, like some options here. 314

314

So we could make this slider function accept 315

315

a couple of options. 316

316

So an object, for example, which contains these options 317

317

and then work with that. 318

318

But that's a bit too much for this example. 319

319

But just know that this is a pretty common thing to do. 320

320

So great, this slider works 321

321

let's just actually go back to deleting these slides, 322

322

we don't need them anymore, 323

323

and put back our original content. 324

324

And so you will see then that it works just the same. 325

325

And indeed it does. 326

326

So I'm just gonna change the color of the dot back here, 327

327

and then that's it. 328

328

So everything works the same, 329

329

no matter how many slides we have. 330

330

So of course now we have only three dots, 331

331

but everything just works the same. 332

332

So the slider is really being built dynamically 333

333

based on the number of slide elements 334

334

that we create in our markup. 335

335

Okay, so we're almost done with this project now 336

336

there's just two more small lectures 337

337

in which we're gonna learn a little bit more. 338

338

And so after reviewing this code 339

339

for this really cool component, 340

340

let's then just quickly check out these final two lectures.