Original subtitles

Welcome back.

Let's now start working on project

number two of this section.

And in this small project,

we're gonna build our first UI component.

And that is this modal window

that we can see here,

by opening, or by clicking actually,

on one of these buttons.

So I'm sure you've seen this kind

of component all over the place when visiting webpages.

And so it's simply this window here, basically,

and this overlay, which gets overlaid

over the rest of the page, right.

So no matter which of these three buttons we click,

it will always open this modal window.

And to close this window, as you already saw,

we can either click this button here,

or we can click outside of the window.

So basically, on this overlay,

and again, I'm sure that you have seen this functionality

when visiting other webpages.

So that worked as well.

And finally, we can also close this window

by hitting the Esc key on our keyboard, like this.

Now okay and this is actually very simple

and very easy to build,

probably way easier than it looks like.

But it will still be very useful

to learn how to work with classes.

And that's super important, because manipulating classes

is actually the main way in which we manipulate webpages.

Okay, now, here on the left side, I still have to code

from the previous project open.

And that's because I wanted to show you

how to close the live Server.

So let's go back to the terminal.

And so as we hit new terminal,

it actually creates a new terminal.

So if we want to go to the first one

that was already running, we need

to go here to this menu here.

And then number one, which is this node.

So to change this, now we hit Ctrl C,

and that's even control on a Mac.

So it's not Command C, it is Ctrl C.

And I guess on Windows, it's gonna be the same.

But if it's not, you can just click this trash can here.

And that will also then kill the terminal.

So as I hit Ctrl, C, the process has finished.

And so the live Server is no longer running.

So if I come here, to this URL,

so this local host URL,

plus the current port, which is 8080.

So if I now reload this page, it will be gone.

So there's no connection possible anymore,

because I just killed the live Server okay,

just wanted to let you know about that.

Okay, anyway, let's now close up this folder here

and open a new one.

And, as always, I already have here the starter files

for this modal project.

So let's open up a new VS code window.

And let's open up this one.

And once again, I have the prettier configuration here.

And then the index, the JavaScript and the CSS styles.

Okay, open up script.

And actually, we can open all of them,

because we will want to take a look at the three files.

Okay. And as before, we still are using strict mode.

And so I already included

that here at the top of the file.

Okay, and now let's get to work actually.

Now this time, we will actually start

by selecting everything that we're gonna need

for this project so that's usually

what we do when we build a project like this.

So we select the elements that we need,

and then we store the selections into variables.

Okay, and then we can use them over and over again.

So that's way better than selecting the same elements

over and over again, like we did in the last project.

Alright, but in our last project,

I didn't want to overcomplicate stuff

and do too many things at the same time.

And so I just selected all the stuff multiple times.

But again, this time, we will have

all the necessary selections.

So all the necessary elements that we're gonna need,

nicely organized here at the top of the file,

each in its own variable.

So let's take a look at the HTML.

And so here we see the three buttons.

So that these three buttons,

and then we actually already have the modal window,

here in the code.

So this div element here.

So it's already in the code it's simply hidden.

That's why it has this hidden class.

And now in the CSS, let's come here

to the bottom of the file.

And so the hidden class,

simply set the display to none.

And so that's why the window is currently hidden.

All right so again, as I said in the beginning,

in this project, we will work with Classes.

And so, this hidden class is the main class

that we will be concerned with.

So, anyway, this means that we will not

basically create the HTML

for the modal window using JavaScript,

it is already there, all we will do is to show it

and to hide it, according

to the clicks on the buttons.

So that's the modal.

And that is the overlay.

So that's basically this dark part here,

which hides the background.

And then here, we have this button

to close the modal window.

And so that's all that we need.

So again, we need to select the modal,

the overlay, the close modal button,

and then of course, the show modal buttons.

Okay, so let's do that

So const, modal, is document dot query selector.

And then just like before, we are looking

for the element with the class of modal.

Okay so, just like we did in the first project,

we select an element using the selector,

but then this time, we actually store the results

of the selection so the selected element

in this variable okay.

So that's the element with the class model.

Now we want overlay, and then close modal.

So overlay, and of course,

we could give these any names

that we want it.

But these names make it easy

to understand what they are.

So I'm giving them the same names

as the class names, basically.

So that's the overlay.

And now the close modal button.

Let's call this one actually a button.

So btn, which stands for button,

and then close modal document, dot query selector.

And then this class is close dash modal.

Okay and now finally, we also want the show modal buttons.

Now, there are actually three elements with this class name.

So let me show you what happens

when we simply select in the same way

that we did before.

So let's say button, or buttons, actually,

because we want multiple, openmodal,

and then document dot query selector dot openmodal okay.

And so what will happens

when we lock this to the console.

So buttons, openmodel, that's the one.

And now to actually see this, we need

to again, start the live Server.

So new terminal, clear this console.

And then all they have to do is

to type live-Server hit enter.

And here we go.

So this is our modal window now.

And this one, we can now close.

And actually, it has the exact same URL.

So it's always this 127 001, which stands

for localhost at Port 8080.

So if we reloaded this one,

it would show us the same thing.

Okay, so we can just close one of them.

And so it looks exactly the same as the demo.

But of course, nothing is gonna happen yet.

'Cause as you know, we have no event handlers on any

of these buttons yet.

But now, I wanted to take a look at the console.

And Yep, and now

here we get no for some reason.

So it means that it could not select anything

here for this selector.

And so let's take a look yeah,

actually it is show modal and not open.

Okay, so let's fix that.

So it's not open it is show

and maybe you have spotted

that if you took a more careful look

at the HTML than I did.

Now Anyway, now we see this button here selected.

However, as you can see,

it is only the first one okay.

And so now we see the limitation

of or query selector method here

for the first time,

so whenever we use query selector

with a selector, which actually matches multiple elements,

only the first one will get selected.

And so here, we need another one.

But it's pretty similar.

It's called query selectorAll.

So that's a pretty obvious name,

but it's gonna do the job.

So as I save now, now, you see

that we get something called a Nodelist here.

So let me open that.

And now as I hover, you see

that these are actually all of our three buttons.

Okay, so this NodeList here is a little bit like an array.

It's not exactly like an array.

But here for now, it works

as though it was an array.

Okay, and so now, if we want to do something,

for example, to all of these buttons,

then we can simply loop through this NodeList

and do something with them.

So let's actually quickly do that.

So we will now again, use the for loop.

And now, I hope there is no need

to explain any more how this one works.

So I should stay below the length

of this NodeList, which again,

for our purposes here works

just like an array buttons,

open modal dot length, and then at the end

of iteration, increase the counter.

And so in each iteration,

what we want to do is simply

to log to the console, the text content

of each of them all right,

so what we want to do is buttons, open modal.

And then we take the current one.

And so this here is now an element okay,

it's one of these elements.

And, well, now it already logged

because it saved the file.

But yeah, anyway, each

of these here is one element.

And to now on each of them,

we can simply use the text content property,

just like we did in the last project all right.

So let's save it again.

And indeed, now we get to three text contents

for all the three buttons.

And here, you might have noticed

that I didn't even use the curly braces to define a block.

And that's because just like an if else statement,

if there is only one line of code

that I want to execute, I actually don't have

to create this block okay, I can

just write one line after the for loop.

And then that's the one

that will be iterated over and over again okay.

So again, this works just fine.

And now I have a way of selecting multiple elements

with the same class and then

with the for loop, I can do something

for each of them.

In this case, all we did was to log their text content

through console, but in the future,

we will then be able

to do real stuff using this technique.

Okay, and that's it for this video.

In the next one, we will actually

already make this model window work.

So don't wait and let's move on

to the next video right away.