1
00:00:00,360 --> 00:00:05,940
Not bad, not bad, we can display multiple images for every product.

2
00:00:06,240 --> 00:00:11,430
So if I'm going to navigate back to the home page where I have the featured one, since I haven't set

3
00:00:11,430 --> 00:00:16,620
up the product page, and if we'll take a look at the entertainment centre again, we have the main

4
00:00:16,620 --> 00:00:20,250
picture and then we have a bunch of smaller images.

5
00:00:20,530 --> 00:00:25,620
But of course, as we're clicking on image, we're changing the main one as well.

6
00:00:26,010 --> 00:00:26,730
So that's good.

7
00:00:27,180 --> 00:00:29,000
I mean, we got that one out of the way.

8
00:00:29,340 --> 00:00:31,580
Now we want to focus on stars.

9
00:00:31,950 --> 00:00:36,440
If you remember, from the API, we get two pieces of data.

10
00:00:36,870 --> 00:00:41,330
We have a number of stars, and that is going to be between zero and five.

11
00:00:41,640 --> 00:00:46,830
So whether that it's four point five or three point six or, I don't know, four point nine, something

12
00:00:46,830 --> 00:00:47,600
along those lines.

13
00:00:48,030 --> 00:00:51,020
And then also we have a number of reviews.

14
00:00:51,450 --> 00:00:56,180
Now, when it comes to stars, I would want to display some nice icons.

15
00:00:56,190 --> 00:01:01,500
So of course, if I have four point five stars, then I would want to have four full stars.

16
00:01:01,800 --> 00:01:07,680
And then if let's say there's a half star, then of course I'll display at the half star.

17
00:01:08,010 --> 00:01:09,120
So now again, we take a look.

18
00:01:10,050 --> 00:01:15,320
Maybe there's one with less stars, ambassadors, for example, this one has only one point five stars,

19
00:01:15,330 --> 00:01:21,540
so that's why I have one for one, one 1/2 and the rest of them are empty stars.

20
00:01:21,690 --> 00:01:23,760
So that's what we're going to be working on right now.

21
00:01:23,910 --> 00:01:26,280
Now, there are two approaches to this one.

22
00:01:26,430 --> 00:01:33,000
First, we'll start with Emanuel and then in the next video, set up a programmatic way, how we can

23
00:01:33,210 --> 00:01:34,480
display those stars.

24
00:01:34,680 --> 00:01:40,740
So after that, you can pick and choose, if you like, the manual approach, you can leave it there.

25
00:01:41,040 --> 00:01:45,700
If you like the programmatic one, of course, you can use that one instead.

26
00:01:46,020 --> 00:01:48,990
Now, when it comes to manual, will have to do a little bit of work.

27
00:01:49,000 --> 00:01:49,530
That's all.

28
00:01:49,680 --> 00:01:52,550
There's going to be a little bit more copy and pasting.

29
00:01:53,010 --> 00:01:55,350
So at the moment we have stars.

30
00:01:55,540 --> 00:01:58,830
There's nothing in there about where we would need to pass in.

31
00:01:58,830 --> 00:02:06,060
Two things we would need to pass in those reviews that are coming from the product as well as the stars.

32
00:02:06,450 --> 00:02:09,960
So now, of course, I would want to navigate to my product.

33
00:02:10,780 --> 00:02:16,200
So this is where I was showing the product, of course, or I'm sorry, my apologies, single product,

34
00:02:16,380 --> 00:02:18,300
because remember, that's where we're displaying.

35
00:02:18,600 --> 00:02:21,330
So we have a single product component.

36
00:02:21,570 --> 00:02:28,260
And then in that single product, remember, we've got the images, we've got the stock and the car

37
00:02:28,350 --> 00:02:29,860
as well as the stars.

38
00:02:30,420 --> 00:02:38,490
So now I would want to pass in the stars, the stars data that is coming from the product as well as

39
00:02:38,490 --> 00:02:39,240
the interviews.

