Now, when we're writing code for web sites, in order to keep our code tidy and easy to debug, we have to 1
keep in mind the idea of the separation of concerns at all times. 2
And what this means is that your HTML is for content only, and your CSS is there to style 3
your web site, and your Javascript is there for behavior. 4
So we've not been following this rule very closely because we've been trying to change the style of 5
each element using Javascript. 6
We've been writing things like document.querySelector .style.color = “red”, and this is 7
not good practice because we're changing the style of each element using Javascript, whereas ideally 8
all of our styles should actually be inside our CSS. But the problem is that if we wanted our style 9
to change on the fly, say if a user clicks on a button then the color of the background changes, 10
then we kind of need to change that using Javascript and the style property, right? 11
Well, as with all things programming, there's usually another way, and it's usually better. 12
And so this is one of those cases. 13
Now one of the things that we can tap into is something called a class list and it's a property of every 14
DOM object. 15
So, for example, if we query for our button and we tap into its classList property, then you can see that 16
it gives us a list of the classes that are attached to this element that we found. 17
So the element in this case is our button, and you can see that inside the class attribute we've only got 18
a single class, which is btn. 19
Now once we have the list of classes, then we can use methods, for example .add, and we can add classes 20
to the class list. 21
So, for example, if I wanted to add a class, for example invisible, then I can add this new class to the 22
list of classes on our button element in our document. 23
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
got the class invisible. 25
Now what this allows us to do is we can tap into the stylesheet and we can create a separate style for, 26
say, the invisible class, and we can say, maybe, visibility is hidden. 27
So now, if I do the same thing where I add that invisible class to the class list of button, then you 28
can see that as soon as that class is added to our button, the CSS style for invisible gets applied and 29
our button disappears. 30
So this way we can keep all of our styles still inside our style sheet but we can turn it on and off 31
using Javascript. 32
Now, in addition to add, we can also remove. So now, at a different stage, I want my button to reappear. 33
Then I can simply remove that invisible class and all of the styles that are associated with that class gets 34
taken off that button. And the last method that's quite useful is toggle. And toggle simply means that, 35
if the class invisible is already applied then remove it, 36
and if it's not applied then apply it. 37
So now if I just keep using toggle you can see our button comes on and off and on and off. 38
So by doing this we're staying true to the separation of concerns. 39
So that means that when we need to debug our code it's going to be a lot easier this way because if 40
a particular element is not looking the way that we want it to, then we can simply dig into the stylesheet 41
and change it. 42
But if something is not behaving the way that we want it to, then we can go into the Javascript and dig 43
through the code there. 44
Now why don’t you give it a go? Go into Atom, and more specifically the stylesheet, and create a class called 45
huge, 46
and I want you to change the font size in there to 10rem. And when the class huge is applied to any element 47
then it will change the text size to 10rem. 48
And then I want you to go into the Javascript and apply that to our h1 and see how it works. 49
So pause the video now and give that a go. 50
All right. 51
So first let's create our class. 52
We're going to create a class called huge and we're going to change the font size whenever any element 53
gets this class applied to 10rem. 54
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
the font weight to bold. 56
And now if we apply this class then all of these styles will be applied to the same element and we can 57
do that using our document.querySelector. 58
And we're going to select our h1, and instead of using .style.color equals red, .style.font-size 59
equals 10rem, then all we need to do is just say .classList.add, and the class we want 60
to add is called huge. 61
And now, if we hit enter, then you can see that our h1 has become 10rem, red and bold, and all 62
of those styles got applied to it just by using a single line of Javascript and keeping our code separated 63
so that our style is still in our stylesheet and our behavior is still in our Javascript. 64
Now in the next lesson we're going to look at not just how we can manipulate styles but we can see how 65
we can manipulate text using elements that we selected in the DOM. 66
So for all of that and more, I’ll see you on the next lesson.