Original subtitles

1 1

In this video we're gonna implement 2

2

a very popular component which is a tabbed component. 3

3

And you will see tabbed components 4

4

on many websites these days. 5

5

So it's great to learn how to build one yourself. 6

6

So the component that we're gonna build 7

7

in this video is this one. 8

8

Now a tabbed component can appear in many different ways, 9

9

but what they all have in common 10

10

is that they have some kind of tabs like this here. 11

11

And when you clicked it up 12

12

then the content of this area below will change. 13

13

And so that's exactly what happens here with these buttons. 14

14

So basically these three are our tabs. 15

15

And then as we click on one of the tabs, 16

16

it will reveal the associated content. 17

17

So a little bit like tabs here in our browser, right? 18

18

So each browser tab has its own webpage. 19

19

And so here each tab has its own content area, basically. 20

20

So I'm sure you've seen this on other websites 21

21

and so let's now go ahead and implement this ourselves. 22

22

Okay, now for this component, 23

23

we actually need a bunch of HTML. 24

24

So let's first take a look at that. 25

25

So the whole tabbed component 26

26

in our case is called operations. 27

27

So let's scroll down here also. 28

28

And so this section here is about the operations 29

29

we can do on a bank account 30

30

and therefore this component here is called operations. 31

31

And you can also see that here on the page. 32

32

Then we have a the tab container basically. 33

33

So that's this element. 34

34

And so you can also see it here again 35

35

and it's the element which will contain the three tabs. 36

36

And so each tab is itself a button 37

37

and it has this class of operations tab, okay? 38

38

Then below that we have the content. 39

39

And in fact, we have three contents. 40

40

So we have one content element here for each of the tabs. 41

41

All right, so the first one here as you see 42

42

is called operations-content-1 43

43

then the other one is operations-content-2 44

44

and operations-content-3. 45

45

So as we click on one of these tabs, 46

46

we will not create any new content. 47

47

What we will do instead is to hide the other tabs basically. 48

48

So you see that right now this first one here 49

49

has the operations content active class. 50

50

And so therefore this one is visible 51

51

and all the others are hidden. 52

52

And what's also important here is that 53

53

these buttons here, they have this data tab attribute. 54

54

And so this one is number one 55

55

and this will then be associated with this class name here. 56

56

So operations content and then again one 57

57

but more about that in a minute 58

58

when we actually implement this ourselves. 59

59

So for now we just need to get down 60

60

the basic structure of the HTML here. 61

61

And it might be a good idea for you to pause the video 62

62

and take a minute or two to get yourself familiar 63

63

with this HTML structure 64

64

and all of the class names that are involved here, okay? 65

65

And you can even take a look at the CSS 66

66

because there's also a lot of CSS involved here, all right? 67

67

So of course I couldn't write all of this code here 68

68

together with you now, because that would take way too long. 69

69

All right, but anyway 70

70

let's not build this tabbed component here. 71

71

And we're gonna start by selecting the tabs, okay? 72

72

And that will keep the elements here open 73

73

so we can see it at all time. 74

74

And so you'll see that the buttons 75

75

they have the class operations tab. 76

76

So tabs=documents.querySelectorAll 77

77

and then with the class operations_tab. 78

78

Then let's also select the tabs container 79

79

and so that is this element here. 80

80

Let's actually go ahead and copy it. 81

81

And finally, also the three content areas. 82

82

So that's here, operations content. 83

83

You see I cannot copy it for some reason. 84

84

It doesn't matter. 85

85

So a tabs content is document.querySelectorAll. 86

86

So because again, we have three of them. 87

87

All right, so we have our selections nicely done 88

88

and now we can actually work on the functionality 89

89

and let's start by adding event handlers 90

90

to these buttons here, right? 91

91

Because that is the action that we actually want to handle 92

92

in this component. 93

93

So we could do it like this. 94

94

So taking all the tabs and then on each of them 95

95

we could attach an event handler. 96

96

So for example, like this. 97

97

So for each, because we want to do it on each of them, 98

98

so we get then each tab and then tab.addEventListener click. 99

99

And let's just use a quick arrow function here 100

100

because this is really just a demonstration. 101

101

Well, nothing happens. 102

102

Let's try to reload this page. 103

103

Yeah indeed, now we get the tab locked to the console. 104

