Welcome back.
How's it going?
Were you able to get your buttons clicking so that you click the button and you see something happening
here within the console?
So now you're ready to move on to the next step and this is where we're going to toggle that model.
So the one that we created in the first lesson, all of that TEMEL and S.O.S styling it and we don't
see it.
So this lesson, I'm going to show you how you can toggle and show that element.
And we saw within the success, when we add in a class in the model wrapper and if we add in another
class of show model, what happens now is we see the model.
So all we have to do is use JavaScript to toggle that value.
And luckily for us, JavaScript has just that type of function.
So we need to select the model object and we can use our query selector.
So setting up our object in the same way that we selected the button, we can grab our model wrapper.
You don't have to call it model wrapper.
I just usually do that just so that it makes sense with in line with the classes using query selector
and we only have one so we can use query selector all and selecting the element with a class of modal
wrapper.
And I know that turned out a little bit long.
I can make this bigger for now and then we'll shrink it down when we test it out.
So now we've got it within an object format and that means that we can use it.
So going into when we make our click, we can update the class list and the class list.
We know that this particular element will have a class of modal wrapper and we can also add to that
class list.
So that's what we're going to be doing.
We can also toggle that if we want.
So that gives us the ability to add a class, if it's not there, and remove a class if it's there.
So that gives us that option to hide and show so we can do either one in this case where we can add
and then remove it on the alternative or we can toggle it so it actually doesn't matter which one we
use.
And in this case, just to be precise, we wanted to add that model.
Class, so the social model class, and now we can try it out, so opening it up and refreshing it in
the page, we click it and boom, there we go.
We've got our model showing up within our HTML.
Now, one problem, no way to close it.
So I show you how to do that in the upcoming lesson.
So go ahead and add this in.
And I know this was a relatively short lesson because we only had the one statement, but it's important
to understand that you can control and manipulate elements on the page.
And if we go to inspect right now, if we do an inspect on it so that the page source we can see within
the page source, we're not we won't see that show model within that model rapper element.
But when we go into inspect and this is the live version of it, and we open up our model wrapper,
you see that show model has been added.
So that's not there initially.
And we can see that it's not there initially.
And when I do press it, it JavaScript adds in the short middle class.
So go ahead and try this out for yourself.