So here's our skeleton, our HTML page and right now of course, no interaction is possible.
Now the first thing that would be great if it worked would be that if I click add movie, we actually
display an overlay, a so-called modal here which is like a pop-up but not this alert which is controlled
by the browser
but a pop-up which we create visually in our web page which allows us to enter some movie data and in the
HTML code,
we actually already got everything for that.
This div here, this one here, this in the end is such a modal, has some CSS classes to look nice,
has an ID, add modal which might come in handy for selecting it later and there
I also already added a couple of inputs which allow us to add a movie title, an imageUrl and a rating which
we then enter here and then some buttons to either cancel adding that movie which I also want to
support or for completing adding that movie would should then add it both to a Javascript array but of
course also output it on the page.
If we scroll down there, I have an unordered list with no entries at the moment, I want to populate that
list once we add movies.
So the goal is to show this div
and of course therefore an important question is, why is it not showing at the moment?
Well actually because if we have a look at the CSS code, in there I added a style to this modal class
which is the class I'm applying here to this div which sets display to none
which basically means it's not added to the document flow, it's not visible, it's not clickable, it's like
it wasn't there.
It's actually part of the DOM as you can tell if you go to the elements tab, there you find that modal
but you don't see it anywhere on the screen, if I hover over it here, if I select that, it's also not selected
on the left because it's set to display none it's not part of the document flow, just of the DOM,
that's an important difference because that means we will be able to select it from Javascript and then
we can toggle this display style to show it. Actually there even is an easier way,
there is this visible class which we can add to a modal which will set display to block and also play
a nice little animation to fade it in and to slide it in.
So actually our goal will be to make sure that when we click the add movie button, we reach out to this div
here with the ID, add modal and we then add this visible class.
These are all things we of course learned, so here already is a great place to pause and try this on your
own
but of course after this short pause which I give you to pause the video, we'll do it together. So let's
try it together
and we got two steps with which we should start,
we need to get access to this add modal div and we can do this with the ID, we could also try to do
it with a class selector, though you should be careful because we also got another modal here, another
div with the exact same classes.
So since is the first div with these classes, we would be able to use query selector to select by
class because query selector selects the first matching element but later when we need to access the
second modal for example, we'll definitely need to use the ID or come up with some other unique
selection criteria.
So here I will actually go for the ID and select it by that and you also mustn't forget that we also
need to get access to this button so that we can add an event listener and for this, if we scroll down,
we can have a look. Here's the header and there is this add movie button, so we also probably want to select
this. Now we'll have to see how we can select it because this button has no ID or anything like that.
Now of course, we can always add an ID and that might be a good idea, give this some unique ID which
we haven't used anywhere else on the page but also to practice the different ways of selecting stuff,
I will also use a different approach of selecting this button.
Now let's start with the modal though and let's go to app.js and in there, I'll assign a new constant because
I'll never assign a new value and I'll give it a name of add movie modal, the name of course is fully
up to you but it should describe what you store in this constant and here,
I'm in the end storing a reference to
my modal, so to this overlay which you can add and it is the modal for adding a movie, so I will
name it add movie modal, seems like a fitting name to me.
Now we can select it with document and now, we can use get element by ID because our modal here has an
ID, add modal
so that is probably the most reasonable way of selecting it. As an alternative to that, just to also
show this, we could also use query selector and then we just have to add a hash here because a query
selector wants a CSS selector here.
This would work as well, would also select it, this tends to have a bit better performance, though for
this app it really won't matter, for most apps you'll probably not feel it but it's a little bit better
to use get element by ID than to use a query selector if you really just want to get access to
an element by ID,
so that's just a side note
and another way of getting access of course also would have been to use other techniques,
for example we could dive into the body and then have a look at all its children, so all the child element
nodes and then pick the second child because the first child is this strange backdrop thing which will
become important later,
second child would be that.
So another way of selecting this would have been to use document body and then there, children and then
there, the element at index one which is the second element,
All these approaches select this movie modal, just to prove it, I'll quickly
output it here,
comment out the first two steps so that we don't get errors because I'm using the same constant over
and over again
and now with that, just go to the console here, reload,
now we see that selected this modal and that's also true if I uncomment this and comment this back in and
then reload, add the same modal here and also for completeness sake and this is the approach which I will
use if we use get element by ID, we also lock that modal here.
So these are just some ideas, of course there are more ways of selecting it,
just to give you an ID for that but I will go with this approach because if you have an ID, you typically
should strongly consider using that ID at least, this also will be very fast from performance perspective,
so there is little that speaks against using this.
So with that, we selected the movie modal,
now as I said, we also need to get access to this button here, to the add movie button and for that, I'll add
another constant here, add movie button or actually I'll name it start add movie button. I'll name
it start add movie button because later, I will also have a button inside of that add movie modal, so
inside of that modal which we just selected, there we also have an add button and I want to give this
the add movie button named later because this will be the button when we press it
that really adds a movie to our app,
the button in the header starts this whole addition process which is why I will call it start add movie
button.
Now how can we select that?
Of course there are different ways of selecting it,
we could for example say document query selector and then reach out into the header and then to the
button.
So here I am using tag selectors because I only have one header on this entire page, it's this header
here and then this is a normal CSS selector, we select a button inside of a header element. So we
only have one header element, we select the first matching button which in this case also is the only
button in this header and therefore this would give us access.
So that's one way of doing it, another way of course
and I will not always show all alternatives,
no worries
but here I do want to show it and
so another way would be to use query selector header and then for example, last element child because if
we have a look at our header, here we see the button is the last element child inside of the header,
so that would be another way of selecting it.
The downside of using this, just as before with using document body children one for the movie modal
is that whenever we change something in the structure, whenever we add something in the header, some other
content here after the button, some other title or anything like that, then this way of selecting it
here will not work anymore because it always selects the last element child and if we change that in
the HTML code, our Javascript code will select the wrong element.
So therefore you should be careful with using this selection technique in places where the HTML content
might change, where you as a developer might change it later.
So therefore,
I actually prefer this approach, as I mentioned earlier an alternative would have been to add an ID
to this button but also to mix things up,
let's use this query selector.