104

Now, however, as we already learned in the last video 105

105

doing this here is a bad practice 106

106

because what if we had like 200 tabs? 107

107

Then we would have 200 copies 108

108

of this exact callback function here 109

109

and that would simply slow down the page. 110

110

So that's not at all desirable. 111

111

And so let's get rid of this 112

112

and one more time, use events delegation. 113

113

And remember that for event delegation, 114

114

we need to attach the event handler 115

115

on the common parent element 116

116

of all the elements that we're interested in. 117

117

And in our case, that is this tabs container, right? 118

118

So we have our buttons here. 119

119

So right here or buttons 120

120

and a common parent of all of them 121

121

is this tab container that we already selected previously. 122

122

And so let's attach our event handler 123

123

to that element instead. 124

124

So tabsContainer.AddEventListener, click, 125

125

we need the event of course, 126

126

so that we can figure out where the click happened. 127

127

And so let's now actually work on 128

128

or matching strategy, okay? 129

129

So we already know that we are interested in the buttons. 130

130

And so let's now figure out which button was clicked. 131

131

So let's actually create an element called clicked 132

132

that we can then use to work with. 133

133

And so what about this? 134

134

So what about simply using the e.target? 135

135

Well, let's see. 136

136

So in our console, let's now click somewhere here 137

137

and indeed now we got the button that was clicked, okay? 138

138

However, there is a problem 139

139

when we click here on this number. 140

140

So you see that now we did not get a button 141

141

but we got this spin element. 142

142

And that's because inside of this button, 143

143

we actually have another element. 144

144

And so now, even though 145

145

it looked like we clicked on the button here 146

146

or here for example, 147

147

actually we are clicking on this span element, right? 148

148

So we are not actually clicking on the button, 149

149

but we still need the button. 150

150

So no matter if we click on this button itself 151

151

or here on the span element 152

152

we actually need the button element itself 153

153

because from that button 154

154

we will need to read this data tab attribute here 155

155

because as I mentioned earlier, 156

156

this one contains the number of the tab 157

157

that should become visible. 158

158

And so here this data attribute 159

159

becomes really important to store information in the DOM. 160

160

So basically we need a way of finding the button element 161

161

whenever we click on this span element, right? 162

162

Now, one simple way to fix it, 163

163

which would not really fix it actually 164

164

is to do some DOM traversing 165

165

and simply select the parent element. 166

166

We can move up the DOM tree 167

167

and instead of simply taking a e.target 168

168

we can use the parent element of that. 169

169

So let's see what happens then. 170

170

And so now indeed when we click on the number, 171

171

we get the button. 172

172

And so again that's because that is the parent element 173

173

of that span. 174

174

Now the problem appears 175

175

when we click on the button itself, 176

176

because now of course we will also get the parent 177

177

of the button element. 178

178

And so that is this container. 179

179

But of course that is not what we want. 180

180

So basically what we want is to get the button, 181

181

no matter if we click here on the span 182

182

or on the button itself. 183

183

So we need a way of selecting the parent element 184

184

that is always a tab. 185

185

And can you think of a special method 186

186

that we learned previously to do that? 187

187

Well, the solution is right here in the previous video. 188

188

Well, and that's down here somewhere. 189

189

So remember that we want a way of going upwards, 190

190

but we want to specify that we want to select 191

191

an operations tab. 192

192

And so we can use this closest method for exactly that. 193

193

So remember that I said 194

194

that this method is gonna be really helpful 195

195

in event delegation. 196

196

And so now that's actually the case. 197

197

Okay, so this method makes it really easy for us 198

198

to dynamically get the element 199

199

that we're interested in. 200

200

So here, instead of always selecting the parent element 201

201

we will search basically for the closest operations tab. 202

202

And so here we need to do the exact same query as that. 203

203

All right, and this should actually now fix our problem. 204

204

So let's see, when we click the button itself 205

205

then we get the button 206

206

and when we click the number here so the span, 207

207

then we also get the button 208

208

because now it finds the closest parent 209

209

with this class name, 210

210

which indeed is the button itself, so the tab 211

211

And here we get to tab number two 212

212

as you can see down here. 213

213

And here we get tab number three, great. 214

214

And let's actually immediately do something 215

215

