Let's now learn how to handle
the Key Press events.
So right now we can already close the modal
by clicking the close button
and by clicking outside of the model.
But usually there is also a third way
and that's by hitting the escape key on the keyboard.
Right?
And so this is actually a great use case
to learn how to respond to keyboard events.
So in order to listen for keyboard events,
we still need to use add event listener.
Because the key press event is simply just
another type of event.
Now, keyboard events are so-called global events
because they do not happen on one specific element.
And for global events like keyboard events
we usually list and on the whole document.
So,
let's close this terminal here
and now let's write document.
So that's the same document that we use for query selector.
And so basically it's a big object which contains a bunch
of methods for all kinds of stuff.
And that includes the add event listener method.
So by using add a vent listener here on the document
we are basically listening for events everywhere.
So no matter where they happen on the page,
they will always trigger the event handler
that we're going to specify here.
Now right,
Now here about the name of the event itself
there are actually three types of events for the keyboard.
There is the key down the key press or the key up.
key up, which is so it's this one
this one only happens when we lift or finger
off the keyboard basically Or off the key.
Key press is fired continuously
as we keep our finger on a certain key
and key down is fired as soon as we just press down the key.
And so usually that is the one that we use.
Okay,
so the name of this event is just key down
and this event will happen as soon
as we hit any key on the keyboard.
Okay.
And then just like before we specify a function here
and this time let's specify it here directly.
So without creating a separate function.
So function,
and then the usual way
just like we have been doing.
Now, as I just mentioned here.
So this function here will actually be executed
for any key press that happens.
So let me prove that to you.
And actually it will be hard to prove
because you cannot see what key I'm pressing
but anyway,
a key was pressed.
And so now as I go to the console
and just press any key
you see achy was pressed.
And it doesn't matter which one.
So Q three P enter
Esc
any key,
just renders here,
the same message.
However, we only want to close the popup
when the escape key was pressed.
Okay. So that key in the top left corner,
which says Esc
right.
So how will we know which key was actually pressed
If this event here happens for all the keys?
Well
the information about which key was pressed will be stored
in the event that is going to occur as soon
as any key is pressed.
So remember, as I hit any key here on the keyboard,
a key down event is generated
and our list and our function here.
So our handler function is waiting for that event to happen.
And anytime that an event like this occurs
JavaScript does in fact generate an object.
And that object contains all the information
about the event itself,
and we can then actually access that
object indie event handler function.
All right.
So again, when an event happened
we can have access to information about that event
in the event handler function just like this one.
Now up until this point,
we have never looked at debt event.
We only just listened for it and then reacted to it.
Right?
But this time we actually need to look
at the event object in order to figure out
which key was pressed.
And how can we do that?
Well, what we need to do is to give this function here
a parameter.
and let's call it E which stands for event.
So we could also call it event
or we could call it X or Q I,
so it doesn't matter
but I like to call it E which dance again for event.
Okay.
So then as the event occurs
JavaScript, we'll call this function with the event object
as an argument.
And once more, this works
because we do not call this function here or selves.
Right?
We do not call the function.
We only define it here.
So we say
Hey, JavaScript call function when a key down event happens.
And when you do so
please pass in the event object as an argument.
Okay. And we will learn
about the mechanics of this a bit better later.
But it's probably still a good idea to already take notes
of this stuff that I'm explaining.
Anyway,
now that you know why this function has access to an event,
So to this E here,
let's now actually take a look at it.
So simply logging it to the console for now.
And we can actually get rid of this one here
and now I will hit the enter key,
and so you see now we get this event.
And it's called a keyboard event.
It is just an object that is generated by a JavaScript.
So you see that here in the console,
it actually looks
like the objects that we generated ourselves previously.
So with a key here
and then a value.
For property and the value.
and what matters here is basically the key
which as I said, was enter.
So I hit the enter key and then this event was generated
with the key property set to enter.
So that's great information
because now when I hit the escape key,
then you see
that the key was now escape.
Or I can of course, at any key.
So this was the space key.
So you see here
we have a space or the Q or Z or control or shift.
And so whatever key you press,
we now get this information
about the event itself.
And in this case, since it was a keyboard event
we get information about which key was pressed.
So as you see the information about the key
I was always getting it from this key property.
So let's just log E dot key because remember we use dot
and then the property name to read any property
from an object.
And so escape is now the key that I pressed
or enter or shift and so on and so forth.
Great.
And now that I know which key was actually pressed
I can use that information to actually close the modal,
whenever the escape key is pressed.
So we can simply do if E dot key,
triple equal is Cape.
And then again,
let's just lock to the consult to see if it works,
Esc was pressed.
And so now I can hit any key
and nothing happens
or actually some stuff happens
because we're still logging here the E dot key.
But the string that I just wrote here does not appear
unless I hit the escape key.
So now you see S cape was pressed.
Alright,
so that's of course not what we want
but instead we want to close the modal.
However, I only want to close the model
when the model is actually visible.
Right.
And how do we know if the model is currently invisible?
Well, if the model contains the class hidden
it means that it's not visible.
And so basically when it does not contain the class hidden
it means that it's visible
and then that's the condition in which we want to close it.
All right.
And so we talked in the last lecture about adding
and removing classes
but as I mentioned back then we can also check
if an element already has a certain class.
And so now,
that becomes really handy.
Because now I can do this.
So if the escape key is pressed,
then we can now check
if the model contains the hidden class.
So another F,
so if modal
and again, dot class list,
and then dot contains
and then again, the class name.
So that's hidden in this case.
So if the modal dot class name contains the hidden class
it means that the model is currently hidden.
And so in this condition,
we actually don't want to do anything.
We only want to close the modal
if it does not contain the hidden class.
Right?
And so here we can once more invert that Boolean value.
Now right?
So this knot here is very important
as you probably start to see.
So let's read this again.
If the model does not contain the hidden class
then close the model.
And so how do we close the model?
Well, we can simply call this close model function.
Right?
So let's do that.
Close model.
And here we do actually need to call this function.
Okay? Because when this function here is executing
so this one here as a den reaches this line
of course, something needs to happen.
And what needs to happen is basically this coat.
So we could just copy this coat down here
but that's of course not what we want.
Instead, we can simply use this function here again.
And using means here to call it.
So to execute the code that is in here.
So this,
so let's test this now
and then we can improve the code even a little bit.
So we open it.
Now I'm gonna to press just any key,
let's say enter,
so you see enter,
and now as I hit the escape key,
watch what happens.
Yes indeed,
the modal is gone.
Great.
Let's see where this button clicked here
comes from in line nine.
Now that's of course
because of this console dot log
and let's get rid of this.
Okay.
Let's try it again,
open it on this button.
I hit any other key,
nothing happens,
I hit escape and it's gone.
Great.
Now let's read this code here a little bit.
So basically this means if depressed key is escape
and if the model does not contain the hidden class
then execute disfunction to close the model.
Now notice how I just said
if this,
and then if this,
and so what I mean
is that we can actually aggregate
these two if statements together.
And so this is the same as having just...
and I'm cutting it here.
So it's the same as having just this.
Now we can get rid of this stuff here
and that's it.
And so now it reads the exact same way as before.
If depressed key is escape.
And if the model does not contain the class of hidden,
then close the model.
So give it another try just to make sure,
And yes,
that works perfect.
Beautiful.
And with this,
or modal is actually feature complete.
It works exactly as or demo here.
And so with this,
we finished this very small second project.
So once again,
I hope you liked this one
and I hope you can start to see the power
of Dom manipulation.
So that in the future
you will be able to build anything you can imagine just
with JavaScript.
Now that is of course still a long way to go,
but that's also why we have the next project.
Which is going to be a really nice project
to basically train
and reinforce most of the things that we already did
in this project and to previous one.
So the next project is gonna to be more
like a practice project
but I still believe it's very important to do that project
in case you have to time.
And believe me it's
by far the most exciting thing we have done yet
in this course.
So I hope to see you there soon
after you take a well deserved break.