Original subtitles

Let's now actually learn how

to manipulate classes with JavaScript.

But the first thing that we have to do is

to actually react to a click on each of these buttons here.

So right now, of course, nothing happens.

So now we need to attach an event handler

to each of these three buttons.

We finished the last video

by learning how we can do something for all

of these three buttons at the same time.

Right.

So for that, we used a for loop which loops

over this note list,

which is basically an array holding all of the buttons.

And so, this "btnsOpenModal",

at position number "I"

is the current button element in each iteration.

And then from there we simply write

the text content property

just like on any other element.

But now, let's take it one step further

and instead of simply reading the text content property,

we will call the add event listener method,

just like we learned in the last project.

Okay.

So remember, in order to respond to a click event,

we will attach an event handler function to the element.

And event handler and event listener

are pretty much the same thing.

So that's why this method is called "event listener."

So let's say, add event listener,

and then the name of the event.

And that is, once more, the click event.

And then the second argument is the function

which will contain the code that should be executed

once the button is clicked.

So, that will be an anonymous function.

Remember, so a function without a name,

and it is of course also a function expression.

Because it's simply this value here.

So this function value.

So just as I explained multiple times already,

but it's important to keep remembering this stuff

as we go here through this section.

And to start, let's simply log

to the console the text content of the button

that was clicked.

Now here was actually a mistake,

because of course we don't want

to log to the console this event listener.

Right.

It doesn't make any sense.

Instead we now want to log something

to the console right here, inside this handler function.

So that's just "CL" again.

And then let's just say, "Button clicked."

Give it a save.

And now each of these three buttons here

has their own event handler function attached to it.

So, button clicked

and when we click on this one then the same should appear.

And indeed, now we have two.

So that's what this two means.

And as we click here, we get another one,

and another, and another.

And so, yeah, this worked.

So we attached this function here now

to all of the three buttons.

And again, because we did it here in the loop,

while we were looping over this note list,

which contains all of these three buttons.

Okay, but now of course, this is not the only thing

that we want to do.

Instead, we want to display the model.

And remember that this model is already in the HTML.

It is hidden right now because it has the hidden class.

If it didn't have this hidden class, it would be visible.

Let me actually show that.

So I delete it, and if I save it now,

then you see here is the modal.

Right.

Here it is.

And that's because the hidden class is now gone.

Basically this is exactly what we will do using JavaScript.

So, we're moving this class.

So, what we want to do is take the modal.

So this element that we selected here previously.

So we selected it, then stored it into this variable.

And so now we take that selected element

and on there we can read the class list property.

So that's class list.

And then this class list property itself

has a couple of methods.

And the one we're gonna use now is "remove."

And as I just explained, the class

that we're gonna remove is the class called "hidden."

Okay.

And we can actually also remove multiple classes.

For that we just have to pass them in with commas,

like this.

So here we then specify more classes.

Just keep in mind that we do not use the dot here.

So not like this, okay.

And I'm telling you that because I used to do

that mistake myself.

And I remembered that.

And so, I want you to avoid it.

So the dot is only for the selector.

But here we are not anymore selecting anything.

We're just passing in the name of the class.

And so all we need is a string with that name.

Now besides removing classes, we can also add classes

and we can even check

if an element contains a certain class or not.

And we will use all of them in this video and the next one.

Okay.

And this should actually already do the trick.

So when I save this now

and let's click here, and it worked.

Great.

So the hidden class is now gone

and I can show that to you here.

Using the inspect

and then we need to give it some more space back.

And then you see here the modal class

that used to be here is no longer there.

Now we can of course not close it

because that functionality is not yet there.

But at least now it is open.

Now we also have the overlay which is this one,

which also has the hidden class.

In order to show that overlay,

we need to remove the hidden class

from this element as well.

So that's easy enough.

It's just the same thing again.

So overlay dot class list,

dot remove,

and then again, hidden.

All right.

And, yeah.

Beautiful.

That's really nice.

So using classes like this is a really, really great

and handy way of manipulating webpages.

And in practice adding and removing classes,

like we just did here,

is the main way in which we change styles on websites.

That's because a class basically aggregates many styles

in just one class.

Now in this case actually,

the hidden class only contains this one style here.

So this would've been the same

as specifying the display style directly in JavaScript.

So like we learned in the last project.

So we could've done also,

modal, dot style, dot display

and then send it to block,

I guess, what was it?

Yeah, nothing.

So basically display none means that it's not visible.

And if we want it to be visible,

we would set it to display block.

Okay, so this would do the exact same thing.

But you can see that it's a bit more of a pain.

Because then we would have to memorize

what exactly we have to write here.

So these property name and the exact value.

And this is only for one style.

Imagine that the hidden class actually had 10 properties.

Then we would have to write all

of this properties here manually

and change all their values.

So that's a lot of work and it's not fun.

And so instead we can basically aggregate all

of this properties in one class,

that we identify here in CSS,

and then in JavaScript we simply add

and remove these classes as we need

