WEBVTT 1 00:00:01.410 --> 00:00:03.510 In this video we're gonna implement 2 00:00:03.510 --> 00:00:08.510 a very popular component which is a tabbed component. 3 00:00:08.550 --> 00:00:10.500 And you will see tabbed components 4 00:00:10.500 --> 00:00:12.870 on many websites these days. 5 00:00:12.870 --> 00:00:16.163 So it's great to learn how to build one yourself. 6 00:00:17.850 --> 00:00:19.940 So the component that we're gonna build 7 00:00:19.940 --> 00:00:22.650 in this video is this one. 8 00:00:22.650 --> 00:00:26.660 Now a tabbed component can appear in many different ways, 9 00:00:26.660 --> 00:00:28.440 but what they all have in common 10 00:00:28.440 --> 00:00:32.210 is that they have some kind of tabs like this here. 11 00:00:32.210 --> 00:00:33.630 And when you clicked it up 12 00:00:33.630 --> 00:00:38.380 then the content of this area below will change. 13 00:00:38.380 --> 00:00:42.770 And so that's exactly what happens here with these buttons. 14 00:00:42.770 --> 00:00:45.360 So basically these three are our tabs. 15 00:00:45.360 --> 00:00:47.930 And then as we click on one of the tabs, 16 00:00:47.930 --> 00:00:50.850 it will reveal the associated content. 17 00:00:50.850 --> 00:00:55.170 So a little bit like tabs here in our browser, right? 18 00:00:55.170 --> 00:00:58.810 So each browser tab has its own webpage. 19 00:00:58.810 --> 00:01:03.370 And so here each tab has its own content area, basically. 20 00:01:03.370 --> 00:01:06.130 So I'm sure you've seen this on other websites 21 00:01:06.130 --> 00:01:09.653 and so let's now go ahead and implement this ourselves. 22 00:01:10.808 --> 00:01:13.940 Okay, now for this component, 23 00:01:13.940 --> 00:01:16.713 we actually need a bunch of HTML. 24 00:01:18.040 --> 00:01:20.780 So let's first take a look at that. 25 00:01:20.780 --> 00:01:22.690 So the whole tabbed component 26 00:01:22.690 --> 00:01:25.423 in our case is called operations. 27 00:01:26.480 --> 00:01:28.253 So let's scroll down here also. 28 00:01:29.950 --> 00:01:33.100 And so this section here is about the operations 29 00:01:33.100 --> 00:01:34.940 we can do on a bank account 30 00:01:34.940 --> 00:01:38.153 and therefore this component here is called operations. 31 00:01:39.040 --> 00:01:42.040 And you can also see that here on the page. 32 00:01:42.040 --> 00:01:45.740 Then we have a the tab container basically. 33 00:01:45.740 --> 00:01:47.143 So that's this element. 34 00:01:49.000 --> 00:01:51.090 And so you can also see it here again 35 00:01:51.090 --> 00:01:54.630 and it's the element which will contain the three tabs. 36 00:01:54.630 --> 00:01:57.680 And so each tab is itself a button 37 00:01:57.680 --> 00:02:02.680 and it has this class of operations tab, okay? 38 00:02:02.810 --> 00:02:05.163 Then below that we have the content. 39 00:02:07.100 --> 00:02:10.100 And in fact, we have three contents. 40 00:02:10.100 --> 00:02:14.463 So we have one content element here for each of the tabs. 41 00:02:15.579 --> 00:02:17.920 All right, so the first one here as you see 42 00:02:17.920 --> 00:02:20.950 is called operations-content-1 43 00:02:20.950 --> 00:02:23.550 then the other one is operations-content-2 44 00:02:23.550 --> 00:02:25.810 and operations-content-3. 45 00:02:25.810 --> 00:02:28.320 So as we click on one of these tabs, 46 00:02:28.320 --> 00:02:30.910 we will not create any new content. 47 00:02:30.910 --> 00:02:35.293 What we will do instead is to hide the other tabs basically. 48 00:02:36.540 --> 00:02:39.530 So you see that right now this first one here 49 00:02:39.530 --> 00:02:43.000 has the operations content active class. 50 00:02:43.000 --> 00:02:45.080 And so therefore this one is visible 51 00:02:45.080 --> 00:02:46.723 and all the others are hidden. 52 00:02:48.010 --> 00:02:50.900 And what's also important here is that 53 00:02:52.640 --> 00:02:56.350 these buttons here, they have this data tab attribute. 54 00:02:56.350 --> 00:02:58.170 And so this one is number one 55 00:02:58.170 --> 00:03:01.990 and this will then be associated with this class name here. 56 00:03:01.990 --> 00:03:05.310 So operations content and then again one 57 00:03:05.310 --> 00:03:07.370 but more about that in a minute 58 00:03:07.370 --> 00:03:10.040 when we actually implement this ourselves. 59 00:03:10.040 --> 00:03:11.920 So for now we just need to get down 60 00:03:11.920 --> 00:03:14.770 the basic structure of the HTML here. 61 00:03:14.770 --> 00:03:17.940 And it might be a good idea for you to pause the video 62 00:03:17.940 --> 00:03:21.250 and take a minute or two to get yourself familiar 63 00:03:21.250 --> 00:03:23.140 with this HTML structure 64 00:03:23.140 --> 00:03:27.780 and all of the class names that are involved here, okay? 65 00:03:27.780 --> 00:03:30.480 And you can even take a look at the CSS 66 00:03:31.540 --> 00:03:36.000 because there's also a lot of CSS involved here, all right? 67 00:03:37.300 --> 00:03:40.050 So of course I couldn't write all of this code here 68 00:03:40.050 --> 00:03:44.053 together with you now, because that would take way too long. 69 00:03:45.880 --> 00:03:47.360 All right, but anyway 70 00:03:47.360 --> 00:03:49.783 let's not build this tabbed component here. 71 00:03:53.620 --> 00:03:57.160 And we're gonna start by selecting the tabs, okay? 72 00:03:57.160 --> 00:04:00.510 And that will keep the elements here open 73 00:04:00.510 --> 00:04:02.923 so we can see it at all time. 74 00:04:04.160 --> 00:04:05.450 And so you'll see that the buttons 75 00:04:05.450 --> 00:04:08.483 they have the class operations tab. 76 00:04:10.590 --> 00:04:14.267 So tabs=documents.querySelectorAll 77 00:04:17.989 --> 00:04:21.239 and then with the class operations_tab. 78 00:04:25.920 --> 00:04:29.110 Then let's also select the tabs container 79 00:04:36.217 --> 00:04:38.967 and so that is this element here. 80 00:04:41.170 --> 00:04:42.970 Let's actually go ahead and copy it. 81 00:04:46.820 --> 00:04:49.623 And finally, also the three content areas. 82 00:04:50.900 --> 00:04:55.900 So that's here, operations content. 83 00:04:56.830 --> 00:05:00.200 You see I cannot copy it for some reason. 84 00:05:00.200 --> 00:05:01.100 It doesn't matter. 85 00:05:03.430 --> 00:05:07.583 So a tabs content is document.querySelectorAll. 86 00:05:10.070 --> 00:05:12.443 So because again, we have three of them. 87 00:05:17.950 --> 00:05:21.920 All right, so we have our selections nicely done 88 00:05:21.920 --> 00:05:26.020 and now we can actually work on the functionality 89 00:05:26.020 --> 00:05:28.470 and let's start by adding event handlers 90 00:05:28.470 --> 00:05:31.340 to these buttons here, right? 91 00:05:31.340 --> 00:05:34.640 Because that is the action that we actually want to handle 92 00:05:34.640 --> 00:05:36.320 in this component. 93 00:05:36.320 --> 00:05:38.740 So we could do it like this. 94 00:05:38.740 --> 00:05:41.990 So taking all the tabs and then on each of them 95 00:05:41.990 --> 00:05:43.783 we could attach an event handler. 96 00:05:45.570 --> 00:05:47.073 So for example, like this. 97 00:05:47.960 --> 00:05:51.740 So for each, because we want to do it on each of them, 98 00:05:51.740 --> 00:05:56.740 so we get then each tab and then tab.addEventListener click. 99 00:06:00.840 --> 00:06:03.140 And let's just use a quick arrow function here 100 00:06:04.800 --> 00:06:07.483 because this is really just a demonstration. 101 00:06:11.890 --> 00:06:13.600 Well, nothing happens. 102 00:06:13.600 --> 00:06:15.453 Let's try to reload this page. 103 00:06:17.250 --> 00:06:21.490 Yeah indeed, now we get the tab locked to the console. 104 00:06:21.490 --> 00:06:25.640 Now, however, as we already learned in the last video 105 00:06:25.640 --> 00:06:28.570 doing this here is a bad practice 106 00:06:28.570 --> 00:06:32.180 because what if we had like 200 tabs? 107 00:06:32.180 --> 00:06:34.080 Then we would have 200 copies 108 00:06:34.080 --> 00:06:36.610 of this exact callback function here 109 00:06:36.610 --> 00:06:39.290 and that would simply slow down the page. 110 00:06:39.290 --> 00:06:41.890 So that's not at all desirable. 111 00:06:41.890 --> 00:06:44.520 And so let's get rid of this 112 00:06:44.520 --> 00:06:47.870 and one more time, use events delegation. 113 00:06:47.870 --> 00:06:50.270 And remember that for event delegation, 114 00:06:50.270 --> 00:06:52.320 we need to attach the event handler 115 00:06:52.320 --> 00:06:54.140 on the common parent element 116 00:06:54.140 --> 00:06:57.040 of all the elements that we're interested in. 117 00:06:57.040 --> 00:07:01.563 And in our case, that is this tabs container, right? 118 00:07:02.930 --> 00:07:04.383 So we have our buttons here. 119 00:07:06.700 --> 00:07:09.220 So right here or buttons 120 00:07:09.220 --> 00:07:11.370 and a common parent of all of them 121 00:07:11.370 --> 00:07:15.320 is this tab container that we already selected previously. 122 00:07:15.320 --> 00:07:18.160 And so let's attach our event handler 123 00:07:18.160 --> 00:07:19.803 to that element instead. 124 00:07:21.190 --> 00:07:25.497 So tabsContainer.AddEventListener, click, 125 00:07:29.830 --> 00:07:31.410 we need the event of course, 126 00:07:31.410 --> 00:07:34.630 so that we can figure out where the click happened. 127 00:07:34.630 --> 00:07:36.740 And so let's now actually work on 128 00:07:36.740 --> 00:07:39.660 or matching strategy, okay? 129 00:07:39.660 --> 00:07:43.580 So we already know that we are interested in the buttons. 130 00:07:43.580 --> 00:07:46.803 And so let's now figure out which button was clicked. 131 00:07:47.650 --> 00:07:50.260 So let's actually create an element called clicked 132 00:07:51.420 --> 00:07:53.593 that we can then use to work with. 133 00:07:54.810 --> 00:07:56.683 And so what about this? 134 00:07:57.700 --> 00:08:00.713 So what about simply using the e.target? 135 00:08:01.730 --> 00:08:02.723 Well, let's see. 136 00:08:06.570 --> 00:08:10.920 So in our console, let's now click somewhere here 137 00:08:10.920 --> 00:08:15.920 and indeed now we got the button that was clicked, okay? 138 00:08:16.030 --> 00:08:17.600 However, there is a problem 139 00:08:17.600 --> 00:08:19.900 when we click here on this number. 140 00:08:19.900 --> 00:08:22.660 So you see that now we did not get a button 141 00:08:22.660 --> 00:08:24.733 but we got this spin element. 142 00:08:25.650 --> 00:08:27.840 And that's because inside of this button, 143 00:08:27.840 --> 00:08:30.120 we actually have another element. 144 00:08:30.120 --> 00:08:31.730 And so now, even though 145 00:08:31.730 --> 00:08:34.760 it looked like we clicked on the button here 146 00:08:34.760 --> 00:08:36.580 or here for example, 147 00:08:36.580 --> 00:08:41.450 actually we are clicking on this span element, right? 148 00:08:41.450 --> 00:08:44.280 So we are not actually clicking on the button, 149 00:08:44.280 --> 00:08:46.680 but we still need the button. 150 00:08:46.680 --> 00:08:49.550 So no matter if we click on this button itself 151 00:08:49.550 --> 00:08:51.430 or here on the span element 152 00:08:51.430 --> 00:08:54.090 we actually need the button element itself 153 00:08:54.090 --> 00:08:55.670 because from that button 154 00:08:55.670 --> 00:08:59.410 we will need to read this data tab attribute here 155 00:08:59.410 --> 00:09:01.400 because as I mentioned earlier, 156 00:09:01.400 --> 00:09:03.640 this one contains the number of the tab 157 00:09:03.640 --> 00:09:05.530 that should become visible. 158 00:09:05.530 --> 00:09:07.140 And so here this data attribute 159 00:09:07.140 --> 00:09:11.223 becomes really important to store information in the DOM. 160 00:09:12.130 --> 00:09:15.550 So basically we need a way of finding the button element 161 00:09:15.550 --> 00:09:20.053 whenever we click on this span element, right? 162 00:09:20.920 --> 00:09:25.920 Now, one simple way to fix it, 163 00:09:25.990 --> 00:09:28.267 which would not really fix it actually 164 00:09:28.267 --> 00:09:30.830 is to do some DOM traversing 165 00:09:30.830 --> 00:09:34.060 and simply select the parent element. 166 00:09:34.060 --> 00:09:35.910 We can move up the DOM tree 167 00:09:35.910 --> 00:09:39.250 and instead of simply taking a e.target 168 00:09:39.250 --> 00:09:41.890 we can use the parent element of that. 169 00:09:41.890 --> 00:09:43.440 So let's see what happens then. 170 00:09:44.560 --> 00:09:47.010 And so now indeed when we click on the number, 171 00:09:47.010 --> 00:09:48.690 we get the button. 172 00:09:48.690 --> 00:09:52.310 And so again that's because that is the parent element 173 00:09:52.310 --> 00:09:53.850 of that span. 174 00:09:53.850 --> 00:09:55.380 Now the problem appears 175 00:09:55.380 --> 00:09:57.700 when we click on the button itself, 176 00:09:57.700 --> 00:10:00.610 because now of course we will also get the parent 177 00:10:00.610 --> 00:10:02.260 of the button element. 178 00:10:02.260 --> 00:10:04.890 And so that is this container. 179 00:10:04.890 --> 00:10:08.290 But of course that is not what we want. 180 00:10:08.290 --> 00:10:11.140 So basically what we want is to get the button, 181 00:10:11.140 --> 00:10:14.340 no matter if we click here on the span 182 00:10:14.340 --> 00:10:17.000 or on the button itself. 183 00:10:17.000 --> 00:10:19.930 So we need a way of selecting the parent element 184 00:10:19.930 --> 00:10:22.200 that is always a tab. 185 00:10:22.200 --> 00:10:24.520 And can you think of a special method 186 00:10:24.520 --> 00:10:26.953 that we learned previously to do that? 187 00:10:27.850 --> 00:10:32.023 Well, the solution is right here in the previous video. 188 00:10:33.160 --> 00:10:35.313 Well, and that's down here somewhere. 189 00:10:37.200 --> 00:10:41.193 So remember that we want a way of going upwards, 190 00:10:42.310 --> 00:10:45.080 but we want to specify that we want to select 191 00:10:45.080 --> 00:10:46.950 an operations tab. 192 00:10:46.950 --> 00:10:51.770 And so we can use this closest method for exactly that. 193 00:10:51.770 --> 00:10:53.400 So remember that I said 194 00:10:53.400 --> 00:10:56.160 that this method is gonna be really helpful 195 00:10:56.160 --> 00:10:58.070 in event delegation. 196 00:10:58.070 --> 00:10:59.973 And so now that's actually the case. 197 00:11:01.240 --> 00:11:04.700 Okay, so this method makes it really easy for us 198 00:11:04.700 --> 00:11:06.590 to dynamically get the element 199 00:11:06.590 --> 00:11:08.380 that we're interested in. 200 00:11:08.380 --> 00:11:11.570 So here, instead of always selecting the parent element 201 00:11:11.570 --> 00:11:16.570 we will search basically for the closest operations tab. 202 00:11:17.470 --> 00:11:21.833 And so here we need to do the exact same query as that. 203 00:11:23.487 --> 00:11:27.600 All right, and this should actually now fix our problem. 204 00:11:27.600 --> 00:11:30.840 So let's see, when we click the button itself 205 00:11:30.840 --> 00:11:32.370 then we get the button 206 00:11:32.370 --> 00:11:35.950 and when we click the number here so the span, 207 00:11:35.950 --> 00:11:37.640 then we also get the button 208 00:11:37.640 --> 00:11:40.070 because now it finds the closest parent 209 00:11:40.070 --> 00:11:41.340 with this class name, 210 00:11:41.340 --> 00:11:44.550 which indeed is the button itself, so the tab 211 00:11:45.560 --> 00:11:47.540 And here we get to tab number two 212 00:11:47.540 --> 00:11:48.973 as you can see down here. 213 00:11:49.970 --> 00:11:53.633 And here we get tab number three, great. 214 00:11:57.020 --> 00:11:59.100 And let's actually immediately do something 215 00:11:59.100 --> 00:12:01.760 with this select the tab. 216 00:12:01.760 --> 00:12:05.270 So the tab that is currently active here 217 00:12:05.270 --> 00:12:07.230 has a different style as you can see. 218 00:12:07.230 --> 00:12:09.230 So it's a bit moved up. 219 00:12:09.230 --> 00:12:13.200 And so that's because the active tab 220 00:12:13.200 --> 00:12:15.133 basically has this class. 221 00:12:16.220 --> 00:12:17.373 So where's that? 222 00:12:18.240 --> 00:12:21.883 It has this clap of operations tab active. 223 00:12:23.860 --> 00:12:27.650 All right, so we can simply add that 224 00:12:27.650 --> 00:12:30.490 to the element that was just clicked. 225 00:12:30.490 --> 00:12:35.490 So classList.add operations_tab_active, okay? 226 00:12:39.070 --> 00:12:40.590 And now as we click 227 00:12:40.590 --> 00:12:44.140 you see that it activates basically does tab. 228 00:12:44.140 --> 00:12:45.290 Now of course later 229 00:12:45.290 --> 00:12:48.440 then all the other tabs we'll have to move down 230 00:12:48.440 --> 00:12:52.150 but we're gonna take care of that in a second. 231 00:12:52.150 --> 00:12:55.400 Because now watch what happens when we actually click 232 00:12:55.400 --> 00:12:57.710 on the tabs container itself. 233 00:12:57.710 --> 00:12:59.770 So outside of any of the buttons 234 00:12:59.770 --> 00:13:01.780 but still in the tabs container 235 00:13:01.780 --> 00:13:04.863 where this EventListener is actually attached to. 236 00:13:06.270 --> 00:13:09.930 So you see that we get null here 237 00:13:09.930 --> 00:13:12.550 and that's because null is the results 238 00:13:12.550 --> 00:13:14.850 of the closest method here 239 00:13:14.850 --> 00:13:18.740 when there is no matching parent element to be found. 240 00:13:18.740 --> 00:13:22.690 So of course, when we click here in this tabs container 241 00:13:22.690 --> 00:13:27.420 then there is gonna be no parent with this class. 242 00:13:27.420 --> 00:13:30.860 And so therefore, as I just said, we get to null. 243 00:13:30.860 --> 00:13:33.810 And so we need to fix that now in our code 244 00:13:33.810 --> 00:13:38.150 and basically ignore any clicks that happen on that area. 245 00:13:38.150 --> 00:13:41.520 So basically ignore any clicks 246 00:13:41.520 --> 00:13:46.270 where the result is then null, all right? 247 00:13:46.270 --> 00:13:48.460 So we can do that by saying, 248 00:13:48.460 --> 00:13:53.460 if there is no clicked, then return immediately. 249 00:13:55.070 --> 00:13:57.890 And this is something that we haven't done before. 250 00:13:57.890 --> 00:14:01.683 So what I'm doing here is called a guard clause. 251 00:14:04.170 --> 00:14:06.400 So it's basically an if statement 252 00:14:06.400 --> 00:14:10.820 which will return early if some condition is matched. 253 00:14:10.820 --> 00:14:13.720 So in this case, when there's nothing clicked 254 00:14:13.720 --> 00:14:16.950 then we want to immediately finish this function. 255 00:14:16.950 --> 00:14:21.890 And in this case, when we have null which is a faulty value, 256 00:14:21.890 --> 00:14:25.060 then not faulty will become true 257 00:14:25.060 --> 00:14:26.770 and then the function will return 258 00:14:26.770 --> 00:14:30.470 and none of the code that's after it will be executed. 259 00:14:30.470 --> 00:14:33.220 But of course, if clicked does exist 260 00:14:33.220 --> 00:14:35.820 then this return will not be executed 261 00:14:35.820 --> 00:14:40.130 and the rest of the code will be executed just fine. 262 00:14:40.130 --> 00:14:44.083 So this is a more modern way of writing this. 263 00:14:45.380 --> 00:14:47.780 So we could have written instead also, 264 00:14:47.780 --> 00:14:52.230 if there is a clicked on element, then do this. 265 00:14:52.230 --> 00:14:54.300 And this is the more traditional way 266 00:14:54.300 --> 00:14:56.880 as we have been doing it all the time. 267 00:14:56.880 --> 00:14:59.050 But this is actually more modern 268 00:14:59.050 --> 00:15:01.290 because it looks a bit nicer 269 00:15:01.290 --> 00:15:05.470 because we don't need to create all these additional blocks. 270 00:15:05.470 --> 00:15:07.300 So in this case, just this block 271 00:15:07.300 --> 00:15:10.090 but sometimes when we have so many conditions 272 00:15:10.090 --> 00:15:12.550 it can become a little bit confusing. 273 00:15:12.550 --> 00:15:14.860 And then it's a bit cleaner 274 00:15:14.860 --> 00:15:17.320 to simply return the function immediately 275 00:15:17.320 --> 00:15:19.800 if a certain condition is matched. 276 00:15:19.800 --> 00:15:21.130 And again in this case, 277 00:15:21.130 --> 00:15:23.710 whenever there is no clicked element here 278 00:15:23.710 --> 00:15:27.000 then we want to simply return to function right away. 279 00:15:27.000 --> 00:15:29.770 And so then that code here will not be executed 280 00:15:30.760 --> 00:15:34.950 but otherwise, of course it will be executed. 281 00:15:34.950 --> 00:15:36.853 And so that's null see what happens. 282 00:15:39.100 --> 00:15:42.790 So now clicking outside, nothing happens. 283 00:15:42.790 --> 00:15:44.930 Of course, we still get to the null here 284 00:15:44.930 --> 00:15:46.010 but no error occurs 285 00:15:47.610 --> 00:15:51.270 because null JavaScript is no longer trying to execute 286 00:15:51.270 --> 00:15:54.773 this line of code here, okay? 287 00:15:56.710 --> 00:15:58.566 But now let's actually take care 288 00:15:58.566 --> 00:16:03.040 of basically putting all of these other buttons down 289 00:16:03.040 --> 00:16:04.370 as I was saying. 290 00:16:04.370 --> 00:16:06.130 So when I click one of them, 291 00:16:06.130 --> 00:16:08.640 then the other ones show to move down. 292 00:16:08.640 --> 00:16:13.640 So basically we should remove this class from them, right? 293 00:16:13.800 --> 00:16:15.410 And so the solution to that 294 00:16:15.410 --> 00:16:19.020 is before we add this class here to anyone, 295 00:16:19.020 --> 00:16:22.223 we will simply remove it on all of the tabs. 296 00:16:23.290 --> 00:16:25.142 So we removed them on all. 297 00:16:25.142 --> 00:16:27.950 So that's all the tabs.forEach. 298 00:16:32.380 --> 00:16:35.490 And so each tab I'm simply calling T here. 299 00:16:35.490 --> 00:16:40.463 And then tab.clasList.remove. 300 00:16:43.830 --> 00:16:45.503 And so now that should work, 301 00:16:46.610 --> 00:16:50.040 and yeah, it does, okay? 302 00:16:50.040 --> 00:16:53.490 So this is something that we do quite usually. 303 00:16:53.490 --> 00:16:56.950 So basically clearing the class on all of them 304 00:16:56.950 --> 00:17:00.253 and then only add it afterwards on one of them. 305 00:17:01.290 --> 00:17:06.210 So that's at a comment here, active tab. 306 00:17:06.210 --> 00:17:08.950 But now finally let's actually 307 00:17:08.950 --> 00:17:11.380 activate the content area itself 308 00:17:11.380 --> 00:17:12.990 because that's the main part 309 00:17:12.990 --> 00:17:14.690 that we're actually interested in. 310 00:17:19.140 --> 00:17:21.860 Now remember that the information about 311 00:17:21.860 --> 00:17:24.570 which content area should be displayed 312 00:17:24.570 --> 00:17:27.263 is here in this data attribute. 313 00:17:28.240 --> 00:17:29.744 So let me click again. 314 00:17:29.744 --> 00:17:33.590 And so in this case, we want the tab a number two. 315 00:17:33.590 --> 00:17:36.380 And so that's this number two is encoded here 316 00:17:36.380 --> 00:17:39.510 basically in this data attribute. 317 00:17:39.510 --> 00:17:41.060 So having the number two here 318 00:17:41.060 --> 00:17:44.580 means that we want to select the element 319 00:17:45.510 --> 00:17:50.123 which has the class of operations_content_2, okay? 320 00:17:52.670 --> 00:17:55.100 So let's do that. 321 00:17:55.100 --> 00:17:56.823 Let me grab this here. 322 00:17:57.730 --> 00:17:58.803 So the selector, 323 00:18:01.470 --> 00:18:03.670 and then let's select it. 324 00:18:03.670 --> 00:18:05.790 So document.querySelector. 325 00:18:07.260 --> 00:18:09.770 And now I'm using a template string here, 326 00:18:09.770 --> 00:18:12.470 because of course we don't want to hard code 327 00:18:12.470 --> 00:18:13.670 the number two here 328 00:18:13.670 --> 00:18:15.470 but instead we want to get that 329 00:18:15.470 --> 00:18:18.993 exactly from the data attribute that I just told you. 330 00:18:22.050 --> 00:18:24.630 So let me just show that again to you. 331 00:18:24.630 --> 00:18:26.000 Now we got an error here 332 00:18:26.930 --> 00:18:29.003 but just put something there for now. 333 00:18:30.850 --> 00:18:35.030 So it is called data tab, okay. 334 00:18:35.030 --> 00:18:37.410 And so remember all these attributes 335 00:18:37.410 --> 00:18:41.160 are in the element and then in the dataset property. 336 00:18:41.160 --> 00:18:43.180 So the element that was clicked 337 00:18:43.180 --> 00:18:47.713 is indeed stored in or variable clicked, right? 338 00:18:48.740 --> 00:18:50.550 So every time we click a button, 339 00:18:50.550 --> 00:18:53.920 that button is then stored in the clicked variable 340 00:18:53.920 --> 00:18:58.563 and then .data set.tab. 341 00:18:59.850 --> 00:19:02.300 So that's only the part after the data. 342 00:19:02.300 --> 00:19:04.463 Remember, so it's just tab. 343 00:19:05.680 --> 00:19:07.433 So in this case, it's gonna be two. 344 00:19:08.360 --> 00:19:11.920 And so we already have that now selected 345 00:19:11.920 --> 00:19:15.010 and then we want to add a special class to it. 346 00:19:15.010 --> 00:19:17.570 So that's classList.add 347 00:19:18.990 --> 00:19:21.983 and let's just check out the class that we need to add. 348 00:19:23.440 --> 00:19:25.920 So we can see that here on the first content area 349 00:19:25.920 --> 00:19:27.790 which is already active. 350 00:19:27.790 --> 00:19:31.573 And so the class here is operations content active. 351 00:19:33.330 --> 00:19:37.130 Okay, and one more time you can check out the CSS 352 00:19:37.130 --> 00:19:41.173 to figure out why actually this makes the element active. 353 00:19:42.170 --> 00:19:44.313 And we can quickly do that ourselves. 354 00:19:46.700 --> 00:19:51.700 So here it is actually the active, right? 355 00:19:53.500 --> 00:19:55.300 And so basically what this does 356 00:19:55.300 --> 00:19:57.560 is to change the display property 357 00:19:57.560 --> 00:20:00.160 to something which is not none. 358 00:20:00.160 --> 00:20:03.350 So previously without this active part, 359 00:20:03.350 --> 00:20:06.740 so just operation content makes it display none 360 00:20:06.740 --> 00:20:08.500 which basically hides it. 361 00:20:08.500 --> 00:20:12.270 But then as it becomes active, we give it display grid 362 00:20:12.270 --> 00:20:17.203 and then specify all of these properties down, all right? 363 00:20:18.990 --> 00:20:22.350 So this would actually already been working 364 00:20:22.350 --> 00:20:26.870 just to really see it as a bit better in the console also. 365 00:20:26.870 --> 00:20:31.023 Let's lock this value also to the console, okay? 366 00:20:32.530 --> 00:20:33.633 But let's see. 367 00:20:35.260 --> 00:20:38.423 And indeed it now appeared down here. 368 00:20:39.470 --> 00:20:42.390 Great, so it's no longer hidden. 369 00:20:42.390 --> 00:20:46.930 And indeed we successfully read that value here 370 00:20:46.930 --> 00:20:49.520 from the data tab, which is two. 371 00:20:49.520 --> 00:20:52.640 And the same, it's going to happen here for three. 372 00:20:52.640 --> 00:20:55.550 And so you'll see that's the content number three 373 00:20:55.550 --> 00:20:57.900 also appeared down here. 374 00:20:57.900 --> 00:21:00.740 Now of course this is not quite finished yet 375 00:21:00.740 --> 00:21:03.663 because we want the other ones to be hidden. 376 00:21:04.850 --> 00:21:08.110 So that's the whole idea of this component. 377 00:21:08.110 --> 00:21:10.690 And so basically all we need to do 378 00:21:10.690 --> 00:21:13.870 is to do the same that we did for the tabs. 379 00:21:13.870 --> 00:21:17.510 So basically removing the active class for all of them 380 00:21:17.510 --> 00:21:18.880 before then adding it 381 00:21:18.880 --> 00:21:21.820 to the one that we're interested in, all right? 382 00:21:21.820 --> 00:21:23.893 So basically just what we have here. 383 00:21:25.740 --> 00:21:28.860 So let's select all the contents 384 00:21:29.730 --> 00:21:33.320 and that we actually already have here, right? 385 00:21:33.320 --> 00:21:35.860 So tabs content is also a note list 386 00:21:35.860 --> 00:21:37.563 because of query selector all 387 00:21:37.563 --> 00:21:39.850 that we can now loop over 388 00:21:39.850 --> 00:21:43.003 and then remove that active class from all of them. 389 00:21:45.640 --> 00:21:47.020 So tabsContent.forEach 390 00:21:51.180 --> 00:21:53.433 and I'm just calling it C very short here. 391 00:21:54.570 --> 00:21:56.600 So C for content. 392 00:21:56.600 --> 00:21:58.793 So class list remove. 393 00:22:01.420 --> 00:22:04.770 And so you'll see that it's always the same idea. 394 00:22:04.770 --> 00:22:08.260 So it's all about removing and adding classes 395 00:22:08.260 --> 00:22:13.260 to manipulate the page to look just like we want, all right? 396 00:22:13.490 --> 00:22:16.290 So this comment is actually more here. 397 00:22:16.290 --> 00:22:20.030 So activate tab and here 398 00:22:21.920 --> 00:22:26.890 remove the act of classes for both the tab 399 00:22:26.890 --> 00:22:28.403 and the content areas. 400 00:22:29.580 --> 00:22:32.290 And with this actually our component 401 00:22:32.290 --> 00:22:33.590 should already be working. 402 00:22:34.810 --> 00:22:35.703 So let's see. 403 00:22:36.570 --> 00:22:41.230 And yeah, beautiful, it works great, all right. 404 00:22:44.330 --> 00:22:45.610 Let's just get rid 405 00:22:45.610 --> 00:22:48.370 of all these different console.logs here 406 00:22:49.431 --> 00:22:51.553 because we only need them for development, 407 00:22:52.430 --> 00:22:53.593 but now we're done. 408 00:22:54.510 --> 00:22:56.980 So let's just quickly recap. 409 00:22:56.980 --> 00:22:59.430 And as I just mentioned a minute ago 410 00:22:59.430 --> 00:23:02.950 the whole idea when we build components like this 411 00:23:02.950 --> 00:23:05.280 is to just add and remove classes 412 00:23:05.280 --> 00:23:09.410 as necessary to manipulate the content to our needs. 413 00:23:09.410 --> 00:23:11.520 That's actually the exact same thing 414 00:23:11.520 --> 00:23:13.610 we did with a modal window. 415 00:23:13.610 --> 00:23:17.420 So if you take a look at the code, it's a bit similar. 416 00:23:17.420 --> 00:23:20.060 So to hide and display the modal window 417 00:23:20.060 --> 00:23:23.893 all we do is to add and remove this hidden class. 418 00:23:24.860 --> 00:23:27.300 Now, in this case, it's a little bit more complex 419 00:23:27.300 --> 00:23:29.430 but the idea is always the same. 420 00:23:29.430 --> 00:23:31.170 It's to work with classes 421 00:23:31.170 --> 00:23:34.680 that have some styles for showing and hiding the classes. 422 00:23:34.680 --> 00:23:38.010 And so if you're not yet really familiar with CSS, 423 00:23:38.010 --> 00:23:41.290 it's also important that you really check out to CSS 424 00:23:41.290 --> 00:23:43.720 to build these components for yourself 425 00:23:43.720 --> 00:23:46.130 and the same goes for the HTML. 426 00:23:46.130 --> 00:23:49.940 But of course, I could not write this code here as well 427 00:23:49.940 --> 00:23:52.130 because then this tutorial would take 428 00:23:52.130 --> 00:23:55.030 like one hour instead of 15 minutes. 429 00:23:55.030 --> 00:23:58.080 But anyway, I hope that this was fun 430 00:23:58.080 --> 00:24:00.880 and that make sure to understand what we did here 431 00:24:00.880 --> 00:24:03.310 including the HTML and CSS. 432 00:24:03.310 --> 00:24:05.833 And then let's go right to the next video.