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.