Demonstrator: 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.