WEBVTT 00:02.120 --> 00:05.240 Okay, we have our icons imported here. 00:05.240 --> 00:08.780 What we can do is we can try to display rating. 00:08.930 --> 00:15.170 So if we go back here to the network and let's clear it out and load the new one. 00:15.170 --> 00:17.870 So we have a movies here and it's coming like this. 00:17.870 --> 00:23.840 So this is the data that we have for our two current movies in our API or in our database in fact. 00:23.840 --> 00:27.020 So what we have here is we have average rating. 00:27.020 --> 00:33.800 So based on that number what we can do is we can decide how are we going to display or how many stars 00:33.800 --> 00:34.280 we display. 00:34.280 --> 00:39.290 So if I would click here I can have like a different stars and its styling is up to you. 00:39.290 --> 00:44.750 But I will show you how we can actually alter the styling based on the data that we have in here. 00:44.750 --> 00:52.010 So let's go back to our application here and we can decide, like you could use one star and another 00:52.010 --> 00:55.010 star as a styling or empty or not empty. 00:55.040 --> 01:00.200 Or we can color code this I will I will go get the the field one for now. 01:00.200 --> 01:05.210 And I will show you how to style that in for for this one. 01:05.210 --> 01:08.830 So I have one star but we want to have five of them. 01:08.830 --> 01:14.260 So I will hold shift and option and I will duplicate it at five times. 01:14.290 --> 01:14.710 Okay. 01:14.740 --> 01:19.360 So if I will try to see that now they are on like that. 01:19.360 --> 01:22.150 So what I can do is I can quickly fix it. 01:22.180 --> 01:24.520 I will put it in a inside the div. 01:26.920 --> 01:30.670 So div like this and I will take all of them. 01:30.670 --> 01:31.780 And I put it here. 01:31.780 --> 01:33.280 So they will be inside the div. 01:33.280 --> 01:36.970 But the div I can use style it as a flex. 01:36.970 --> 01:40.090 I don't need to create a class name for me. 01:40.090 --> 01:43.750 I can use the tailwind flex so if I will save it like this. 01:43.780 --> 01:46.810 You can see they are next to each other, so that's good. 01:46.840 --> 01:51.550 Now what we need to do is we need to put some styling on the stars. 01:51.550 --> 01:57.670 So I will do class name and we can use a tailwind for that as well. 01:57.940 --> 02:00.940 Then it comes with a lot of different colors. 02:01.240 --> 02:10.840 So if for example I do a red or I can do text red, you see each of these kind of comes with different 02:10.990 --> 02:11.650 kind of shading. 02:11.650 --> 02:14.140 So 5100 and so on are 250. 02:14.140 --> 02:16.710 and that will be different kind of read. 02:16.710 --> 02:18.900 And you have for different colors as well. 02:18.900 --> 02:20.820 This is just an example, right. 02:20.820 --> 02:25.290 But if you go blue you see you have the same kind of thing. 02:25.290 --> 02:27.780 So that's predefined styles that we can use. 02:27.870 --> 02:34.560 What I'm interested is in orange, but you can pick your own color and you can pick your own kind of 02:34.590 --> 02:35.010 shading. 02:35.010 --> 02:38.250 I will go for maybe text orange 400. 02:38.250 --> 02:42.210 So if I will save it now I can go here. 02:42.210 --> 02:44.220 And I have that same color coded. 02:44.220 --> 02:48.930 So this looks like it's a number of rating is one out of five. 02:49.530 --> 02:54.060 But in fact this should be based on the average rating. 02:54.060 --> 02:56.550 And at the moment we have this one five. 02:56.550 --> 03:02.850 So when we need to find a way how to tell to apply that style if we have that there. 03:02.850 --> 03:11.850 So for example, so what what we can do here is inside the class name I will use the curly braces. 03:11.850 --> 03:15.480 That means I can have some JavaScript logic inside there. 03:15.480 --> 03:23.360 So what I'm trying to do is I will check if movie average and that's how I call it here. 03:23.360 --> 03:25.460 So this is average rating. 03:25.490 --> 03:27.140 I can even copy that from there. 03:27.140 --> 03:29.780 And average rating. 03:29.810 --> 03:35.840 And here what I can do is I can check if that's bigger than zero. 03:35.870 --> 03:45.890 If that's bigger than zero I can use ternary operator and I can apply this or I can do like that. 03:45.890 --> 03:49.790 So if this bigger then this will be applied. 03:49.820 --> 03:51.350 Otherwise it's not going to be applied. 03:51.350 --> 03:56.270 So if I will save it here and I will go here, you can see this is bigger than zero. 03:56.270 --> 03:57.860 So it is applied here. 03:57.890 --> 04:06.500 So if I will go back here and let's say remove all of this and duplicate it five times again. 04:06.500 --> 04:10.880 But this will be one, two, three and four. 04:10.880 --> 04:18.740 So basically we will check if star if is bigger than a specific average rating then we will apply that 04:18.740 --> 04:19.130 style. 04:19.130 --> 04:22.520 So if I go here all of the five are here. 04:22.520 --> 04:24.980 So what I need to do is I need to do a test. 04:24.980 --> 04:32.830 So if I will go ratings maybe I can go ratings for this movie there, and I will change it for, let's 04:32.830 --> 04:33.730 say, two. 04:33.760 --> 04:37.630 So we'll have something to work with to see if I actually it's working. 04:37.630 --> 04:42.880 So Titanic will be still five and I've just changed the rating for two on the avatar. 04:42.910 --> 04:45.280 You can see two is displayed here. 04:45.460 --> 04:47.830 And so because that's a very rich rating. 04:47.830 --> 04:53.320 So we can go here and you can see average rating is actually two and this one is five. 04:53.320 --> 04:55.330 So if I click here that's five. 04:55.360 --> 04:57.220 If I click here that's two. 04:57.250 --> 04:58.540 So this is working fine. 04:58.540 --> 05:01.570 And what we have is we have conditional styling. 05:01.570 --> 05:04.180 So this style comes from a tailwind. 05:04.180 --> 05:05.980 And this one is conditional. 05:05.980 --> 05:08.110 So I check what's actually average rating. 05:08.110 --> 05:10.150 And comparative is bigger than zero. 05:10.150 --> 05:12.730 And if it is so then I will apply it. 05:12.730 --> 05:14.680 Otherwise I'm not going to do anything here. 05:14.680 --> 05:18.040 So in that case we have our rating display. 05:18.040 --> 05:22.270 What I can also do is I can display how many ratings we have so far. 05:22.300 --> 05:24.580 So I can put it in the bracket like this. 05:24.610 --> 05:30.310 Or maybe I can put even a paragraph here inside this paragraph I will do this one. 05:30.310 --> 05:33.400 This will be actually rendered, this parenthesis will be rendered there. 05:33.400 --> 05:38.460 And what I want to do is inside there, I want to put movie. 05:38.460 --> 05:43.260 And the thing that I can put is number of ratings. 05:43.260 --> 05:46.740 So I will go back here and display that here. 05:46.740 --> 05:53.730 So if I will go back to my application here, you can see here one is display here because this is based 05:53.730 --> 05:54.960 on one number of rating. 05:54.960 --> 05:58.470 If I will go here this is also one number of rating. 05:58.470 --> 06:02.130 So we have it at the moment in the database. 06:02.130 --> 06:04.500 So this is working fine. 06:04.530 --> 06:11.640 There is some uh problem with alignment alignments but we will style it later on in the course. 06:11.640 --> 06:14.880 At the moment we are trying to get the data and display there. 06:14.880 --> 06:16.020 So this is working. 06:16.020 --> 06:16.920 We have a rating. 06:16.920 --> 06:23.910 And now in place as I said you could use probably that empty icon if you like based on some conditions. 06:23.910 --> 06:27.360 So you could do that like like this. 06:27.360 --> 06:31.020 So if movie rating is this one then you display if a star. 06:31.050 --> 06:33.930 Otherwise you will display a different star. 06:33.930 --> 06:35.640 It's up to you how you want to do it. 06:35.670 --> 06:36.840 I will just color code it. 06:37.140 --> 06:39.870 I think it's looking a little bit more interesting then.