Not bad, not bad, we can display multiple images for every product.
So if I'm going to navigate back to the home page where I have the featured one, since I haven't set
up the product page, and if we'll take a look at the entertainment centre again, we have the main
picture and then we have a bunch of smaller images.
But of course, as we're clicking on image, we're changing the main one as well.
So that's good.
I mean, we got that one out of the way.
Now we want to focus on stars.
If you remember, from the API, we get two pieces of data.
We have a number of stars, and that is going to be between zero and five.
So whether that it's four point five or three point six or, I don't know, four point nine, something
along those lines.
And then also we have a number of reviews.
Now, when it comes to stars, I would want to display some nice icons.
So of course, if I have four point five stars, then I would want to have four full stars.
And then if let's say there's a half star, then of course I'll display at the half star.
So now again, we take a look.
Maybe there's one with less stars, ambassadors, for example, this one has only one point five stars,
so that's why I have one for one, one 1/2 and the rest of them are empty stars.
So that's what we're going to be working on right now.
Now, there are two approaches to this one.
First, we'll start with Emanuel and then in the next video, set up a programmatic way, how we can
display those stars.
So after that, you can pick and choose, if you like, the manual approach, you can leave it there.
If you like the programmatic one, of course, you can use that one instead.
Now, when it comes to manual, will have to do a little bit of work.
That's all.
There's going to be a little bit more copy and pasting.
So at the moment we have stars.
There's nothing in there about where we would need to pass in.
Two things we would need to pass in those reviews that are coming from the product as well as the stars.
So now, of course, I would want to navigate to my product.
So this is where I was showing the product, of course, or I'm sorry, my apologies, single product,
because remember, that's where we're displaying.
So we have a single product component.
And then in that single product, remember, we've got the images, we've got the stock and the car
as well as the stars.
So now I would want to pass in the stars, the stars data that is coming from the product as well as
the interviews.
Sorry, it all over the place.
I want the product actually.
We need a single product and we pass here stars as a prop and that is going to be equal to my stars.
And also I'll pass in the reverse of the reverse is equal to my reverse.
Now if you want to console log, please definitely do so.
And I think in this case, I'm going to do it as well, so say in the stars component, I'm looking
for my stars prop as well as the reviews.
And here, let's just start with a blog star's online reviews and in the council, by the way, I'll
close the sidebar here.
If I navigate you, I don't know this one.
The first one, I should see the images since that's what we worked on.
And then in the console, you can see that I have four point nine and 12.
So the stars are four point nine and the amount of reviews is 12.
And of course, we can do the same thing.
And by the way, at the moment, we'll never get the product.
We have nothing in there.
So if we navigate back to the home and I believe this one was three point six and nine hundred five,
and I think I'm going to work in this one because of course here I'll see more variations of the STOSZ.
There's going to be some pull ones.
There's going to be some half ones and some empty ones as well.
So in the internal center, what I would want to do right now in stars is just set up my wrapper.
Here it is.
I have all the styling right here.
So we're going to go here with the wrapper and serve the wrapper.
We're going to have to derivs.
And by the way, you know, I can get rid of this.
Consolmagno And inside of this, their arms are inside of this wrapper, which is a div.
We're going to have to days, like I just said, and one is going to have the class name of stars.
So this is where we'll set up our stars initially manually.
And then the second one will be reviews.
Now, reviews is going to be somewhat straightforward where we just go with the class name here and
we'll say reverse reviews, years like so.
And here I would just want to showcase the amount of reuse and add a little bit of text now, place
everything in parentheses, because I just think it's going to look a little bit better.
So say here reviews some accessing the prop, whatever the value is, and then we'll say customer and
then reviews and we should see the paragraph with the text of hundred customer reviews.
Beautiful.
So now of course we would need to work on stars and the way we'll set up the stars.
Is going to be in the following way, so start by spane and eventually there's going to be key when
we setting up the programatic way.
But in this case, I don't care about it.
I'll add a comment because in my opinion, it's going to be a little bit easier.
So say here Star and maybe add another comment, end of story.
And as far as the span, we just need to check.
Well, what is the value for the stars?
And this is going to be the case where we'll have to copy and paste this five times because they know
they there's going to be five stars, whether they're full, whether they're half.
I mean, if half, most likely it's going to be only one or they're empty.
So we need to understand that there's going to be five stars.
And for every value from one to five, I would want to check what is the actual value in the stars and
then depending on that, on display, the full one half one or the empty one.
And I think it's going to be easier if we just start working on it.
So instead of the span I'm going to set up right now, my expression and I'll say if the stars value
is bigger or equal to one, then I would want to have my touring operator.
And if the value is true, then I'm going to display the full one, which is going to be this glass
or I'm sorry, I guess more precise, like this component, the star feel.
And if not, then we'll set up another operator.
So there's going to be two tenantry operators.
Notice how we start over here.
We say stars is bigger than one.
Well, if that is the case, then I would want to display my icon.
And for the time being, let's just set up now, if that is not the case and the second we'll set up
another ternary operator.
So here I will just say no.
And what you should notice is one star.
Why one?
Because I know that this value, of course, is bigger than what it is bigger than one.
And in this case it is, I believe, three point six.
Correct.
So now, of course, we would just need to copy and paste this one and copy and paste five times.
And eventually, of course, if it's three point six, by the end, there's going to be a other option
where it is not bigger than three, four or whatever.
So what I'm trying to say here is that there's going to be another three operator.
We have a first one that just checks for the value of one.
So bigger or equals one, then I'm going to have my fourth star.
If not, then of course, I'm going to have to set up one more ternary operator.
And that is something we haven't done.
But again, this is just JavaScript at the end of the day.
So if it is bigger or equal to one than the star, if not, then set up one more ternary operator.
And in here I'll say if Starz is bigger or equal to zero point five.
Because this is going to be the case where I would want to display that half star or the empty one.
And again, I set up my question mark for my tour operator.
And in this case, I'm going to go with half, if that is true.
And then we the empty one with the component of just B.S. star if it is not true.
So we just go here with B.S. and star like show.
So if that is the case, then of course we display the empty star now because at the moment we just
have one full star.
Correct.
And of course, this is going to be the case where we need to start copy and pasting because we need
to have five stars now every time a copy and paste, of course, we'll have to turn this around as well.
So first time I copy and paste and for the second star, of course, I'm going to be looking for the
value that is bigger than to correct, because that second star is going to be responsible for the value
of two.
And I'm going to go to two and this is going to be one point five.
And like I said, essentially what we'll have to do is just copy and paste.
And eventually by the fifth star, hopefully the value will change.
Now, this case, of course, is going to change in this one, in the third one.
So here, let's copy and paste.
And now Forestar, if it is bigger than three or I'm sorry, it's going to change actually in the next
on my back.
So if it is bigger or equal to three and we know that this value, of course, is going to be three
point six, then display the full star, if not, well, then display to have one.
Now, again, this is going to work, but now let's think about it if you copy and paste one more time.
Now we're going to be looking for a value that is bigger than four, correct?
Now, is my stars bigger than four?
Well, it's not.
Why?
Because I know that it is going to be three point six.
All right.
So this is going to be the case where the value won't be true.
So in our ternary operator, I won't display the Forestar.
So now, of course, I'll have to check if the stars is bigger than three point six or I'm sorry, three
point five.
And of course, in this case, it's going to be bigger than three point five.
I already know that it is three point six.
So now I'll display the half star and I want to copy and paste this one more time.
So this is going to be the fifth time, of course, and now the value won't be equal to five.
Correct.
Because we know the stars is equal to three point six.
Now, in this case, we can remove bigger than because we know that our viewers won't be bigger than
five stars or you can keep it.
That doesn't really matter.
It's not going to affect functionality.
And we just changed this one to four point five.
Again, like I mentioned previously, this is a manual approach.
And by the way, it says here equal sorry should be like this since I changed my value.
That's why I said you can might as well keep it bigger or equal to five.
Otherwise it's not going to make sense.
Otherwise I'm just setting an equal to five.
And now check it out.
My value is three point six.
Correct.
That's the value for start.
And I have five spots and each man is just looking for specific value.
It starts with one.
So if the start is bigger than one, then I display the four star.
If the start is bigger until then, of course on display to your starts.
And I go on and on and on.
And eventually, of course, I'm going to come to the point.
And in this case it was at star number four where the value is not bigger or equal to four.
So this is not going to be any more a four star.
But however, it is bigger than three point five.
Correct.
And since that is bigger than three point five, we display to have one.
But then once we come to the last one to the star number five there, of course, the value is not equal
to five.
So this is going to right away go to the second tower operator and also in a second term.
Operator, this is not true.
Starz is not bigger or equal to four point five, so I'm not going to display one more half star.
That's why I go to the empty one.
And you just need to understand that the functionality will work with any value that we have for stars,
because the difference is going to be if, for example, my value is on a 1.0, then I'll just display
one spine and then the rest of them will fail.
And of course, I'll just show empty stars.
Again, this is a manual approach where we just need to copy and paste in next video and set up a programmatic
way where we don't have to copy and paste the same span five times.