1 00:00:01,300 --> 00:00:06,400 In the last video, we saw hybrid and other dynamic content based on a search value. 2 00:00:07,540 --> 00:00:13,570 The movie is based on the search and can see here using the use their dogs get use effective hooks and 3 00:00:13,570 --> 00:00:18,340 also using them to think of it to get a request from the warrant from the EPA. 4 00:00:19,440 --> 00:00:22,940 So now, like we have a small bag in the cases we will check, right? 5 00:00:23,020 --> 00:00:29,040 Like we are not able to see, although you may just one after the other, maybe after school, everything 6 00:00:29,040 --> 00:00:33,960 like we saw in the last few up, we'll likely get the notice. 7 00:00:33,960 --> 00:00:38,970 What is the ideal bag and the enough implementing everything like after implementing each functional 8 00:00:39,180 --> 00:00:41,450 that to favorite, remove remove from favorite? 9 00:00:41,730 --> 00:00:45,020 Then we'll see like what changes you have to do in that case. 10 00:00:45,780 --> 00:00:48,780 And then those things in the later part. 11 00:00:49,200 --> 00:00:55,380 So now this next thing, the three remaining things that were left at your favorite remove from favorite 12 00:00:55,560 --> 00:00:59,880 and storing the content like we never know when we are, whenever we are refreshing, we are losing 13 00:00:59,880 --> 00:01:00,630 the content, right? 14 00:01:00,960 --> 00:01:07,200 So binoculars, the content, like when we are refreshing or get back visiting after some time, the 15 00:01:07,200 --> 00:01:11,680 same page, we have to store our favorites so we can see how best to adapt using the local storage. 16 00:01:11,700 --> 00:01:12,960 So these three things are left. 17 00:01:13,230 --> 00:01:15,040 So let us start with our guest. 18 00:01:15,390 --> 00:01:17,250 We will get started with that preference. 19 00:01:19,200 --> 00:01:20,670 It's an important component. 20 00:01:22,520 --> 00:01:23,420 Add favorites. 21 00:01:33,230 --> 00:01:36,350 Not slash components slash. 22 00:01:37,740 --> 00:01:38,670 After fear, it's. 23 00:01:42,620 --> 00:01:45,380 So as we have imported, like we have prepared a component. 24 00:01:48,610 --> 00:01:51,310 Our favorites, GSX. 25 00:01:53,250 --> 00:01:56,550 So instead, this I'll be creating a constant diet favorite. 26 00:02:01,100 --> 00:02:01,300 But. 27 00:02:08,360 --> 00:02:09,140 It should return. 28 00:02:17,020 --> 00:02:17,710 And do. 29 00:02:21,130 --> 00:02:27,610 So now, like basically what we have to do is that we'll have a title collect two favorites and also 30 00:02:27,610 --> 00:02:28,840 a small hot symbol. 31 00:02:29,710 --> 00:02:34,300 So I don't see what will be having the spam. 32 00:02:40,400 --> 00:02:42,080 Glass animals, Amato. 33 00:02:46,660 --> 00:02:47,680 Add to favorites. 34 00:02:51,750 --> 00:02:54,510 So after this will have a small heart symbol. 35 00:03:01,240 --> 00:03:04,360 So far, that preparedness, we should have asked how to get the hot in, but. 36 00:03:06,910 --> 00:03:09,880 So I'll be using bootstrap for that bootstrap icons. 37 00:03:17,740 --> 00:03:18,550 The can. 38 00:03:19,890 --> 00:03:23,310 They're going to install this using this tiny island standard. 39 00:03:26,680 --> 00:03:28,240 And BMI bookshop icons. 40 00:03:29,640 --> 00:03:32,100 So now you can search for I contact with searching for a heart. 41 00:03:33,870 --> 00:03:35,430 Part one, this heartfelt. 42 00:03:37,390 --> 00:03:40,900 You click on the and then can seem like they're giving up. 43 00:03:41,620 --> 00:03:44,650 But you see the original code for the doctrine. 44 00:03:46,770 --> 00:03:47,610 So we'll copy that. 45 00:03:50,020 --> 00:03:51,250 And we you did not call. 46 00:03:56,170 --> 00:03:57,460 So it will be a swig. 47 00:03:58,390 --> 00:04:01,870 So and then these are will be the what do you say? 48 00:04:03,830 --> 00:04:05,870 The props, the props of the component. 49 00:04:08,820 --> 00:04:09,770 We can have them. 50 00:04:10,140 --> 00:04:10,330 I. 51 00:04:18,530 --> 00:04:20,410 I am doing experimentation part. 52 00:04:45,380 --> 00:04:49,160 So, yeah, so again, and sort of current color, I'll be using the red color to fill. 53 00:04:52,440 --> 00:04:53,630 So with this, we are important. 54 00:04:54,660 --> 00:04:58,230 You know, the bootstrap icon acknowledged that the FedEx content. 55 00:04:58,590 --> 00:05:02,130 So after doing this, we basically just exploded. 56 00:05:09,330 --> 00:05:10,170 Our favorite. 57 00:05:14,430 --> 00:05:16,710 So once this is, then we are done with the activity component. 58 00:05:17,100 --> 00:05:20,490 Now we have to write a code for that favorite component while we are returning it. 59 00:05:21,150 --> 00:05:22,290 So we'll see how to do that. 60 00:05:22,470 --> 00:05:23,610 We may want to check whether. 61 00:05:24,750 --> 00:05:30,360 Yeah, so I contacted and started, you can check in the backlog, Jason can see the bootstrap by and 62 00:05:30,360 --> 00:05:32,340 bootstrapping installing the dependencies. 63 00:05:33,770 --> 00:05:36,920 Then I'll go to our producers and our guests. 64 00:05:38,360 --> 00:05:39,950 And then he had no. 65 00:05:41,670 --> 00:05:47,070 Instead, the movie list are like not running and hitting the movies, we have no alternative favorite 66 00:05:47,070 --> 00:05:54,480 ad favorite company like, as you can see, I'm sure you see it on the movie list component. 67 00:05:54,480 --> 00:05:55,940 We should have another component. 68 00:05:56,100 --> 00:06:02,190 They've already had like, you know, like having a component of our two favorite and a hot symbol. 69 00:06:02,400 --> 00:06:06,390 So when we click on that, we need to get someone of their favorite setting and also the component you're 70 00:06:06,390 --> 00:06:06,730 good at. 71 00:06:07,590 --> 00:06:08,700 So we'll see how to do that. 72 00:06:08,700 --> 00:06:12,510 So not only one movie is represented multiple props for that. 73 00:06:14,860 --> 00:06:15,960 Oh, OK. 74 00:06:19,720 --> 00:06:22,900 One will be and then favorites slip. 75 00:06:27,900 --> 00:06:29,850 And if can we be? 76 00:06:32,130 --> 00:06:33,120 And favorite movie. 77 00:06:34,860 --> 00:06:37,740 And favorite movie. 78 00:06:43,220 --> 00:06:44,870 And then the parent component will be. 79 00:06:50,830 --> 00:06:51,880 Component will be. 80 00:06:53,820 --> 00:06:54,610 Outfits. 81 00:06:55,260 --> 00:07:02,530 So we'll see what this indicates to hand the favorite statements whenever we click on that component. 82 00:07:02,550 --> 00:07:07,680 It should do something like it should add some data to your favorite component and like what kind of 83 00:07:07,680 --> 00:07:12,240 component we want to render on set on that movie list, you have to add favorites conference. 84 00:07:12,240 --> 00:07:16,550 I mean, right now, basically our favorite compatibility imported over here. 85 00:07:16,740 --> 00:07:18,360 Pick out favorite from add favorites. 86 00:07:20,380 --> 00:07:21,500 There should be a signal. 87 00:07:22,090 --> 00:07:23,200 It should be singular form. 88 00:07:23,320 --> 00:07:23,560 Yeah. 89 00:07:27,190 --> 00:07:28,780 So there is no need on this. 90 00:07:31,160 --> 00:07:35,930 OK, so now ad hoc ad staff favorite can be fun handling the clip. 91 00:07:36,170 --> 00:07:38,200 We have add favorite movies of that. 92 00:07:38,450 --> 00:07:39,450 I'll be right in the corner. 93 00:07:43,560 --> 00:07:47,010 So just about blowing this huge effect. 94 00:07:48,310 --> 00:07:49,210 Then create a new. 95 00:07:50,880 --> 00:07:52,860 And favorite movie. 96 00:07:55,040 --> 00:07:56,270 It will take that movie. 97 00:08:04,390 --> 00:08:06,880 A new favorite list. 98 00:08:10,330 --> 00:08:12,310 Bemusing has been an for five minutes. 99 00:08:12,620 --> 00:08:16,720 So explain your work like what is happening basically in just a couple of seconds. 100 00:08:23,780 --> 00:08:25,100 And said favorites. 101 00:08:28,530 --> 00:08:29,440 Your favorite just. 102 00:08:39,850 --> 00:08:45,910 So basically, like since we have created all books for the movies and also the search value, we need 103 00:08:45,910 --> 00:08:47,230 to have a home for the favorites. 104 00:08:47,230 --> 00:08:52,600 So like whenever you click something like the favorite should get updated every time your favorite movies. 105 00:08:52,930 --> 00:08:55,580 And then you can able to retrieve them from the. 106 00:09:00,440 --> 00:09:00,710 Said. 107 00:09:05,680 --> 00:09:06,880 Recalls to you start. 108 00:09:08,900 --> 00:09:10,910 So this again, will be an imperial. 109 00:09:12,210 --> 00:09:19,770 So what's happening is whenever, like a person clicks on handling the favorite click attribute, then 110 00:09:19,770 --> 00:09:21,720 we'll call the ad faded memory function. 111 00:09:22,110 --> 00:09:28,480 So what add favorite movie does is that it will take that particular movie and then it will add it to 112 00:09:28,480 --> 00:09:30,210 a new contract, a new favorite list. 113 00:09:30,600 --> 00:09:32,340 And this bad operator does that. 114 00:09:32,340 --> 00:09:39,090 It will be able to help us to save all the information that this constant has and that new information 115 00:09:39,300 --> 00:09:45,750 should be it with all the previous favorites and adding the new movie and they've been set favorites. 116 00:09:45,750 --> 00:09:50,700 That means it will, instead of constantly using this function to the new favorite list. 117 00:09:50,940 --> 00:09:55,590 So we added, we are having a favorite list that contains the movies that we added, but the favorites. 118 00:09:56,220 --> 00:09:59,670 So once that is presented, we'll be sending the favorite component over here. 119 00:10:01,680 --> 00:10:02,190 So. 120 00:10:06,280 --> 00:10:09,280 So now we have to basically render the favorite component, right? 121 00:10:09,790 --> 00:10:12,520 So after that, they've after the movie less to do. 122 00:10:16,750 --> 00:10:18,250 We'll be creating a new division. 123 00:10:22,680 --> 00:10:25,740 So this decision will outclass. 124 00:10:28,020 --> 00:10:29,360 Name of road. 125 00:10:32,350 --> 00:10:33,130 Reflex. 126 00:10:37,020 --> 00:10:38,640 A line items. 127 00:10:41,240 --> 00:10:41,750 Simple. 128 00:10:44,090 --> 00:10:47,480 And B minus four and B minus four. 129 00:10:50,390 --> 00:10:51,200 So he had no. 130 00:10:54,390 --> 00:10:56,430 Maybe sending them or really starting as favourites. 131 00:11:01,230 --> 00:11:02,070 We're really standing. 132 00:11:03,850 --> 00:11:06,790 So the there will be favourites. 133 00:11:12,480 --> 00:11:15,080 And then after this division, we'll have another day. 134 00:11:21,820 --> 00:11:23,770 It class name as little. 135 00:11:26,790 --> 00:11:28,320 And again, we'll be defending them released. 136 00:11:30,840 --> 00:11:31,460 But here. 137 00:11:34,290 --> 00:11:40,140 What we'll be saying is that instead of sending movies, we'll be sending them favorites so that we 138 00:11:40,140 --> 00:11:41,610 can add another favorite movie list. 139 00:11:45,370 --> 00:11:47,440 And on hand favorites, click. 140 00:11:48,780 --> 00:11:49,260 There's sending. 141 00:11:55,020 --> 00:11:55,960 So that will see. 142 00:11:56,370 --> 00:12:01,260 So now there are some lines of code that we need to write when we are removing some favorites, so this 143 00:12:01,260 --> 00:12:03,780 is basically it will now show the favorites to us. 144 00:12:05,790 --> 00:12:10,810 To think that the is enough, so let us check people performing. 145 00:12:13,780 --> 00:12:16,030 So feverish is not defined. 146 00:12:17,170 --> 00:12:19,090 Fifty three line, 53 days earlier. 147 00:12:20,650 --> 00:12:21,520 So fair. 148 00:12:22,630 --> 00:12:23,080 OK. 149 00:12:25,030 --> 00:12:25,290 Yeah. 150 00:12:26,480 --> 00:12:28,970 So neither the check, for starters. 151 00:12:31,360 --> 00:12:38,560 But it's going to not able to, you know, see this or say the component of this thing. 152 00:12:39,410 --> 00:12:40,650 So why is this happening? 153 00:12:40,660 --> 00:12:43,330 Because we need to write some serious code for that. 154 00:12:43,900 --> 00:12:46,900 We'll see what this is caught and not see it this. 155 00:12:49,400 --> 00:12:50,840 Not image container. 156 00:12:51,390 --> 00:12:53,090 Well, not overly. 157 00:12:57,420 --> 00:12:58,720 I possibly will be. 158 00:12:59,830 --> 00:13:00,160 One. 159 00:13:02,820 --> 00:13:09,480 Not overly so, this basically overlays the add favorite component attached to fabric and a heart symbol 160 00:13:09,510 --> 00:13:12,540 on the movie list component that is very odd using overlay. 161 00:13:13,610 --> 00:13:14,690 The politician should be. 162 00:13:16,100 --> 00:13:16,700 Absolute. 163 00:13:25,190 --> 00:13:26,960 My goal, amazing God, GBA. 164 00:13:32,450 --> 00:13:32,870 Zero. 165 00:13:34,860 --> 00:13:35,220 Zero. 166 00:13:37,670 --> 00:13:38,070 You know. 167 00:13:42,570 --> 00:13:50,390 And it will be around 0.8 so that it will have a light gray shade and it will be good to visually it. 168 00:13:52,780 --> 00:13:57,160 So after this number should be 100 percent with the parent component that is the more airlift component, 169 00:13:57,580 --> 00:13:59,260 the individual movies image. 170 00:14:01,950 --> 00:14:08,490 Transition should be a 0.5 second, since you are basically the traditional method, I have checked 171 00:14:08,490 --> 00:14:12,570 all this styles, which style suits the better animation. 172 00:14:13,050 --> 00:14:17,760 You can use different styles according to your how your arm, you want your page to look like, how 173 00:14:17,760 --> 00:14:20,340 you want your movies to look like. 174 00:14:28,530 --> 00:14:31,920 Font size will be 20 pixels. 175 00:14:35,220 --> 00:14:36,660 Fighting really beginning to make sense. 176 00:14:39,150 --> 00:14:40,740 And finally, next time it'll be. 177 00:14:43,750 --> 00:14:44,860 Extra land will be sent. 178 00:14:55,690 --> 00:14:57,190 So you didn't send have the movie list? 179 00:15:02,700 --> 00:15:08,220 So like we are not only there the audience in the post of the image, so often that in the poster, 180 00:15:08,490 --> 00:15:13,650 we also want to have the, you know, the two favorite componentry so that I'll be creating a. 181 00:15:16,020 --> 00:15:16,980 So on, click. 182 00:15:19,220 --> 00:15:20,690 So I'm clicking this do. 183 00:15:21,230 --> 00:15:25,700 It should take this some props and then call the drop start handle favorite. 184 00:15:27,350 --> 00:15:28,880 Propaganda and favorites, click. 185 00:15:34,250 --> 00:15:37,310 By sending the movie the current movie. 186 00:15:44,570 --> 00:15:45,890 The class name will be. 187 00:15:50,540 --> 00:15:51,100 Overly. 188 00:15:54,320 --> 00:15:55,100 Influx. 189 00:16:07,190 --> 00:16:09,710 Alana Adams and Aline. 190 00:16:11,510 --> 00:16:12,110 Items. 191 00:16:13,930 --> 00:16:15,520 Scented dished for condoms and. 192 00:16:39,610 --> 00:16:41,500 And then we have another favorite company. 193 00:16:44,720 --> 00:16:47,900 Favorite coal company. 194 00:16:56,750 --> 00:17:01,280 So when we're getting the props repaired, this favorite component. 195 00:17:07,930 --> 00:17:08,680 Drops dark. 196 00:17:11,020 --> 00:17:11,560 To confirm. 197 00:17:20,390 --> 00:17:22,250 So that is a small number. 198 00:17:23,470 --> 00:17:25,870 The federal they wanted this deal to close. 199 00:17:29,820 --> 00:17:30,660 So now what? 200 00:17:30,930 --> 00:17:39,390 So what basically is happening is that whenever you go to like inside garages, you can see you're sending 201 00:17:39,390 --> 00:17:44,820 food drops on his hand and favorite clicks add favorite movie so that you're catching over it in the 202 00:17:44,820 --> 00:17:45,630 movies list. 203 00:17:46,700 --> 00:17:52,700 And the favorites like whenever like this prop, like whenever and click on the division, another division 204 00:17:52,700 --> 00:17:57,200 is clicked, then we'll call it this anonymous function and then we'll be sending we'll be calling the 205 00:17:57,200 --> 00:17:58,970 title favourites click function. 206 00:17:58,970 --> 00:18:00,710 We're sending the movie as actor. 207 00:18:01,190 --> 00:18:07,260 And also in that gorgeous, you're having this favorite component and we are sending this add. 208 00:18:07,260 --> 00:18:11,750 A favorite component to this very component contains the date of this component ad. 209 00:18:12,470 --> 00:18:14,160 So that really gets in the movie list. 210 00:18:14,180 --> 00:18:15,650 And then we'll read that component. 211 00:18:16,310 --> 00:18:22,580 So now if you see the working, you can see you got our two favorite and a heart symbol in this. 212 00:18:24,590 --> 00:18:32,150 So that so now we're we have to sort this out, two favorite component and local story to date and also 213 00:18:32,150 --> 00:18:33,290 the remove from the favorite. 214 00:18:33,650 --> 00:18:40,610 So once we start this up, the date of the favorites is not in some local component and also remove 215 00:18:40,610 --> 00:18:43,250 some favorites and then change the styling part. 216 00:18:43,250 --> 00:18:51,100 Then we can see the complete page that is I know fans of now, like since we have not completed the 217 00:18:51,110 --> 00:18:53,870 local storage, but we're not able to see anything like favorites. 218 00:18:54,530 --> 00:19:01,140 But the favorite also like you can see, there is nothing, so we'll see out of a store stored away 219 00:19:01,220 --> 00:19:06,140 at our favorites onto the local storage and also the remove from remote fan favorite component in that 220 00:19:06,140 --> 00:19:06,530 next week. 221 00:19:07,480 --> 00:19:07,810 Thank.