or don't need these styles.

So, usually when you need to manipulate styles on a page,

then always just export the styles into a class,

and then use the class just like we did here.

All right.

Now what we just did here is for showing the modal window.

But now let's also add the ability of then hiding it

by clicking that button.

So, this button here.

Okay.

So right now, as I said,

it's not possible to close the window,

unless we reload the whole page.

So, let's take this button here that we already selected

and simply add an event listener to that one as well.

So, button close modal, dot add event listener.

And again waiting for the click event.

And then let's specify or function here again.

Okay.

So again we are just defining the function here.

We are not calling it itself.

It is the JavaScript engin who will call this function

as soon as the click event happens on exactly this element.

All right.

Anyway, here we now want to do the opposite.

So basically we want to add the class back on.

So modal dot class list, dot add, this time.

And so, we add the hidden class back on.

Which will then hide the modal.

And the same actually for the overlay.

So let's just duplicate this line here.

And change this to overlay

and yeah, this should already work.

So that already worked before,

and now let's check it.

And yes, it does.

And it should work for all the three buttons of course.

And yeah, it does.

Great.

So again, this is a very common thing to do.

We change the appearance of websites

and of elements like this all the time,

using this class technique.

Next up, usually when we click outside of a modal,

then the modal window also closes.

So that's pretty common, right.

So what I mean is, clicking this area here outside,

should also close this window.

So basically we want this in a code here

to also be executed when we click on the modal.

Or actually on the overlay.

So let's do that.

So overlay, dot add,

event listener,

click, and now what should I do?

Well, just to make it work, I can copy this code here.

But you already know that this is not a good idea, probably.

But let's just for now see if it works.

So if we click outside,

so this is the overlay.

So as we click it now, then indeed,

the modal and the overlay are both hidden again.

Great.

So this works now.

But again, we do not want the same code here

in these two places.

We want actually the exact same function to be executed,

no matter if we click the close button

or if we click the overlay.

So, how should we do that?

We can simply export this function

into a more real named function.

So let me cut the code from here

and then I will create a function called, "close modal".

So const, close modal, equals this function value.

Okay.

And so now, this variable here is

what holds the function value.

So what I can do now is to here specify

that close modal function.

And that's it.

That's the function right here.

So this what we have here,

is exactly the same as this.

And again, notice that we are not calling the function.

We are not doing this.

This would not work at all,

because it will immediately called a function,

as soon as JavaScript executes this line.

But that's not what we want to happen.

We want to close modal function to be executed

only as soon as the click event happens

on the close modal button.

And now, here we can just do the same thing.

So again, close modal.

And that's it, that's so much better

than what we had before.

Not only did we make our code more dry.

But we also made it more readable.

More expressive, and more declarative.

So right now, when we read this code here,

it's a lot easier to understand.

So, we just read, button close modal,

add the event listener of close the modal.

Okay, that makes sense.

So, just by looking at this line we see

that when this element is clicked,

then we want to close the modal.

The same when the overlay is clicked,

we want to close the modal.

All right.

And so, we know exactly what's gonna happen

when we read this code.

And so for that advantage alone,

let's do the same thing here with this function.

So the one that opens the modal.

So let me grab this one,

just put him up here.

Can also get rid of this console dot log.

So let's put the two functions here together.

So open modal.

And now this function will be just this.

Right?

So I'll just cut it again.

And paste it here.

And so now we assigned this function here

to this open modal variable.

So once more a nice function expression.

And now we'll just take that

and put it here.

Open modal.

And of course again, we don't call it.

We simply declare or we define it here.

And tell JavaScript, "Hey, whenever a click happens

"on one of these buttons,

"then please call this function

"that we just specified here."

All right.

And so, this is our code.

And it's a lot better.

So actually we just did some refactoring here.

And so, restructuring our code

without changing the functionality.

And so that means that our code should still work the same.

And indeed it does.

We can open and close in two ways

and we can open it on all of the three buttons.

Beautiful.

That's really, really great.

So to recap, if you want to use the same function

in multiple event listeners,

then you need to specify that function

as a separate function, like this one here.

And then you can pass that function

as an argument to multiple "add event listener" methods.

So just like we did it here.

Right.

So that's one of the takeaways of this video.

And the other one is that we really, in practice,

use the functionality

of adding and removing classes all the time

in order to change the appearance of elements on our page.

And that's because classes allow us

to basically aggregate multiple CSS properties in just one,

like a container.

So each class functions a bit like a container

with a lot of properties in it.

And then here, by adding and removing them,

we basically can activate and deactivate certain styles,

all at the same time.

Okay, so keep that in mind.

And even better, actually write notes maybe

with what I'm saying,

because this is really important stuff.

So working with classes is something

that we do all the time.

And there is a third thing that we do with classes,

which is to check if a class is actually present

on a certain element.

And that's gonna be the topic of the next video,

along with a learning how to actually deal

with a key press event.

So that's yet another really exciting video.

So, let's now check that out.