40
00:02:39,240 --> 00:02:41,520
Sorry, it all over the place.

41
00:02:41,530 --> 00:02:43,320
I want the product actually.

42
00:02:43,320 --> 00:02:50,340
We need a single product and we pass here stars as a prop and that is going to be equal to my stars.

43
00:02:50,700 --> 00:02:58,170
And also I'll pass in the reverse of the reverse is equal to my reverse.

44
00:02:58,500 --> 00:03:01,440
Now if you want to console log, please definitely do so.

45
00:03:02,510 --> 00:03:07,460
And I think in this case, I'm going to do it as well, so say in the stars component, I'm looking

46
00:03:07,460 --> 00:03:11,090
for my stars prop as well as the reviews.

47
00:03:12,800 --> 00:03:21,100
And here, let's just start with a blog star's online reviews and in the council, by the way, I'll

48
00:03:21,100 --> 00:03:22,140
close the sidebar here.

49
00:03:22,510 --> 00:03:25,270
If I navigate you, I don't know this one.

50
00:03:25,390 --> 00:03:29,260
The first one, I should see the images since that's what we worked on.

51
00:03:29,500 --> 00:03:33,940
And then in the console, you can see that I have four point nine and 12.

52
00:03:34,360 --> 00:03:39,750
So the stars are four point nine and the amount of reviews is 12.

53
00:03:40,150 --> 00:03:42,190
And of course, we can do the same thing.

54
00:03:42,220 --> 00:03:44,440
And by the way, at the moment, we'll never get the product.

55
00:03:44,890 --> 00:03:45,820
We have nothing in there.

56
00:03:45,830 --> 00:03:52,690
So if we navigate back to the home and I believe this one was three point six and nine hundred five,

57
00:03:53,320 --> 00:04:00,490
and I think I'm going to work in this one because of course here I'll see more variations of the STOSZ.

58
00:04:00,730 --> 00:04:01,960
There's going to be some pull ones.

59
00:04:01,960 --> 00:04:05,660
There's going to be some half ones and some empty ones as well.

60
00:04:06,070 --> 00:04:13,110
So in the internal center, what I would want to do right now in stars is just set up my wrapper.

61
00:04:13,270 --> 00:04:13,900
Here it is.

62
00:04:13,990 --> 00:04:15,640
I have all the styling right here.

63
00:04:16,000 --> 00:04:19,750
So we're going to go here with the wrapper and serve the wrapper.

64
00:04:19,760 --> 00:04:21,860
We're going to have to derivs.

65
00:04:21,880 --> 00:04:24,520
And by the way, you know, I can get rid of this.

66
00:04:24,520 --> 00:04:29,470
Consolmagno And inside of this, their arms are inside of this wrapper, which is a div.

67
00:04:29,650 --> 00:04:34,810
We're going to have to days, like I just said, and one is going to have the class name of stars.

68
00:04:35,110 --> 00:04:38,650
So this is where we'll set up our stars initially manually.

69
00:04:39,070 --> 00:04:41,380
And then the second one will be reviews.

70
00:04:41,380 --> 00:04:47,120
Now, reviews is going to be somewhat straightforward where we just go with the class name here and

71
00:04:47,120 --> 00:04:50,200
we'll say reverse reviews, years like so.

72
00:04:50,440 --> 00:04:56,710
And here I would just want to showcase the amount of reuse and add a little bit of text now, place

73
00:04:56,710 --> 00:05:00,690
everything in parentheses, because I just think it's going to look a little bit better.

74
00:05:01,030 --> 00:05:08,280
So say here reviews some accessing the prop, whatever the value is, and then we'll say customer and

75
00:05:08,280 --> 00:05:15,760
then reviews and we should see the paragraph with the text of hundred customer reviews.

76
00:05:15,760 --> 00:05:16,240
Beautiful.

77
00:05:16,510 --> 00:05:21,820
So now of course we would need to work on stars and the way we'll set up the stars.

