Now in open player config,
I want to open that overlay.
So this aside, with that ID,
and this class of modal here,
and I want to open that overlays so
that we can then edit our player with that.
Now to make that work,
we first of all,
need to get access to that overlay
and to the backdrop.
And change the display CSS property from none,
which we have there at the moment.
We have display none on the modal
and on the backdrop,
and we need to change this
with help of JavaScript,
to block,
so that it's not hidden anymore,
but that it is visible.
Now for this,
we need to get access to
this overlay and backdrop.
And for this back in app.js,
where I want to do all my core management
of all the different HTML elements we have access to,
I will add new constants,
maybe here at the top.
And the first constant I'll add here
is the player config overlay element.
I'm using very long descriptive names here.
You could also use shorter names if you want to.
And here, I want to select an element by ID again,
and the element I want to select is the aside element
with that config overly ID, which I have here.
So in app.js,
I'll pass this ID to get element by ID.
I also want to get hold of the backdrop
and for this I'll add my backdrop element constant here,
and then here use document,
get element by ID backdrop.
Because on that backdrop dif here,
I did add the ID backdrop.
So in app.js,
we can select that element by that ID.
Now we can use these two elements
inside of open player config,
but wait a second, does this work?
And if yes, why does that work?
Can I define a constant here in app.js?
Even though that is the last file to be executed
and then use it in config.js.
So use it inside of open player config.
Yes, if the order of execution is correct.
This function,
open player config, will only execute
if one of the added buttons here is clicked.
Now we add these event listeners here
at the bottom of app.js.
So the earliest point of those buttons being clicked
and that click being handled
is after all of that code executed.
All that code in app.js because only
then these click listeners were added
because that's the case, because we know
that this is the earliest point
where open player config may be executed.
We also know that player config overly element
and backdrop element will have been defined because
that happens before the clicker listeners were added.
And therefore,
we can safely access these two constants inside
of the open player config function.
And therefore here,
I'll use player config overlay element,
and access to style,
a property here to get access to all this CSS properties.
And then here set the display style to block.
Remember it was none,
now it's block.
And I'll do the same here for the backdrop element.
And with that,
if I save that and reload,
if we click edit,
this overlay should open.
And if you reload,
the same should be possible
if you click the other edit button.
At the moment,
it never disappears,
no matter what we do,
If you click confirm,
we reload the page.
So then it technically disappears,
but we'll handle this differently later.
But it does not disappear if I click cancel
or on the backdrop.
And that's what we typically would want.
We should be able to close this overlay,
if we click on cancel
or on the backdrop.
And to make this work,
we need to add more click listeners.
So for this,
I'll go back to app.js
and get access to more elements to
which I want to be able to listen to clicks.
For example,
another button I want to listen to,
the button inside of my overlay.
This cancel button.
When this button is clicked,
then the overlay should be closed.
Now to make that happen I'll again,
add an ID here,
simply because selecting by ID is so convenient
and easy.
And named this cancel config button,
copy that.
And then app.js all to get access to this button.
Now it doesn't matter where exactly you create
that constant here.
I'll do it here
where I also get access to my other buttons,
but I'm only doing this because I want to group all
these button elements together
and group all the other elements together, kind of.
So here I'll have my cancel config button element
and we get hold of that by using get element by ID
with that ID,
we just add it to this button.
And now we wanna add a click listener
to this button was well,
to the cancel config button element.
And I want to execute a function here
that closes this overlay.
And for this in config.js,
I'll add a number function.
The close player conflict function.
That sounds like a fitting name,
given the fact that I named this function here,
open player config.
And then app.js,
we can now add an event listener here
to the cancel config button element,
listen to a click event
and then trigger the close player config function.
And we also wanna trigger
that function if the backdrop is clicked.
So I'll also use my backdrop element,
which we already selected here,
and also add an event listener to this.
Because as I mentioned earlier in this section,
you're not limited to adding click listeners to buttons
or links.
You can add them to any element.
All HTML elements,
support a broad variety of listening events.
And the click event is the most prominent one
of all these events.
So here,
we also listened to a click
and then we close the modal
by executing close player config.
And just as before,
we just passed a name of the to be executed function here
so that the browser then executes the function
on our behalf later.
Now, inside of close player config,
I now wanna do the opposite of
what I did here in open player config.
Hence, we can copy that code,
add it here and just change it back to none.
So that we hide both the overlay
and the backdrop.
If I do that,
if I now click edit
this opens,
but if I click anywhere on the backdrop,
we can close it
and also if I click the cancel button.
So that is looking good.
With that opening and closing works,
but at the moment, of course,
we can enter whatever we want here.
If I click confirm here,
we will just reload the page
and throw that value away in the end.
So therefore, as a next step,
we want to see how we can actually handle
this form submission with JavaScript.
And that will be a brand new concept.