WEBVTT 0 00:00.880 --> 00:08.020 Now, when we're writing code for web sites, in order to keep our code tidy and easy to debug, we have to 1 00:08.020 --> 00:13.160 keep in mind the idea of the separation of concerns at all times. 2 00:13.160 --> 00:22.060 And what this means is that your HTML is for content only, and your CSS is there to style 3 00:22.060 --> 00:26.450 your web site, and your Javascript is there for behavior. 4 00:27.860 --> 00:33.740 So we've not been following this rule very closely because we've been trying to change the style of 5 00:33.740 --> 00:35.960 each element using Javascript. 6 00:35.960 --> 00:44.240 We've been writing things like document.querySelector .style.color = “red”, and this is 7 00:44.240 --> 00:51.950 not good practice because we're changing the style of each element using Javascript, whereas ideally 8 00:52.040 --> 00:59.420 all of our styles should actually be inside our CSS. But the problem is that if we wanted our style 9 00:59.420 --> 01:05.210 to change on the fly, say if a user clicks on a button then the color of the background changes, 10 01:05.210 --> 01:10.240 then we kind of need to change that using Javascript and the style property, right? 11 01:10.610 --> 01:15.880 Well, as with all things programming, there's usually another way, and it's usually better. 12 01:15.880 --> 01:17.990 And so this is one of those cases. 13 01:18.020 --> 01:24.860 Now one of the things that we can tap into is something called a class list and it's a property of every 14 01:24.860 --> 01:25.850 DOM object. 15 01:25.850 --> 01:35.810 So, for example, if we query for our button and we tap into its classList property, then you can see that 16 01:35.810 --> 01:42.410 it gives us a list of the classes that are attached to this element that we found. 17 01:42.410 --> 01:49.460 So the element in this case is our button, and you can see that inside the class attribute we've only got 18 01:49.460 --> 01:52.020 a single class, which is btn. 19 01:52.070 --> 02:01.040 Now once we have the list of classes, then we can use methods, for example .add, and we can add classes 20 02:01.130 --> 02:02.480 to the class list. 21 02:02.480 --> 02:10.160 So, for example, if I wanted to add a class, for example invisible, then I can add this new class to the 22 02:10.160 --> 02:14.800 list of classes on our button element in our document. 23 02:15.110 --> 02:22.700 And now, if I hit enter and we check out our button, you can see that it's got the class btn, but it's also 24 02:22.700 --> 02:24.920 got the class invisible. 25 02:24.920 --> 02:32.150 Now what this allows us to do is we can tap into the stylesheet and we can create a separate style for, 26 02:32.150 --> 02:40.010 say, the invisible class, and we can say, maybe, visibility is hidden. 27 02:40.010 --> 02:47.630 So now, if I do the same thing where I add that invisible class to the class list of button, then you 28 02:47.630 --> 02:54.050 can see that as soon as that class is added to our button, the CSS style for invisible gets applied and 29 02:54.050 --> 02:56.060 our button disappears. 30 02:56.060 --> 03:03.260 So this way we can keep all of our styles still inside our style sheet but we can turn it on and off 31 03:03.350 --> 03:04.870 using Javascript. 32 03:04.890 --> 03:11.900 Now, in addition to add, we can also remove. So now, at a different stage, I want my button to reappear. 33 03:12.110 --> 03:19.160 Then I can simply remove that invisible class and all of the styles that are associated with that class gets 34 03:19.160 --> 03:25.100 taken off that button. And the last method that's quite useful is toggle. And toggle simply means that, 35 03:25.550 --> 03:29.360 if the class invisible is already applied then remove it, 36 03:29.360 --> 03:31.760 and if it's not applied then apply it. 37 03:31.760 --> 03:39.400 So now if I just keep using toggle you can see our button comes on and off and on and off. 38 03:39.410 --> 03:43.210 So by doing this we're staying true to the separation of concerns. 39 03:43.430 --> 03:49.310 So that means that when we need to debug our code it's going to be a lot easier this way because if 40 03:49.310 --> 03:54.890 a particular element is not looking the way that we want it to, then we can simply dig into the stylesheet 41 03:54.980 --> 03:55.930 and change it. 42 03:56.150 --> 04:01.280 But if something is not behaving the way that we want it to, then we can go into the Javascript and dig 43 04:01.280 --> 04:02.610 through the code there. 44 04:02.630 --> 04:09.200 Now why don’t you give it a go? Go into Atom, and more specifically the stylesheet, and create a class called 45 04:09.260 --> 04:10.420 huge, 46 04:10.460 --> 04:17.750 and I want you to change the font size in there to 10rem. And when the class huge is applied to any element 47 04:17.900 --> 04:21.670 then it will change the text size to 10rem. 48 04:21.860 --> 04:27.730 And then I want you to go into the Javascript and apply that to our h1 and see how it works. 49 04:27.740 --> 04:30.050 So pause the video now and give that a go. 50 04:31.830 --> 04:32.120 All right. 51 04:32.120 --> 04:34.350 So first let's create our class. 52 04:34.350 --> 04:41.010 We're going to create a class called huge and we're going to change the font size whenever any element 53 04:41.160 --> 04:45.110 gets this class applied to 10rem. 54 04:45.120 --> 04:50.970 And while we're at it, why not just do some other things as well? Let’s change the color to red and change 55 04:50.970 --> 04:54.360 the font weight to bold. 56 04:54.600 --> 05:01.500 And now if we apply this class then all of these styles will be applied to the same element and we can 57 05:01.500 --> 05:05.440 do that using our document.querySelector. 58 05:05.730 --> 05:12.720 And we're going to select our h1, and instead of using .style.color equals red, .style.font-size 59 05:12.720 --> 05:20.730 equals 10rem, then all we need to do is just say .classList.add, and the class we want 60 05:20.730 --> 05:22.830 to add is called huge. 61 05:22.830 --> 05:30.510 And now, if we hit enter, then you can see that our h1 has become 10rem, red and bold, and all 62 05:30.510 --> 05:37.410 of those styles got applied to it just by using a single line of Javascript and keeping our code separated 63 05:37.500 --> 05:42.930 so that our style is still in our stylesheet and our behavior is still in our Javascript. 64 05:42.930 --> 05:48.960 Now in the next lesson we're going to look at not just how we can manipulate styles but we can see how 65 05:48.960 --> 05:53.810 we can manipulate text using elements that we selected in the DOM. 66 05:53.820 --> 05:57.090 So for all of that and more, I’ll see you on the next lesson.