All language subtitles for 145 The Separation of Concerns_ Structure vs Style vs Behaviour.en_US

Now, when we're writing code for web sites, in order to keep our code tidy and easy to debug, we have to

keep in mind the idea of the separation of concerns at all times.

And what this means is that your HTML is for content only, and your CSS is there to style

your web site, and your Javascript is there for behavior.

So we've not been following this rule very closely because we've been trying to change the style of

each element using Javascript.

We've been writing things like document.querySelector .style.color = “red”, and this is

not good practice because we're changing the style of each element using Javascript, whereas ideally

all of our styles should actually be inside our CSS. But the problem is that if we wanted our style

to change on the fly, say if a user clicks on a button then the color of the background changes,

then we kind of need to change that using Javascript and the style property, right?

Well, as with all things programming, there's usually another way, and it's usually better.

And so this is one of those cases.

Now one of the things that we can tap into is something called a class list and it's a property of every

DOM object.

So, for example, if we query for our button and we tap into its classList property, then you can see that

it gives us a list of the classes that are attached to this element that we found.

So the element in this case is our button, and you can see that inside the class attribute we've only got

a single class, which is btn.

Now once we have the list of classes, then we can use methods, for example .add, and we can add classes

to the class list.

So, for example, if I wanted to add a class, for example invisible, then I can add this new class to the

list of classes on our button element in our document.

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

got the class invisible.

Now what this allows us to do is we can tap into the stylesheet and we can create a separate style for,

say, the invisible class, and we can say, maybe, visibility is hidden.

So now, if I do the same thing where I add that invisible class to the class list of button, then you

can see that as soon as that class is added to our button, the CSS style for invisible gets applied and

our button disappears.

So this way we can keep all of our styles still inside our style sheet but we can turn it on and off

using Javascript.

Now, in addition to add, we can also remove. So now, at a different stage, I want my button to reappear.

Then I can simply remove that invisible class and all of the styles that are associated with that class gets

taken off that button. And the last method that's quite useful is toggle. And toggle simply means that,

if the class invisible is already applied then remove it,

and if it's not applied then apply it.

So now if I just keep using toggle you can see our button comes on and off and on and off.

So by doing this we're staying true to the separation of concerns.

So that means that when we need to debug our code it's going to be a lot easier this way because if

a particular element is not looking the way that we want it to, then we can simply dig into the stylesheet

and change it.

But if something is not behaving the way that we want it to, then we can go into the Javascript and dig

through the code there.

Now why don’t you give it a go? Go into Atom, and more specifically the stylesheet, and create a class called

huge,

and I want you to change the font size in there to 10rem. And when the class huge is applied to any element

then it will change the text size to 10rem.

And then I want you to go into the Javascript and apply that to our h1 and see how it works.

So pause the video now and give that a go.

All right.

So first let's create our class.

We're going to create a class called huge and we're going to change the font size whenever any element

gets this class applied to 10rem.

And while we're at it, why not just do some other things as well? Let’s change the color to red and change

the font weight to bold.

And now if we apply this class then all of these styles will be applied to the same element and we can

do that using our document.querySelector.

And we're going to select our h1, and instead of using .style.color equals red, .style.font-size

equals 10rem, then all we need to do is just say .classList.add, and the class we want

to add is called huge.

And now, if we hit enter, then you can see that our h1 has become 10rem, red and bold, and all

of those styles got applied to it just by using a single line of Javascript and keeping our code separated

so that our style is still in our stylesheet and our behavior is still in our Javascript.

Now in the next lesson we're going to look at not just how we can manipulate styles but we can see how

we can manipulate text using elements that we selected in the DOM.

So for all of that and more, I’ll see you on the next lesson.