78
00:05:22,850 --> 00:05:28,670
Is going to be in the following way, so start by spane and eventually there's going to be key when

79
00:05:28,670 --> 00:05:30,290
we setting up the programatic way.

80
00:05:30,530 --> 00:05:32,210
But in this case, I don't care about it.

81
00:05:32,390 --> 00:05:35,980
I'll add a comment because in my opinion, it's going to be a little bit easier.

82
00:05:36,320 --> 00:05:41,700
So say here Star and maybe add another comment, end of story.

83
00:05:42,300 --> 00:05:45,780
And as far as the span, we just need to check.

84
00:05:45,890 --> 00:05:48,430
Well, what is the value for the stars?

85
00:05:48,440 --> 00:05:54,660
And this is going to be the case where we'll have to copy and paste this five times because they know

86
00:05:54,680 --> 00:05:58,880
they there's going to be five stars, whether they're full, whether they're half.

87
00:05:58,890 --> 00:06:02,930
I mean, if half, most likely it's going to be only one or they're empty.

88
00:06:03,390 --> 00:06:06,350
So we need to understand that there's going to be five stars.

89
00:06:06,740 --> 00:06:14,630
And for every value from one to five, I would want to check what is the actual value in the stars and

90
00:06:14,630 --> 00:06:19,190
then depending on that, on display, the full one half one or the empty one.

91
00:06:19,230 --> 00:06:22,460
And I think it's going to be easier if we just start working on it.

92
00:06:22,820 --> 00:06:29,270
So instead of the span I'm going to set up right now, my expression and I'll say if the stars value

93
00:06:29,270 --> 00:06:36,700
is bigger or equal to one, then I would want to have my touring operator.

94
00:06:36,980 --> 00:06:42,920
And if the value is true, then I'm going to display the full one, which is going to be this glass

95
00:06:42,950 --> 00:06:47,540
or I'm sorry, I guess more precise, like this component, the star feel.

96
00:06:47,810 --> 00:06:51,370
And if not, then we'll set up another operator.

97
00:06:51,680 --> 00:06:53,480
So there's going to be two tenantry operators.

98
00:06:53,510 --> 00:06:54,740
Notice how we start over here.

99
00:06:55,010 --> 00:06:57,590
We say stars is bigger than one.

100
00:06:57,950 --> 00:07:01,820
Well, if that is the case, then I would want to display my icon.

101
00:07:02,150 --> 00:07:07,280
And for the time being, let's just set up now, if that is not the case and the second we'll set up

102
00:07:07,280 --> 00:07:08,750
another ternary operator.

103
00:07:09,110 --> 00:07:10,520
So here I will just say no.

104
00:07:11,330 --> 00:07:14,140
And what you should notice is one star.

105
00:07:14,270 --> 00:07:15,090
Why one?

106
00:07:15,140 --> 00:07:21,100
Because I know that this value, of course, is bigger than what it is bigger than one.

107
00:07:21,650 --> 00:07:24,930
And in this case it is, I believe, three point six.

108
00:07:25,070 --> 00:07:25,540
Correct.

109
00:07:25,790 --> 00:07:31,340
So now, of course, we would just need to copy and paste this one and copy and paste five times.

110
00:07:31,820 --> 00:07:37,610
And eventually, of course, if it's three point six, by the end, there's going to be a other option

111
00:07:37,640 --> 00:07:40,700
where it is not bigger than three, four or whatever.

112
00:07:41,150 --> 00:07:45,710
So what I'm trying to say here is that there's going to be another three operator.

113
00:07:45,980 --> 00:07:49,460
We have a first one that just checks for the value of one.

114
00:07:49,460 --> 00:07:53,410
So bigger or equals one, then I'm going to have my fourth star.

115
00:07:53,690 --> 00:07:59,120
If not, then of course, I'm going to have to set up one more ternary operator.

