1 00:00:01,560 --> 00:00:06,950 In this lecture, what we're going to do is to search movie view so we will learn how to render each 2 00:00:06,960 --> 00:00:10,560 team competent and do advanced techniques. 3 00:00:10,980 --> 00:00:17,400 And some of the techniques that I'm going to show you, we're already done in the Bernie app. 4 00:00:17,400 --> 00:00:21,290 When we were we were creating that we're burning calories app. 5 00:00:21,860 --> 00:00:25,170 OK, now let's jump straight into. 6 00:00:25,260 --> 00:00:26,070 First things first. 7 00:00:26,310 --> 00:00:30,030 I want to go into the views in change so radically. 8 00:00:30,180 --> 00:00:36,870 Rename this view here, make it more meaningful, say search movie view. 9 00:00:37,500 --> 00:00:38,050 That's it. 10 00:00:38,340 --> 00:00:40,140 So is going to look like that. 11 00:00:40,890 --> 00:00:41,300 Nice. 12 00:00:42,030 --> 00:00:45,330 So let's open up that view here. 13 00:00:45,720 --> 00:00:47,310 Search movie view. 14 00:00:47,490 --> 00:00:53,610 So that search movie view will be super, super empty because we haven't done anything inside. 15 00:00:53,640 --> 00:01:02,100 Now, again, views are the ones that are dealing with the UI and we need to start working on this form 16 00:01:02,100 --> 00:01:02,430 here. 17 00:01:02,670 --> 00:01:04,020 So we need to grab this form. 18 00:01:04,050 --> 00:01:10,290 OK, let's start by exploring the function that will just simply return to format input value or in 19 00:01:10,290 --> 00:01:14,520 simple words, we need to return what we have started here. 20 00:01:14,520 --> 00:01:16,410 For example, search Tarzan here. 21 00:01:16,560 --> 00:01:19,910 We need to return this what we have typed just here. 22 00:01:20,100 --> 00:01:21,170 Now, how are we going to do this? 23 00:01:23,430 --> 00:01:30,480 So in the search view, what we can do, we can export function. 24 00:01:30,700 --> 00:01:35,520 So I'm going to say const get form input. 25 00:01:36,640 --> 00:01:37,120 Right. 26 00:01:37,240 --> 00:01:42,820 So you can get any meaningful names, so it's that dysfunction is not going to take any parameters and 27 00:01:42,820 --> 00:01:53,770 we're going to just three return document that query selector and we are going to select the what. 28 00:01:54,760 --> 00:02:00,940 So what we are trying to select is I'm going to spec this element here and I'm trying to get this input 29 00:02:00,940 --> 00:02:01,210 typed. 30 00:02:01,210 --> 00:02:04,250 Text in the class is stop search input. 31 00:02:04,420 --> 00:02:12,160 So if you go back to the index JS, I strongly suggest to go through these the index HTML file because 32 00:02:12,160 --> 00:02:16,510 I'm not going to do this into this lecture or any future lecture. 33 00:02:16,510 --> 00:02:22,480 But what I'm going to do, I'm just going to grab pieces of here of the HTML and I'm just going to use 34 00:02:22,480 --> 00:02:23,170 it in our code. 35 00:02:23,200 --> 00:02:28,600 So in your free time, just go through this, you will see that we have the Navar here, you have the 36 00:02:28,600 --> 00:02:29,380 search. 37 00:02:29,390 --> 00:02:30,880 What else we do have after that? 38 00:02:30,880 --> 00:02:32,020 We do have the slider. 39 00:02:32,290 --> 00:02:36,510 But now most important thing is that we need to get this search input. 40 00:02:36,760 --> 00:02:38,590 That's the class from the input field. 41 00:02:38,720 --> 00:02:42,010 OK, so we're going to do it like this. 42 00:02:42,010 --> 00:02:49,660 But how we select it, so the query selector and we use that, then the class name and here are we just 43 00:02:49,660 --> 00:02:50,770 missing the value. 44 00:02:51,250 --> 00:02:54,490 Now this, by the way, will get the value. 45 00:02:54,490 --> 00:03:02,190 Whatever we put it here, it will grab it and that will be stored in this get it right now. 46 00:03:02,200 --> 00:03:03,610 We also export it. 47 00:03:04,930 --> 00:03:10,960 So but now is the time that we need to think where we can store all or the class needs, because what 48 00:03:10,960 --> 00:03:17,550 we can do here, we don't need we don't need the class names to be like this. 49 00:03:17,710 --> 00:03:20,620 So we did see something similar in the BERNEY. 50 00:03:20,620 --> 00:03:22,720 So we're going to do the same thing here. 51 00:03:22,720 --> 00:03:23,020 Right. 52 00:03:23,380 --> 00:03:29,290 So the best way is to create a simple separate folder to create separate, separate, separate folder 53 00:03:29,290 --> 00:03:34,450 here called Includes An Inside. 54 00:03:34,600 --> 00:03:43,420 I will create a file called Class Selector that is inside this class selector. 55 00:03:43,540 --> 00:03:46,340 We're going to have the all of the class names here. 56 00:03:46,540 --> 00:03:52,380 Now we got to create an object with class names and we can export that export again, the object. 57 00:03:52,630 --> 00:03:58,840 So I'm going to say export const and I will say class names. 58 00:03:59,740 --> 00:04:01,150 So I'm going to export class names. 59 00:04:01,360 --> 00:04:07,900 So I see class names because here we're going to have multiple classes and we can export. 60 00:04:07,900 --> 00:04:15,010 And so the first thing first, I'm just going to grab this top search input and I'm going to put it 61 00:04:15,010 --> 00:04:15,400 here. 62 00:04:15,430 --> 00:04:18,370 So actually, we already have done the same thing. 63 00:04:18,370 --> 00:04:19,720 I'm just going to copy this one. 64 00:04:19,720 --> 00:04:20,110 Right. 65 00:04:20,320 --> 00:04:22,150 So go back to the search, move you. 66 00:04:22,630 --> 00:04:24,640 And here we going to see format. 67 00:04:27,030 --> 00:04:35,740 For form input and we're going to pass document query, selector type search input. 68 00:04:36,030 --> 00:04:36,360 Good. 69 00:04:36,640 --> 00:04:40,310 Now make sure that you put in comma because we're going to put multiple things here. 70 00:04:40,590 --> 00:04:47,700 Now, instead of getting this the whole line here, we can just change it with this class names that 71 00:04:47,700 --> 00:04:48,810 form input. 72 00:04:49,050 --> 00:04:50,220 But how are we going to do this? 73 00:04:50,520 --> 00:05:01,680 In order to use this, we need to actually import this class selector file so we can do everything that 74 00:05:01,680 --> 00:05:02,440 we are importing. 75 00:05:02,460 --> 00:05:05,600 I'm going to tell you once more that we need to do it on the top. 76 00:05:05,610 --> 00:05:15,630 So import and I'm going to say class names like that from and now I need to specify where it's going 77 00:05:15,630 --> 00:05:18,560 to come, where it will come from this class. 78 00:05:19,380 --> 00:05:26,310 So what I'm going to do here, so if I put it just dot forward slash, that will give me the current. 79 00:05:27,730 --> 00:05:29,250 So look at what is giving to me. 80 00:05:29,250 --> 00:05:31,680 That will be give me the current search movie views. 81 00:05:31,920 --> 00:05:37,250 But I really don't want that that I really want to go inside. 82 00:05:37,260 --> 00:05:40,210 This includes in a grab this class selector. 83 00:05:40,470 --> 00:05:45,500 So how are we going to go outside the views folder and inside this one. 84 00:05:45,510 --> 00:05:53,160 So double dots forward slash and now we're going one directory up, we're going include and now we do 85 00:05:53,160 --> 00:05:56,180 have the power to access the class selector. 86 00:05:56,520 --> 00:05:56,950 Right. 87 00:05:57,360 --> 00:05:58,920 You don't need dodgiest. 88 00:05:58,920 --> 00:05:59,220 It's right. 89 00:05:59,580 --> 00:06:06,960 Now, these class names can be used here and I will say class names, not for input. 90 00:06:07,200 --> 00:06:11,880 So the viscose just gave me that thing that I have it here. 91 00:06:11,880 --> 00:06:12,200 Right. 92 00:06:12,600 --> 00:06:19,740 But if it if for some reason it's not autocomplete for you guys, you should just remember that we are 93 00:06:19,740 --> 00:06:20,680 targeting this one. 94 00:06:21,000 --> 00:06:24,090 So basically what we have done, we just shorten up this one. 95 00:06:24,330 --> 00:06:26,160 We create a folder. 96 00:06:26,280 --> 00:06:29,640 And inside that folder we do have inside this includes folder. 97 00:06:29,650 --> 00:06:33,660 We do have this class selector that goes in there. 98 00:06:33,660 --> 00:06:37,160 We going to store all of the class names from the top. 99 00:06:37,920 --> 00:06:39,570 That is pretty much it. 100 00:06:39,930 --> 00:06:45,820 Now, also, we need to change the event listener in the index here. 101 00:06:45,840 --> 00:06:46,170 We do. 102 00:06:46,290 --> 00:06:47,550 We do have this event. 103 00:06:47,550 --> 00:06:50,670 Listener So what I can do I could just cut this one from here. 104 00:06:51,270 --> 00:06:51,720 Right. 105 00:06:51,930 --> 00:06:54,240 And put it just below here. 106 00:06:54,570 --> 00:06:59,940 But I'm going to name it and I'm going to see because this is for the search forum, right? 107 00:07:01,260 --> 00:07:07,770 It's here actually it's for the forum and I'm going to name it search for now. 108 00:07:08,100 --> 00:07:11,040 You can give any meaningful name that you want, right? 109 00:07:11,060 --> 00:07:11,850 Don't worry about it. 110 00:07:11,970 --> 00:07:14,340 This is not strict as it is. 111 00:07:14,340 --> 00:07:15,030 You think so? 112 00:07:15,030 --> 00:07:17,460 You can change this name because. 113 00:07:17,460 --> 00:07:19,350 Yeah, we can access them now. 114 00:07:20,960 --> 00:07:26,510 Also in the index, we do have to import this one, so I'm going to import it on top of the search, 115 00:07:26,930 --> 00:07:27,260 right. 116 00:07:27,410 --> 00:07:35,380 So what I'm going to see again, I'm going to say class names like that from now. 117 00:07:35,390 --> 00:07:35,990 Look at this. 118 00:07:36,980 --> 00:07:38,470 I'm just going to show you one more thing. 119 00:07:39,590 --> 00:07:43,320 So it gives us error because we do have a couple of mistakes here. 120 00:07:43,490 --> 00:07:47,450 I just get rid of that part and yeah, that's why there is there. 121 00:07:47,450 --> 00:07:52,370 But the index file is not actually in any directory. 122 00:07:52,380 --> 00:07:55,610 Straight to the inside the Geass folder. 123 00:07:55,610 --> 00:07:55,820 Right. 124 00:07:55,850 --> 00:08:00,110 It's not anywhere in views, models or includes. 125 00:08:00,300 --> 00:08:01,880 So I can't access. 126 00:08:01,880 --> 00:08:03,680 It just seemed like this. 127 00:08:03,690 --> 00:08:04,040 Sorry. 128 00:08:04,160 --> 00:08:06,410 Same as same as we did here. 129 00:08:06,770 --> 00:08:07,460 Two dots. 130 00:08:07,490 --> 00:08:08,270 I don't need that. 131 00:08:08,420 --> 00:08:15,080 So what I can do here, I can say dark forward slash and that's it. 132 00:08:15,410 --> 00:08:21,590 So I'm going to include in a class selector, don't put two dogs, don't just copy it from search movies 133 00:08:21,830 --> 00:08:22,940 because it's not going to work. 134 00:08:23,300 --> 00:08:28,130 OK, so the class names, I do have them, so I'm just going to copy the class names. 135 00:08:28,130 --> 00:08:30,050 But what was the what was the. 136 00:08:30,200 --> 00:08:30,590 Yeah. 137 00:08:31,010 --> 00:08:32,870 Search for. 138 00:08:33,620 --> 00:08:35,120 So sorry. 139 00:08:35,750 --> 00:08:37,820 That search format event listener. 140 00:08:37,830 --> 00:08:40,190 Submit or not save it. 141 00:08:40,860 --> 00:08:41,570 Let's see. 142 00:08:43,790 --> 00:08:46,030 Yeah we do have some problems here. 143 00:08:46,310 --> 00:08:47,460 Let's click here. 144 00:08:47,510 --> 00:08:48,080 Here it is. 145 00:08:48,260 --> 00:08:50,660 That was the problems or the errors that we did before. 146 00:08:50,810 --> 00:08:52,820 So when I click on the submit, it's still working. 147 00:08:52,820 --> 00:08:53,120 Right. 148 00:08:53,330 --> 00:08:57,870 Is giving me the Batman Begins because we did have the Batman from the query. 149 00:08:58,040 --> 00:09:00,260 Now we're going to change a query just short. 150 00:09:00,620 --> 00:09:10,300 So what we have done here in the search movies, we exported this function, get form input, but we 151 00:09:10,400 --> 00:09:11,350 never use it. 152 00:09:11,360 --> 00:09:11,760 Right. 153 00:09:11,990 --> 00:09:20,240 So the second thing that we can do is now that we need to use that one in the index. 154 00:09:20,240 --> 00:09:20,600 Right. 155 00:09:20,630 --> 00:09:21,560 So how are we going to use this? 156 00:09:21,740 --> 00:09:29,480 So I'm going here and we we need to import these search movies, view inside the controller. 157 00:09:29,780 --> 00:09:34,970 So I'm just going to copy actually this one here, how we will import it. 158 00:09:34,970 --> 00:09:42,530 So I will import as a star, because inside here I will have more multiple exports, multiple function 159 00:09:42,530 --> 00:09:43,620 that I want to export. 160 00:09:43,970 --> 00:09:47,720 So that's why I'm going to do Star and what else? 161 00:09:47,720 --> 00:09:55,550 S Search movie view and I'm going to get rid of that from models. 162 00:09:56,040 --> 00:09:57,350 It's not actually the models. 163 00:09:58,610 --> 00:10:00,320 So for real views. 164 00:10:00,320 --> 00:10:03,140 And then I have the movie search movie news. 165 00:10:03,950 --> 00:10:04,390 Nice. 166 00:10:05,180 --> 00:10:08,960 So I did have the access now to the search views. 167 00:10:09,020 --> 00:10:12,410 So right now here we need to change this query. 168 00:10:12,410 --> 00:10:19,070 So I'm just going to comment on this query and I'm going to say const query and that will be equal to 169 00:10:19,070 --> 00:10:23,650 search movies, views, dot get form input. 170 00:10:23,780 --> 00:10:33,590 Actually I'm accessing this class, but these functio here in this function, woa or shou return me 171 00:10:33,980 --> 00:10:34,640 the query. 172 00:10:34,940 --> 00:10:40,760 OK, so I'm going to consult the query and I'm just going to get rid of this one here and I'm going 173 00:10:40,760 --> 00:10:43,960 to say Tarzan and I'm going to hit this guy. 174 00:10:43,970 --> 00:10:45,500 Here it is Tarzan. 175 00:10:45,500 --> 00:10:52,430 And now I expect because we change that to the query and we are just grabbing the query here and we 176 00:10:52,430 --> 00:10:56,330 search, you know, I expect to have the results for Tarzan that not Batmen. 177 00:10:56,330 --> 00:10:56,930 And here it is. 178 00:10:57,260 --> 00:10:59,440 We do have all of the results we want. 179 00:10:59,720 --> 00:11:00,900 So congratulations. 180 00:11:00,930 --> 00:11:02,030 You know how to create. 181 00:11:02,040 --> 00:11:09,350 Now, have you export from a view, a function, and also how we can create a separate class selector 182 00:11:09,860 --> 00:11:14,000 that will hold the whole of the DOM classes and we can use it now. 183 00:11:14,000 --> 00:11:15,320 It will be more clean. 184 00:11:15,320 --> 00:11:18,970 We don't have to get bother because why we are doing this. 185 00:11:19,880 --> 00:11:28,190 Imagine if in future I change it here in the movie search name or this one two top search input or only 186 00:11:28,190 --> 00:11:28,710 for me. 187 00:11:28,790 --> 00:11:30,800 But imagine you can do that. 188 00:11:30,800 --> 00:11:32,080 And now what you need to do. 189 00:11:32,110 --> 00:11:37,940 We go to this guy here to the class selector and change it here, because in the index we can use it 190 00:11:37,940 --> 00:11:41,090 multiple times and we don't have to change it multiple times. 191 00:11:41,390 --> 00:11:44,780 So that is called decoupling right now. 192 00:11:44,840 --> 00:11:46,390 It's OK. 193 00:11:46,880 --> 00:11:50,850 Now is the time that we need to think about how to get the results here. 194 00:11:50,850 --> 00:11:52,160 Are we getting the results? 195 00:11:53,000 --> 00:11:56,660 But we now need to think, how about those results? 196 00:11:57,170 --> 00:11:59,390 So we are consulting like them. 197 00:11:59,810 --> 00:12:02,590 But that's three of the ten elements, right? 198 00:12:03,260 --> 00:12:05,110 Get get rid of the time. 199 00:12:05,350 --> 00:12:06,050 Ten elements. 200 00:12:06,290 --> 00:12:10,580 So we need a function back in The View to look through all of this. 201 00:12:10,610 --> 00:12:16,520 So let's do that function and I'm going to call the display results and I'm going to exported that one 202 00:12:16,520 --> 00:12:16,910 again. 203 00:12:17,120 --> 00:12:19,340 Export const display. 204 00:12:21,250 --> 00:12:26,410 Results because it's going to be more results in here, I'm going to pass in the movies. 205 00:12:27,120 --> 00:12:31,510 Actually, what I'm passing here, you don't worry about it right now. 206 00:12:31,520 --> 00:12:35,820 You don't have to understand where this is coming from, but this will come from this here. 207 00:12:35,980 --> 00:12:39,370 So here these data actually is containing the entire array. 208 00:12:39,670 --> 00:12:45,580 And I'm going to pass it here onto this display results that the entire array. 209 00:12:45,670 --> 00:12:50,710 So in these movies here, it will hold the object with the then array elements. 210 00:12:50,920 --> 00:12:51,330 Nice. 211 00:12:51,550 --> 00:12:56,220 So the movies will hold the entire array of movies and we will pass these movies from the controller 212 00:12:56,500 --> 00:12:56,740 now. 213 00:12:56,750 --> 00:12:58,540 So let's loop through this one in. 214 00:12:58,540 --> 00:13:06,390 The easiest way to loop is to see movies that for each right. 215 00:13:07,300 --> 00:13:08,620 So we're going to look through this one. 216 00:13:09,010 --> 00:13:14,050 But here, remember that in the controller we just call the function here. 217 00:13:14,570 --> 00:13:19,000 We didn't create all of this inside the event listener. 218 00:13:19,060 --> 00:13:23,850 So create a separate function outside and I just create a function for the search controller. 219 00:13:23,950 --> 00:13:25,090 So I'm going to do the same thing. 220 00:13:25,090 --> 00:13:32,920 Instead of rendering all these results here, I'm going to create a function called Display Movie and 221 00:13:33,370 --> 00:13:34,900 take you to this display. 222 00:13:34,900 --> 00:13:38,550 Movie function will actually will deal with only one movie. 223 00:13:38,650 --> 00:13:38,980 Right. 224 00:13:39,160 --> 00:13:50,560 And you needed to put it on top here and say const this yet display movie and now I don't export this 225 00:13:50,560 --> 00:13:50,830 one. 226 00:13:50,980 --> 00:13:51,390 Right. 227 00:13:52,210 --> 00:13:59,500 So we don't need to export this one, but we need to pass that current element. 228 00:13:59,650 --> 00:14:00,020 Right. 229 00:14:00,250 --> 00:14:04,350 So that will be the movie and it's going to be singular because it's going to be one movie. 230 00:14:04,630 --> 00:14:04,990 Right. 231 00:14:05,020 --> 00:14:08,980 So this is not a function that I will export it and I will use it here. 232 00:14:09,010 --> 00:14:14,400 This will be internal function that this this function is using it. 233 00:14:14,410 --> 00:14:14,720 Right. 234 00:14:14,890 --> 00:14:16,960 So it's using it just to get the result. 235 00:14:17,320 --> 00:14:19,630 Now, this function is not going to be exported. 236 00:14:19,640 --> 00:14:21,610 As I said, it's going to be used internally. 237 00:14:22,480 --> 00:14:29,140 OK, so movies for each we'll call this one movies for each will call this function 10 times for each 238 00:14:29,140 --> 00:14:30,030 individual movie. 239 00:14:30,250 --> 00:14:36,850 So we can say here, for example, the current element and then we're going to pass this one here and 240 00:14:36,850 --> 00:14:37,830 we can pass the element. 241 00:14:37,840 --> 00:14:38,050 Right. 242 00:14:38,060 --> 00:14:38,410 We don't. 243 00:14:38,410 --> 00:14:39,850 But we don't want to do that. 244 00:14:39,860 --> 00:14:40,100 Why? 245 00:14:40,120 --> 00:14:44,200 Because this will automatically these six will know that. 246 00:14:44,200 --> 00:14:47,050 OK, yeah, we just calling this one. 247 00:14:47,320 --> 00:14:52,190 And with the current element right now, I can access that current element over here. 248 00:14:52,570 --> 00:14:54,650 So what we need here, actually. 249 00:14:54,670 --> 00:15:03,160 So let's create a markup here and I'm going to say let markup or const markup doesn't matter. 250 00:15:04,570 --> 00:15:10,460 Markup and this markup, we will hold the wood. 251 00:15:10,630 --> 00:15:18,550 So when I have the result, I want to render this result here in the in the container that Coles movie 252 00:15:18,550 --> 00:15:19,030 Slider. 253 00:15:19,240 --> 00:15:19,560 Right. 254 00:15:19,580 --> 00:15:24,700 So I'm going to go back to this one here, go back to the index and I'm going to go through the movie 255 00:15:24,700 --> 00:15:25,090 slide. 256 00:15:25,170 --> 00:15:29,340 OK, this is the entire div and this is each individual movie. 257 00:15:29,380 --> 00:15:30,490 So I'm going to copy this one. 258 00:15:32,420 --> 00:15:35,240 And I'm going to paint it here, right? 259 00:15:36,290 --> 00:15:40,780 OK, let's make it a little bit more nicer so we can have. 260 00:15:41,570 --> 00:15:41,820 Yeah. 261 00:15:41,930 --> 00:15:42,520 Like that. 262 00:15:42,530 --> 00:15:45,260 So that's the markup I'm going to use. 263 00:15:45,410 --> 00:15:52,490 But because I have access to the movie in each movie I see happening. 264 00:15:53,150 --> 00:15:56,330 OK, let's reload the stars and. 265 00:16:02,120 --> 00:16:12,380 And we do have this now, each movie has its title tied year IMDB and stuff like that, so we can grab 266 00:16:12,380 --> 00:16:16,890 it from here because we are using the template literals how we can access this. 267 00:16:16,940 --> 00:16:23,000 So here I just want to create the I just want to insert the idea of that movie. 268 00:16:23,270 --> 00:16:30,190 OK, so I'm going to use a dollar sign and movie that I'm Debbie. 269 00:16:30,710 --> 00:16:34,040 So actually this guy here, I'm David. 270 00:16:34,100 --> 00:16:34,520 Right. 271 00:16:36,200 --> 00:16:39,630 Just going to copy it because I'm going to make a mistake and that's it. 272 00:16:39,650 --> 00:16:44,110 Now, here, the image will come from the poster right in. 273 00:16:44,120 --> 00:16:49,220 Take your take note that this is with capital piece, not with small like. 274 00:16:49,430 --> 00:16:51,730 Yeah, it's with capital, even the title. 275 00:16:52,010 --> 00:16:52,290 Right. 276 00:16:52,460 --> 00:16:53,720 So make sure that you do that. 277 00:16:54,080 --> 00:16:55,580 Do get that one. 278 00:16:55,940 --> 00:17:01,300 So here I'm going to see a movie poster in 40 out. 279 00:17:01,310 --> 00:17:05,630 I'm going to just copy the same thing, but I'm not going to print out the poster, just going to print 280 00:17:05,630 --> 00:17:06,270 out the title. 281 00:17:06,290 --> 00:17:07,610 So this is alternative text. 282 00:17:07,700 --> 00:17:12,440 If the image is not loaded in, that is pretty much it not. 283 00:17:12,440 --> 00:17:21,890 What we need here is actually to create to insert this into the movie slide. 284 00:17:21,900 --> 00:17:22,250 Right. 285 00:17:22,640 --> 00:17:24,470 So I'm just going to copy this movie Slider. 286 00:17:24,590 --> 00:17:27,860 So we are going to insert this 10 results here. 287 00:17:28,070 --> 00:17:29,390 Don't worry about the buttons. 288 00:17:29,810 --> 00:17:31,040 We're still not there yet. 289 00:17:31,070 --> 00:17:31,910 OK, no. 290 00:17:32,690 --> 00:17:36,320 So how are we going to do this document, not query selector? 291 00:17:37,100 --> 00:17:44,720 And I'm going to select this one and I'm going to say, OK, insert the adjacent HTML and inside. 292 00:17:44,720 --> 00:17:55,750 I was passed before end because I want each and every element before and means this after this element. 293 00:17:55,790 --> 00:17:58,550 I want to go inside the movie Slider and before. 294 00:17:58,550 --> 00:18:02,060 And is this element to be first element to go here? 295 00:18:02,070 --> 00:18:08,570 The second element, you go down here, down here, and that's how the 10 elements will fill this here, 296 00:18:08,570 --> 00:18:09,230 the space. 297 00:18:09,590 --> 00:18:21,410 OK, that is, if you want to read more, just go through, insert a Jason Emdur and here you can read 298 00:18:21,410 --> 00:18:22,900 more about it right here. 299 00:18:22,940 --> 00:18:31,270 This before end and it's telling us this p make sure that this is our movie Slide or Dave. 300 00:18:31,310 --> 00:18:31,670 Right. 301 00:18:32,150 --> 00:18:34,280 And it's pretty much same the same logic. 302 00:18:34,400 --> 00:18:36,740 And that's why I just want to go here before end. 303 00:18:37,160 --> 00:18:41,420 So in this movie, Slider, I just want to go here, here, here again. 304 00:18:41,670 --> 00:18:44,540 OK, that was easy in here. 305 00:18:44,540 --> 00:18:45,770 I need to pass the mark up. 306 00:18:47,960 --> 00:18:49,980 And that's pretty much it. 307 00:18:50,270 --> 00:18:56,570 So that is what we need now, what we need to do is go change back to the council. 308 00:18:56,720 --> 00:19:00,100 So this will be called 10 times from here in. 309 00:19:01,070 --> 00:19:09,490 But here, I just want to call the search movie View, not displaying results. 310 00:19:10,790 --> 00:19:11,440 What happened? 311 00:19:11,750 --> 00:19:14,770 The display results in here. 312 00:19:14,780 --> 00:19:17,690 I just want to pass this data, right. 313 00:19:18,200 --> 00:19:19,470 That we just printed out. 314 00:19:19,820 --> 00:19:26,630 So this data that suggest Muis, it will do the same thing because we counseling law and now we just 315 00:19:27,110 --> 00:19:31,190 go here, put this array a loop through this array. 316 00:19:31,490 --> 00:19:35,120 And that array will call this method 10 times. 317 00:19:35,300 --> 00:19:39,680 And that method is actually putting back to our index. 318 00:19:40,400 --> 00:19:40,760 Right. 319 00:19:40,850 --> 00:19:46,700 OK, so let's clean this one here and see Tarzan and hit enter. 320 00:19:46,970 --> 00:19:47,890 And here it is. 321 00:19:48,440 --> 00:19:50,840 We do have actually we do have four. 322 00:19:50,840 --> 00:19:52,070 But this is why. 323 00:19:52,070 --> 00:19:54,820 Because I've just use it for here. 324 00:19:56,150 --> 00:20:02,720 So my logic was from the 10 results to put four here and after that with arrows, I can go through left 325 00:20:02,720 --> 00:20:03,110 and right. 326 00:20:03,260 --> 00:20:08,030 But if I zoom it out, I would be able to see all of the dents. 327 00:20:08,720 --> 00:20:09,090 Right. 328 00:20:09,260 --> 00:20:13,810 One, two, three, four, five, six, seven, eight, nine, 10. 329 00:20:13,850 --> 00:20:18,740 So I do have the ten, but when I'm 100 percent, I will only be able to see four. 330 00:20:18,950 --> 00:20:24,620 This is why I did it like this, because I would like to show you why I do have those like that. 331 00:20:24,650 --> 00:20:28,240 OK, now this is working and that's pretty much it. 332 00:20:28,250 --> 00:20:31,310 So we will continue working in the next lecture. 333 00:20:31,500 --> 00:20:34,230 We need to clean this after here. 334 00:20:34,280 --> 00:20:38,730 So here, if I type Batmen, look what will happen. 335 00:20:38,930 --> 00:20:44,660 So actually the Batman is loaded there, but you can see the results it's appended here. 336 00:20:44,660 --> 00:20:50,630 So I don't want I just want to delete this then and just put this Batman, the new search, the new 337 00:20:50,630 --> 00:20:52,430 results back to this place. 338 00:20:52,550 --> 00:20:56,780 So we have a lot of work here to do and that will do in the next lecture. 339 00:20:56,780 --> 00:21:00,670 And also I'm going to clear this from the search. 340 00:21:00,680 --> 00:21:01,790 So that's pretty much it. 341 00:21:02,090 --> 00:21:03,850 I will see you in the next one.