Okay, we have our icons imported here.
What we can do is we can try to display rating.
So if we go back here to the network and let's clear it out and load the new one.
So we have a movies here and it's coming like this.
So this is the data that we have for our two current movies in our API or in our database in fact.
So what we have here is we have average rating.
So based on that number what we can do is we can decide how are we going to display or how many stars
we display.
So if I would click here I can have like a different stars and its styling is up to you.
But I will show you how we can actually alter the styling based on the data that we have in here.
So let's go back to our application here and we can decide, like you could use one star and another
star as a styling or empty or not empty.
Or we can color code this I will I will go get the the field one for now.
And I will show you how to style that in for for this one.
So I have one star but we want to have five of them.
So I will hold shift and option and I will duplicate it at five times.
Okay.
So if I will try to see that now they are on like that.
So what I can do is I can quickly fix it.
I will put it in a inside the div.
So div like this and I will take all of them.
And I put it here.
So they will be inside the div.
But the div I can use style it as a flex.
I don't need to create a class name for me.
I can use the tailwind flex so if I will save it like this.
You can see they are next to each other, so that's good.
Now what we need to do is we need to put some styling on the stars.
So I will do class name and we can use a tailwind for that as well.
Then it comes with a lot of different colors.
So if for example I do a red or I can do text red, you see each of these kind of comes with different
kind of shading.
So 5100 and so on are 250.
and that will be different kind of read.
And you have for different colors as well.
This is just an example, right.
But if you go blue you see you have the same kind of thing.
So that's predefined styles that we can use.
What I'm interested is in orange, but you can pick your own color and you can pick your own kind of
shading.
I will go for maybe text orange 400.
So if I will save it now I can go here.
And I have that same color coded.
So this looks like it's a number of rating is one out of five.
But in fact this should be based on the average rating.
And at the moment we have this one five.
So when we need to find a way how to tell to apply that style if we have that there.
So for example, so what what we can do here is inside the class name I will use the curly braces.
That means I can have some JavaScript logic inside there.
So what I'm trying to do is I will check if movie average and that's how I call it here.
So this is average rating.
I can even copy that from there.
And average rating.
And here what I can do is I can check if that's bigger than zero.
If that's bigger than zero I can use ternary operator and I can apply this or I can do like that.
So if this bigger then this will be applied.
Otherwise it's not going to be applied.
So if I will save it here and I will go here, you can see this is bigger than zero.
So it is applied here.
So if I will go back here and let's say remove all of this and duplicate it five times again.
But this will be one, two, three and four.
So basically we will check if star if is bigger than a specific average rating then we will apply that
style.
So if I go here all of the five are here.
So what I need to do is I need to do a test.
So if I will go ratings maybe I can go ratings for this movie there, and I will change it for, let's
say, two.
So we'll have something to work with to see if I actually it's working.
So Titanic will be still five and I've just changed the rating for two on the avatar.
You can see two is displayed here.
And so because that's a very rich rating.
So we can go here and you can see average rating is actually two and this one is five.
So if I click here that's five.
If I click here that's two.
So this is working fine.
And what we have is we have conditional styling.
So this style comes from a tailwind.
And this one is conditional.
So I check what's actually average rating.
And comparative is bigger than zero.
And if it is so then I will apply it.
Otherwise I'm not going to do anything here.
So in that case we have our rating display.
What I can also do is I can display how many ratings we have so far.
So I can put it in the bracket like this.
Or maybe I can put even a paragraph here inside this paragraph I will do this one.
This will be actually rendered, this parenthesis will be rendered there.
And what I want to do is inside there, I want to put movie.
And the thing that I can put is number of ratings.
So I will go back here and display that here.
So if I will go back to my application here, you can see here one is display here because this is based
on one number of rating.
If I will go here this is also one number of rating.
So we have it at the moment in the database.
So this is working fine.
There is some uh problem with alignment alignments but we will style it later on in the course.
At the moment we are trying to get the data and display there.
So this is working.
We have a rating.
And now in place as I said you could use probably that empty icon if you like based on some conditions.
So you could do that like like this.
So if movie rating is this one then you display if a star.
Otherwise you will display a different star.
It's up to you how you want to do it.
I will just color code it.
I think it's looking a little bit more interesting then.