116
00:07:59,150 --> 00:08:00,470
And that is something we haven't done.

117
00:08:00,480 --> 00:08:03,900
But again, this is just JavaScript at the end of the day.

118
00:08:04,250 --> 00:08:11,240
So if it is bigger or equal to one than the star, if not, then set up one more ternary operator.

119
00:08:11,450 --> 00:08:17,210
And in here I'll say if Starz is bigger or equal to zero point five.

120
00:08:18,070 --> 00:08:23,220
Because this is going to be the case where I would want to display that half star or the empty one.

121
00:08:23,270 --> 00:08:27,480
And again, I set up my question mark for my tour operator.

122
00:08:27,760 --> 00:08:30,990
And in this case, I'm going to go with half, if that is true.

123
00:08:31,570 --> 00:08:38,280
And then we the empty one with the component of just B.S. star if it is not true.

124
00:08:38,560 --> 00:08:42,980
So we just go here with B.S. and star like show.

125
00:08:43,290 --> 00:08:49,510
So if that is the case, then of course we display the empty star now because at the moment we just

126
00:08:49,510 --> 00:08:50,530
have one full star.

127
00:08:50,530 --> 00:08:50,910
Correct.

128
00:08:51,310 --> 00:08:56,560
And of course, this is going to be the case where we need to start copy and pasting because we need

129
00:08:56,560 --> 00:09:02,150
to have five stars now every time a copy and paste, of course, we'll have to turn this around as well.

130
00:09:02,410 --> 00:09:07,180
So first time I copy and paste and for the second star, of course, I'm going to be looking for the

131
00:09:07,180 --> 00:09:14,200
value that is bigger than to correct, because that second star is going to be responsible for the value

132
00:09:14,200 --> 00:09:14,740
of two.

133
00:09:15,100 --> 00:09:19,560
And I'm going to go to two and this is going to be one point five.

134
00:09:19,840 --> 00:09:24,190
And like I said, essentially what we'll have to do is just copy and paste.

135
00:09:24,410 --> 00:09:28,690
And eventually by the fifth star, hopefully the value will change.

136
00:09:28,910 --> 00:09:32,500
Now, this case, of course, is going to change in this one, in the third one.

137
00:09:32,770 --> 00:09:34,270
So here, let's copy and paste.

138
00:09:34,540 --> 00:09:41,530
And now Forestar, if it is bigger than three or I'm sorry, it's going to change actually in the next

139
00:09:41,530 --> 00:09:42,540
on my back.

140
00:09:42,730 --> 00:09:47,260
So if it is bigger or equal to three and we know that this value, of course, is going to be three

141
00:09:47,260 --> 00:09:52,840
point six, then display the full star, if not, well, then display to have one.

142
00:09:52,870 --> 00:09:58,420
Now, again, this is going to work, but now let's think about it if you copy and paste one more time.

143
00:09:58,720 --> 00:10:02,130
Now we're going to be looking for a value that is bigger than four, correct?

144
00:10:02,590 --> 00:10:05,030
Now, is my stars bigger than four?

145
00:10:05,530 --> 00:10:06,160
Well, it's not.

146
00:10:06,400 --> 00:10:06,840
Why?

147
00:10:06,880 --> 00:10:09,440
Because I know that it is going to be three point six.

148
00:10:09,460 --> 00:10:09,870
All right.

149
00:10:10,210 --> 00:10:14,070
So this is going to be the case where the value won't be true.

150
00:10:14,440 --> 00:10:18,020
So in our ternary operator, I won't display the Forestar.

151
00:10:18,430 --> 00:10:24,310
So now, of course, I'll have to check if the stars is bigger than three point six or I'm sorry, three

152
00:10:24,310 --> 00:10:24,790
point five.

153
00:10:25,180 --> 00:10:28,870
And of course, in this case, it's going to be bigger than three point five.

154
00:10:28,900 --> 00:10:30,820
I already know that it is three point six.

