Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,320 --> 00:00:03,500 I promise that we're gonna start working 2 2 00:00:03,500 --> 00:00:05,710 on the project really soon, 3 3 00:00:05,710 --> 00:00:09,150 but for now we need another reference lecture. 4 4 00:00:09,150 --> 00:00:11,590 So here, we're gonna learn about styles, 5 5 00:00:11,590 --> 00:00:13,970 and attributes, and classes, 6 6 00:00:13,970 --> 00:00:15,930 and you will be able to keep all 7 7 00:00:15,930 --> 00:00:19,940 of the relevant tools here in one simple lecture 8 8 00:00:19,940 --> 00:00:23,540 so that you can reference all of them in the future. 9 9 00:00:23,540 --> 00:00:27,370 And some of these tools we will use later in the project, 10 10 00:00:27,370 --> 00:00:29,860 but it's impossible to create examples 11 11 00:00:29,860 --> 00:00:32,240 for all the functions and methods 12 12 00:00:32,240 --> 00:00:33,950 that I'm gonna show you now, 13 13 00:00:33,950 --> 00:00:37,773 but they are still important, so let's go. 14 14 00:00:39,290 --> 00:00:41,100 And let's actually keep working 15 15 00:00:41,100 --> 00:00:46,063 on our cookies message banner here, okay. 16 16 00:00:47,210 --> 00:00:52,210 So we're gonna start by talking about styles 17 17 00:00:52,640 --> 00:00:55,860 and we already said CSS styles before, 18 18 00:00:55,860 --> 00:00:58,160 but there are still some more things to learn. 19 19 00:00:59,420 --> 00:01:02,130 But first let's go back to the basics, 20 20 00:01:02,130 --> 00:01:05,060 so to set a style on an element 21 21 00:01:05,060 --> 00:01:10,060 we get the element.style and then dot the property name 22 22 00:01:11,240 --> 00:01:15,920 and remember this we'll have to use the camelCase version, 23 23 00:01:15,920 --> 00:01:20,920 so backgroundColor, and then a string with the value. 24 24 00:01:21,540 --> 00:01:25,080 So here the color that I want is this one 25 25 00:01:28,190 --> 00:01:30,203 so it's just kind of dark blue. 26 26 00:01:31,100 --> 00:01:34,800 So indeed now the style nicely got applied 27 27 00:01:34,800 --> 00:01:36,560 to our element. 28 28 00:01:36,560 --> 00:01:39,940 And again, we didn't have to select it manually first 29 29 00:01:39,940 --> 00:01:42,520 because we already had it stored here 30 30 00:01:42,520 --> 00:01:45,730 in this message variable, which is this element 31 31 00:01:45,730 --> 00:01:47,193 that we created manually. 32 32 00:01:49,990 --> 00:01:52,400 We can also set the width, dot width, 33 33 00:01:54,800 --> 00:01:58,640 and remember that we have to write the CSS value exactly 34 34 00:01:58,640 --> 00:02:00,607 as we would do in CSS, 35 35 00:02:00,607 --> 00:02:04,320 and so we always have to include the unit. 36 36 00:02:04,320 --> 00:02:06,860 So in this case, I'm gonna set it to 37 37 00:02:06,860 --> 00:02:11,113 a larger percentage so that it occupies this wide gap here, 38 38 00:02:12,470 --> 00:02:15,680 and so now it got a little bit wider, okay. 39 39 00:02:15,680 --> 00:02:20,680 And remember that these styles are actually set 40 40 00:02:21,670 --> 00:02:26,583 as inline styles, so styles set directly here in the DOM. 41 41 00:02:27,840 --> 00:02:32,140 So, here in the style attribute of this element, 42 42 00:02:32,140 --> 00:02:36,330 we now have the background color and the width, okay, 43 43 00:02:36,330 --> 00:02:39,453 and so these again are called inline styles. 44 44 00:02:41,540 --> 00:02:43,810 Now you might think that we are able 45 45 00:02:43,810 --> 00:02:48,810 to also read styles using this, so using the style property, 46 46 00:02:50,810 --> 00:02:52,663 but let's see what's gonna happen, 47 47 00:02:54,140 --> 00:02:59,140 so message.style, and let's say we want to get the height, 48 48 00:03:01,180 --> 00:03:04,840 so let's see what we get and we get, 49 49 00:03:04,840 --> 00:03:06,890 well basically nothing, 50 50 00:03:06,890 --> 00:03:09,480 and that's because using the style property 51 51 00:03:09,480 --> 00:03:13,320 like this here only works for inline styles 52 52 00:03:13,320 --> 00:03:17,890 that we set ourselves also using this style property. 53 53 00:03:17,890 --> 00:03:20,873 So it's gonna work for example, for the background color, 54 54 00:03:22,780 --> 00:03:26,940 so let's copy this one and now here we actually get 55 55 00:03:26,940 --> 00:03:29,080 the background color and again, 56 56 00:03:29,080 --> 00:03:31,270 because it is an inline style, 57 57 00:03:31,270 --> 00:03:34,200 so a style that we set manually ourselves, 58 58 00:03:34,200 --> 00:03:38,560 but we cannot get a style that is hidden inside of a class 59 59 00:03:38,560 --> 00:03:41,220 or maybe that doesn't even exist. 60 60 00:03:41,220 --> 00:03:44,970 So for example here, now let's say we wanted 61 61 00:03:44,970 --> 00:03:46,193 to get the color, 62 62 00:03:48,900 --> 00:03:51,820 so the color is defined in the style sheet, 63 63 00:03:51,820 --> 00:03:56,203 but if we try to log it here, then it's nowhere to be found. 64 64 00:03:57,310 --> 00:04:01,270 Now we can still get the styles if we really want to, 65 65 00:04:01,270 --> 00:04:05,920 all we need to do is to use the getComputedStyle function, 66 66 00:04:05,920 --> 00:04:10,490 so that sounds a bit weird, and this is how it works, 67 67 00:04:10,490 --> 00:04:15,010 so getComputedStyle and VS Code, 68 68 00:04:15,010 --> 00:04:17,930 already suggested here to me, 69 69 00:04:17,930 --> 00:04:21,590 and so here we need to passen the element. 70 70 00:04:21,590 --> 00:04:25,470 So that's message, and now you see, 71 71 00:04:25,470 --> 00:04:30,470 we get this huge object here and so this contains, 72 72 00:04:31,030 --> 00:04:34,460 all of the properties with all of the values, 73 73 00:04:34,460 --> 00:04:37,600 so this is huge and so in practice, 74 74 00:04:37,600 --> 00:04:41,260 what we then do is to simply take a certain property 75 75 00:04:41,260 --> 00:04:42,923 like color from there, 76 76 00:04:44,080 --> 00:04:46,923 and so you'll see this here is the color, 77 77 00:04:48,040 --> 00:04:49,690 or let's say we wanted the height 78 78 00:04:50,540 --> 00:04:54,690 and so this is the computed styles, so you see computed, 79 79 00:04:54,690 --> 00:04:56,940 which means that it's the real style 80 80 00:04:56,940 --> 00:04:59,240 as it appears here on the page. 81 81 00:04:59,240 --> 00:05:03,230 And even if we do not declare it in our CSS, 82 82 00:05:03,230 --> 00:05:06,240 so for example, the height, we didn't define ourselves, 83 83 00:05:06,240 --> 00:05:09,810 but the browser of course needed to calculate the height 84 84 00:05:09,810 --> 00:05:14,230 to display it and so we can then get access to that value, 85 85 00:05:14,230 --> 00:05:18,100 and so you see it's this amount of pixels. 86 86 00:05:18,100 --> 00:05:21,020 So let's now say we wanted to increase the height 87 87 00:05:21,020 --> 00:05:24,560 of this message banner here by 40 pixels, 88 88 00:05:24,560 --> 00:05:26,660 so we could get this height 89 89 00:05:26,660 --> 00:05:28,673 and then simply add 40 to that. 90 90 00:05:30,030 --> 00:05:32,830 So let's create a variable called height, 91 91 00:05:32,830 --> 00:05:34,580 or actually let's do it directly, 92 92 00:05:34,580 --> 00:05:38,413 let's say message.style.height 93 93 00:05:40,120 --> 00:05:43,430 should be equal to getComputerStyle.height 94 94 00:05:49,340 --> 00:05:54,340 plus 40, and then don't forget the unit, so 40 pixels, 95 95 00:05:56,760 --> 00:05:59,360 but now we're gonna run into a problem 96 96 00:05:59,360 --> 00:06:03,513 because as you see this value here itself comes in pixels, 97 97 00:06:04,350 --> 00:06:06,810 so this here is a string, okay, 98 98 00:06:06,810 --> 00:06:09,340 well actually all of this here, 99 99 00:06:09,340 --> 00:06:12,060 which is the same as we had before up here, 100 100 00:06:12,060 --> 00:06:14,490 so the result of this is a string. 101 101 00:06:14,490 --> 00:06:18,270 So here we're trying to add a number to a string, 102 102 00:06:18,270 --> 00:06:20,450 which of course is not gonna work 103 103 00:06:20,450 --> 00:06:23,834 because, well, it has this pixel here. 104 104 00:06:23,834 --> 00:06:26,433 So let me show you that nothing here happened, 105 105 00:06:27,400 --> 00:06:29,220 but remember that we already learned 106 106 00:06:29,220 --> 00:06:32,530 about a nice function which can essentially take 107 107 00:06:32,530 --> 00:06:34,870 the number out of this string, 108 108 00:06:34,870 --> 00:06:37,470 so basically parse the number from here. 109 109 00:06:37,470 --> 00:06:42,470 And that is remember Number.parseInt or parseFloat, 110 110 00:06:44,810 --> 00:06:47,430 in this case it's a floating point number, 111 111 00:06:47,430 --> 00:06:51,573 so let's use parseFloat here actually, of this value, 112 112 00:06:53,610 --> 00:06:57,320 and then we need to specify also the number 10 113 113 00:06:57,320 --> 00:07:00,520 in this function, remember, and so now 114 114 00:07:00,520 --> 00:07:05,350 it actually works all right, so beautiful, 115 115 00:07:05,350 --> 00:07:08,960 it took that number here and only this number part 116 116 00:07:08,960 --> 00:07:13,960 without the pixels, edit 40 and 10, edit the pixel there, 117 117 00:07:15,340 --> 00:07:16,690 so that's a bit too much, 118 118 00:07:16,690 --> 00:07:21,070 so let's leave it like this, okay, beautiful, 119 119 00:07:21,070 --> 00:07:24,783 so this getComputedStyle can become an really handy. 120 120 00:07:25,620 --> 00:07:30,170 But now finally, let's also work with CSS custom properties, 121 121 00:07:30,170 --> 00:07:33,920 which we usually just call CSS variables, 122 122 00:07:33,920 --> 00:07:38,400 so what I mean here is these variables 123 123 00:07:38,400 --> 00:07:41,840 that we have here, so all of these, 124 124 00:07:41,840 --> 00:07:44,720 they are called custom properties, but again, 125 125 00:07:44,720 --> 00:07:46,610 they are more like variables. 126 126 00:07:46,610 --> 00:07:49,120 And the idea of CSS variables 127 127 00:07:49,120 --> 00:07:51,500 is of course very similar to the idea 128 128 00:07:51,500 --> 00:07:54,070 of variables in JavaScript, 129 129 00:07:54,070 --> 00:07:56,770 so this way we can change the value 130 130 00:07:56,770 --> 00:08:00,000 in many places all over our CSS files 131 131 00:08:00,000 --> 00:08:02,293 by simply changing the value here. 132 132 00:08:03,710 --> 00:08:08,120 Now, if we can change the value here, so here in our CSS, 133 133 00:08:08,120 --> 00:08:11,800 then we can also change it right from JavaScript, 134 134 00:08:11,800 --> 00:08:15,740 so let's go back here or actually let's first see 135 135 00:08:15,740 --> 00:08:18,550 where these properties are defined, 136 136 00:08:18,550 --> 00:08:21,780 so they're defined in the document root 137 137 00:08:21,780 --> 00:08:25,960 and so in JavaScript that is equivalent to the document, 138 138 00:08:25,960 --> 00:08:28,213 so basically the document element. 139 139 00:08:30,629 --> 00:08:32,962 So document.documentElement, 140 140 00:08:36,830 --> 00:08:38,430 as we learned in the last video, 141 141 00:08:40,400 --> 00:08:43,690 so that is the route that we just saw in CSS 142 142 00:08:44,640 --> 00:08:49,557 and now again style, but now we can do, setProperty, okay, 143 143 00:08:52,261 --> 00:08:56,270 and then the name of our custom property, 144 144 00:08:56,270 --> 00:08:59,423 so let's say we want to change our primary color, 145 145 00:09:02,721 --> 00:09:06,633 so color-primary and then the value 146 146 00:09:06,633 --> 00:09:10,623 that we want to set it to, let's say orangered, 147 147 00:09:11,660 --> 00:09:14,603 but of course any color value would work here. 148 148 00:09:15,690 --> 00:09:19,410 And so you see that everywhere in our style 149 149 00:09:19,410 --> 00:09:21,033 where we used this color, 150 150 00:09:22,410 --> 00:09:25,950 which has is a nice green color, now turned orange, 151 151 00:09:25,950 --> 00:09:30,950 so here, here, and really all over the place, all right. 152 152 00:09:35,520 --> 00:09:37,860 So with this we can easily change the style 153 153 00:09:37,860 --> 00:09:40,863 of our page, simply by setting one property. 154 154 00:09:43,145 --> 00:09:45,720 So with custom properties, we cannot do it, 155 155 00:09:45,720 --> 00:09:49,720 like this here, but instead we need to use setProperty 156 156 00:09:50,785 --> 00:09:54,870 and then we pass in the name of the property and the value. 157 157 00:09:54,870 --> 00:09:59,000 And by the way, we can do the same for all properties, 158 158 00:09:59,000 --> 00:10:03,320 so we could also use setProperty to set the color, 159 159 00:10:03,320 --> 00:10:05,970 or the background color, or the width, 160 160 00:10:05,970 --> 00:10:08,970 or really whatever we want, okay, 161 161 00:10:08,970 --> 00:10:12,720 but usually it's just easier to simply do it like this, 162 162 00:10:12,720 --> 00:10:15,763 and that's why I always do that. 163 163 00:10:18,040 --> 00:10:19,640 So that's it for styles, 164 164 00:10:19,640 --> 00:10:22,043 let's talk a little bit about attributes now. 165 165 00:10:24,850 --> 00:10:28,410 All right, so in HTML just to remember, 166 166 00:10:28,410 --> 00:10:32,040 all of these are attributes, so this source, alt, 167 167 00:10:32,040 --> 00:10:35,063 even the class, and the ID are simply attributes 168 168 00:10:35,063 --> 00:10:39,000 of this element and so in JavaScript we can 169 169 00:10:39,000 --> 00:10:42,873 of course access and change these different attributes. 170 170 00:10:44,060 --> 00:10:47,653 So let's actually select that logo that I just showed you, 171 171 00:10:52,590 --> 00:10:55,997 and the class of that is nav__logo, 172 172 00:11:00,180 --> 00:11:01,733 so that's two underscores, 173 173 00:11:03,010 --> 00:11:07,000 and so now we can access some of these, 174 174 00:11:07,000 --> 00:11:09,350 let's say default properties, 175 175 00:11:09,350 --> 00:11:12,543 so like the alt or the source attribute. 176 176 00:11:14,290 --> 00:11:17,230 So you see here we get the alternative text, 177 177 00:11:17,230 --> 00:11:21,520 which is this alt and then also this source, 178 178 00:11:21,520 --> 00:11:23,430 now this looks a bit different 179 179 00:11:23,430 --> 00:11:25,030 than the one we have here, 180 180 00:11:25,030 --> 00:11:29,560 but more about that in a second, all right. 181 181 00:11:29,560 --> 00:11:33,070 So this works because on images they are supposed 182 182 00:11:33,070 --> 00:11:36,600 to have the alt, and the source attributes on them 183 183 00:11:36,600 --> 00:11:39,120 and so if we specify them in HTML, 184 184 00:11:39,120 --> 00:11:42,620 then JavaScript will automatically create these properties 185 185 00:11:42,620 --> 00:11:47,470 on the object, but if we add some other property 186 186 00:11:47,470 --> 00:11:49,930 that is not a standard then JavaScript, 187 187 00:11:49,930 --> 00:11:53,950 will not automatically create a property on the object. 188 188 00:11:53,950 --> 00:11:55,510 So let's add for example, 189 189 00:11:55,510 --> 00:11:59,463 designer and set it to Jonas, okay, 190 190 00:12:01,400 --> 00:12:06,400 and so if we now tried to read, logo.designer, 191 191 00:12:07,650 --> 00:12:12,250 that's not going to work, so you see it's undefined 192 192 00:12:12,250 --> 00:12:15,760 and again, that is because this is not a standard property 193 193 00:12:15,760 --> 00:12:18,193 that is expected to be on images. 194 194 00:12:20,130 --> 00:12:23,600 Just another one that works here and that's a bit different 195 195 00:12:23,600 --> 00:12:25,917 than you might expect is className, 196 196 00:12:27,966 --> 00:12:32,335 so the className of this element is just this class. 197 197 00:12:32,335 --> 00:12:36,490 And so you might think that it should be just class, 198 198 00:12:36,490 --> 00:12:37,970 but for historical reasons, 199 199 00:12:37,970 --> 00:12:42,033 it has to be className like this, okay, 200 200 00:12:43,230 --> 00:12:48,143 so this is a non-standard and that's why it doesn't work. 201 201 00:12:49,700 --> 00:12:52,020 At least it doesn't work like this 202 202 00:12:52,020 --> 00:12:53,960 but of course there is another way 203 203 00:12:53,960 --> 00:12:56,293 of reading this value from the DOM, 204 204 00:12:58,490 --> 00:13:01,210 it's just a little bit more difficult, 205 205 00:13:01,210 --> 00:13:05,600 but it's not a problem, so we can use getAttribute, 206 206 00:13:05,600 --> 00:13:08,480 and then here we can pass in the string, 207 207 00:13:08,480 --> 00:13:13,480 designer and that indeed it returns to us Jonas. 208 208 00:13:16,570 --> 00:13:19,760 Now just as we can read these values 209 209 00:13:19,760 --> 00:13:24,170 for these attributes, we can also set them, 210 210 00:13:24,170 --> 00:13:28,940 for example, we can say logo dot the alt text 211 211 00:13:28,940 --> 00:13:33,587 should be Beautiful minimalist logo. 212 212 00:13:37,030 --> 00:13:41,793 And so now let's check that out, 213 213 00:13:42,810 --> 00:13:47,810 and so indeed well, that's actually the hero, (chuckles) 214 214 00:13:48,060 --> 00:13:52,790 so all I want is this, so yeah, 215 215 00:13:52,790 --> 00:13:57,293 it says Beautiful minimalist logo now, alright. 216 216 00:14:03,980 --> 00:14:06,910 Oh, and by the way, there's also the opposite 217 217 00:14:06,910 --> 00:14:10,247 of getAttribute, which is setAttribute, 218 218 00:14:11,640 --> 00:14:15,100 so we can also say for example, 219 219 00:14:15,100 --> 00:14:19,860 company and then set it to Bankist, 220 220 00:14:21,910 --> 00:14:24,210 and so again, if we check it out now, 221 221 00:14:24,210 --> 00:14:25,118 then there should be 222 222 00:14:25,118 --> 00:14:28,413 this new attribute created, right here. 223 223 00:14:30,112 --> 00:14:34,847 Now remember that I told you that the URL here, 224 224 00:14:35,740 --> 00:14:39,760 so basically, actually the source is different 225 225 00:14:39,760 --> 00:14:42,440 than what we have in the HTML, 226 226 00:14:42,440 --> 00:14:44,750 so this URL here of this image 227 227 00:14:44,750 --> 00:14:47,680 is basically the absolute URL, 228 228 00:14:47,680 --> 00:14:51,580 while what I have here, so this one here, 229 229 00:14:51,580 --> 00:14:55,430 is just a relative URL, so relative to the folder 230 230 00:14:55,430 --> 00:14:59,140 in which the index.HTML file is located, 231 231 00:14:59,140 --> 00:15:01,160 so that's completely different 232 232 00:15:01,160 --> 00:15:05,070 and if we want to get just literally this URL 233 233 00:15:05,070 --> 00:15:07,380 that we have here, then we also have 234 234 00:15:07,380 --> 00:15:10,393 to use getAttribute, okay. 235 235 00:15:12,770 --> 00:15:17,193 So getAttribute and then SRC, 236 236 00:15:18,180 --> 00:15:19,880 let me actually put these together 237 237 00:15:20,740 --> 00:15:22,190 so we can see the difference, 238 238 00:15:25,320 --> 00:15:28,433 and of course, I need to lock this to the console as well, 239 239 00:15:33,510 --> 00:15:35,900 and so here you see the absolute version 240 240 00:15:35,900 --> 00:15:37,760 and then here the relative. 241 241 00:15:37,760 --> 00:15:40,530 So sometimes we really need the relative one 242 242 00:15:40,530 --> 00:15:45,477 and then make sure you use this one, so getAttribute, 243 243 00:15:47,040 --> 00:15:49,860 so sometimes that's very important to keep in mind 244 244 00:15:49,860 --> 00:15:52,310 and so that's why I showed it to you here. 245 245 00:15:52,310 --> 00:15:53,860 And the same is actually true 246 246 00:15:53,860 --> 00:15:56,683 for the href attribute on links, 247 247 00:15:57,900 --> 00:16:00,710 so where is the link, 248 248 00:16:00,710 --> 00:16:02,610 I think down here I've a Twitter link, 249 249 00:16:03,710 --> 00:16:08,710 so yeah, that's this one, so let's get this class here. 250 250 00:16:14,343 --> 00:16:18,060 So very quickly just to show you, because on links, 251 251 00:16:18,060 --> 00:16:22,763 this is also sometimes very important, querySelector, 252 252 00:16:25,270 --> 00:16:27,863 so just so you can see what I mean here, 253 253 00:16:28,890 --> 00:16:31,463 so link.href and link.getAttribute 254 254 00:16:39,230 --> 00:16:40,430 and then href again, 255 255 00:16:40,430 --> 00:16:44,403 well in this case they're probably the same anyway, yeah, 256 256 00:16:45,300 --> 00:16:49,010 because both of them were already absolute anyway, 257 257 00:16:49,010 --> 00:16:51,330 so in this case, that is not a big deal. 258 258 00:16:51,330 --> 00:16:54,330 But for example, in one of these links here 259 259 00:16:54,330 --> 00:16:58,700 in the top, there it might be relevant, okay. 260 260 00:16:58,700 --> 00:17:02,140 So let's actually try that, so let's use this one, 261 261 00:17:07,298 --> 00:17:11,123 so the button showModal, so the nav-link button, 262 262 00:17:12,820 --> 00:17:15,423 which here you'll see is simply this hash, 263 263 00:17:17,640 --> 00:17:21,670 so let's put that here, oh, we're missing the dot 264 264 00:17:25,140 --> 00:17:28,590 and now indeed you see that the href property 265 265 00:17:28,590 --> 00:17:31,520 is the absolute URL once again, 266 266 00:17:31,520 --> 00:17:34,550 while you're using getAttribute simply returns 267 267 00:17:34,550 --> 00:17:37,403 the URL as I wrote it in the HTML. 268 268 00:17:39,250 --> 00:17:43,270 Finally, there is also a special type of attributes 269 269 00:17:43,270 --> 00:17:45,033 and that's data attributes. 270 270 00:17:46,320 --> 00:17:48,990 So data, and data attributes 271 271 00:17:52,600 --> 00:17:54,610 are a special kind of attributes 272 272 00:17:54,610 --> 00:17:56,803 that start with the words data. 273 273 00:17:57,640 --> 00:18:01,830 So let's add one here to our image here, 274 274 00:18:01,830 --> 00:18:06,830 and let's say, so data-version-number equals 3.0, 275 275 00:18:13,720 --> 00:18:18,260 so again, it has to start with data, all right, 276 276 00:18:18,260 --> 00:18:20,403 and then dash, and then whatever we want. 277 277 00:18:22,290 --> 00:18:24,190 And what's special about this 278 278 00:18:24,190 --> 00:18:28,897 is that now this attribute is at logo.dataset 279 279 00:18:31,100 --> 00:18:36,100 and then dot versionNumber, and here that's dataset, 280 280 00:18:38,150 --> 00:18:39,783 don't know where that came from. 281 281 00:18:41,546 --> 00:18:43,390 And so here we use camelCase 282 282 00:18:43,390 --> 00:18:46,313 while here we have the dash. 283 283 00:18:48,160 --> 00:18:49,800 So just like property names, 284 284 00:18:49,800 --> 00:18:53,930 we need to transform this here into camelCase, 285 285 00:18:53,930 --> 00:18:55,730 so that's important to keep in mind. 286 286 00:18:58,830 --> 00:19:00,570 So for these special attributes, 287 287 00:19:00,570 --> 00:19:04,240 they are always stored in the dataset object 288 288 00:19:04,240 --> 00:19:07,570 and indeed then down here we have that 3.0 289 289 00:19:08,470 --> 00:19:11,640 so we use actually data attributes quite a lot 290 290 00:19:11,640 --> 00:19:14,220 when we work with the UI and especially 291 291 00:19:14,220 --> 00:19:17,810 when we need to store data in user interface, 292 292 00:19:17,810 --> 00:19:20,430 so basically in the HTML code, 293 293 00:19:20,430 --> 00:19:22,850 and we will see how useful that can be 294 294 00:19:22,850 --> 00:19:24,690 throughout the rest of this project 295 295 00:19:24,690 --> 00:19:26,440 and of the course. 296 296 00:19:26,440 --> 00:19:30,370 Finally to finish this here, just to make it complete, 297 297 00:19:30,370 --> 00:19:34,210 let's talk about classes and even though at this point, 298 298 00:19:34,210 --> 00:19:35,750 we actually already know, 299 299 00:19:35,750 --> 00:19:38,163 all there is to know about classes. 300 300 00:19:39,110 --> 00:19:44,053 So you know that there is logo.classlist.add, 301 301 00:19:45,070 --> 00:19:46,913 and I will not do anything here, 302 302 00:19:48,110 --> 00:19:52,313 so there is add, remove, there is toggle, 303 303 00:19:53,690 --> 00:19:55,173 and there is contains, 304 304 00:19:58,225 --> 00:20:01,840 so these are the four that you really need to know. 305 305 00:20:01,840 --> 00:20:04,270 And here apparently we need to pass in something 306 306 00:20:04,270 --> 00:20:07,970 maybe the empty string works, but I'm not sure, 307 307 00:20:07,970 --> 00:20:09,940 well, apparently it doesn't, 308 308 00:20:09,940 --> 00:20:14,163 let's just write some name here, just c for class, 309 309 00:20:17,490 --> 00:20:21,090 okay, and keep in mind that you can also add 310 310 00:20:21,090 --> 00:20:25,957 multiple classes by passing in multiple values. 311 311 00:20:27,620 --> 00:20:29,410 And of course here I'm just writing, 312 312 00:20:29,410 --> 00:20:33,743 completely fake class names just to make a point, okay. 313 313 00:20:35,790 --> 00:20:38,920 Now, just as we could read the class name here, 314 314 00:20:38,920 --> 00:20:40,830 using the class name property, 315 315 00:20:40,830 --> 00:20:44,330 we could also use that to set a class, 316 316 00:20:44,330 --> 00:20:49,330 so we could do logo.className and I had said that, 317 317 00:20:50,700 --> 00:20:53,123 well let's say to Jonas. 318 318 00:20:55,060 --> 00:20:58,763 However, don't use this, don't use, 319 319 00:21:00,260 --> 00:21:03,640 because this will override all the existing classes 320 320 00:21:03,640 --> 00:21:07,270 and also it allows us to only put one class 321 321 00:21:07,270 --> 00:21:11,700 on any element, all right, so again, only one class 322 322 00:21:11,700 --> 00:21:14,620 and it will override whatever is already there, 323 323 00:21:14,620 --> 00:21:17,510 while these four methods here make it really nice 324 324 00:21:17,510 --> 00:21:20,320 to work with the classes by simply allowing us 325 325 00:21:20,320 --> 00:21:24,070 to add and remove classes based on their names, 326 326 00:21:24,070 --> 00:21:26,120 without interfering with the classes 327 327 00:21:26,120 --> 00:21:27,920 that are already there. 328 328 00:21:27,920 --> 00:21:29,460 Just keep in mind that this one here 329 329 00:21:29,460 --> 00:21:33,900 is really called contains and not includes 330 330 00:21:33,900 --> 00:21:36,520 like it is called in a race. 331 331 00:21:36,520 --> 00:21:39,680 So I hope that this serves as a nice reference 332 332 00:21:39,680 --> 00:21:43,170 for all these different ways of working with classes, 333 333 00:21:43,170 --> 00:21:46,900 attributes, and styles in JavaScript. 334 334 00:21:46,900 --> 00:21:48,550 But now in the next lecture, 335 335 00:21:48,550 --> 00:21:51,733 let's finally start to work on our project here. 30003