with this select the tab. 216

216

So the tab that is currently active here 217

217

has a different style as you can see. 218

218

So it's a bit moved up. 219

219

And so that's because the active tab 220

220

basically has this class. 221

221

So where's that? 222

222

It has this clap of operations tab active. 223

223

All right, so we can simply add that 224

224

to the element that was just clicked. 225

225

So classList.add operations_tab_active, okay? 226

226

And now as we click 227

227

you see that it activates basically does tab. 228

228

Now of course later 229

229

then all the other tabs we'll have to move down 230

230

but we're gonna take care of that in a second. 231

231

Because now watch what happens when we actually click 232

232

on the tabs container itself. 233

233

So outside of any of the buttons 234

234

but still in the tabs container 235

235

where this EventListener is actually attached to. 236

236

So you see that we get null here 237

237

and that's because null is the results 238

238

of the closest method here 239

239

when there is no matching parent element to be found. 240

240

So of course, when we click here in this tabs container 241

241

then there is gonna be no parent with this class. 242

242

And so therefore, as I just said, we get to null. 243

243

And so we need to fix that now in our code 244

244

and basically ignore any clicks that happen on that area. 245

245

So basically ignore any clicks 246

246

where the result is then null, all right? 247

247

So we can do that by saying, 248

248

if there is no clicked, then return immediately. 249

249

And this is something that we haven't done before. 250

250

So what I'm doing here is called a guard clause. 251

251

So it's basically an if statement 252

252

which will return early if some condition is matched. 253

253

So in this case, when there's nothing clicked 254

254

then we want to immediately finish this function. 255

255

And in this case, when we have null which is a faulty value, 256

256

then not faulty will become true 257

257

and then the function will return 258

258

and none of the code that's after it will be executed. 259

259

But of course, if clicked does exist 260

260

then this return will not be executed 261

261

and the rest of the code will be executed just fine. 262

262

So this is a more modern way of writing this. 263

263

So we could have written instead also, 264

264

if there is a clicked on element, then do this. 265

265

And this is the more traditional way 266

266

as we have been doing it all the time. 267

267

But this is actually more modern 268

268

because it looks a bit nicer 269

269

because we don't need to create all these additional blocks. 270

270

So in this case, just this block 271

271

but sometimes when we have so many conditions 272

272

it can become a little bit confusing. 273

273

And then it's a bit cleaner 274

274

to simply return the function immediately 275

275

if a certain condition is matched. 276

276

And again in this case, 277

277

whenever there is no clicked element here 278

278

then we want to simply return to function right away. 279

279

And so then that code here will not be executed 280

280

but otherwise, of course it will be executed. 281

281

And so that's null see what happens. 282

282

So now clicking outside, nothing happens. 283

283

Of course, we still get to the null here 284

284

but no error occurs 285

285

because null JavaScript is no longer trying to execute 286

286

this line of code here, okay? 287

287

But now let's actually take care 288

288

of basically putting all of these other buttons down 289

289

as I was saying. 290

290

So when I click one of them, 291

291

then the other ones show to move down. 292

292

So basically we should remove this class from them, right? 293

293

And so the solution to that 294

294

is before we add this class here to anyone, 295

295

we will simply remove it on all of the tabs. 296

296

So we removed them on all. 297

297

So that's all the tabs.forEach. 298

298

And so each tab I'm simply calling T here. 299

299

And then tab.clasList.remove. 300

300

And so now that should work, 301

301

and yeah, it does, okay? 302

302

So this is something that we do quite usually. 303

303

So basically clearing the class on all of them 304

304

and then only add it afterwards on one of them. 305

305

So that's at a comment here, active tab. 306

306

But now finally let's actually 307

307

activate the content area itself 308

308

because that's the main part 309

309

that we're actually interested in. 310

310

Now remember that the information about 311

311

which content area should be displayed 312

312

is here in this data attribute. 313

313

So let me click again. 314

314

And so in this case, we want the tab a number two. 315

315

And so that's this number two is encoded here 316

316

basically in this data attribute. 317

317

So having the number two here 318

318

means that we want to select the element 319

319

which has the class of operations_content_2, okay? 320

320

So let's do that. 321

321

Let me grab this here. 322

322

So the selector, 323

323

and then let's select it. 324

324

