1 00:00:00,290 --> 00:00:00,620 All right. 2 00:00:00,620 --> 00:00:05,060 So now we're going to add the ratings component or rating component. 3 00:00:05,060 --> 00:00:07,460 So basically, I want to show the number of stars. 4 00:00:07,460 --> 00:00:13,970 If we look at our data, we have a rating and it can be it can be like 3.5. 5 00:00:13,970 --> 00:00:18,200 So basically 1 to 5 and it can be 0.5 as well. 6 00:00:18,200 --> 00:00:25,670 So we have a few different icons that we need to show a full star, an empty star and a half star. 7 00:00:25,670 --> 00:00:29,540 So let's create a new component in the components folder. 8 00:00:29,540 --> 00:00:31,250 Let's call it rating. 9 00:00:31,250 --> 00:00:35,870 We'll say Ratings X and FC. 10 00:00:36,860 --> 00:00:39,590 Now I'm going to bring in a couple icons. 11 00:00:39,590 --> 00:00:45,110 So let's import and say F a star. 12 00:00:45,110 --> 00:00:46,250 So that's the first one. 13 00:00:46,250 --> 00:00:48,710 Then we want F a star. 14 00:00:50,300 --> 00:00:54,450 Far star half alt and then far red star. 15 00:00:54,470 --> 00:00:58,160 So we're bringing that in from react icon slash far. 16 00:00:58,340 --> 00:01:04,280 And this is going to take in for props the value which is the actual rating and then any text you want 17 00:01:04,310 --> 00:01:04,849 next to it. 18 00:01:04,849 --> 00:01:11,450 So in this case, I want to say like five reviews or two reviews, however many reviews and ratings 19 00:01:11,450 --> 00:01:12,260 there are. 20 00:01:12,710 --> 00:01:13,130 All right. 21 00:01:13,160 --> 00:01:14,930 Now let's see. 22 00:01:14,930 --> 00:01:16,160 Let's add. 23 00:01:17,470 --> 00:01:19,750 This div right here that wraps everything. 24 00:01:19,750 --> 00:01:22,690 We're going to give that a class name of rating. 25 00:01:22,690 --> 00:01:25,840 So I already have a bunch of CSS for this. 26 00:01:25,840 --> 00:01:32,440 So rating and then we're going to basically have a span for each star, right? 27 00:01:32,440 --> 00:01:34,120 So let's end that span. 28 00:01:34,960 --> 00:01:35,410 Okay. 29 00:01:35,410 --> 00:01:40,330 And then inside of that, we want to check we want to have a conditional here. 30 00:01:40,330 --> 00:01:45,550 So we're going to say if the value is greater than. 31 00:01:46,690 --> 00:01:47,920 I guess. 32 00:01:47,950 --> 00:01:48,640 Is that right? 33 00:01:48,640 --> 00:01:49,150 Yeah, it is. 34 00:01:49,150 --> 00:01:49,660 All right. 35 00:01:50,420 --> 00:01:58,880 So the value, if it's greater than or equal to one, then we're going to show the far star icon. 36 00:01:58,970 --> 00:02:06,110 Else If the value is greater than or equal to 0.5, then we're going to show the half star. 37 00:02:06,230 --> 00:02:09,710 Else we're going to show Reg Star, which is an empty star. 38 00:02:10,160 --> 00:02:10,580 All right. 39 00:02:10,580 --> 00:02:14,460 So if it's greater or equal to one, show the full star. 40 00:02:14,480 --> 00:02:17,940 If it's greater or equal to 0.5, show the half star. 41 00:02:17,960 --> 00:02:21,500 If not, then show the the empty star. 42 00:02:22,130 --> 00:02:25,520 Okay, Now we need to do this five, four more times. 43 00:02:25,520 --> 00:02:25,960 Right? 44 00:02:25,970 --> 00:02:28,310 So let's take this span. 45 00:02:28,990 --> 00:02:30,880 And let's copy it down. 46 00:02:30,880 --> 00:02:35,290 Except now we're going to say if the value is two, because remember, this is the second star. 47 00:02:35,290 --> 00:02:37,360 So we're now testing for that. 48 00:02:37,360 --> 00:02:41,560 So if it's greater than or equal to two, we're going to show the full star. 49 00:02:41,560 --> 00:02:47,260 If it's greater than or equal to 1.5, we're going to show the half else. 50 00:02:47,260 --> 00:02:48,700 Show the empty. 51 00:02:48,940 --> 00:02:49,120 Okay. 52 00:02:49,150 --> 00:02:53,710 So now we'll grab this again this span and let's bring that down. 53 00:02:53,710 --> 00:02:56,520 So that's three, four, five, so five total. 54 00:02:56,530 --> 00:03:03,550 Now, the third one, we're going to change that to three and then this to 2.5. 55 00:03:04,090 --> 00:03:04,390 All right. 56 00:03:04,390 --> 00:03:06,160 Then we'll change this to four. 57 00:03:06,640 --> 00:03:09,430 Change that to 3.5. 58 00:03:09,980 --> 00:03:11,270 This last one here. 59 00:03:11,270 --> 00:03:13,310 Change that to five. 60 00:03:13,890 --> 00:03:15,840 And 4.5. 61 00:03:16,660 --> 00:03:17,160 Okay. 62 00:03:17,170 --> 00:03:24,200 Now, as far as the text goes, let's go under the last span here. 63 00:03:24,220 --> 00:03:30,640 So under the last star and let's say span and I'm going to give this a class of let's say. 64 00:03:31,430 --> 00:03:32,530 What do we want to use here? 65 00:03:32,540 --> 00:03:38,930 Let's say rating dash text, and I want to test for the text. 66 00:03:38,930 --> 00:03:41,120 So we'll say if text. 67 00:03:41,210 --> 00:03:43,490 So we could do a ternary like this. 68 00:03:43,520 --> 00:03:47,510 If text, then show text else null or something. 69 00:03:47,510 --> 00:03:54,080 But we can also use the double ampersand and not have to do the final, you know, the final else or 70 00:03:54,080 --> 00:03:54,650 whatever. 71 00:03:54,650 --> 00:03:55,850 So just text. 72 00:03:55,850 --> 00:03:59,960 If it's there, then show it and then export the rating. 73 00:04:00,140 --> 00:04:04,370 Save that and I do have some CSS in the. 74 00:04:05,520 --> 00:04:07,460 Uh, asset styles. 75 00:04:07,470 --> 00:04:09,360 So this stuff right here. 76 00:04:10,430 --> 00:04:12,560 So just make sure you have that. 77 00:04:13,820 --> 00:04:14,210 All right. 78 00:04:14,240 --> 00:04:16,399 Now we're going to bring this in. 79 00:04:16,399 --> 00:04:16,820 Let's see. 80 00:04:16,820 --> 00:04:20,089 We're going to bring it into the product component. 81 00:04:20,740 --> 00:04:22,630 Because that's where I want to display this. 82 00:04:22,660 --> 00:04:27,100 We're also going to display it on the product page, but let's bring it in. 83 00:04:27,880 --> 00:04:29,050 Import. 84 00:04:30,190 --> 00:04:31,330 Rating. 85 00:04:32,700 --> 00:04:35,070 Rating from dot slash rating. 86 00:04:35,070 --> 00:04:37,350 It's in the same same folder. 87 00:04:37,350 --> 00:04:39,360 And let's go down. 88 00:04:40,620 --> 00:04:42,270 Where do we want to put this? 89 00:04:43,060 --> 00:04:45,130 Let's go right above the price. 90 00:04:45,130 --> 00:04:52,980 So right below this link here and we're going to say card dot text as a div. 91 00:04:54,550 --> 00:04:56,530 Close card text. 92 00:04:56,530 --> 00:04:59,590 And then inside that we'll have our. 93 00:05:01,270 --> 00:05:05,800 Rating and we're going to pass in the value. 94 00:05:07,580 --> 00:05:09,080 Remember, it takes value in text. 95 00:05:09,080 --> 00:05:15,320 So the value is going to be the product dot rating. 96 00:05:15,960 --> 00:05:17,730 And text. 97 00:05:17,970 --> 00:05:20,970 So for the text, I want the number of reviews. 98 00:05:20,970 --> 00:05:27,390 And remember, that's actually if we look at the data in the Json JavaScript file, it has this Num 99 00:05:27,390 --> 00:05:28,380 reviews. 100 00:05:28,380 --> 00:05:35,130 So let's do this, let's put in some curly braces and we'll put some backticks. 101 00:05:37,150 --> 00:05:40,030 And let's put in the Num reviews. 102 00:05:40,030 --> 00:05:50,410 So we'll say product dot num reviews and then just the text actually outside of that, just the text 103 00:05:50,410 --> 00:05:51,760 of reviews. 104 00:05:54,760 --> 00:06:00,430 All right, let's save that and check it out so you can see we have our ratings. 105 00:06:00,430 --> 00:06:03,700 And if we look at the data again, let's look at the first one. 106 00:06:03,730 --> 00:06:05,470 The first one is 4.5. 107 00:06:05,470 --> 00:06:09,720 So you can see we have four full stars and one half star. 108 00:06:09,730 --> 00:06:12,370 Then we have a rating of four. 109 00:06:12,370 --> 00:06:14,410 So four stars. 110 00:06:14,440 --> 00:06:17,770 The Canon camera has a rating of three. 111 00:06:17,770 --> 00:06:19,300 So three stars. 112 00:06:20,390 --> 00:06:25,400 The PlayStation has a rating of five, so five and so on. 113 00:06:25,670 --> 00:06:29,500 Now another thing I want to do is for the title. 114 00:06:29,510 --> 00:06:35,930 If I were to change, you guys don't have to do this, but I'm just going to change the first one to 115 00:06:35,930 --> 00:06:37,160 just AirPods. 116 00:06:37,160 --> 00:06:44,570 So notice how since this only takes up one line instead of two, the card is shorter, so I want them 117 00:06:44,570 --> 00:06:47,990 all to be the same size no matter how long the title. 118 00:06:47,990 --> 00:06:54,080 So what I'm going to do is have all the titles, be just one line and add an ellipsis to it. 119 00:06:54,080 --> 00:06:56,240 So I'm going to put that back. 120 00:06:56,240 --> 00:07:03,440 And then in the index CSS, I just want to show you I have this product title class and basically we're 121 00:07:03,440 --> 00:07:09,350 setting the height, we're setting the white whitespace to no wrap, so we're prevent wrapping and then 122 00:07:09,350 --> 00:07:13,220 we're adding an ellipsis, which is the three dots. 123 00:07:13,220 --> 00:07:20,540 So all we have to do is add that class in the product component right here where we have the card title 124 00:07:20,540 --> 00:07:30,410 as a div, we can just simply add the class name and set that to product dash title, save that and 125 00:07:30,410 --> 00:07:36,020 now you'll see that it'll just they'll all be one line and they have the ellipses. 126 00:07:36,230 --> 00:07:38,450 So it's up to you if you want to do that. 127 00:07:38,450 --> 00:07:39,710 I just think it looks better. 128 00:07:39,710 --> 00:07:42,290 So we're going to just stick it, stick with that. 129 00:07:43,620 --> 00:07:44,070 Okay. 130 00:07:44,070 --> 00:07:47,490 So I think yeah, I think we're good for this video. 131 00:07:47,490 --> 00:07:49,890 So we have all our products listed. 132 00:07:49,920 --> 00:07:54,360 Obviously it's just dummy data for now, but at least we have the components and so on. 133 00:07:54,360 --> 00:07:57,870 In the next video I want to create the details screen. 134 00:07:58,050 --> 00:07:58,470 Okay. 135 00:07:58,470 --> 00:08:04,380 And then once we do that, once we have the basic products and product page, we'll start to jump into 136 00:08:04,380 --> 00:08:10,620 the back end so that we can serve our products from an API rather than just bringing them in from a 137 00:08:10,620 --> 00:08:11,160 file.