155
00:10:31,120 --> 00:10:35,930
So now I'll display the half star and I want to copy and paste this one more time.

156
00:10:35,950 --> 00:10:40,960
So this is going to be the fifth time, of course, and now the value won't be equal to five.

157
00:10:40,960 --> 00:10:41,370
Correct.

158
00:10:41,380 --> 00:10:44,020
Because we know the stars is equal to three point six.

159
00:10:44,320 --> 00:10:50,260
Now, in this case, we can remove bigger than because we know that our viewers won't be bigger than

160
00:10:50,260 --> 00:10:52,080
five stars or you can keep it.

161
00:10:52,080 --> 00:10:52,890
That doesn't really matter.

162
00:10:52,900 --> 00:10:54,220
It's not going to affect functionality.

163
00:10:54,460 --> 00:10:57,810
And we just changed this one to four point five.

164
00:10:58,060 --> 00:11:02,560
Again, like I mentioned previously, this is a manual approach.

165
00:11:02,830 --> 00:11:08,910
And by the way, it says here equal sorry should be like this since I changed my value.

166
00:11:09,110 --> 00:11:12,970
That's why I said you can might as well keep it bigger or equal to five.

167
00:11:12,980 --> 00:11:14,290
Otherwise it's not going to make sense.

168
00:11:14,480 --> 00:11:16,390
Otherwise I'm just setting an equal to five.

169
00:11:16,660 --> 00:11:17,590
And now check it out.

170
00:11:17,920 --> 00:11:19,990
My value is three point six.

171
00:11:20,350 --> 00:11:20,860
Correct.

172
00:11:21,070 --> 00:11:22,660
That's the value for start.

173
00:11:23,050 --> 00:11:29,500
And I have five spots and each man is just looking for specific value.

174
00:11:29,800 --> 00:11:30,850
It starts with one.

175
00:11:31,130 --> 00:11:34,830
So if the start is bigger than one, then I display the four star.

176
00:11:35,260 --> 00:11:39,340
If the start is bigger until then, of course on display to your starts.

177
00:11:39,340 --> 00:11:41,380
And I go on and on and on.

178
00:11:41,680 --> 00:11:45,130
And eventually, of course, I'm going to come to the point.

179
00:11:45,310 --> 00:11:52,440
And in this case it was at star number four where the value is not bigger or equal to four.

180
00:11:52,630 --> 00:11:54,850
So this is not going to be any more a four star.

181
00:11:55,090 --> 00:11:57,460
But however, it is bigger than three point five.

182
00:11:57,850 --> 00:11:58,230
Correct.

183
00:11:58,630 --> 00:12:01,690
And since that is bigger than three point five, we display to have one.

184
00:12:01,990 --> 00:12:09,250
But then once we come to the last one to the star number five there, of course, the value is not equal

185
00:12:09,580 --> 00:12:10,420
to five.

186
00:12:10,930 --> 00:12:17,640
So this is going to right away go to the second tower operator and also in a second term.

187
00:12:17,680 --> 00:12:19,390
Operator, this is not true.

188
00:12:19,690 --> 00:12:25,740
Starz is not bigger or equal to four point five, so I'm not going to display one more half star.

189
00:12:25,970 --> 00:12:27,700
That's why I go to the empty one.

190
00:12:27,940 --> 00:12:34,210
And you just need to understand that the functionality will work with any value that we have for stars,

191
00:12:34,510 --> 00:12:41,200
because the difference is going to be if, for example, my value is on a 1.0, then I'll just display

192
00:12:41,230 --> 00:12:44,260
one spine and then the rest of them will fail.

193
00:12:44,620 --> 00:12:47,810
And of course, I'll just show empty stars.

194
00:12:47,830 --> 00:12:53,140
Again, this is a manual approach where we just need to copy and paste in next video and set up a programmatic

195
00:12:53,140 --> 00:12:58,330
way where we don't have to copy and paste the same span five times.