So document.querySelector. 325

325

And now I'm using a template string here, 326

326

because of course we don't want to hard code 327

327

the number two here 328

328

but instead we want to get that 329

329

exactly from the data attribute that I just told you. 330

330

So let me just show that again to you. 331

331

Now we got an error here 332

332

but just put something there for now. 333

333

So it is called data tab, okay. 334

334

And so remember all these attributes 335

335

are in the element and then in the dataset property. 336

336

So the element that was clicked 337

337

is indeed stored in or variable clicked, right? 338

338

So every time we click a button, 339

339

that button is then stored in the clicked variable 340

340

and then .data set.tab. 341

341

So that's only the part after the data. 342

342

Remember, so it's just tab. 343

343

So in this case, it's gonna be two. 344

344

And so we already have that now selected 345

345

and then we want to add a special class to it. 346

346

So that's classList.add 347

347

and let's just check out the class that we need to add. 348

348

So we can see that here on the first content area 349

349

which is already active. 350

350

And so the class here is operations content active. 351

351

Okay, and one more time you can check out the CSS 352

352

to figure out why actually this makes the element active. 353

353

And we can quickly do that ourselves. 354

354

So here it is actually the active, right? 355

355

And so basically what this does 356

356

is to change the display property 357

357

to something which is not none. 358

358

So previously without this active part, 359

359

so just operation content makes it display none 360

360

which basically hides it. 361

361

But then as it becomes active, we give it display grid 362

362

and then specify all of these properties down, all right? 363

363

So this would actually already been working 364

364

just to really see it as a bit better in the console also. 365

365

Let's lock this value also to the console, okay? 366

366

But let's see. 367

367

And indeed it now appeared down here. 368

368

Great, so it's no longer hidden. 369

369

And indeed we successfully read that value here 370

370

from the data tab, which is two. 371

371

And the same, it's going to happen here for three. 372

372

And so you'll see that's the content number three 373

373

also appeared down here. 374

374

Now of course this is not quite finished yet 375

375

because we want the other ones to be hidden. 376

376

So that's the whole idea of this component. 377

377

And so basically all we need to do 378

378

is to do the same that we did for the tabs. 379

379

So basically removing the active class for all of them 380

380

before then adding it 381

381

to the one that we're interested in, all right? 382

382

So basically just what we have here. 383

383

So let's select all the contents 384

384

and that we actually already have here, right? 385

385

So tabs content is also a note list 386

386

because of query selector all 387

387

that we can now loop over 388

388

and then remove that active class from all of them. 389

389

So tabsContent.forEach 390

390

and I'm just calling it C very short here. 391

391

So C for content. 392

392

So class list remove. 393

393

And so you'll see that it's always the same idea. 394

394

So it's all about removing and adding classes 395

395

to manipulate the page to look just like we want, all right? 396

396

So this comment is actually more here. 397

397

So activate tab and here 398

398

remove the act of classes for both the tab 399

399

and the content areas. 400

400

And with this actually our component 401

401

should already be working. 402

402

So let's see. 403

403

And yeah, beautiful, it works great, all right. 404

404

Let's just get rid 405

405

of all these different console.logs here 406

406

because we only need them for development, 407

407

but now we're done. 408

408

So let's just quickly recap. 409

409

And as I just mentioned a minute ago 410

410

the whole idea when we build components like this 411

411

is to just add and remove classes 412

412

as necessary to manipulate the content to our needs. 413

413

That's actually the exact same thing 414

414

we did with a modal window. 415

415

So if you take a look at the code, it's a bit similar. 416

416

So to hide and display the modal window 417

417

all we do is to add and remove this hidden class. 418

418

Now, in this case, it's a little bit more complex 419

419

but the idea is always the same. 420

420

It's to work with classes 421

421

that have some styles for showing and hiding the classes. 422

422

And so if you're not yet really familiar with CSS, 423

423

it's also important that you really check out to CSS 424

424

to build these components for yourself 425

425

and the same goes for the HTML. 426

426

But of course, I could not write this code here as well 427

427

because then this tutorial would take 428

428

like one hour instead of 15 minutes. 429

429

But anyway, I hope that this was fun 430

430

and that make sure to understand what we did here 431

431

including the HTML and CSS. 432

432

And then let's go right to the next video.