1 00:00:01,500 --> 00:00:03,460 Welcome back, my friends, in today's lecture. 2 00:00:03,480 --> 00:00:06,760 What are we going to do is we're going to try to replicate this part. 3 00:00:07,110 --> 00:00:16,050 So when I go to movies and when I click here, so I just want to grab these reading here with the stars 4 00:00:16,050 --> 00:00:18,720 so we know that it's eight point one here. 5 00:00:18,960 --> 00:00:28,050 But and I'm giving half star because I don't have any other, like, CGI that can make this point zero 6 00:00:28,050 --> 00:00:28,410 one. 7 00:00:28,630 --> 00:00:28,970 Right. 8 00:00:29,150 --> 00:00:30,150 So that's not possible. 9 00:00:30,360 --> 00:00:34,350 And even if I have eight point eight, I will still give a half stars. 10 00:00:34,350 --> 00:00:35,940 So that is the reality here. 11 00:00:36,240 --> 00:00:39,630 And we need to do a couple of changes. 12 00:00:39,960 --> 00:00:42,510 So first, change that we need to do. 13 00:00:42,810 --> 00:00:44,160 So I'm just going to close everything. 14 00:00:44,160 --> 00:00:45,530 So I'm in MAPI starter. 15 00:00:45,540 --> 00:00:46,710 You should go there. 16 00:00:47,160 --> 00:00:53,760 So the first change we need to do in the movie that Geass in here, we need to add a method that will 17 00:00:53,760 --> 00:00:54,760 calculate this one. 18 00:00:54,900 --> 00:01:05,340 So this, that movie rating and I'm going to pass the data that I am DB rating here. 19 00:01:05,370 --> 00:01:05,670 Right. 20 00:01:05,910 --> 00:01:09,040 So these data will go back to the movie rating. 21 00:01:09,340 --> 00:01:13,520 Now I'm going to create here a function called movie rating. 22 00:01:13,530 --> 00:01:14,880 Obviously we need to do this. 23 00:01:15,120 --> 00:01:17,040 And I'm going to say IMDB. 24 00:01:18,000 --> 00:01:19,560 I'm Debbie Rating. 25 00:01:20,160 --> 00:01:20,520 Right. 26 00:01:20,540 --> 00:01:21,950 So you can give any name. 27 00:01:22,170 --> 00:01:25,460 Actually, it's pretty much this what we got passing here. 28 00:01:25,680 --> 00:01:30,600 Now, the idea is to create an area based on this bar. 29 00:01:30,600 --> 00:01:35,760 So I'm just going to grab the decimal integer park and I'm going to grab these decimal part. 30 00:01:35,950 --> 00:01:39,170 And we also need to think about if it's ten. 31 00:01:39,510 --> 00:01:43,820 So if the result is ten, I'm just going to need to have a ten stars here. 32 00:01:44,040 --> 00:01:54,140 So what I'm going to see these that rating rating array that will I will set this one to empty. 33 00:01:54,450 --> 00:01:54,860 Right. 34 00:01:55,170 --> 00:02:01,770 Because I don't have empty I don't have array here and I want to store all of these calculations we're 35 00:02:01,770 --> 00:02:02,520 going to do here. 36 00:02:02,940 --> 00:02:04,950 2D array here. 37 00:02:04,980 --> 00:02:06,710 Now stay with me. 38 00:02:06,720 --> 00:02:11,430 I think this is a little bit tricky to understand, but what I'm doing is actually I'm going to create 39 00:02:11,550 --> 00:02:14,130 an array with with items. 40 00:02:14,550 --> 00:02:18,260 For example, if I have eight, I will create eight items inside that area. 41 00:02:18,480 --> 00:02:24,360 So I'm going to check first if I am DBE rating is equal equal to 10. 42 00:02:24,750 --> 00:02:25,150 Right. 43 00:02:25,350 --> 00:02:29,940 So if that is the case, what I will do, I will just create a for loop. 44 00:02:30,120 --> 00:02:32,880 A normal for loop where I'm going to start. 45 00:02:33,420 --> 00:02:35,910 So normal for normal for a loop here. 46 00:02:36,060 --> 00:02:48,450 And I'm going to say I n let's start with this, let I start from zero and I'm going to say I pass int 47 00:02:50,340 --> 00:02:56,400 so I need to use these parts in functions because I am db reading is actually a string so it will not 48 00:02:56,400 --> 00:02:59,490 work if I try using the IMDB here. 49 00:02:59,490 --> 00:02:59,810 Right. 50 00:03:00,580 --> 00:03:01,760 I plus plus in. 51 00:03:01,770 --> 00:03:08,800 What I will do here is that rating array I'm going to push here the I. 52 00:03:09,720 --> 00:03:13,230 OK, so I don't think so. 53 00:03:13,230 --> 00:03:17,030 There is a IMDB rating of 10, but let's create this one here. 54 00:03:17,370 --> 00:03:19,920 So I'm going to rewrite everything that we passing from here. 55 00:03:20,160 --> 00:03:25,350 For example, we passing seven but I'm going to rewrite it and I'm going to store in this story in this 56 00:03:25,350 --> 00:03:30,210 variable number 10 and let's see if it's going to work now. 57 00:03:31,350 --> 00:03:33,090 I'm just going to inspect it here. 58 00:03:33,090 --> 00:03:36,570 I'm just going to go here and let's pass a movie here. 59 00:03:37,140 --> 00:03:37,890 Click on this one. 60 00:03:37,890 --> 00:03:38,610 Doesn't matter. 61 00:03:38,610 --> 00:03:42,030 I'm going to inspect this one and I'm going to go to the console. 62 00:03:42,240 --> 00:03:48,720 And what I know that here we need to zoom in a little bit. 63 00:03:48,750 --> 00:03:52,440 Window, window dot data. 64 00:03:53,010 --> 00:03:53,370 Right. 65 00:03:53,580 --> 00:03:56,520 So I do have access to the movie now. 66 00:03:56,520 --> 00:04:02,420 I should be able to see the reading array. 67 00:04:02,440 --> 00:04:06,000 So here is the reading array is there from zero until nine. 68 00:04:06,010 --> 00:04:06,450 Cool. 69 00:04:06,450 --> 00:04:07,590 So I do have this. 70 00:04:07,770 --> 00:04:11,780 So it's working OK, but what I'm going to do from now, I'm just going to write it. 71 00:04:11,790 --> 00:04:23,490 That window, the data, that movie that I'm reading, IMDB, what was the name reading or rating array. 72 00:04:23,490 --> 00:04:28,440 So I'm just going to click it like this and after that it will be stored there so I can use it. 73 00:04:28,440 --> 00:04:28,800 Right. 74 00:04:30,930 --> 00:04:31,440 Nice. 75 00:04:31,590 --> 00:04:32,850 So here it is zoomed up. 76 00:04:33,240 --> 00:04:34,290 Zoom in now. 77 00:04:34,710 --> 00:04:36,360 So that was the first case. 78 00:04:36,360 --> 00:04:37,500 So what is happening? 79 00:04:37,500 --> 00:04:39,660 If it's if it's not, then. 80 00:04:39,750 --> 00:04:40,110 Right. 81 00:04:40,500 --> 00:04:41,700 So we need to think of that. 82 00:04:41,850 --> 00:04:46,410 So if it's not, then we will try and save this array. 83 00:04:46,420 --> 00:04:50,640 So I'm going to say let Deery in. 84 00:04:50,640 --> 00:04:55,260 I am going to save this IMDB reading dot split. 85 00:04:56,490 --> 00:04:58,980 Now let me show you what will happen. 86 00:04:59,310 --> 00:05:00,320 So I'm just going to cancel. 87 00:05:02,460 --> 00:05:06,300 Log entire Deery, right, so you can choose any name me one. 88 00:05:06,720 --> 00:05:08,880 So here it is. 89 00:05:08,880 --> 00:05:11,120 I do have array because it's seven point seven. 90 00:05:11,280 --> 00:05:17,910 I do have array with two values on the first position, zero on the second on the zero position is seven 91 00:05:17,910 --> 00:05:21,370 on the first position is also seven and the length is too cool. 92 00:05:21,420 --> 00:05:22,180 Now this is working. 93 00:05:22,200 --> 00:05:24,420 So if I go another movie here. 94 00:05:25,560 --> 00:05:26,390 Oh yeah. 95 00:05:26,400 --> 00:05:31,110 Search something else and if I click here it will be different rating. 96 00:05:31,110 --> 00:05:36,000 So I need actually to clean this one and to refresh. 97 00:05:36,420 --> 00:05:41,310 And now we will have the array of eight, eight and one cuz we want this. 98 00:05:41,310 --> 00:05:43,390 But look, there are strings right. 99 00:05:43,410 --> 00:05:44,150 Remember this. 100 00:05:44,370 --> 00:05:53,190 So I'm going to create here let let in part and I'm using this led because I'm pretty much sure that 101 00:05:53,190 --> 00:05:57,240 I don't want to mess around and I don't want to run into error. 102 00:05:57,360 --> 00:05:59,640 So array of the zero position. 103 00:05:59,640 --> 00:06:06,450 So I'm going to grab this one and I'm using the pass in and I'm going to say that's decimal part. 104 00:06:06,930 --> 00:06:07,860 That's part. 105 00:06:08,970 --> 00:06:11,820 And that will be for the first position. 106 00:06:11,820 --> 00:06:12,090 Right. 107 00:06:12,370 --> 00:06:21,070 OK, now if I count the lock the deck, that's four. 108 00:06:23,640 --> 00:06:24,340 Let's see. 109 00:06:25,680 --> 00:06:29,160 So it will be one because it's eight point one and we are grabbing the one. 110 00:06:29,160 --> 00:06:31,130 But look, it's no, it's not string anymore. 111 00:06:31,260 --> 00:06:31,550 Good. 112 00:06:31,710 --> 00:06:35,850 Now it means that I can do things that I can do with numbers. 113 00:06:35,850 --> 00:06:41,130 Show means that I can use these if conditioning if I see this part is bigger than zero. 114 00:06:41,610 --> 00:06:42,010 Right. 115 00:06:42,330 --> 00:06:49,080 So even if it's like this, if it is three point one, this is actually point one now it will go inside 116 00:06:49,080 --> 00:06:52,350 here and I will just run this function. 117 00:06:52,890 --> 00:06:55,410 But look what I'm going to do here now. 118 00:06:55,410 --> 00:06:59,520 I'm going to go here until the inpart, right. 119 00:07:00,120 --> 00:07:01,620 Until this integer part. 120 00:07:01,620 --> 00:07:05,670 So this integer part, it will be seven sorry, eight in this case. 121 00:07:05,880 --> 00:07:07,470 So it will go eight times. 122 00:07:07,800 --> 00:07:15,090 And after it finishes, I am going to set these that push is that reading array and I am going to push 123 00:07:16,230 --> 00:07:17,610 zero point five at the end. 124 00:07:17,610 --> 00:07:17,940 Why? 125 00:07:17,940 --> 00:07:23,760 Because I know that we have decimal number and I'm going to use the zero point five later and let's 126 00:07:23,760 --> 00:07:25,540 see what's happening here. 127 00:07:27,270 --> 00:07:30,930 Now, if you go back here to the data array, here it is now. 128 00:07:30,930 --> 00:07:38,070 I have nine elements inside and it goes from zero until seven in each. 129 00:07:38,070 --> 00:07:40,590 It goes on to zero until eight, but doesn't matter. 130 00:07:40,890 --> 00:07:43,140 So actually, it's still good. 131 00:07:43,860 --> 00:07:45,420 It's not nine here, it's eight. 132 00:07:45,690 --> 00:07:49,520 So it will go on to seven in the last one will be zero point five. 133 00:07:49,530 --> 00:07:52,590 This is what I expect here right now. 134 00:07:53,610 --> 00:07:54,150 Cool. 135 00:07:54,630 --> 00:08:03,420 What I want is to have a different if no, I want to say out here and in this else what I'm going to 136 00:08:03,420 --> 00:08:03,630 do. 137 00:08:03,630 --> 00:08:04,890 I'm just going to copy this part. 138 00:08:05,310 --> 00:08:14,670 So why I'm doing this, for example, if we don't have a decimal part, that means if it's seven only 139 00:08:14,920 --> 00:08:16,230 and let me search. 140 00:08:16,230 --> 00:08:25,050 I think this red has a seven only thinks of this one error is because I've done my homework before. 141 00:08:25,200 --> 00:08:26,360 So it's seven only, right. 142 00:08:26,370 --> 00:08:27,150 Seven point zero. 143 00:08:27,150 --> 00:08:28,630 But I don't care if one zero. 144 00:08:28,880 --> 00:08:33,420 Now if I go back here, it will go until zero. 145 00:08:33,420 --> 00:08:35,850 One, two, three, four, five, six. 146 00:08:36,600 --> 00:08:38,580 That's I have seven items. 147 00:08:38,580 --> 00:08:39,390 That's what I need. 148 00:08:39,540 --> 00:08:42,360 Because the decimal part is not bigger than zero. 149 00:08:42,870 --> 00:08:44,040 It's a zero actually. 150 00:08:44,340 --> 00:08:45,930 That's why it's going here in this house. 151 00:08:46,290 --> 00:08:54,600 Now, we have done the structure for I mean, we have created the rating array and what we need also 152 00:08:54,600 --> 00:08:55,080 to do. 153 00:08:56,280 --> 00:09:01,580 So what we need also to add it into the the the movie view. 154 00:09:01,590 --> 00:09:01,910 Right. 155 00:09:02,400 --> 00:09:10,640 So here where we are going to add rate search for this movie and we do have these SPG, Igen. 156 00:09:10,950 --> 00:09:13,230 So what I'm going to do, I'm just going to cut one. 157 00:09:13,410 --> 00:09:17,850 I'm just so I'm cutting one right in on top here. 158 00:09:17,850 --> 00:09:19,470 I'm going to create a function. 159 00:09:19,800 --> 00:09:24,810 So I'm going to say actually we're not going to export it because this is a function going to be used 160 00:09:24,810 --> 00:09:25,980 here locally. 161 00:09:26,310 --> 00:09:30,720 So I'm going to say constantly movie rating. 162 00:09:33,930 --> 00:09:42,630 And inside here, I am going to pass the current element, so we need to do a for loop, by the way, 163 00:09:43,120 --> 00:09:45,940 right now. 164 00:09:45,960 --> 00:09:46,770 Stay with me. 165 00:09:47,070 --> 00:09:53,760 So what I'm going to do here, I'm going to say, let's mark-up all kinds of markup doesn't matter here. 166 00:09:53,760 --> 00:09:56,130 I'm going to paste the SPG. 167 00:09:56,130 --> 00:09:58,140 I have cut it from before. 168 00:09:58,380 --> 00:10:05,180 Right now, the current element will also will be one. 169 00:10:05,190 --> 00:10:09,090 It will be for example, it will be one, two, three, four, five, six, seven. 170 00:10:09,090 --> 00:10:16,230 But if we have a decimal number, what I want to say, I want to check this one so I can do it like 171 00:10:16,230 --> 00:10:16,560 this. 172 00:10:16,590 --> 00:10:25,580 If the element is different than zero point five, I am just going to say return the markup right else. 173 00:10:26,750 --> 00:10:30,000 And I need to fix this one because it's not looking great here. 174 00:10:31,530 --> 00:10:31,920 I don't know. 175 00:10:31,920 --> 00:10:35,190 Why is this like that? 176 00:10:36,170 --> 00:10:41,190 No, OK, it's getting there now. 177 00:10:41,190 --> 00:10:45,530 I need to shift this one as well because it's looking very odd. 178 00:10:45,630 --> 00:10:50,490 Now, if the element current element is different than zero and five, then I'm going to return this 179 00:10:50,490 --> 00:10:50,700 one. 180 00:10:50,940 --> 00:10:53,120 Otherwise I'm going to return something else. 181 00:10:53,550 --> 00:10:57,000 So I do have a different markup that I will return. 182 00:10:57,180 --> 00:11:02,010 So I'm just going to use this markup again. 183 00:11:02,640 --> 00:11:03,990 That's why I use it left here. 184 00:11:04,380 --> 00:11:04,860 Nice. 185 00:11:07,890 --> 00:11:10,530 And what I'm going to do here, I'm going to change a couple of things. 186 00:11:12,650 --> 00:11:20,870 So this is for the full star, but here I need half a star star, half, that is what you need to change 187 00:11:21,770 --> 00:11:23,810 and I'm going to return to Mark-Up 188 00:11:26,990 --> 00:11:27,800 pretty much that. 189 00:11:28,280 --> 00:11:28,640 No. 190 00:11:30,020 --> 00:11:30,400 Nice. 191 00:11:30,440 --> 00:11:32,260 So we have done this function here. 192 00:11:32,270 --> 00:11:39,200 We created this function will return like seven stars, and if we have zero point five, then it will 193 00:11:39,200 --> 00:11:40,370 return this one. 194 00:11:40,760 --> 00:11:45,220 Right now, what we need to do is actually go back here. 195 00:11:46,100 --> 00:11:49,120 Where was it rate this movie? 196 00:11:49,220 --> 00:11:51,390 So we need to call this function. 197 00:11:51,650 --> 00:11:53,360 So how are we going to call this function here? 198 00:11:54,800 --> 00:11:59,350 Well, we're just going to simply create here. 199 00:11:59,510 --> 00:12:00,980 We're going to use the map method. 200 00:12:00,980 --> 00:12:01,280 Right. 201 00:12:01,460 --> 00:12:07,690 So I do have the access of the movie star rating array. 202 00:12:07,820 --> 00:12:08,210 Right. 203 00:12:08,210 --> 00:12:11,160 Because we created a rating array here, this that reading array. 204 00:12:11,330 --> 00:12:15,400 So I have the access of this one and I'm going to call on this one, the map method. 205 00:12:15,530 --> 00:12:15,880 Right. 206 00:12:16,250 --> 00:12:22,820 Remember, in inside the method, I have the axis of the current element I have X is actually the three 207 00:12:22,820 --> 00:12:26,060 things, but I'm going to use the current element in from here. 208 00:12:26,270 --> 00:12:30,980 I'm going to loop actually I'm going to call the movie rating function. 209 00:12:30,980 --> 00:12:31,340 Right. 210 00:12:31,690 --> 00:12:33,520 And I'm going to pass the current element there. 211 00:12:33,980 --> 00:12:35,720 Let's save it and let's see what's happening. 212 00:12:36,620 --> 00:12:37,310 Here it is. 213 00:12:37,310 --> 00:12:38,950 I do have seven stars. 214 00:12:38,960 --> 00:12:41,570 One, two, three, four, five, six, seven. 215 00:12:42,110 --> 00:12:42,830 What was this? 216 00:12:42,830 --> 00:12:46,640 I do have this disclaimer here, OK? 217 00:12:47,180 --> 00:12:52,250 One simple solution to get rid of this one is, is to use the joint method. 218 00:12:52,250 --> 00:12:53,510 But I'm going to explain you. 219 00:12:53,510 --> 00:12:58,280 So the map returns a new area which contains the elements that are altered right. 220 00:12:58,910 --> 00:13:01,340 In the function that is best to. 221 00:13:01,820 --> 00:13:06,920 And when the area is converted to string, it is automatically joined with commas. 222 00:13:07,250 --> 00:13:11,180 So that is the way the map function function is working. 223 00:13:11,420 --> 00:13:16,500 So it is automatically join with commas when the rate is converted back to string. 224 00:13:17,030 --> 00:13:22,540 Now we can get rid of this one by using that joint here. 225 00:13:23,510 --> 00:13:31,570 So I want to join them and I want to use that empty string here cuz now I do have this one. 226 00:13:31,580 --> 00:13:33,560 OK, so it's working for seven. 227 00:13:33,830 --> 00:13:35,660 Let's search movies again. 228 00:13:35,660 --> 00:13:37,400 Now let's click on this one. 229 00:13:38,150 --> 00:13:38,510 Good. 230 00:13:38,510 --> 00:13:39,440 Six point eight. 231 00:13:39,690 --> 00:13:41,320 That means six and a half stars. 232 00:13:41,480 --> 00:13:44,750 One, two, three, four, five, six and a half. 233 00:13:45,020 --> 00:13:45,400 Nice. 234 00:13:45,440 --> 00:13:46,010 Something else. 235 00:13:46,010 --> 00:13:46,910 We do have something else. 236 00:13:46,910 --> 00:13:47,660 Eight point one. 237 00:13:47,660 --> 00:13:47,960 Good. 238 00:13:48,230 --> 00:13:49,610 So we have nine. 239 00:13:49,910 --> 00:13:55,600 Which one of them is one, two, three, four, five, six, seven, eight. 240 00:13:55,610 --> 00:13:56,870 And this is the nine. 241 00:13:57,530 --> 00:13:58,150 Nice. 242 00:13:58,160 --> 00:14:00,990 I really like how this is looking now. 243 00:14:00,990 --> 00:14:06,650 In next section we're going to do this one, this port and this where we will use with the with the 244 00:14:06,650 --> 00:14:07,670 help of data sets. 245 00:14:08,150 --> 00:14:08,560 Right. 246 00:14:08,600 --> 00:14:11,300 So I'm just going to recap what we have done. 247 00:14:11,510 --> 00:14:16,340 I've just called a function that we just created a past the current element that we are looping using 248 00:14:16,340 --> 00:14:17,930 the map method. 249 00:14:18,260 --> 00:14:23,150 And I'm calling this function and this function is way up here and I've created markup. 250 00:14:23,330 --> 00:14:31,520 The markup contains the full I can star in, but that is if element is different than zero five. 251 00:14:31,820 --> 00:14:32,330 Why? 252 00:14:32,360 --> 00:14:33,860 Because here we put it here. 253 00:14:34,670 --> 00:14:38,140 If there is a decimal part, let's push zero point five. 254 00:14:38,330 --> 00:14:41,510 Now, this is not a very fancy way of doing this. 255 00:14:41,510 --> 00:14:48,050 And if you guys find a better way, just let me know the solution and I'm going to just introduce that 256 00:14:48,050 --> 00:14:48,770 solution here. 257 00:14:49,010 --> 00:14:49,370 Right. 258 00:14:49,400 --> 00:14:54,020 This is just for practicing how we can do it else in how we can do for it. 259 00:14:54,050 --> 00:14:55,490 So this is my idea. 260 00:14:55,490 --> 00:14:58,250 Just to push as many more things here, then. 261 00:14:58,670 --> 00:14:59,090 Yeah. 262 00:14:59,210 --> 00:15:00,380 Than just displaying things. 263 00:15:00,380 --> 00:15:00,650 Right. 264 00:15:00,830 --> 00:15:02,540 So that is how I solve it. 265 00:15:02,540 --> 00:15:04,970 But there is other ways, much easier ways. 266 00:15:05,210 --> 00:15:09,710 But yeah, let me know if you think of something and we will do it right. 267 00:15:10,220 --> 00:15:11,600 So see you in the next one.