Original subtitles

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.