WEBVTT 1 00:00:01.320 --> 00:00:03.660 I promise that we're gonna start working on 2 00:00:03.660 --> 00:00:06.600 a project really soon, but for now, 3 00:00:06.600 --> 00:00:09.150 we need another reference lecture. 4 00:00:09.150 --> 00:00:12.570 So here, we're gonna learn about styles and attributes 5 00:00:12.570 --> 00:00:15.720 and classes, and you will be able to keep 6 00:00:15.720 --> 00:00:19.950 all of the relevant tools here in one simple lecture 7 00:00:19.950 --> 00:00:23.550 so that you can reference all of them in the future. 8 00:00:23.550 --> 00:00:27.360 And some of these tools we will use later in a project, 9 00:00:27.360 --> 00:00:31.170 but it's impossible to create examples for all the functions 10 00:00:31.170 --> 00:00:33.930 and methods that I'm gonna show you now, 11 00:00:33.930 --> 00:00:36.210 but they are still important. 12 00:00:36.210 --> 00:00:37.773 So let's go. 13 00:00:39.270 --> 00:00:41.370 And let's actually keep working on 14 00:00:41.370 --> 00:00:45.330 our cookies message banner here. 15 00:00:45.330 --> 00:00:46.163 Okay. 16 00:00:47.190 --> 00:00:52.190 So we're gonna start by talking about styles. 17 00:00:52.650 --> 00:00:55.860 And we already set CSS styles before, 18 00:00:55.860 --> 00:00:58.160 but there are still some more things to learn. 19 00:00:59.430 --> 00:01:02.130 But first, let's go back to the basics. 20 00:01:02.130 --> 00:01:05.040 So to set a style on an element, 21 00:01:05.040 --> 00:01:08.430 we get the element, .style, 22 00:01:08.430 --> 00:01:10.353 and then dot the property name. 23 00:01:11.220 --> 00:01:15.900 And remember, this will have to use the camel case version. 24 00:01:15.900 --> 00:01:20.900 So backgroundColor, and then a string with the value. 25 00:01:21.540 --> 00:01:25.173 And so here the color that I want is this one. 26 00:01:28.200 --> 00:01:30.213 So it's this kind of dark blue. 27 00:01:31.080 --> 00:01:36.080 So indeed, now this style nicely got applied to our element. 28 00:01:36.570 --> 00:01:39.960 And again, we didn't have to select it manually first 29 00:01:39.960 --> 00:01:42.540 because we already had it stored here 30 00:01:42.540 --> 00:01:45.513 in this message variable, which is this element 31 00:01:45.513 --> 00:01:48.153 that we created manually, right? 32 00:01:50.261 --> 00:01:52.150 We can also set the width, .width, 33 00:01:54.780 --> 00:01:57.540 and remember that we have to write the CSS value 34 00:01:57.540 --> 00:02:00.780 exactly as we would do in CSS. 35 00:02:00.780 --> 00:02:04.320 And so we always have to include the unit. 36 00:02:04.320 --> 00:02:08.400 So in this case, I'm gonna set it to a larger percentage 37 00:02:08.400 --> 00:02:11.103 so that it occupies this wide gap here. 38 00:02:12.480 --> 00:02:15.150 And so now it got a little bit wider. 39 00:02:15.150 --> 00:02:15.983 Okay. 40 00:02:15.983 --> 00:02:20.520 And remember that these styles 41 00:02:20.520 --> 00:02:23.400 are actually set as inline styles. 42 00:02:23.400 --> 00:02:26.583 So styles set directly here in the DOM. 43 00:02:29.430 --> 00:02:32.130 So here in the style attribute of this element, 44 00:02:32.130 --> 00:02:35.490 we now have the background color and the width. 45 00:02:35.490 --> 00:02:36.330 Okay? 46 00:02:36.330 --> 00:02:39.453 And so these again are called inline styles. 47 00:02:41.550 --> 00:02:43.830 Now you might think that we are able 48 00:02:43.830 --> 00:02:47.163 to also read styles using this, 49 00:02:48.630 --> 00:02:50.790 so using the style property, 50 00:02:50.790 --> 00:02:52.683 but let's see what's gonna happen. 51 00:02:54.120 --> 00:02:59.120 So message.style, and let's say we want to get the height. 52 00:03:01.170 --> 00:03:02.643 So let's see what we get. 53 00:03:03.540 --> 00:03:06.900 And we get, well, basically nothing. 54 00:03:06.900 --> 00:03:11.070 And that's because using the style property like this here 55 00:03:11.070 --> 00:03:15.840 only works for inline styles that we set ourselves 56 00:03:15.840 --> 00:03:17.880 also using the style property. 57 00:03:17.880 --> 00:03:20.883 So it's gonna work, for example, for the background color. 58 00:03:22.770 --> 00:03:24.390 So let's copy this one. 59 00:03:24.390 --> 00:03:28.560 And now here you actually get the background color. 60 00:03:28.560 --> 00:03:31.260 And again, because it is an inline style, 61 00:03:31.260 --> 00:03:34.200 so a style that we set manually ourselves, 62 00:03:34.200 --> 00:03:38.550 but we cannot get a style that is hidden inside of a class 63 00:03:38.550 --> 00:03:41.220 or maybe that doesn't even exist. 64 00:03:41.220 --> 00:03:44.220 So for example, here, yeah, 65 00:03:44.220 --> 00:03:46.203 let's say we wanted to get the color. 66 00:03:48.900 --> 00:03:51.810 So the color is defined in the style sheet, 67 00:03:51.810 --> 00:03:56.193 but if we try to log it here, then it's nowhere to be found. 68 00:03:57.300 --> 00:04:01.260 Now we can still get the styles if we really want to. 69 00:04:01.260 --> 00:04:05.910 All we need to do is to use the getComputedStyle function. 70 00:04:05.910 --> 00:04:10.500 So that sounds a bit weird and this is how it works. 71 00:04:10.500 --> 00:04:15.000 So getComputedStyle and VS Code 72 00:04:15.000 --> 00:04:17.940 already suggested here to me. 73 00:04:17.940 --> 00:04:21.570 And so here we need to pass in the element. 74 00:04:21.570 --> 00:04:22.893 So that's message. 75 00:04:24.060 --> 00:04:29.060 And now you see we get this huge object here. 76 00:04:29.910 --> 00:04:32.550 And so this contains all of the properties 77 00:04:32.550 --> 00:04:34.470 with all of the values. 78 00:04:34.470 --> 00:04:36.150 So this is huge. 79 00:04:36.150 --> 00:04:39.450 And so in practice, what we then do is to simply 80 00:04:39.450 --> 00:04:42.933 take a certain property like color from there. 81 00:04:44.070 --> 00:04:46.923 And so you see this here is the color. 82 00:04:48.030 --> 00:04:50.550 Or let's say we wanted the height. 83 00:04:50.550 --> 00:04:53.040 And so this is the computed styles. 84 00:04:53.040 --> 00:04:56.940 So you see, computed, which means that it's the real style 85 00:04:56.940 --> 00:04:59.220 as it appears here on the page. 86 00:04:59.220 --> 00:05:03.210 And even if we do not declare it in our CSS. 87 00:05:03.210 --> 00:05:06.240 So for example, the height, we didn't define ourselves, 88 00:05:06.240 --> 00:05:08.370 but the browser of course needed 89 00:05:08.370 --> 00:05:11.130 to calculate the height to display it. 90 00:05:11.130 --> 00:05:14.250 And so we can then get access to that value. 91 00:05:14.250 --> 00:05:18.090 And so you see it's this amount of pixels. 92 00:05:18.090 --> 00:05:21.030 So let's now say we wanted to increase the height 93 00:05:21.030 --> 00:05:24.570 of this message banner here by 40 pixels. 94 00:05:24.570 --> 00:05:28.833 So we could get this height and then simply add 40 to that. 95 00:05:30.030 --> 00:05:32.850 So let's create a variable called height, 96 00:05:32.850 --> 00:05:34.590 or actually let's do it directly. 97 00:05:34.590 --> 00:05:38.423 Let's say message.style.height 98 00:05:40.140 --> 00:05:44.357 should be equal to getComputedStyle.height + 40, 99 00:05:51.780 --> 00:05:53.703 and then don't forget the unit. 100 00:05:54.690 --> 00:05:56.760 So 40 pixels. 101 00:05:56.760 --> 00:05:59.370 But now we're gonna run into a problem 102 00:05:59.370 --> 00:06:03.513 because as you see, this value here itself comes in pixels. 103 00:06:04.350 --> 00:06:07.470 So this here is a string, okay? 104 00:06:07.470 --> 00:06:09.330 Or actually all of this here, 105 00:06:09.330 --> 00:06:12.060 which is the same as we had before up here. 106 00:06:12.060 --> 00:06:14.490 So the result of this is a string. 107 00:06:14.490 --> 00:06:18.270 So here, we're trying to add a number to a string, 108 00:06:18.270 --> 00:06:20.460 which of course is not gonna work 109 00:06:20.460 --> 00:06:23.850 because, well, it has this pixel here. 110 00:06:23.850 --> 00:06:26.433 Let me show you that nothing here happened. 111 00:06:27.390 --> 00:06:30.720 But remember that we already learned about a nice function 112 00:06:30.720 --> 00:06:34.860 which can essentially take the number out of this string. 113 00:06:34.860 --> 00:06:37.470 So basically parse the number from here, 114 00:06:37.470 --> 00:06:42.470 and that is, remember, Number.parseInt or parseFloat. 115 00:06:44.690 --> 00:06:47.430 In this case, it's a floating point number. 116 00:06:47.430 --> 00:06:51.510 So let's use parseFloat here actually of this value. 117 00:06:53.640 --> 00:06:57.300 And then we need to specify also the number 10 118 00:06:57.300 --> 00:06:59.310 in this function, remember? 119 00:06:59.310 --> 00:07:03.780 And so now it actually works, all right? 120 00:07:03.780 --> 00:07:05.340 So, beautiful. 121 00:07:05.340 --> 00:07:08.970 It took that number here and only this number part 122 00:07:08.970 --> 00:07:11.580 without the pixels, added 40, 123 00:07:11.580 --> 00:07:14.493 and then added the pixel there. 124 00:07:15.330 --> 00:07:16.680 So that's a bit too much. 125 00:07:16.680 --> 00:07:18.990 So let's leave it like this. 126 00:07:18.990 --> 00:07:21.060 Okay, beautiful. 127 00:07:21.060 --> 00:07:24.783 So this getComputedStyle can become in really handy. 128 00:07:25.620 --> 00:07:30.150 But now finally, let's also work with CSS custom properties, 129 00:07:30.150 --> 00:07:33.930 which we usually just call CSS variables. 130 00:07:33.930 --> 00:07:38.930 So what I mean here is these variables that we have here. 131 00:07:40.170 --> 00:07:41.850 So all of these. 132 00:07:41.850 --> 00:07:44.130 They're called custom properties, 133 00:07:44.130 --> 00:07:46.620 but again, they're more like variables. 134 00:07:46.620 --> 00:07:50.640 And the idea of CSS variables is of course very similar 135 00:07:50.640 --> 00:07:54.060 to the idea of variables in JavaScript. 136 00:07:54.060 --> 00:07:57.780 So this way, we can change the value in many places 137 00:07:57.780 --> 00:08:02.313 all over our CSS files by simply changing the value here. 138 00:08:03.690 --> 00:08:08.100 Now, if we can change the value here, so here in our CSS, 139 00:08:08.100 --> 00:08:11.790 then we can also change it right from JavaScript. 140 00:08:11.790 --> 00:08:15.750 So let's go back here, or actually let's first see 141 00:08:15.750 --> 00:08:18.540 where these properties are defined. 142 00:08:18.540 --> 00:08:21.780 So they're defined in the document route. 143 00:08:21.780 --> 00:08:25.950 And so in JavaScript that is equivalent to the document. 144 00:08:25.950 --> 00:08:29.040 So basically the document element. 145 00:08:29.040 --> 00:08:30.510 All right. 146 00:08:30.510 --> 00:08:34.733 So Document.documentElement 147 00:08:36.810 --> 00:08:40.380 as we learned in the last video, okay? 148 00:08:40.380 --> 00:08:43.690 So that is the route that we just saw in CSS 149 00:08:44.640 --> 00:08:46.680 and now again style. 150 00:08:46.680 --> 00:08:49.283 But now we can do setProperty, okay? 151 00:08:52.230 --> 00:08:55.173 And then the name of our custom property. 152 00:08:56.250 --> 00:08:59.433 So let's say we want to change our primary color. 153 00:09:02.580 --> 00:09:06.750 so color-primary, and then the value 154 00:09:06.750 --> 00:09:08.940 that we want to set it to. 155 00:09:08.940 --> 00:09:10.383 Let's say orangered. 156 00:09:11.670 --> 00:09:14.613 But of course any color value would work here. 157 00:09:15.540 --> 00:09:19.410 And so you see that everywhere in our style 158 00:09:19.410 --> 00:09:24.120 where we used this color, which is a nice green color, 159 00:09:24.120 --> 00:09:25.950 now turned orange. 160 00:09:25.950 --> 00:09:30.063 So here, here, and really all over the place. 161 00:09:31.830 --> 00:09:32.663 All right. 162 00:09:35.520 --> 00:09:39.000 So with this, we can easily change the style of our page 163 00:09:39.000 --> 00:09:40.863 simply by setting one property. 164 00:09:41.790 --> 00:09:43.020 All right. 165 00:09:43.020 --> 00:09:47.130 So with custom properties, we cannot do it like this here, 166 00:09:47.130 --> 00:09:49.390 but instead we need to use setProperty 167 00:09:50.827 --> 00:09:54.870 and then we pass in the name of the property and the value. 168 00:09:54.870 --> 00:09:59.010 And by the way, we can do the same for all properties. 169 00:09:59.010 --> 00:10:03.300 So we could also use setProperty to set the color 170 00:10:03.300 --> 00:10:05.970 or the background color or the width 171 00:10:05.970 --> 00:10:08.970 or really whatever we want, okay? 172 00:10:08.970 --> 00:10:12.873 But usually it's just easier to simply do it like this. 173 00:10:13.831 --> 00:10:15.783 And that's why I always do that. 174 00:10:17.100 --> 00:10:19.620 Okay, so that's it for styles. 175 00:10:19.620 --> 00:10:22.053 Let's talk a little bit about attributes now. 176 00:10:24.840 --> 00:10:28.380 All right, so in HTML, just to remember, 177 00:10:28.380 --> 00:10:30.390 all of these are attributes. 178 00:10:30.390 --> 00:10:33.840 So this source, alt, even the class and the id 179 00:10:33.840 --> 00:10:36.720 are simply attributes of this element. 180 00:10:36.720 --> 00:10:40.170 And so in JavaScript, we can of course access 181 00:10:40.170 --> 00:10:42.873 and change these different attributes. 182 00:10:44.070 --> 00:10:47.673 So let's actually select that logo that I just showed you. 183 00:10:52.590 --> 00:10:56.007 And the class of that is nav__logo. 184 00:11:00.180 --> 00:11:01.743 So that's two underscores. 185 00:11:03.000 --> 00:11:06.810 And so now we can access some of these, 186 00:11:06.810 --> 00:11:09.360 let's say default properties. 187 00:11:09.360 --> 00:11:12.543 So like the alt or the source attribute. 188 00:11:14.280 --> 00:11:17.250 So you see here we get the alternative text, 189 00:11:17.250 --> 00:11:21.510 which is this alt and then also this source. 190 00:11:21.510 --> 00:11:25.020 Now this looks a bit different than the one we have here, 191 00:11:25.020 --> 00:11:27.363 but more about that in a second. 192 00:11:28.440 --> 00:11:32.340 All right, so this works because on images, 193 00:11:32.340 --> 00:11:34.200 they are supposed to have the alt 194 00:11:34.200 --> 00:11:36.600 and the source attributes on them. 195 00:11:36.600 --> 00:11:39.120 And so if we specify them in HTML, 196 00:11:39.120 --> 00:11:41.340 then JavaScript will automatically create 197 00:11:41.340 --> 00:11:45.390 these properties on the object, okay? 198 00:11:45.390 --> 00:11:49.050 But if we add some other property that is not a standard, 199 00:11:49.050 --> 00:11:51.630 then JavaScript will not automatically create 200 00:11:51.630 --> 00:11:53.940 a property on the object. 201 00:11:53.940 --> 00:11:58.940 So let's add, for example, designer and set it to Jonas. 202 00:12:00.613 --> 00:12:01.446 Okay. 203 00:12:01.446 --> 00:12:06.380 And so if we now try to read logo.designer, 204 00:12:07.650 --> 00:12:09.900 that's not going to work. 205 00:12:09.900 --> 00:12:12.270 So you see it's undefined. 206 00:12:12.270 --> 00:12:15.750 And again that is because this is not a standard property 207 00:12:15.750 --> 00:12:18.870 that is expected to be on images. 208 00:12:18.870 --> 00:12:20.130 All right. 209 00:12:20.130 --> 00:12:22.530 Just another one that works here 210 00:12:22.530 --> 00:12:25.140 and that's a bit different than you might expect 211 00:12:25.140 --> 00:12:26.703 is class name. 212 00:12:28.020 --> 00:12:32.430 So the class name of this element is just this class. 213 00:12:32.430 --> 00:12:36.510 And so you might think that it should be just class, 214 00:12:36.510 --> 00:12:37.950 but for historical reasons, 215 00:12:37.950 --> 00:12:42.033 it has to be class name, like this, okay? 216 00:12:43.230 --> 00:12:46.080 So this is a non-standard 217 00:12:46.080 --> 00:12:49.560 and that's why it doesn't work, okay? 218 00:12:49.560 --> 00:12:52.020 At least it doesn't work like this. 219 00:12:52.020 --> 00:12:53.970 But of course there is another way 220 00:12:53.970 --> 00:12:56.313 of reading this value from the DOM. 221 00:12:58.470 --> 00:13:01.200 It's just a little bit more difficult, 222 00:13:01.200 --> 00:13:03.630 but it's not a problem. 223 00:13:03.630 --> 00:13:05.580 So we can use getAttribute, 224 00:13:05.580 --> 00:13:09.340 and then here we can pass in the string designer 225 00:13:10.200 --> 00:13:14.163 and that indeed it returns to us Jonas. 226 00:13:15.090 --> 00:13:16.590 All right. 227 00:13:16.590 --> 00:13:21.590 Now, just as we can read these values for these attributes, 228 00:13:22.080 --> 00:13:24.150 we can also set them. 229 00:13:24.150 --> 00:13:28.950 For example, we can say logo dot the alt text 230 00:13:28.950 --> 00:13:33.587 should be beautiful minimalist logo. 231 00:13:37.020 --> 00:13:41.793 And so now let's check that out. 232 00:13:42.780 --> 00:13:47.223 And so indeed that is the, well, that's actually the hero. 233 00:13:48.060 --> 00:13:49.443 So what I want is this. 234 00:13:51.420 --> 00:13:55.323 So yeah, it says beautiful minimalist logo now. 235 00:13:56.640 --> 00:13:57.473 All right. 236 00:14:03.990 --> 00:14:06.900 Oh, and by the way, there's also the opposite 237 00:14:06.900 --> 00:14:10.237 of getAttribute, which is setAttribute. 238 00:14:11.640 --> 00:14:15.963 So we can also say, for example, company, 239 00:14:17.640 --> 00:14:20.703 and then set it to Bankist. 240 00:14:21.900 --> 00:14:24.210 And so again, if we check it out now, 241 00:14:24.210 --> 00:14:29.010 then there should be this new attribute created right here. 242 00:14:29.010 --> 00:14:30.090 All right. 243 00:14:30.090 --> 00:14:35.090 Now remember that I told you that the URL here, 244 00:14:35.730 --> 00:14:39.600 so basically actually the source is different 245 00:14:39.600 --> 00:14:42.420 than what we have in the HTML. 246 00:14:42.420 --> 00:14:44.760 So this URL here of this image 247 00:14:44.760 --> 00:14:47.670 is basically the absolute URL. 248 00:14:47.670 --> 00:14:49.563 While what I have here, 249 00:14:50.460 --> 00:14:53.760 so this one here is just the relative URL. 250 00:14:53.760 --> 00:14:55.890 So relative to the folder in which 251 00:14:55.890 --> 00:14:59.160 the index.html file is located. 252 00:14:59.160 --> 00:15:01.140 So that's completely different. 253 00:15:01.140 --> 00:15:05.010 And if we want to get just literally this URL 254 00:15:05.010 --> 00:15:07.380 that we have here, then we also have 255 00:15:07.380 --> 00:15:09.143 to use a getAttribute, okay? 256 00:15:12.750 --> 00:15:17.223 So getAttribute and then src. 257 00:15:18.180 --> 00:15:19.880 Let me actually put these together 258 00:15:20.730 --> 00:15:22.180 so we can see the difference. 259 00:15:25.320 --> 00:15:28.443 And of course I need to lock this to the console as well. 260 00:15:32.670 --> 00:15:35.880 Okay, and so here you see the absolute version 261 00:15:35.880 --> 00:15:37.740 and then here the relative. 262 00:15:37.740 --> 00:15:40.530 So sometimes, we really need the relative one 263 00:15:40.530 --> 00:15:44.010 and then make sure you use this one. 264 00:15:44.010 --> 00:15:44.843 So getAttribute. 265 00:15:45.990 --> 00:15:47.010 All right. 266 00:15:47.010 --> 00:15:49.860 So sometimes that's very important to keep in mind 267 00:15:49.860 --> 00:15:52.320 and so that's why I showed it to you here. 268 00:15:52.320 --> 00:15:53.850 And the same is actually true 269 00:15:53.850 --> 00:15:56.703 for the href attribute on links. 270 00:15:57.900 --> 00:16:00.720 So where is the link? 271 00:16:00.720 --> 00:16:02.720 I think down here I have a Twitter link. 272 00:16:03.720 --> 00:16:06.093 So yeah, that's this one. 273 00:16:08.160 --> 00:16:11.703 So let's get this class here. 274 00:16:14.310 --> 00:16:16.170 So very quickly, just to show you, 275 00:16:16.170 --> 00:16:20.193 because on links, this is also sometimes very important. 276 00:16:21.390 --> 00:16:23.043 querySelector. 277 00:16:25.290 --> 00:16:27.873 So just so you can see what I mean here. 278 00:16:28.890 --> 00:16:31.957 So link.href and link.getAttribute, 279 00:16:39.210 --> 00:16:40.980 and then href again. 280 00:16:40.980 --> 00:16:43.830 While in this case, they're probably the same anyway. 281 00:16:43.830 --> 00:16:48.830 Yeah, because both of them were already absolute anyway. 282 00:16:49.020 --> 00:16:51.330 So in this case, that is not a big deal, 283 00:16:51.330 --> 00:16:55.470 but for example, in one of these links here in the top, 284 00:16:55.470 --> 00:16:57.690 there it might be relevant. 285 00:16:57.690 --> 00:17:00.243 Okay, so let's actually try that. 286 00:17:03.330 --> 00:17:07.140 So yeah, let's use this one. 287 00:17:07.140 --> 00:17:09.240 So the button show model. 288 00:17:09.240 --> 00:17:12.810 So the nav link button, 289 00:17:12.810 --> 00:17:15.423 which here you see is simply this hash. 290 00:17:17.640 --> 00:17:19.503 So let's put that here. 291 00:17:22.500 --> 00:17:23.800 Oh, we're missing the dot. 292 00:17:25.140 --> 00:17:26.487 And now indeed you see that 293 00:17:26.487 --> 00:17:31.487 the href property is the absolute URL once again, 294 00:17:31.500 --> 00:17:35.490 while using getAttribute simply returns the URL 295 00:17:35.490 --> 00:17:38.343 as I wrote it in the HTML, okay? 296 00:17:39.270 --> 00:17:41.940 Finally, there is also a special type 297 00:17:41.940 --> 00:17:45.033 of attributes and that's data attributes. 298 00:17:46.320 --> 00:17:47.313 So data. 299 00:17:51.330 --> 00:17:54.600 And data attributes are a special kind of attributes 300 00:17:54.600 --> 00:17:56.793 that start with the words data. 301 00:17:57.630 --> 00:18:01.860 So let's add one here to our image here. 302 00:18:01.860 --> 00:18:06.860 And let's say, so data-version-number="3.0" okay? 303 00:18:13.710 --> 00:18:18.240 So again, it has to start with data, all right, 304 00:18:18.240 --> 00:18:22.290 and then dash and then whatever we want, okay? 305 00:18:22.290 --> 00:18:25.440 And what's special about this is that now 306 00:18:25.440 --> 00:18:29.380 this attribute is at logo.dataset 307 00:18:31.080 --> 00:18:32.783 and then .versionNumber. 308 00:18:35.637 --> 00:18:38.130 And here, that's dataset. 309 00:18:38.130 --> 00:18:40.440 Don't know where that came from. 310 00:18:40.440 --> 00:18:41.400 Okay. 311 00:18:41.400 --> 00:18:46.323 And so here we use camel case where here we have the dash. 312 00:18:47.340 --> 00:18:49.800 Okay, so just like property names, 313 00:18:49.800 --> 00:18:53.940 we need to transform this here into camel case. 314 00:18:53.940 --> 00:18:57.753 So that's important to keep in mind, okay? 315 00:18:58.830 --> 00:19:00.540 So for these special attributes, 316 00:19:00.540 --> 00:19:04.230 they are always stored in the dataset object. 317 00:19:04.230 --> 00:19:08.460 And indeed then down here we have that 3.0. 318 00:19:08.460 --> 00:19:11.640 So we use actually data attributes quite a lot 319 00:19:11.640 --> 00:19:14.760 when we work with the UI, especially when we need 320 00:19:14.760 --> 00:19:17.820 to store data in the user interface. 321 00:19:17.820 --> 00:19:20.430 So basically in the HTML code. 322 00:19:20.430 --> 00:19:22.860 And we will see how useful that can be 323 00:19:22.860 --> 00:19:26.460 throughout the rest of this project and of the course. 324 00:19:26.460 --> 00:19:30.240 Finally, to finish this here, just to make it complete, 325 00:19:30.240 --> 00:19:32.580 let's talk about classes. 326 00:19:32.580 --> 00:19:35.760 And even though at this point we actually already know 327 00:19:35.760 --> 00:19:38.163 all there is to know about classes. 328 00:19:39.120 --> 00:19:44.120 So you know that there is logo.classList.add, 329 00:19:45.060 --> 00:19:46.923 and I will not do anything here. 330 00:19:48.120 --> 00:19:52.293 So there is add, remove, there is toggle, 331 00:19:53.670 --> 00:19:55.203 and there is contains. 332 00:19:57.420 --> 00:19:58.253 Okay. 333 00:19:58.253 --> 00:20:00.753 So these are the four that you really need to know. 334 00:20:01.830 --> 00:20:04.260 And here apparently we need to pass in something. 335 00:20:04.260 --> 00:20:07.980 Maybe the empty string works, but I'm not sure. 336 00:20:07.980 --> 00:20:09.930 Well apparently it doesn't. 337 00:20:09.930 --> 00:20:14.163 Let's just write some name here, just c for class. 338 00:20:17.310 --> 00:20:18.870 Okay. 339 00:20:18.870 --> 00:20:22.390 And keep in mind that you can also add multiple classes 340 00:20:23.400 --> 00:20:26.583 by passing in multiple values. 341 00:20:27.600 --> 00:20:29.430 And of course here I'm just writing 342 00:20:29.430 --> 00:20:33.243 completely fake class names just to make a point. 343 00:20:34.830 --> 00:20:35.790 Okay. 344 00:20:35.790 --> 00:20:38.910 Now just as we could read the class name here, 345 00:20:38.910 --> 00:20:40.830 using the className property, 346 00:20:40.830 --> 00:20:44.310 we could also use that to set a class. 347 00:20:44.310 --> 00:20:48.220 So we could do logo.className 348 00:20:49.890 --> 00:20:54.890 and then set that, well, let's say to jonas, okay? 349 00:20:55.050 --> 00:20:57.870 However, don't use this. 350 00:20:57.870 --> 00:21:01.740 Don't use, okay, because this will override 351 00:21:01.740 --> 00:21:05.220 all the existing classes while these four methods here 352 00:21:05.220 --> 00:21:08.190 make it really nice to work with the classes 353 00:21:08.190 --> 00:21:11.670 by simply allowing us to add and remove classes 354 00:21:11.670 --> 00:21:14.070 based on their names without interfering 355 00:21:14.070 --> 00:21:16.890 with the classes that are already there. 356 00:21:16.890 --> 00:21:19.440 Just keep in mind that this one here is really called 357 00:21:19.440 --> 00:21:24.440 contains and not includes like it is called in arrays. 358 00:21:25.530 --> 00:21:28.680 So I hope that this serves as a nice reference 359 00:21:28.680 --> 00:21:32.160 for all these different ways of working with classes, 360 00:21:32.160 --> 00:21:35.880 attributes, and styles in JavaScript. 361 00:21:35.880 --> 00:21:38.910 But now in the next lecture, let's finally start 362 00:21:38.910 --> 00:21:40.713 to work on our project here.