All language subtitles for 056 Adding Movies To The DOM.en

So we have our get movies function here to actually fetch the movies by Yooralla, we have our search

functionality, but we don't have any functionality where it's it's putting anything into the dorm.

So where we have this data results instead of console logging, I'm going to have a function called

show movies.

So let's create a function, show movies.

And it's going to take in it's going to take in the data, but we'll call it movies.

And let's first of all, clear the main, which is, you know, the whole main part here, because we're

going to initially list movies.

But then when we search, we don't want to we don't want to add them on to the movies that are already

here.

We want to replace them.

So we're going to take Main, which I actually have to bring in, and set the inner loops, main dot

in our HTML.

We're going to set that to nothing, just going to clear it.

Let's go ahead and bring that in up here so we have const main and let's set that to document.

I think I gave it an idea of me.

It's just double check here.

Yeah, so main ID main, so I want to bring that in.

We want to, first of all, clear it, then we want to take the movies, which is the data that's fetched

and loop through those.

So for each for each takes in a function, we'll use an arrow function here.

We'll see for each movie.

And then from this movie that's passed in, we should have access to movie title and vote average stuff

like that.

You saw you saw the response with all the data.

Now I'm going to use this structuring here.

So to do this, we can pull we can pull values out of the movie object, OK, because that's what movie

is.

It's an object with all the movie data.

And if we put curly braces here, we can pull out, for instance, the title and then it will just be

a variable of title.

Instead of having to use movie title, we'll get the poster underscore path, which is the image we're

going to get the vote underscore average and we're going to get the overview is a lot of other data

that you can get from this object, from the array, but that's what we're going to use.

All right.

Now, we want to create a movie element because what we're going to do now is, is construct one of

these divs or multiple of these divs here with the real data and then put it into the dorm.

So let's say CONSED, we'll call this movie L movie elements and then document dots, create elements.

We want to create a div scissoring and then we're going to take that movie element and add a class to

it.

So class list dot add and we're going to add the class of movie that's going to give us our initial

div and then we'll take that movie elements and put into it let's say in our HTML said that to some

back text and then what I'll do is grab one of these divs of movie.

So grab this first one and I'm just going to delete all of them.

So all we should have in the table is the header and the main nothing in it, so save that, that's

going to disappear for now and then let's paste in

that and just clean this up a little bit.

All right.

So let's see.

So we have our image now for the image.

Let's get rid of this hardcoded image and let's put in our expression syntax.

Now, this is where we we have the poster path.

Right.

But that only includes the image name.

It doesn't include the path.

So here we're going to add our image, underscore path variable, and then we're going to just add on

to that the poster path.

And then for the alter, we'll just put in the title and then the title will go here and the H3 title.

And then we have our we have our our vote average.

So I'm going to put that in here vote average.

But remember, we also have the classes like green, orange and red.

So I'm going to actually have a separate function that I'm going to create real quick down here, basically

like a utility function called get, we'll say get class by rate and pass in the vote, which is going

to be the, you know, the vote average.

And we're just going to see what that is.

So we'll say if let's say if the vote is greater than or equal to eight, then let's return from this

function, a string of green and then let's do else.

If the vote is, let's say, greater than or equal to five, then let's return

orange or else.

So if it's less than that, then let's return red.

All right.

And then what we'll do is go up back up here where we have this where I put this class of green.

Let's get rid of that.

And we're going to put in here the get what I call it, get class by race and we're going to pass in

here the vote average.

OK, so that'll get passed in here.

And then depending on what that is, it's going to give us either green, orange or red.

And then the last thing we want in this scenario, HTML, is the overview.

Let's get rid of that and just put in the overview, OK?

And then we actually need to put it into the DOM.

So let's go under here and let's take the main element and let's append the child as we're putting this

into the main and we want to spend the movie element.

All right.

So now if I save that, we should see our movies.

And that looks a little weird.

All right, what does it look like that we just

see what this looks like in the dorm?

So we have main we have div class movie, so it looks like we have to dive class movie nested DIDs.

Why is that?

Oh, because we we had the d'Hiv hardcoded before, but here we're actually creating it and then we're

adding it.

So we just want to get rid of this and this last div.

All right, so let's save that and that should fix it good.

And it just wraps it's just a flex box that wraps the items, but yeah, and we if we hover over it,

we get our overview.

Cool now for the search.

That should just work, because what happens when we search, when we, you know, fire off a submit

here takes the value, the search value checks, make sure it's their calls, get movies and hits the

search API and then in turn, you know, calls this and loads it into the dorm.

So, again, I'm going to search for the word hard.

And if I hit enter, I get all these movies where the title has the word hard.

All right.

So it's not the most advanced movie application you can find on the Internet, but I think it gives

you a, you know, a good idea on how to work with a third party API, how to, you know, fetch data

inserted into the dorm and so on.

All right.

That's it, guys.

Hopefully like this project.

And like I've said many times, if you want to want to add on to this, that be great.

If you can add, you know, a more data or maybe you could have where you click on this and it goes

to the single page, you know, this is quite a few things you could do.

You could add pagination.

So I would encourage you to look more into that because again, tutorials, courses, there are only

half the battle you need to come up with, with your own ideas and, you know, add your own functionality

and it's going to take more work than just following a tutorial.

You're going to have to do some research and see how you do certain things.

But that's that's the other half of learning, in my opinion.

So that's it.

Let's go ahead and move on to the next video.