Welcome back, ladies and gentlemen, let's build the likes like view.
So what are we going to do here?
We're going to need actually the next stimulus, so I'm going to open up, close this model's view and
I'm going to open a new file called Like View that just now.
First things first get from the cart.
I want to import the classiness because we're going to use it here.
Right.
So I don't need the card anymore.
Now, first things first.
I need to export CONSED.
Now we're going to have a couple of functions here, but let's start with exporting the concept that's
going to do.
He's going to display the entire like model and here I will have one, the entire like object that we
haven't created yet, but we will do shortly.
And as you know, the market will be here and after that we need to use the class names that like container,
which I haven't created yet to insert.
Yep, that can happen.
Insert I'm I'm very frustrated sometimes when this is happening.
So insert Jason.
HTML in here, I'm going to pass it before and and the markup.
Now let's wrap this one template literals here and so we were able to finish one.
And don't forget, we need to put this one in the class.
OK, but first things first.
Go back here to the like modem and just grab this line here.
Right.
And that is inside the like like container.
OK, spohrer here, base it down here.
OK, it doesn't look that terrible here and that's pretty much it.
Now we need to do a couple of changes here because we do have the like here and we will have the access
to the what?
Access to the like ID.
Right.
So we will have the access here instead of the image we will have.
So we will have the like poster.
We haven't used this for a long time.
The title will go here like title.
What else we need.
We need the year.
Here and here, we need the I'm reading right now like that I am DB rating cool.
So that will grab all of the information we need.
We just put it here before end.
Now, let's define this like container.
And the name is like a container, just class class selector.
Open up that one and it here.
And I just copied this entire thing, based it down here and just change this to here and make it like
a container.
And I'm just going to copy just in case, because sometimes I can.
Here it is.
Here is like container and I will just put it like container there.
Right, because we can make mistakes and after that it will not work and we will scratch our head.
OK, why is this happening?
This and that.
OK, that is the one that we need to use it in order to see the results here.
When we click right.
They are like a container.
OK, now I'm going to write one more function.
Actually, we need to read more functions.
So here I will say we set like Moala now.
We used we up a lot of times here.
So I'm not going to explain what this will do.
And I will say class names, but like container that either HDMI, I want to set the inner HDMI of that
like container back to zero.
Right.
Nice.
So that is the two of the functions and we need an additional one function that remember, we just create
here being the models.
We create these to check movie status.
Right.
Genk check movie like status and we will use that one just really shortly here.
Now back down here, I will say export const display like in what it will do here, it will accept the
Leicht status.
Right.
Based on that status, we can do something now.
Make sure that you put Sumiko.
It's not something major, but we it's good to have like that.
Had a habit of just doing that.
OK, now first things first.
We want to create two constants called fool heart and let's make it empty at the moment.
And the second constants will be empty heart.
No, you will know what I'm trying to say here.
Let's let's go back down over to our index and I need to go to the icon part here.
Here it is.
Now, I need to grab these SBG here.
Right?
I cannot.
And I'm just going to grab the entire one.
I'm GSV.
Just stuff like that to grab it into one.
Oops.
And we need to go back to The View now for the first one, foolhardy.
I will just based it on here is the difference between foolhardy and empty heart.
You just read that dash.
Oh, right.
So I have to icons in the I will tell you.
OMG, Fuller, here it is.
So I have two icons there.
Here it is, the heart, the normal one.
And I mean this.
The empty one in the normal heart symbol.
Nice.
So they're coming from there.
So you should know which which part.
I mean I'm quoting right now.
It's coming from where right now.
So here, based on the liked status, we can do something so we can say, OK, no, I will use the document
that query selector and we have never used these before.
But with the document that query selector, I can also set attribute.
Right.
And I want to set the attribute here because here we are inside the atrip and I want to set that attribute
and I want to target the heart icon.
OK, so let's continue working in here.
So what I'm going to do is I'm going to use the set, actually.
So if it's like status, it's true.
So I want to target document that query selector and I want to see that part icon, that set attribute.
And I'm going to give it a try here.
I'm just going to target the atrip and I'm going to pass the full heart.
So if it's empty, change it to full heart, otherwise else do the vice versa.
I'm just going to keep it interesting and I'm going to change to empty heart.
Nice, empty heart actually.
Right.
And that is pretty much it.
What we need to do here.
And we are good to go.
Now, in the next lecture, we will see how this will play out, how what we have written here, it
will work.
And if we have some problem, actually, we will be able to see it.
Thank you very much for watching.
And now you know how to set attribute on a link on a traveling right.
It will go there, find this actual class and append these attributes, each going to change the attribute.
And based on here, we do have it over here.
Right.
So that is something that we need to do next lecture with the with the help of the of the controller.
So thank you very much.
And I will see you in the next one.