Now that we've got the Temel and CSFs out of the way, we can focus on JavaScript and completing our
application, adding in the functionality and creating that dynamic effect that we can with JavaScript.
And I know a lot of you are excited to get started with JavaScript.
So the first thing that we need to do is select our elements.
And these are the elements that we're going to be using throughout the application and we select them
into an object format in JavaScript.
So say, for instance, we've got a button and we potentially might have several different buttons that
we want to apply the functionality to.
So this is where we can select that button and apply our interaction to that button.
So taking JavaScript variable, setting that up as BTM, we're going to select the document using query
selector.
And if we want to select all of them, we could do query, selecter all, so we're going to select all
the elements that have a class of Motal.
We could also select it via the button tag as well.
And because it's a class, we have to put the dot in front of it just like we would with scissors.
And that gives us the ability to select the button.
And then once we have the button, you can console, logout that button, object to see to see what
it looks like in the console.
So refreshing that and because we only have the one button, we see it represented within the node list.
And when we hover over it within the console, you see that it also lights up within our page.
So we're ready to use that and we can loop through all of the buttons.
So in case we've got more than one, we can do a for each set up a function.
And what this function is going to do is it's going to allow us to add event listeners.
So as we iterate through all of the elements that have a class of Motal, we can output those buttons
as objects within the loop so we could use button.
And now you can see that if we had more of them, there would be output here.
And we get that essentially the button object that's represented within the DOM.
That's also the element that we've got on our page with the class of modal.
So now we can pass that into a function.
So let's set up a function and we're going to say make click.
That's going to be the function and we're passing in our button object.
So the same object that we've got over here, we're passing into a function and that's create that function.
So within this function, this is where we can create all of the element contents and make it interactive.
And this way we can apply the same functionality in case we had different elements that we want to make
and have them open up the models.
So adding in the event listener using the JavaScript add event listener.
And listening for a click event, we're going to invoke the functions, this can just be an anonymous
function that will run.
So once the button is clicked, for now, we're going to log out to the console just to make sure that
everything is still OK and that we're able to click that button.
So now we've taken that all of the elements with the class of mobile placed them into a node list represented
by the variable button.
And then we're looping through the variable button.
And for each one of them were outputting each one of the items within the node list.
So if we had more, we would output all of the different elements that we had within our node list.
And then we're passing that element object to a function and using that same value, that same object
value and adding an event listener.
So let's try this.
Now that when we press the button, we see that we've got Kallick showing up within our console and
that's exactly what we want.
So we're ready to move on to the next step.
So go ahead and add the same functionality into your page and make your button clickable.