So let's work on these choose plan buttons
now. For that, we need to manipulate the styles but not by default when this Javascript code first runs
but when an event occurs and for that, we need to add a so-called event listener to the HTML element we
want to listen to.
That's not the backdrop in our case,
that is the choose plan button instead,
so our button down there. Now that of course means that we somehow need to select this button and for
that, I'll go back to my Javascript code and call this select plan button,
you can name this variable whatever you want, it will hold a reference to these buttons.
So for that, we again use document
but now I need to register three event listeners, one to each button.
So I actually want to select all the buttons and I already told you that for this, we can use query selector
all. Now query selector all still takes a string as an argument which allows us to define a CSS selector
and if we have a look at our HTML code, we see that we're interested in a button element but not necessarily
in every button on our page
but in a button which is inside of, let's say an element with the plan class.
So therefore, we can use a combinator here and say select any element which is inside of a plan class
element and which is in turn a button element,
this will give us a list of all the buttons in our plans and we can again see this by using console dir
select plan button or buttons is a better name actually because it's more than one
and if I now reload the page and go back to the console in the developer tools, we see we've got a node
list with three buttons indeed,
so that's looking good.
Now with that, we can add our event listener to these buttons.
Now we got an array,
I actually need to loop through these buttons,
I need to execute an action for every element in that array. Now
for that, we can use a for loop,
now that's just a construct in Javascript which allows us to repeat code and we need to pass three arguments
to the for loop here.
The first is an iteration variable, a temporary variable which we use to keep track about how often we executed
the loop and how often we still have to execute it
and typically, you use i here for iteration but you can name this whatever you want and we set an initial
value of 0.
Keep in mind that in the select plans buttons list, the first element had an index of zero,
so this will help us selecting that first element for the first run of this loop.
Then we add a semi-colon
and next we enter the condition for this loop,
so how long should this loop keep on running.
It should keep on running as long as i is smaller then select plan buttons length,
length is a special property which simply tells us how many elements we got.
Now we will have three elements and therefore, this will keep on running until it is two. For two,
it will still be executed
but once i reaches three, it will not execute the code again because three is not smaller than three.
Now we need to add a third argument separated with another semi-colon
and this is essentially just the code which should run whenever we finished one loop iteration,
it should increment i by 1 which we simply do by typing i++, this will add 1 to i after
each run through that loop.
Then we add curly braces and inside of that, we add the code we want to execute for each run
and there, I want to access select plant buttons for my element i with squared brackets, we access a certain
element in that array
and now we can call the special add event listener method.
Now here we add two arguments,
the first is the event we want to listen to, in our case, this is the click event.
The second argument is the code we want to execute whenever this event occurs
and for that, we can use a function.
A function is simply a construct of code which won't run immediately when this file is getting executed
but only when it's called
and here our function will get called when the click occurs.
We are actually defining a so-called anonymous function here because we're not giving it a special name
because we're never calling it from anywhere else in our code.
A function is defined with the function keyword,
then parentheses and then curly braces which hold the content of that function.
Now in that function, we define the code which should run when we click such a button
and now it's inside of dir that we actually want to show the backdrop and the modal.
Now for that, we also need to select the modal.
Now in the index.html file, we see the modal has the class modal, so let's also get access to that with
another variable, modal document and
now query selector
because not all, we only want to get the first and only modal we got, selecting it by the modal CSS class
and therefore in this function, we can now access modal style and then display and set it to block, to
show it as a block element and not none which will not show it. I'll duplicate this to also change the
style of the backdrop,
now this should also be set to block when we click the button. With that, make sure to save all files and
reload your page
and now if you click one of these buttons, it will actually show the modal.
Now we can't remove the modal yet,
this is something you can practice in the next lecture
but this is a great first step.