And completing this part of the course where we've got a model popping up and hope you're able to produce
the same functionality where when you click a button on the page, it triggers JavaScript to show an
element that was hidden.
And then you can see the elements contents.
And then when you're ready to go back to the main page, you can either click the clothes, you can
press outside and the overlay, or you could press escape.
So do try that out.
And usually I do try out all the different applications just to make sure that all the functionality
is there that I was looking for.
And now we're ready to do our code review.
So everything is there functioning as needed.
So first we set up a bunch of success.
We did a whole bunch of styling to make our model look nice.
And of course, you can style the model as needed.
So however you want to style your model, you don't have to style it exactly like mine.
You don't even need all the same elements.
The main part is that you've got one main container element that you can hide and show.
And then also users are usually expecting a way to close that Pop-Up window.
So providing them several options is always a great way to go.
Another part, of course, you need a button to create that interaction so the user has something to
press in order to show our Pop-Up window.
So once we've set that up, we're ready to move into the JavaScript.
And the first thing that I usually like to do is select the elements into JavaScript objects.
This makes it really easy to reference them and then utilize them within the functionality of our code.
So just over here with Button, so we selected all of the elements that we want to be able to be clicked.
They all have a class of model and these are the ones that we want users to be able to click and open
up our model.
So for each one of those elements that have a class or potentially we could have more than one of these
buttons or we could have different elements, they don't have to be all the different buttons.
As long as they have that class, we could potentially have more than one.
And this is where we loop through and we iterate through all of them.
And then we're attaching an event listener to them using a function called Make Click.
And the beauty about doing it this way is that this also allows you to attach it to different elements
as well.
So you don't necessarily only need to use it within this function.
You could use it multiple places within your code if you need to.
So next, we created that function.
So this is the make click function.
It adds in an event listener to the element.
Then we add in to our model wrapper element.
So that's the another one that we selected earlier on.
So that's that element with the class of modal wrapper.
So what that will do is we'll add in the show model to that element.
And we saw it when we're applying our styling that when we're not in a show model class, then it shows
the model and when we remove it, then the model disappears.
So that was all taken care of within our success.
And JavaScript just had to add and remove that class in order to show and hide it.
We also select the element with clothes.
So this is within anywhere within the document.
We select all the elements with class of clothes and then we add an event listener to them.
So in this case, we only have this the one that we're selecting.
So it should actually be all of them.
It's only applying to the first one with a class of clothes within the page and we're playing that Lessner.
So once the button gets clicked, then we're returning modal wrapper and that's going to be returning
our function so that we don't have to do any of the other functionality here.
Next, we've got another event listener and this event listener is within the overlays.
So if the overlay gets clicked, then we also close the model and the last but of course, not least
can get rid of the console message.
And we are listening for the user to press the escape button.
And if they do, then you guessed it, we are returning updating the class list and removing the show
model class from that element and effectively hiding that element once again in the page, and then
the user can click it and show it once again.
So that's what we've done with in the earlier lessons.
And I hope you had an opportunity to try this out.
And remember, all the source code is also included.
And if you do need help or clarification, I'm always happy to help and help you get this application
going.
So try it out for yourself, added into your own projects, extend on it, build on it and make it even
better.