Now outputting movies on the screen involves two parts,
for one I want to update the UI and for example remove this box here whenever we have movies,
in addition of course, I want to add movie elements to this unordered list which I have here at the bottom.
So I will need to select this section here and dynamically remove it from the DOM or simply hide it
if we have movies and then add the movie here.
So for that, there are different ways of doing this,
as always I will add a new function here, let's say at
the very top but it's really up to you where you add this and you could name it
update UI because in the end that's what this function will be there for
and here I want to check the length of the movies array and if it's longer than zero, so if it's not
empty, then I want to get rid of this section otherwise I want to add this section again. So we'll need
access to that section,
conveniently it has an ID by which we could select it. So therefore in app.js,
we can add a new constant here,
entry text section or whatever you want to name it and use document get element by ID and use that
ID here to get access to the entire section
and then here I'll add a check and check if movies length
is equal to zero, so if it's empty, then I want to show it,
else we can go to the entry text section here and add a style where we set display to none for example.
I have no CSS class which I could toggle here, so we can use good old inline styles to set this
to none,
if the length of the movies is zero, then I want to set this to block. Now update UI should be executed
whenever we added a movie,
so here I will call update UI
and that alone should already have the effect that if I quickly add some input here and I click add,
this box is gone.
It's not technically gone if we have a look at the elements, we see at the bottom in main,
it's still there in the DOM but I added this inline style. So that's working,
now let's also make sure we add the movie element to the screen so that we can see a list of movies
and for that, I'll add yet another new function which I'll name add new movie element or render new movie
element to make it really clear that this will be a function that impacts the DOM and what we see on
the screen, name is up to you
and now to this function I expect to get some inputs,
my movie object for example or the individual parts I need, for example the title, the imageUrl
and the rating and then with that, we can render this new element here because now with that, here we
can create a new element, new movie element and here I'll name this element to make it really clear that
here I hold that new movie element and create it with the help of document create element and then
li because I'm going to inject it,
I'm going to insert it in an unordered list and semantically, you should have list items, li elements in
such lists.
So that creates an empty list item in the end.
Now on this list item, new movie element, we can add a class and I can do this with class name because
I don't want to toggle it or anything like that,
I just want to add hardcoded class names here and that's movie-element class which you'll find
in app.css, here
this class will basically style these elements in the list. So I add this here to the movie element, to the
new movie element and now new movie element of course also should have some content inside of it, not
just a list item of some text but actually with some structured HTML content
and that will be content with which I don't need to interact, where I don't need to assign specific classes
that change dynamically, so we can just use innerHTML to set the HTML content of that newly created
element. That by the way is something we haven't done before,
we certainly created elements but we haven't created an element to then change its innerHTML content
but of course that's possible,
it's a regular DOM object in the end,
so of course you can also change and analyze and do whatever you want,
its innerHTML content.
So here, I'll set this to a string and I'll use back ticks so that I can actually use a multiline string
here, simply for readability because it allows me to write HTML which is easier to read
and now here inside of that movie, I will add actual content where I have a div and now that's why I
use back ticks, I can write it like this which is easier to read, a div which should have a class or actually
a class of movie-element__image, that simply is a class defined in app.css
and in there, I want to have an image element which has a source where
and now another advantage of the back ticks, where we can inject the value dynamically which of course
should be our imageUrl and also an alt text for accessibility where we use the title as an alt text
let's say, we don't need to assign any class here. I also want to have a sibling div to that first div
which will also get a class,
this gets a class of movie-element__info, make sure you never forget a closing
quote here because that will be HTML code which was parsed in the end hence it should be valid HTML
code and in that div here, we can add a h2 tag, opening and closing of course where I then inject the
title, so I'm using the parameters I'm getting here and then also a paragraph, opening and closing,
no CSS classes need to be attached, where I set rating and then slash 5 stars so that it shows as rating
of a maximum of five stars.
So that's the innerHTML of the movie element and now we can get access to that list here, to the
unordered list which conveniently also has an ID which makes selecting it quite easy and then add
that element.
Now for this, we can again register or select this list up there but actually I'll only need it here in
render movie element,
so here I can get my list root or however you want to call it and I get it with document get element
by ID and select the movie list here in this place and now this constant which I can use in this function
since it's a local constant to this function can be used to then append or append child depending on
the browser support you need the new movie element.
So this now adds the new movie element to our list of movies.
If we now do that, we just need to make sure that this gets called when we add a new movie,
so here in add movie handler, I want to call render new movie element and I need to forward my data
which I get from new movie, I want to forward the title, I want to forward the image and I also want to
forward the rating of course to that render movie element function.
So with that, make sure to reload the page and then let's add a new movie, Javascript The Complete Guide.
Now I picked an image in Google image search for Javascript,
give it a rating, click add and here it is,
here is our new element added to the list and of course we can add another element, another movie and
I'll just use the same image,
of course you could use a different image,
give it a rating of four and this now also looks quite decent here.
So now we render these elements,
we show them in the list,
we also manage them here in our array which we don't really need for anything else but just so that
we also have it here, doesn't hurt to manage this in other projects you might need, this Javascript data.
Now of course, I also want to make sure that we actually can remove elements by clicking on them.