1 00:00:01,320 --> 00:00:02,140 Welcome back, guys. 2 00:00:02,160 --> 00:00:08,370 Today, we're going to work on the car view and we need to create that file and we need to create a 3 00:00:08,370 --> 00:00:10,170 couple of functions there and export them. 4 00:00:10,180 --> 00:00:15,810 But before anything else, I have the final version here and I have the open version here. 5 00:00:15,820 --> 00:00:19,800 So if we add, for example, a movie here, this is what we're trying to do. 6 00:00:20,040 --> 00:00:25,340 And if we go here to look at this, the euro has changed now that it doesn't contain the only one, 7 00:00:25,350 --> 00:00:27,280 the idea anymore. 8 00:00:27,570 --> 00:00:32,130 So if I click outside, it will not nothing will happen right now. 9 00:00:32,520 --> 00:00:37,680 The problem in our current application is that if I search for a movie, for example, if I click on 10 00:00:37,680 --> 00:00:39,720 it now, I do have the right. 11 00:00:39,840 --> 00:00:46,230 But if I click here, something wrong loading the movie because he tried to load the movie with this 12 00:00:47,010 --> 00:00:50,120 and actually this is not the ID, so how we can fix it. 13 00:00:50,130 --> 00:00:53,210 So there are a couple of things that we need to do now. 14 00:00:53,220 --> 00:01:00,810 First, we need to work on this movie handler because I want to check first what is in the euro before 15 00:01:01,080 --> 00:01:03,810 I go to the movie and creating that movie. 16 00:01:04,050 --> 00:01:04,410 Right. 17 00:01:04,500 --> 00:01:07,950 Because we are checking the IDs there, then we're going to create that movie. 18 00:01:07,950 --> 00:01:10,770 We're going to pass that ID to the movie class. 19 00:01:11,490 --> 00:01:15,720 Now, I'm going to comment on this one here. 20 00:01:15,720 --> 00:01:20,760 I'm going to create a function that will do that hash handler. 21 00:01:21,630 --> 00:01:27,120 And by the way, this function, it will not take any parameters, but it will check if the location 22 00:01:27,120 --> 00:01:36,750 that has the same, the one that we use to get the right, the location, the hash we use it for to 23 00:01:36,750 --> 00:01:39,440 get the how to see the ID. 24 00:01:39,800 --> 00:01:42,600 Right now we're going to say the location. 25 00:01:42,600 --> 00:01:49,200 That hash is different than hash target content. 26 00:01:49,890 --> 00:01:56,100 But I have to here if I click on the other one, you will see if I have to get one. 27 00:01:56,100 --> 00:01:57,360 So I'm going to copy this one as well. 28 00:01:57,990 --> 00:02:05,120 So I'm going to say in a location that hash is different than this one. 29 00:02:05,340 --> 00:02:13,800 And also, if it's different than a location, that hash is different than what different that hash 30 00:02:13,800 --> 00:02:22,470 symbol only right then if because they're an operator, all of these three needs to be satisfied in 31 00:02:22,470 --> 00:02:24,790 order to get in this if if conditions. 32 00:02:24,790 --> 00:02:31,050 So if everything is correct, if we don't have this so means if we don't have any of this in the euro, 33 00:02:31,050 --> 00:02:33,850 then I can easily call the movie controller. 34 00:02:35,020 --> 00:02:35,430 Right. 35 00:02:35,670 --> 00:02:37,280 And here we need to call it. 36 00:02:38,010 --> 00:02:40,330 So I'm just going to copy the one on top. 37 00:02:41,610 --> 00:02:46,110 Now I'm going to tell you how you can avoid even this even better, how this here. 38 00:02:46,320 --> 00:02:49,020 First, I'm going to call the hash handler method. 39 00:02:49,450 --> 00:02:49,820 Right. 40 00:02:49,980 --> 00:02:53,950 And from the hash handler, it will go to the movie controller if everything is OK. 41 00:02:54,840 --> 00:02:55,680 Now, let's check it up. 42 00:02:56,760 --> 00:03:00,060 And actually, this is not the version that we were looking for here. 43 00:03:00,300 --> 00:03:04,650 So I'm going to here and search for a movie and I'm going to type the movie. 44 00:03:05,010 --> 00:03:11,400 I'm going to go here and we don't have any loading of unnecessary things. 45 00:03:11,400 --> 00:03:12,690 So this is what we need to do. 46 00:03:12,720 --> 00:03:13,050 Right. 47 00:03:13,170 --> 00:03:13,970 OK, good. 48 00:03:15,120 --> 00:03:18,690 This is well, just for showing, I will show what we are going to do next. 49 00:03:19,290 --> 00:03:23,430 But so now I told you I'm going to tell you something else. 50 00:03:23,700 --> 00:03:25,500 Now, here, just create a model. 51 00:03:25,500 --> 00:03:30,870 So when I click in here, it's opening like this and this is the target atrium that I'm using. 52 00:03:31,020 --> 00:03:33,600 So this is how the models are working in HTML. 53 00:03:33,840 --> 00:03:42,210 But, well, you can do you can do something even more better or more simpler so you can use on hover, 54 00:03:42,210 --> 00:03:48,420 for example, if you have good access, you can use when you hover this card here, then the pop up 55 00:03:48,420 --> 00:03:51,900 window will open without triggering anything here. 56 00:03:52,320 --> 00:03:52,740 Right. 57 00:03:53,340 --> 00:03:54,990 Without changing the URL address. 58 00:03:54,990 --> 00:03:57,630 So then you don't have to use this one. 59 00:03:57,630 --> 00:03:59,610 Sorry, you don't have to use this one. 60 00:03:59,610 --> 00:04:00,840 You can continue with O1. 61 00:04:01,650 --> 00:04:07,020 So that's why I'm trying to say so because remember, sometimes when you hover things like this, I 62 00:04:07,020 --> 00:04:12,120 have to change your color so I can do the same thing, I can cover it and I can get the whole thing 63 00:04:12,510 --> 00:04:16,350 popped out without actually needs to click on. 64 00:04:16,690 --> 00:04:17,190 Right. 65 00:04:17,820 --> 00:04:18,800 I hope I'm clear. 66 00:04:18,810 --> 00:04:21,930 So if you're good at this one, then you should go for it. 67 00:04:21,930 --> 00:04:27,690 I do have other courses for styling would be ultimate boxes and that's where I learn a lot of things. 68 00:04:27,690 --> 00:04:30,150 So you can get that knowledge from there. 69 00:04:30,840 --> 00:04:32,340 I'm not sure if I have. 70 00:04:32,340 --> 00:04:35,460 Yeah, I've done something on the hover probably in. 71 00:04:35,460 --> 00:04:35,790 Yeah. 72 00:04:35,790 --> 00:04:40,020 Or you can find on the Internet how you can use to see a system hover and just change it. 73 00:04:40,500 --> 00:04:40,850 Cool. 74 00:04:42,000 --> 00:04:50,100 Now what we're going to be here is actually when you click here, this part, so this is inspect, it's 75 00:04:50,100 --> 00:04:52,050 actually the target content. 76 00:04:52,140 --> 00:04:52,620 Right. 77 00:04:53,190 --> 00:04:59,460 And we do have this target in our class and inside we do have the image, the container. 78 00:04:59,910 --> 00:05:03,780 And this is the target content that I'm just triggering at this stage. 79 00:05:03,910 --> 00:05:06,600 OK, it doesn't matter now. 80 00:05:07,410 --> 00:05:08,310 We are done with this. 81 00:05:08,830 --> 00:05:10,140 Let's work on our view. 82 00:05:10,150 --> 00:05:13,280 So, in our view, create a new car view. 83 00:05:13,290 --> 00:05:18,060 Now, ladies and gentlemen, today, we're not going to be able to see the view, but we will just called 84 00:05:18,060 --> 00:05:20,370 everything that we can here we can do. 85 00:05:20,520 --> 00:05:21,690 Now, first things first. 86 00:05:21,690 --> 00:05:24,450 Copy this and important on top. 87 00:05:25,140 --> 00:05:25,620 Nice. 88 00:05:26,010 --> 00:05:35,850 Now here I'm going to export export consed display movie item and that will be the item that we just 89 00:05:35,850 --> 00:05:36,390 created. 90 00:05:36,820 --> 00:05:38,790 Last lecture from the controller. 91 00:05:39,120 --> 00:05:40,350 Yes, from the model. 92 00:05:40,350 --> 00:05:41,340 Sorry, not the controller. 93 00:05:41,670 --> 00:05:45,570 So here we will add the CONSED markup. 94 00:05:47,490 --> 00:05:47,910 Right. 95 00:05:48,090 --> 00:05:54,570 And that will, we will use the template literals right now. 96 00:05:55,320 --> 00:05:59,400 Let's go open the control P and the index. 97 00:05:59,700 --> 00:06:06,960 Now here search for Target and inor. 98 00:06:07,380 --> 00:06:08,190 I know, I know. 99 00:06:08,190 --> 00:06:13,020 I could have done better list, I could have done better things. 100 00:06:13,020 --> 00:06:13,350 Right. 101 00:06:13,410 --> 00:06:16,590 So this is the target container and this is what I need. 102 00:06:16,590 --> 00:06:21,960 So I'm going to copy the entire one, I'm going to copy it here and I'm going to be it down here right 103 00:06:22,770 --> 00:06:23,280 now. 104 00:06:23,580 --> 00:06:25,530 We need just to shift this one a little bit. 105 00:06:26,790 --> 00:06:27,330 Nice. 106 00:06:27,330 --> 00:06:31,920 We don't need these empty spaces as we do have it right now. 107 00:06:31,920 --> 00:06:39,720 This is the entire, uh, the entire container that we need for displaying this part here. 108 00:06:39,720 --> 00:06:40,100 Right? 109 00:06:40,470 --> 00:06:41,360 Only one movie. 110 00:06:42,210 --> 00:06:44,280 So that is what that is for one movie. 111 00:06:44,520 --> 00:06:46,740 But here we are going to use again the data set. 112 00:06:47,010 --> 00:06:52,700 So the data set attribute so we can target it later and we can delete it now. 113 00:06:52,740 --> 00:06:59,250 Here, what I'm going to do is actually I'm going to grab the mid right. 114 00:06:59,430 --> 00:07:00,810 Because I do have the item. 115 00:07:01,920 --> 00:07:06,060 Remember the last time we just we just tried it out. 116 00:07:06,210 --> 00:07:14,550 So I do have this identity number of tickets for I can change that and I can say item that. 117 00:07:14,550 --> 00:07:23,970 And, um, I think it was only right now the movie name here and just grab this one a little bit on 118 00:07:23,970 --> 00:07:25,040 the other side like that. 119 00:07:26,430 --> 00:07:33,570 So yeah, this should go to the movie title night. 120 00:07:34,290 --> 00:07:35,510 So what else we need here. 121 00:07:35,520 --> 00:07:38,660 Actually that's pretty, pretty much it. 122 00:07:38,820 --> 00:07:40,520 So um. 123 00:07:40,650 --> 00:07:41,820 Yeah, no. 124 00:07:44,440 --> 00:07:51,460 And you know what I was thinking, and I think we need to change this, so you still here and I'm going 125 00:07:51,460 --> 00:07:53,170 to change this, I'm going to cut it from here. 126 00:07:54,100 --> 00:07:54,600 Right. 127 00:07:54,970 --> 00:07:57,160 And I'm going to say input, 128 00:08:00,160 --> 00:08:01,260 input type. 129 00:08:02,680 --> 00:08:06,880 And here I will say no value. 130 00:08:06,880 --> 00:08:10,570 It will be the movie. 131 00:08:11,680 --> 00:08:21,840 So it will be I am sorry that no here and I will have a class in the class where we target either. 132 00:08:23,440 --> 00:08:27,820 I don't know why I have space target in our list. 133 00:08:29,530 --> 00:08:30,010 No. 134 00:08:31,400 --> 00:08:33,850 OK, now do it like this. 135 00:08:34,120 --> 00:08:39,700 And now I will say dollar again dollar because I want to print the dollar sign as well. 136 00:08:39,950 --> 00:08:43,650 An item that no time stamp. 137 00:08:43,900 --> 00:08:47,530 So this will give me the this will give me the price. 138 00:08:47,530 --> 00:08:47,860 Right. 139 00:08:48,430 --> 00:08:49,310 That is pretty much it. 140 00:08:49,510 --> 00:08:52,570 Now I do have this item number stored in the input. 141 00:08:53,320 --> 00:08:58,030 I do have this class here and I do have this now that is pretty much it. 142 00:08:58,240 --> 00:09:06,190 What else we need to do is actually to to add this to our class names, to our markup. 143 00:09:06,190 --> 00:09:06,460 Right. 144 00:09:06,460 --> 00:09:08,860 To our inner HDB. 145 00:09:08,950 --> 00:09:11,340 So card here container. 146 00:09:11,530 --> 00:09:14,340 We haven't created this one yet in the seats. 147 00:09:14,380 --> 00:09:15,310 In the class names. 148 00:09:15,310 --> 00:09:19,390 So insert adjacent. 149 00:09:21,840 --> 00:09:33,780 Jason, HDMI in here, I will say before, before and and Mark, the one that we just finished from 150 00:09:33,780 --> 00:09:43,140 the now called container, go back control be a Cyesis class sorry selecter in here. 151 00:09:43,170 --> 00:09:46,140 You can use it and say document Querrey Selecter. 152 00:09:48,940 --> 00:09:59,980 And I want to target what class, so the class was targeted in our container, nice, so that should 153 00:09:59,980 --> 00:10:00,460 work. 154 00:10:00,490 --> 00:10:05,350 Now we are done with this display movie item, but we need a couple of other things. 155 00:10:05,500 --> 00:10:10,270 We need to delete the movie item, so export their consed. 156 00:10:10,360 --> 00:10:15,900 Sorry to delete movie item and we got to pass the I.D. there. 157 00:10:16,240 --> 00:10:16,620 Right. 158 00:10:16,660 --> 00:10:17,590 Remember the I.D.? 159 00:10:17,590 --> 00:10:20,540 We were trying so hard to create that unique I.D.. 160 00:10:20,740 --> 00:10:26,950 Now here we need to use the Sears's attribute this one day to delete ID. 161 00:10:26,950 --> 00:10:27,370 Right. 162 00:10:27,790 --> 00:10:30,360 So we need to use that one in order to grab it. 163 00:10:30,760 --> 00:10:32,680 And how are we going to do this? 164 00:10:32,710 --> 00:10:34,630 OK, so that's fairly simple. 165 00:10:34,630 --> 00:10:36,700 Const delete item. 166 00:10:36,740 --> 00:10:37,750 So I'm going to store it here. 167 00:10:38,100 --> 00:10:40,960 The item that I'm going to select it with the document. 168 00:10:42,430 --> 00:10:43,600 Oops, document 169 00:10:46,480 --> 00:10:48,040 that query selector. 170 00:10:48,860 --> 00:10:56,070 Now here we need to use these brackets in order to grab this data set étude. 171 00:10:56,080 --> 00:10:56,470 Right. 172 00:10:58,720 --> 00:11:03,580 Remember we talk a little bit before that data dot, dash, delete. 173 00:11:04,400 --> 00:11:05,140 Let's copy it. 174 00:11:07,650 --> 00:11:08,160 Mm hmm. 175 00:11:08,280 --> 00:11:18,270 Now I'm just going to paste all their data, delete it, and that will be equal to what the idea we 176 00:11:18,270 --> 00:11:18,900 are having. 177 00:11:20,130 --> 00:11:20,480 Nice. 178 00:11:20,820 --> 00:11:24,290 So I'm going to say here I am. 179 00:11:24,660 --> 00:11:25,110 Yeah. 180 00:11:25,140 --> 00:11:25,970 Idea on top. 181 00:11:28,380 --> 00:11:30,750 So this idea goes here. 182 00:11:33,390 --> 00:11:39,180 And this is obviously not working because I use the normal quotes and I need to use the template literal 183 00:11:39,690 --> 00:11:42,680 oops, wrong, good. 184 00:11:44,070 --> 00:11:49,560 Now we have here we are going to find it and now we'll be able to select the correct movie that we want 185 00:11:49,560 --> 00:11:50,010 to delete. 186 00:11:50,010 --> 00:11:50,340 Right. 187 00:11:50,580 --> 00:11:56,400 In order to remove the element we need first from the DOM, we remember we need to find the parent element. 188 00:11:56,610 --> 00:11:59,880 And we we already have the defined parent element class here. 189 00:11:59,880 --> 00:12:01,470 That was the HD Heather. 190 00:12:01,470 --> 00:12:01,760 Right. 191 00:12:01,950 --> 00:12:04,930 So that is pretty much the parent of any thing inside. 192 00:12:05,190 --> 00:12:09,810 So what I can say here, the lead item, that parent element. 193 00:12:10,200 --> 00:12:10,650 Good. 194 00:12:10,650 --> 00:12:11,860 Then remove child. 195 00:12:12,690 --> 00:12:19,530 So in order to remove the child, you need to go one level up to the parent and then you can pass this 196 00:12:19,530 --> 00:12:26,910 one pretty much simple now that it's it for the movie item based on the ID. 197 00:12:27,150 --> 00:12:30,770 So we Bassingthwaighte in here, we just checking. 198 00:12:30,780 --> 00:12:37,110 OK, we just finally with the query selector where this is located and after that we go to the parent 199 00:12:37,380 --> 00:12:38,350 and remove the child. 200 00:12:38,370 --> 00:12:39,940 That's how we were doing. 201 00:12:39,960 --> 00:12:44,030 So if you don't know this then mean that you skip some of the lectures before. 202 00:12:44,370 --> 00:12:49,320 Now one more thing is to export const display. 203 00:12:49,330 --> 00:12:53,430 So I need to display this here right in the class. 204 00:12:53,430 --> 00:12:56,310 Name is Card Circle. 205 00:12:56,310 --> 00:12:56,750 Nice. 206 00:12:57,240 --> 00:13:05,430 So I would say display card number and here I will say card movies. 207 00:13:05,460 --> 00:13:10,350 No, you can just create a shortened name but I just use that. 208 00:13:11,040 --> 00:13:13,350 And what else I need here. 209 00:13:13,350 --> 00:13:15,240 Selectors sorry. 210 00:13:15,240 --> 00:13:19,120 Class names that card circle. 211 00:13:19,800 --> 00:13:20,880 Remember that was the name. 212 00:13:21,030 --> 00:13:22,910 And I want to add the text content. 213 00:13:22,920 --> 00:13:26,810 I want to change the text content and to append this card movies. 214 00:13:26,820 --> 00:13:31,230 No, this one that I'm going to pass from the controller. 215 00:13:31,290 --> 00:13:33,070 Don't worry about this at this stage. 216 00:13:33,300 --> 00:13:37,680 Now, one more thing that I need to define this here. 217 00:13:37,680 --> 00:13:38,670 I do have mistake. 218 00:13:38,850 --> 00:13:48,960 That document, that query selector in here, the name was Circle dot card circle. 219 00:13:49,470 --> 00:13:49,950 Nice. 220 00:13:50,160 --> 00:13:51,090 Create a comma here. 221 00:13:51,120 --> 00:13:52,770 Save it, save this. 222 00:13:53,520 --> 00:13:54,390 Everything should work. 223 00:13:54,390 --> 00:13:56,520 Same name here. 224 00:13:56,760 --> 00:13:58,760 Let's test it out so we can test it out. 225 00:13:58,770 --> 00:13:59,580 Actually this one. 226 00:13:59,580 --> 00:14:01,710 But let's test out if anything else. 227 00:14:01,890 --> 00:14:04,680 Everything else is working nice. 228 00:14:04,950 --> 00:14:05,790 It is working. 229 00:14:06,060 --> 00:14:08,100 This is adding this is minus. 230 00:14:08,490 --> 00:14:09,270 Very good. 231 00:14:09,450 --> 00:14:13,420 So when we click on this, when we go out we don't have any strange errors. 232 00:14:13,440 --> 00:14:16,170 Same goes for the heart's target content. 233 00:14:16,170 --> 00:14:19,260 One nice that is pretty much next lecture. 234 00:14:19,260 --> 00:14:23,070 We are going to work on the model actually do the controller. 235 00:14:23,130 --> 00:14:23,490 Right. 236 00:14:24,180 --> 00:14:26,100 So that is it for this lecture. 237 00:14:26,100 --> 00:14:27,630 Ladies and gentlemen, I will see you in the next one.