1 00:00:00,930 --> 00:00:07,620 In the last video, we saw how to implement add to favorites feature, we have created a favorites component 2 00:00:07,890 --> 00:00:13,020 and then we have like, as you can see over the years, we have created this division where the text 3 00:00:13,020 --> 00:00:18,960 add to favorites and with our heart logo that we got from the bootstrap icons, and then we would add 4 00:00:18,960 --> 00:00:20,190 that favorite component. 5 00:00:20,490 --> 00:00:26,220 And as you can see in the death of here, instead of movies, we are sending the favorites. 6 00:00:26,850 --> 00:00:28,560 So what does this favorite content? 7 00:00:30,200 --> 00:00:36,560 This period, basically this period is a state reactor you set up, and it contains the date of the 8 00:00:36,590 --> 00:00:38,000 movie that are added to favorites. 9 00:00:38,390 --> 00:00:45,170 So how to get that data like we'll be using this favorite function whenever the like, whenever a new 10 00:00:45,170 --> 00:00:48,110 movie is added will be creating a new favorite list. 11 00:00:48,350 --> 00:00:52,910 This is a new idea with all the previous favorites and also new favorite added. 12 00:00:53,210 --> 00:01:01,070 So with that new, I will be setting the favorites array to this new idea and then we can zoom in that 13 00:01:01,070 --> 00:01:02,540 maybe you can update the favorites list. 14 00:01:03,580 --> 00:01:10,630 So know how to implement remove some filter similar to atmospheric we have to like, create a new component 15 00:01:10,630 --> 00:01:15,790 for remove, remove from cabinet and then we have to create or do you know what areas are removed from 16 00:01:15,800 --> 00:01:22,300 cabinets basically like remove from heritage, we have created a favorites component, but far removed 17 00:01:22,300 --> 00:01:22,960 from favorites. 18 00:01:23,290 --> 00:01:29,050 It is a kind of, you know, of like added function or a propertied operating. 19 00:01:29,320 --> 00:01:34,000 So basically to the movie list we are sending movies is a coastal favorite, but the heading favorites 20 00:01:34,300 --> 00:01:37,250 and then we'll send handle favorite click. 21 00:01:37,540 --> 00:01:43,060 So whenever like remove from favorites is clicked, then we'll be sending a function as input and then 22 00:01:43,060 --> 00:01:45,850 we have to write the code for that what the function should look like. 23 00:01:46,060 --> 00:01:51,010 It should remove the the the particular movie that we are removing from the favorites from the favorite 24 00:01:51,010 --> 00:01:51,310 list. 25 00:01:51,550 --> 00:01:52,850 So how to implement that, we see. 26 00:01:53,200 --> 00:01:58,750 So first things first, we now start creating that this remote favorite component. 27 00:02:00,790 --> 00:02:01,230 They move. 28 00:02:02,310 --> 00:02:02,970 Favorites. 29 00:02:04,290 --> 00:02:05,160 Not Jan. six. 30 00:02:07,660 --> 00:02:09,910 Insert this, I can create constant. 31 00:02:14,150 --> 00:02:15,380 Constrained to move evidence. 32 00:02:29,290 --> 00:02:31,630 So here I am using the bootstrap class. 33 00:02:32,050 --> 00:02:33,100 So first, let me. 34 00:02:37,860 --> 00:02:40,530 Create a remove from them in a text. 35 00:02:41,760 --> 00:02:44,100 And Martin, minus initial margin, right, too. 36 00:02:44,550 --> 00:02:45,750 This is a bootstrapped class. 37 00:02:46,710 --> 00:02:47,250 They move. 38 00:02:48,830 --> 00:02:49,160 Some. 39 00:02:50,620 --> 00:02:51,250 Favorites. 40 00:02:53,520 --> 00:02:58,530 So once this is done now, we can, like use the Bush up by going over it. 41 00:02:59,790 --> 00:03:02,340 We'll see how to use that bootstrap icon. 42 00:03:02,550 --> 00:03:07,080 Go to the bootstrap icon official documentation here. 43 00:03:07,080 --> 00:03:09,390 Inside the search, you can search for remove. 44 00:03:12,550 --> 00:03:17,980 So like basically, you can search for or you can search for cross symbol. 45 00:03:19,500 --> 00:03:20,960 Are multiply. 46 00:03:24,920 --> 00:03:29,900 So like, we need basically a remove kind of symbol like X. 47 00:03:33,710 --> 00:03:37,760 So ever do such a thing or the other can say that on many things. 48 00:03:38,840 --> 00:03:40,340 So, yeah, this is good, right? 49 00:03:40,630 --> 00:03:44,420 Excess quit, this is what we usually hear the same thing, ActionScript. 50 00:03:44,990 --> 00:03:46,100 So now we can use this. 51 00:03:46,680 --> 00:03:50,840 I'm copying that gentleman and then I'm passing it over here. 52 00:03:52,650 --> 00:03:53,580 So as you can see. 53 00:03:55,720 --> 00:03:59,380 No, I'll just do that indentation pack so that it looks clean and neat. 54 00:04:23,720 --> 00:04:24,230 So you. 55 00:04:27,670 --> 00:04:28,750 Let me mentor here. 56 00:04:39,330 --> 00:04:41,070 So that's just one more step. 57 00:04:44,900 --> 00:04:48,770 So if you want, you can add this extra property by adding the build room. 58 00:04:49,970 --> 00:04:57,680 So Phil really is a nice prop, you can check the documentation online below, consider even on. 59 00:05:00,820 --> 00:05:03,490 The same thing I'll be using for this battle also. 60 00:05:07,550 --> 00:05:08,960 So everything is perfect. 61 00:05:09,840 --> 00:05:12,350 Oh, just let me do a small rendition audio. 62 00:05:13,340 --> 00:05:13,660 Then. 63 00:05:20,470 --> 00:05:20,950 Oh, yeah. 64 00:05:21,310 --> 00:05:23,020 So now everything looks so clean and neat. 65 00:05:24,410 --> 00:05:28,460 The remove from favorite component is done in the last step is we have to export. 66 00:05:33,660 --> 00:05:34,560 Emile favorites. 67 00:05:37,850 --> 00:05:42,080 So as one, as we like exploded and I will import this in that gorgeous. 68 00:05:51,960 --> 00:05:52,290 What? 69 00:05:53,570 --> 00:05:59,390 Remove favorites from companies directly won't hurt, so this is the good thing about which one should 70 00:05:59,390 --> 00:05:59,720 have guts. 71 00:05:59,990 --> 00:06:05,540 Sometimes the snippets available here, snippets available will help us further out of a locked reactor 72 00:06:05,540 --> 00:06:06,440 code that we are using. 73 00:06:07,400 --> 00:06:10,340 So now once we get this now, we can use it on it. 74 00:06:11,620 --> 00:06:12,610 And then what this list? 75 00:06:13,740 --> 00:06:22,050 Handle favorites, click whenever, like here, whenever a favorite is like whenever the movie list 76 00:06:22,050 --> 00:06:27,120 is, click the division, then we are calling Add Favorite Movie, but here we want to remove in this 77 00:06:27,120 --> 00:06:27,690 favorites. 78 00:06:28,940 --> 00:06:33,630 But thing right here, as you can see here and we are clicking on it, we have to add it to the favorite, 79 00:06:33,870 --> 00:06:35,520 but we in the heading his favorites. 80 00:06:35,760 --> 00:06:39,570 The below movie list should contain remove some favorites, so now would be sending. 81 00:06:41,690 --> 00:06:42,200 They move. 82 00:06:44,470 --> 00:06:49,210 So I think that it's more of an ad to favorite ad favorite movie. 83 00:06:49,630 --> 00:06:49,990 Yeah. 84 00:06:53,670 --> 00:06:54,120 Remove. 85 00:06:55,920 --> 00:06:56,580 Favorite. 86 00:06:58,440 --> 00:06:58,800 Well, we. 87 00:07:00,400 --> 00:07:03,190 So once that is done now, the favorite component. 88 00:07:04,480 --> 00:07:06,370 Will be the same thing, remote favorite. 89 00:07:09,500 --> 00:07:10,280 Remote parts. 90 00:07:11,800 --> 00:07:14,590 And I'll be happy to advocate for this remove favorite movie. 91 00:07:15,530 --> 00:07:18,110 And go ahead, create a new constraint for. 92 00:07:19,500 --> 00:07:19,950 Remove. 93 00:07:21,940 --> 00:07:22,620 Favorite movie. 94 00:07:24,070 --> 00:07:25,740 It will take the movie. 95 00:07:30,390 --> 00:07:35,040 And then now we'll be creating the process that Bill uses will use the filter function. 96 00:07:35,400 --> 00:07:40,650 So what this filter does is that it will it will like it will follow certain condition that we write 97 00:07:40,650 --> 00:07:47,790 inside the filter function and it will remove all the items that are present inside the array that we 98 00:07:47,790 --> 00:07:52,860 are using filter upon and then returns the new array without doing the calibration that we want. 99 00:07:52,890 --> 00:07:53,730 So let me show you. 100 00:07:54,860 --> 00:08:02,180 Conch basically will be creating a new idea, construct new cognitive favorite list and then favorites. 101 00:08:03,420 --> 00:08:08,640 So it will be the favorites that you can see such data that restored favorites upon and then now we 102 00:08:08,640 --> 00:08:09,960 knew the printer function upon it. 103 00:08:11,320 --> 00:08:11,700 Filter. 104 00:08:12,130 --> 00:08:13,090 And then what we want to do. 105 00:08:13,360 --> 00:08:21,560 So basically, we want to remove all the functions that have the IMDb I.D. that we clicked on remove 106 00:08:21,560 --> 00:08:22,210 from private. 107 00:08:22,510 --> 00:08:25,420 So I'll do that, try to take the favorite. 108 00:08:28,570 --> 00:08:35,040 So this is the barometer favorite means the single item, like whenever the favorite like it, it is 109 00:08:35,050 --> 00:08:35,980 basically like a far loop. 110 00:08:36,220 --> 00:08:40,150 So when you start the filter function, it loops on each and every item of that. 111 00:08:40,480 --> 00:08:42,660 So that item you are representing us favorite. 112 00:08:43,210 --> 00:08:47,740 So if favorite, not I am debating. 113 00:08:51,080 --> 00:08:53,010 Not a constant movie that I am doing. 114 00:08:55,300 --> 00:08:57,010 I am deeply. 115 00:08:58,100 --> 00:08:58,430 I. 116 00:09:00,210 --> 00:09:00,960 That means. 117 00:09:02,860 --> 00:09:09,370 The movie that we are taking, if it is not equal to the idea that we are clicking on that we have not 118 00:09:09,370 --> 00:09:12,720 deleted from the party scene, there was an article. 119 00:09:13,000 --> 00:09:18,630 The thing that we are clicking on and our favorite that I am, the item that is present at each stage 120 00:09:18,640 --> 00:09:19,090 of the look. 121 00:09:19,360 --> 00:09:24,100 Then we have the not deleted, but if it is present, then it will filter that thing. 122 00:09:24,850 --> 00:09:33,490 Did you understand like when once you apply the filter option, if this condition is true, then it 123 00:09:33,490 --> 00:09:36,460 will not filter that if this condition is false, then it will filter. 124 00:09:36,760 --> 00:09:42,490 So when this condition will be false, whenever the movie that we are getting over here, I am leaving 125 00:09:42,520 --> 00:09:42,640 it. 126 00:09:42,910 --> 00:09:46,720 And then the item present inside the favorite movie list. 127 00:09:47,080 --> 00:09:48,250 I bought that same. 128 00:09:48,520 --> 00:09:52,990 Then it got a filter that so that is what we had basically doing anyway, filtering the. 129 00:09:54,160 --> 00:09:57,760 Were at least based on the idea that we're getting from handed favorite looks. 130 00:09:58,630 --> 00:10:03,820 So with this, we complete the remote favorite movie logic, the business logic. 131 00:10:03,840 --> 00:10:10,420 But then we are basically now left out with the final step that is saving the favorites list and the 132 00:10:10,420 --> 00:10:14,170 movies list where local storage, as you can see here, inspect. 133 00:10:16,500 --> 00:10:20,310 Go to application here and the local storage. 134 00:10:20,580 --> 00:10:24,020 I'm having my movies listed, the Star Wars The Favourite. 135 00:10:24,180 --> 00:10:27,720 This is my favorite list president of the country Star Wars Star Wars Avengers. 136 00:10:28,840 --> 00:10:31,010 Avengers Avengers and Barbara Lee. 137 00:10:31,270 --> 00:10:35,920 So these are the favorites instead that I'm starting, so when I refresh, I still have my favorites. 138 00:10:36,220 --> 00:10:38,770 Now I can search for movies and I know a new favorite. 139 00:10:40,170 --> 00:10:45,840 And let me add this now you can see you can scroll down and you can see new movie and the local story 140 00:10:45,840 --> 00:10:46,620 is getting updated. 141 00:10:46,920 --> 00:10:52,020 So in the next video, we'll see how to implement the code part for this local storage and see the final 142 00:10:52,020 --> 00:10:53,550 version of the page.