1 00:00:01,950 --> 00:00:05,240 Welcome back, ladies and gentlemen, let's build the likes like view. 2 00:00:05,250 --> 00:00:06,780 So what are we going to do here? 3 00:00:08,280 --> 00:00:13,470 We're going to need actually the next stimulus, so I'm going to open up, close this model's view and 4 00:00:13,470 --> 00:00:19,290 I'm going to open a new file called Like View that just now. 5 00:00:19,290 --> 00:00:21,690 First things first get from the cart. 6 00:00:21,690 --> 00:00:24,990 I want to import the classiness because we're going to use it here. 7 00:00:25,050 --> 00:00:25,410 Right. 8 00:00:25,770 --> 00:00:27,160 So I don't need the card anymore. 9 00:00:27,660 --> 00:00:29,910 Now, first things first. 10 00:00:29,910 --> 00:00:31,710 I need to export CONSED. 11 00:00:32,490 --> 00:00:39,810 Now we're going to have a couple of functions here, but let's start with exporting the concept that's 12 00:00:39,810 --> 00:00:40,710 going to do. 13 00:00:41,340 --> 00:00:51,480 He's going to display the entire like model and here I will have one, the entire like object that we 14 00:00:51,480 --> 00:00:54,120 haven't created yet, but we will do shortly. 15 00:00:54,390 --> 00:01:06,030 And as you know, the market will be here and after that we need to use the class names that like container, 16 00:01:06,030 --> 00:01:08,750 which I haven't created yet to insert. 17 00:01:10,560 --> 00:01:11,970 Yep, that can happen. 18 00:01:11,970 --> 00:01:18,300 Insert I'm I'm very frustrated sometimes when this is happening. 19 00:01:18,540 --> 00:01:20,430 So insert Jason. 20 00:01:23,430 --> 00:01:30,150 HTML in here, I'm going to pass it before and and the markup. 21 00:01:31,620 --> 00:01:39,470 Now let's wrap this one template literals here and so we were able to finish one. 22 00:01:39,480 --> 00:01:42,220 And don't forget, we need to put this one in the class. 23 00:01:42,520 --> 00:01:43,770 OK, but first things first. 24 00:01:44,070 --> 00:01:49,920 Go back here to the like modem and just grab this line here. 25 00:01:49,920 --> 00:01:50,300 Right. 26 00:01:50,880 --> 00:01:53,970 And that is inside the like like container. 27 00:01:54,210 --> 00:01:58,980 OK, spohrer here, base it down here. 28 00:01:59,180 --> 00:02:05,490 OK, it doesn't look that terrible here and that's pretty much it. 29 00:02:05,520 --> 00:02:11,580 Now we need to do a couple of changes here because we do have the like here and we will have the access 30 00:02:11,580 --> 00:02:12,510 to the what? 31 00:02:14,430 --> 00:02:16,560 Access to the like ID. 32 00:02:17,940 --> 00:02:18,320 Right. 33 00:02:18,380 --> 00:02:22,440 So we will have the access here instead of the image we will have. 34 00:02:22,440 --> 00:02:25,320 So we will have the like poster. 35 00:02:26,280 --> 00:02:28,020 We haven't used this for a long time. 36 00:02:28,020 --> 00:02:32,460 The title will go here like title. 37 00:02:33,990 --> 00:02:34,770 What else we need. 38 00:02:35,760 --> 00:02:36,690 We need the year. 39 00:02:41,210 --> 00:02:51,490 Here and here, we need the I'm reading right now like that I am DB rating cool. 40 00:02:51,920 --> 00:02:54,260 So that will grab all of the information we need. 41 00:02:54,530 --> 00:02:56,810 We just put it here before end. 42 00:02:56,900 --> 00:03:00,470 Now, let's define this like container. 43 00:03:00,770 --> 00:03:10,670 And the name is like a container, just class class selector. 44 00:03:10,670 --> 00:03:12,680 Open up that one and it here. 45 00:03:14,180 --> 00:03:23,960 And I just copied this entire thing, based it down here and just change this to here and make it like 46 00:03:24,110 --> 00:03:25,250 a container. 47 00:03:26,790 --> 00:03:29,660 And I'm just going to copy just in case, because sometimes I can. 48 00:03:30,080 --> 00:03:30,620 Here it is. 49 00:03:31,520 --> 00:03:35,570 Here is like container and I will just put it like container there. 50 00:03:35,570 --> 00:03:40,600 Right, because we can make mistakes and after that it will not work and we will scratch our head. 51 00:03:40,820 --> 00:03:42,170 OK, why is this happening? 52 00:03:42,470 --> 00:03:43,090 This and that. 53 00:03:43,100 --> 00:03:49,040 OK, that is the one that we need to use it in order to see the results here. 54 00:03:49,040 --> 00:03:50,060 When we click right. 55 00:03:50,420 --> 00:03:52,710 They are like a container. 56 00:03:52,730 --> 00:03:56,510 OK, now I'm going to write one more function. 57 00:03:56,780 --> 00:03:58,610 Actually, we need to read more functions. 58 00:03:58,880 --> 00:04:02,810 So here I will say we set like Moala now. 59 00:04:02,810 --> 00:04:05,630 We used we up a lot of times here. 60 00:04:05,630 --> 00:04:07,850 So I'm not going to explain what this will do. 61 00:04:08,030 --> 00:04:17,150 And I will say class names, but like container that either HDMI, I want to set the inner HDMI of that 62 00:04:17,150 --> 00:04:19,040 like container back to zero. 63 00:04:20,750 --> 00:04:21,170 Right. 64 00:04:22,110 --> 00:04:22,750 Nice. 65 00:04:23,780 --> 00:04:31,100 So that is the two of the functions and we need an additional one function that remember, we just create 66 00:04:31,100 --> 00:04:33,140 here being the models. 67 00:04:33,920 --> 00:04:36,500 We create these to check movie status. 68 00:04:36,500 --> 00:04:36,890 Right. 69 00:04:37,580 --> 00:04:43,690 Genk check movie like status and we will use that one just really shortly here. 70 00:04:44,000 --> 00:04:55,940 Now back down here, I will say export const display like in what it will do here, it will accept the 71 00:04:55,940 --> 00:04:57,320 Leicht status. 72 00:04:57,770 --> 00:04:58,160 Right. 73 00:04:58,460 --> 00:05:02,720 Based on that status, we can do something now. 74 00:05:02,870 --> 00:05:04,160 Make sure that you put Sumiko. 75 00:05:04,160 --> 00:05:08,930 It's not something major, but we it's good to have like that. 76 00:05:10,070 --> 00:05:12,260 Had a habit of just doing that. 77 00:05:12,290 --> 00:05:14,210 OK, now first things first. 78 00:05:14,480 --> 00:05:23,390 We want to create two constants called fool heart and let's make it empty at the moment. 79 00:05:23,390 --> 00:05:26,210 And the second constants will be empty heart. 80 00:05:27,510 --> 00:05:30,840 No, you will know what I'm trying to say here. 81 00:05:31,140 --> 00:05:43,030 Let's let's go back down over to our index and I need to go to the icon part here. 82 00:05:43,140 --> 00:05:43,670 Here it is. 83 00:05:44,130 --> 00:05:46,370 Now, I need to grab these SBG here. 84 00:05:46,470 --> 00:05:46,820 Right? 85 00:05:46,840 --> 00:05:47,880 I cannot. 86 00:05:48,120 --> 00:05:51,780 And I'm just going to grab the entire one. 87 00:05:52,860 --> 00:05:54,120 I'm GSV. 88 00:05:54,120 --> 00:05:56,070 Just stuff like that to grab it into one. 89 00:05:56,490 --> 00:05:56,740 Oops. 90 00:05:59,240 --> 00:06:04,320 And we need to go back to The View now for the first one, foolhardy. 91 00:06:04,550 --> 00:06:09,950 I will just based it on here is the difference between foolhardy and empty heart. 92 00:06:10,130 --> 00:06:11,650 You just read that dash. 93 00:06:11,690 --> 00:06:12,660 Oh, right. 94 00:06:13,310 --> 00:06:17,210 So I have to icons in the I will tell you. 95 00:06:17,210 --> 00:06:19,390 OMG, Fuller, here it is. 96 00:06:19,880 --> 00:06:21,150 So I have two icons there. 97 00:06:22,820 --> 00:06:25,070 Here it is, the heart, the normal one. 98 00:06:25,070 --> 00:06:26,220 And I mean this. 99 00:06:26,240 --> 00:06:28,670 The empty one in the normal heart symbol. 100 00:06:29,000 --> 00:06:29,410 Nice. 101 00:06:29,570 --> 00:06:31,850 So they're coming from there. 102 00:06:31,850 --> 00:06:34,370 So you should know which which part. 103 00:06:34,370 --> 00:06:35,630 I mean I'm quoting right now. 104 00:06:35,630 --> 00:06:37,610 It's coming from where right now. 105 00:06:37,790 --> 00:06:47,270 So here, based on the liked status, we can do something so we can say, OK, no, I will use the document 106 00:06:47,270 --> 00:06:50,660 that query selector and we have never used these before. 107 00:06:50,930 --> 00:06:55,400 But with the document that query selector, I can also set attribute. 108 00:06:56,000 --> 00:06:56,390 Right. 109 00:06:56,690 --> 00:07:05,450 And I want to set the attribute here because here we are inside the atrip and I want to set that attribute 110 00:07:05,600 --> 00:07:08,210 and I want to target the heart icon. 111 00:07:11,030 --> 00:07:14,300 OK, so let's continue working in here. 112 00:07:14,330 --> 00:07:18,370 So what I'm going to do is I'm going to use the set, actually. 113 00:07:18,410 --> 00:07:20,930 So if it's like status, it's true. 114 00:07:21,050 --> 00:07:31,460 So I want to target document that query selector and I want to see that part icon, that set attribute. 115 00:07:31,460 --> 00:07:33,770 And I'm going to give it a try here. 116 00:07:33,770 --> 00:07:38,640 I'm just going to target the atrip and I'm going to pass the full heart. 117 00:07:38,840 --> 00:07:46,360 So if it's empty, change it to full heart, otherwise else do the vice versa. 118 00:07:46,370 --> 00:07:50,030 I'm just going to keep it interesting and I'm going to change to empty heart. 119 00:07:50,750 --> 00:07:53,030 Nice, empty heart actually. 120 00:07:53,030 --> 00:07:53,350 Right. 121 00:07:53,840 --> 00:07:55,820 And that is pretty much it. 122 00:07:55,880 --> 00:07:57,050 What we need to do here. 123 00:07:57,380 --> 00:07:59,540 And we are good to go. 124 00:07:59,690 --> 00:08:04,970 Now, in the next lecture, we will see how this will play out, how what we have written here, it 125 00:08:04,970 --> 00:08:05,450 will work. 126 00:08:05,750 --> 00:08:09,350 And if we have some problem, actually, we will be able to see it. 127 00:08:09,710 --> 00:08:11,170 Thank you very much for watching. 128 00:08:11,180 --> 00:08:15,170 And now you know how to set attribute on a link on a traveling right. 129 00:08:15,180 --> 00:08:22,780 It will go there, find this actual class and append these attributes, each going to change the attribute. 130 00:08:23,030 --> 00:08:26,630 And based on here, we do have it over here. 131 00:08:26,630 --> 00:08:26,960 Right. 132 00:08:27,140 --> 00:08:34,910 So that is something that we need to do next lecture with the with the help of the of the controller. 133 00:08:34,940 --> 00:08:35,780 So thank you very much. 134 00:08:35,780 --> 00:08:36,910 And I will see you in the next one.