1 00:00:01,530 --> 00:00:02,620 Welcome back, ladies and gentlemen. 2 00:00:02,650 --> 00:00:07,830 Today, we're going to learn how to update the tickets number and we will use that matches for event 3 00:00:07,830 --> 00:00:08,400 delegation. 4 00:00:08,430 --> 00:00:09,450 Now, first things first. 5 00:00:09,450 --> 00:00:10,740 I want to show you what we're going to do. 6 00:00:10,770 --> 00:00:13,320 So I have opened the version that we're working. 7 00:00:13,320 --> 00:00:18,990 So if I click one, it will add number two, three, four, and if I go minus. 8 00:00:19,260 --> 00:00:23,370 But you can go more below that one. 9 00:00:23,550 --> 00:00:27,990 OK, so this is what we need to implement and we are going to create a couple of changes. 10 00:00:27,990 --> 00:00:30,240 First in the model, then the controller. 11 00:00:30,450 --> 00:00:34,050 And also we are going to do the view so we can do three of them today. 12 00:00:34,260 --> 00:00:40,350 Right now, stay with me and I will show you now this one has a class here. 13 00:00:40,890 --> 00:00:44,970 Its inside this container, actually the main content. 14 00:00:44,970 --> 00:00:45,420 Right. 15 00:00:45,690 --> 00:00:49,320 But we have the social and I'm just going to show you here. 16 00:00:49,500 --> 00:00:50,980 Let me just zoom out a little bit. 17 00:00:51,300 --> 00:01:00,180 Now when I go here on this class is actually the class that contains this circle here, this button 18 00:01:01,060 --> 00:01:01,710 then inside. 19 00:01:01,750 --> 00:01:07,200 But I do have the icon and inside that I can I do have the screen inside the SPG. 20 00:01:07,200 --> 00:01:08,130 I do have that icon. 21 00:01:08,130 --> 00:01:09,540 So we have a couple of levels here. 22 00:01:09,780 --> 00:01:15,810 And we're going to use that matches because we need to target each and every element here because we 23 00:01:15,810 --> 00:01:17,100 don't know what's going to be pressed. 24 00:01:17,610 --> 00:01:19,110 And same goes for the minus. 25 00:01:19,110 --> 00:01:21,710 But let's first work on the controller. 26 00:01:21,990 --> 00:01:22,470 So open up. 27 00:01:22,470 --> 00:01:24,160 The controller will give you a controller. 28 00:01:24,160 --> 00:01:25,020 And first things first. 29 00:01:25,260 --> 00:01:29,100 We need here to add these that NUM tickets. 30 00:01:31,080 --> 00:01:38,130 So every time we create the object of this class movie, I want this ticket number to be assigned to 31 00:01:38,130 --> 00:01:40,460 one so you can start even from zero if you want. 32 00:01:40,710 --> 00:01:43,560 Right now I have this one in. 33 00:01:43,560 --> 00:01:47,400 I had a couple of here notes. 34 00:01:47,400 --> 00:01:48,600 Please add them. 35 00:01:48,600 --> 00:01:49,040 Right. 36 00:01:49,950 --> 00:01:50,970 I don't want to waste time. 37 00:01:50,970 --> 00:01:51,690 Just pause the video. 38 00:01:51,690 --> 00:01:52,710 Rewind now. 39 00:01:52,710 --> 00:01:57,630 After the movie rating, we're going to call we're going to create a different function called update 40 00:01:58,350 --> 00:01:58,860 tickets. 41 00:01:58,890 --> 00:01:59,280 Right. 42 00:01:59,640 --> 00:02:03,450 And we're going to say update tickets. 43 00:02:03,960 --> 00:02:05,640 And this is pretty much simple here. 44 00:02:05,640 --> 00:02:10,260 I will just at the top now, the ticket type will be aired. 45 00:02:10,950 --> 00:02:19,640 So here we can add a ticket or or delete or minus ticket. 46 00:02:22,140 --> 00:02:23,490 Now, how are we going to do this? 47 00:02:23,850 --> 00:02:25,320 I'm going to create a constant here. 48 00:02:25,470 --> 00:02:26,610 No, sorry. 49 00:02:26,610 --> 00:02:30,060 New ticket, new tickets. 50 00:02:30,060 --> 00:02:30,630 No. 51 00:02:30,630 --> 00:02:32,940 And that will be based on the ticket time. 52 00:02:33,240 --> 00:02:36,120 So I'm going to use the ternary operator this is equal to. 53 00:02:36,450 --> 00:02:40,380 And then what I want to do is this. 54 00:02:40,380 --> 00:02:44,610 That ticket is that none of the tickets that we just declared before. 55 00:02:46,170 --> 00:02:46,620 Right. 56 00:02:47,100 --> 00:02:53,640 Just to do that, I'm going to add one or I'm just going to copy this one. 57 00:02:53,640 --> 00:02:55,140 I'm just going to say minus one. 58 00:02:56,550 --> 00:02:57,890 That is super cool. 59 00:02:57,900 --> 00:03:04,200 So we do have all this stored back to this constant here to this variable in how are we going to see 60 00:03:04,500 --> 00:03:06,150 these that number tickets? 61 00:03:06,480 --> 00:03:10,920 We need to update it only with these new tickets number. 62 00:03:11,100 --> 00:03:12,570 So I hope you understand what we have done. 63 00:03:12,750 --> 00:03:16,290 So the ticket type is that we are adding plus one. 64 00:03:16,410 --> 00:03:19,920 Otherwise this else mean that we are OK. 65 00:03:19,920 --> 00:03:23,220 Yeah, we have a mistake and it should be like this column. 66 00:03:23,280 --> 00:03:23,630 Right. 67 00:03:23,850 --> 00:03:26,490 So this is the number of tickets we say minus one. 68 00:03:26,490 --> 00:03:26,970 Good. 69 00:03:27,480 --> 00:03:39,660 Now let's go back to the index here and let's add here that we are going to add or increase or decrease 70 00:03:40,260 --> 00:03:41,720 ticket number. 71 00:03:41,820 --> 00:03:48,840 Now this is a new event listener that we need to target and we're going to use again which class. 72 00:03:49,320 --> 00:03:54,510 So if you go open up the index of HTML, the parent will be this main content. 73 00:03:54,510 --> 00:03:56,070 And we already have that main content. 74 00:03:56,070 --> 00:03:59,640 Right, because we don't we do want to use that event delegation. 75 00:03:59,640 --> 00:04:01,530 So class names. 76 00:04:01,890 --> 00:04:09,360 So I'm going to say here, increase, increase or decrease ticket number. 77 00:04:09,480 --> 00:04:11,970 Now, later on, we will add more functions here. 78 00:04:12,520 --> 00:04:16,590 Class name, let just that main content. 79 00:04:17,370 --> 00:04:23,490 So if you go back to the class control PE class selector, we do have this main content. 80 00:04:23,490 --> 00:04:23,790 Right. 81 00:04:25,260 --> 00:04:30,720 Make sure that you do have that one main content and add event listener. 82 00:04:30,720 --> 00:04:31,920 Cool in here. 83 00:04:31,920 --> 00:04:36,300 It will be on click and we will pass in the event with this error function. 84 00:04:36,510 --> 00:04:42,960 Now we can use this console log e that target. 85 00:04:43,680 --> 00:04:44,070 Right. 86 00:04:44,640 --> 00:04:49,140 I'm just going to close this one because this was the final version that I've shown you what will happen 87 00:04:49,410 --> 00:04:50,640 so we don't need it anymore. 88 00:04:51,390 --> 00:04:51,690 Good. 89 00:04:51,810 --> 00:04:54,330 No, cancel the log and let's see. 90 00:04:55,260 --> 00:04:59,820 So this will be so open up any movie that you. 91 00:04:59,920 --> 00:05:10,960 All right, and let's go to the inspect, go to the council and let's click on the plus side and here 92 00:05:10,960 --> 00:05:11,320 it is. 93 00:05:11,320 --> 00:05:16,630 I get the button, but if I click outside or inside, I will have a different thing. 94 00:05:16,660 --> 00:05:22,090 So how are we going to do this before I show you that we can use the closest but closest here will not 95 00:05:22,090 --> 00:05:22,410 work. 96 00:05:22,660 --> 00:05:24,250 So I will use something else. 97 00:05:24,250 --> 00:05:28,720 And first I will see if either Target matches. 98 00:05:28,750 --> 00:05:32,440 So this is a new mattress. 99 00:05:33,220 --> 00:05:38,350 This is a new method here that we can use on our DOM elements in the first things. 100 00:05:38,350 --> 00:05:40,020 First, it takes two parameters. 101 00:05:40,540 --> 00:05:46,180 What I'm saying to because look at here I am inside the air. 102 00:05:47,110 --> 00:05:53,320 So just search for that and you will be there right now here in this container. 103 00:05:53,330 --> 00:05:57,640 I do have the button, the SPG and the I can store it now. 104 00:05:58,060 --> 00:06:00,580 I will be able to use this class here. 105 00:06:00,580 --> 00:06:05,520 So I'm going to copy this class and I'm going to I don't need that one as well. 106 00:06:06,340 --> 00:06:08,560 I have too many things open up here, ladies and gentlemen. 107 00:06:08,770 --> 00:06:12,460 So I'm going to target this class with the main content, right. 108 00:06:12,460 --> 00:06:14,800 Social at right now. 109 00:06:15,130 --> 00:06:17,740 So I'm going to target only that div container. 110 00:06:17,740 --> 00:06:23,980 But with the second parameters parameter, what I can do, I can use the same one with the asterisk 111 00:06:23,980 --> 00:06:24,300 side. 112 00:06:24,340 --> 00:06:31,110 So what this will do is actually it will find all of the child elements here. 113 00:06:31,480 --> 00:06:34,990 So regardless of where I click, how I click, it will match them. 114 00:06:35,830 --> 00:06:37,540 Now, this is something that I want. 115 00:06:37,550 --> 00:06:44,170 So I want this to be a super, super secure just to find every child element if it's pressed. 116 00:06:44,470 --> 00:06:45,590 And that's pretty much it. 117 00:06:45,730 --> 00:06:50,410 Now, I can just alert here just for testing. 118 00:06:50,920 --> 00:06:54,190 Plus sign is quick. 119 00:06:54,760 --> 00:06:55,150 Good. 120 00:06:55,600 --> 00:06:59,380 Now also I can do the same thing, so I'm just going to copy the same thing. 121 00:06:59,380 --> 00:07:03,580 I'm going to say else and I'm going to paste this one else if right. 122 00:07:03,880 --> 00:07:05,950 And this should be for the minus button. 123 00:07:05,950 --> 00:07:08,110 So I do have complete complete same thing. 124 00:07:08,440 --> 00:07:12,250 Just I need to add the minus class here and here. 125 00:07:12,250 --> 00:07:16,000 We need to change minus sine is click. 126 00:07:17,050 --> 00:07:20,200 OK, I'm just going to refresh now and I'm going to click the plus. 127 00:07:20,440 --> 00:07:26,380 Here is the plus sign is click if I click the minus now it knows regardless regardless of where I click. 128 00:07:26,380 --> 00:07:30,460 So this either matches remember that takes two classes. 129 00:07:30,460 --> 00:07:35,680 The first one is of the parent container which which is this one. 130 00:07:35,920 --> 00:07:38,950 And after that we just matching with the asterisk sign. 131 00:07:39,520 --> 00:07:42,820 We just managing the entire container children. 132 00:07:44,440 --> 00:07:46,450 So we're pretty much done here. 133 00:07:47,110 --> 00:07:48,520 Actually we are not. 134 00:07:48,760 --> 00:07:51,910 We need just to update the movie tickets and how are we going to do that? 135 00:07:52,210 --> 00:07:53,230 I'm going to say data. 136 00:07:53,230 --> 00:07:57,400 That movie, that update. 137 00:07:58,390 --> 00:08:05,860 I think it's right, because in the movie we do have this update ticket in here. 138 00:08:06,130 --> 00:08:07,030 I can pass. 139 00:08:07,030 --> 00:08:11,650 I know that because I'm inside this and I will not be able to get wrong. 140 00:08:11,830 --> 00:08:12,720 I can see it. 141 00:08:12,970 --> 00:08:16,330 And actually the movie tickets, we are checking if that is at night. 142 00:08:16,690 --> 00:08:18,340 So that is pretty much it. 143 00:08:18,700 --> 00:08:20,080 I can do the same thing here. 144 00:08:22,540 --> 00:08:24,220 Just make sure you remove this alert. 145 00:08:24,220 --> 00:08:26,500 You don't need it minus. 146 00:08:27,010 --> 00:08:27,400 Right. 147 00:08:28,180 --> 00:08:34,900 So, yeah, actually if you put something else it will still work because we just checking if it's everything 148 00:08:34,900 --> 00:08:36,070 else that it's not. 149 00:08:36,100 --> 00:08:39,790 And people go here if you see I don't know, delete it will still work. 150 00:08:39,970 --> 00:08:41,140 Now you're not talking. 151 00:08:41,140 --> 00:08:43,360 Let's see what will happen in. 152 00:08:44,830 --> 00:08:45,510 Yeah. 153 00:08:45,550 --> 00:08:54,880 So I'm going to click on the plus side first I'm going to refresh and I'm going to use window dot data. 154 00:08:55,000 --> 00:08:55,330 Right. 155 00:08:55,330 --> 00:09:01,690 That movie and even we can go to dot num tickets. 156 00:09:01,900 --> 00:09:05,020 So I have one at this stage. 157 00:09:05,020 --> 00:09:05,300 Right. 158 00:09:05,350 --> 00:09:10,180 So if I click one more and if I go with Epidaurus, here it is, I do have three. 159 00:09:10,390 --> 00:09:13,510 So if I click one more I do have three. 160 00:09:13,780 --> 00:09:15,010 Sorry I do have two now. 161 00:09:15,010 --> 00:09:15,490 I have three. 162 00:09:15,640 --> 00:09:19,900 Now if I click on the minus side, let's see if it's going to go back to two. 163 00:09:19,990 --> 00:09:20,620 Yes it is. 164 00:09:20,800 --> 00:09:27,010 But if I click, click one, two, three times and now if I just refresh this one. 165 00:09:28,780 --> 00:09:33,920 I mean, minus one, so this, ladies and gentlemen, is something that we we need to avoid. 166 00:09:33,970 --> 00:09:34,290 Right. 167 00:09:34,440 --> 00:09:35,850 So how are we going to avoid this? 168 00:09:36,110 --> 00:09:37,620 OK, it's pretty much simple. 169 00:09:38,790 --> 00:09:40,560 We need first here to check something. 170 00:09:41,970 --> 00:09:46,890 So basically what we're going to see if these are the movie that Numpty gets. 171 00:09:49,460 --> 00:09:56,750 Let me just check if it's number tickets or not, so I'm famous for making these mistakes, so if this 172 00:09:56,750 --> 00:10:03,670 is greater than one, then we can go and do that, update the tickets. 173 00:10:03,680 --> 00:10:04,000 No. 174 00:10:04,250 --> 00:10:06,530 OK, let's hope it's going to work. 175 00:10:07,610 --> 00:10:09,860 And I'm going to refresh here. 176 00:10:11,090 --> 00:10:12,500 I'm going to use the up an arrow. 177 00:10:12,500 --> 00:10:15,020 So it's one now if I click minus. 178 00:10:18,050 --> 00:10:23,270 It really is they one, but if I click plus I clicked twice, actually, or three, I don't know, it's 179 00:10:23,270 --> 00:10:23,750 four. 180 00:10:23,870 --> 00:10:29,720 So if I click minus, minus, minus, doesn't matter how much time, so click, it will not go and update 181 00:10:29,720 --> 00:10:35,100 it because the number of tickets, all that needs to be greater than one in that is pretty much it. 182 00:10:35,460 --> 00:10:42,740 Now one more thing we need to do here is actually to create weight to movie view. 183 00:10:43,190 --> 00:10:45,140 So we need to create something here. 184 00:10:45,290 --> 00:10:49,170 We need to create another class and other functions are not class. 185 00:10:49,430 --> 00:10:54,200 Another function for updating this movie in just displaying the number here. 186 00:10:54,200 --> 00:10:54,620 Right. 187 00:10:55,190 --> 00:10:56,180 So how are we going to do this? 188 00:10:58,190 --> 00:10:59,870 And let's just do that real quick. 189 00:11:00,030 --> 00:11:02,780 No, I'm hearing the movie of you. 190 00:11:02,780 --> 00:11:03,110 Right. 191 00:11:03,140 --> 00:11:11,030 So I will be able to write down a date movie update number of tickets. 192 00:11:11,840 --> 00:11:14,180 You can add more meaningful comments if you want in here. 193 00:11:14,180 --> 00:11:18,140 I'm going to export this one with noncapital actually export. 194 00:11:18,440 --> 00:11:19,100 Come on. 195 00:11:20,720 --> 00:11:28,130 So I'm going to export CONSED and the name of the function will be a date ticket. 196 00:11:30,800 --> 00:11:37,340 No hurricane just sure to numb, and it will take one parameter that will be the entire movie object 197 00:11:37,670 --> 00:11:42,880 and yeah, let's create this error function, so make sure that you put semicolon at the end. 198 00:11:42,890 --> 00:11:53,660 So inside I we use the document query selector, so I'm just going to write it first and after that 199 00:11:53,660 --> 00:11:56,270 I'm going to explain what I'm getting here. 200 00:11:56,540 --> 00:11:58,880 So here we need to parse the class name. 201 00:11:58,880 --> 00:12:06,950 It is num tickets only and then I'm going to bend the text content to what. 202 00:12:07,070 --> 00:12:11,780 To actually movie object num tickets. 203 00:12:14,430 --> 00:12:15,600 That's pretty much it. 204 00:12:16,380 --> 00:12:19,010 Now we are done here, so this no tickets, I'm going to save it. 205 00:12:19,440 --> 00:12:20,490 It's located. 206 00:12:20,500 --> 00:12:21,690 I'm going to show you where. 207 00:12:21,840 --> 00:12:27,690 So if you go right, click on this, inspect and inspect it, you will see that we have the button class 208 00:12:27,690 --> 00:12:30,420 and we have a span with a class of tickets. 209 00:12:30,690 --> 00:12:32,630 And that's where I'm going to update it. 210 00:12:32,960 --> 00:12:33,290 Right. 211 00:12:33,630 --> 00:12:34,930 But we are not done yet. 212 00:12:35,190 --> 00:12:42,800 So what we need to go is actually we need to go back to the index and add this here right now. 213 00:12:42,810 --> 00:12:44,430 This was in the movie View. 214 00:12:44,700 --> 00:12:49,110 And I have the access to the movie view and I will see update ticket. 215 00:12:49,800 --> 00:12:50,510 Very good. 216 00:12:50,520 --> 00:12:52,650 It gave me that one in here. 217 00:12:52,650 --> 00:12:59,040 I'm going to pass data, that movie, the entire object, right. 218 00:12:59,250 --> 00:13:00,900 This date, a movie night. 219 00:13:01,650 --> 00:13:04,910 And I can do the same thing if I copied below here. 220 00:13:05,550 --> 00:13:07,760 Now I'm going to save it and I hope it's going to work. 221 00:13:07,980 --> 00:13:08,850 Let's just check. 222 00:13:10,080 --> 00:13:14,100 So I'm just going to make this super small, but you should be able to see the changes. 223 00:13:14,370 --> 00:13:14,910 So here it is. 224 00:13:14,910 --> 00:13:17,820 I'm clicking and it's showing me that it's No. 225 00:13:17,820 --> 00:13:20,120 Two, three, four and so on. 226 00:13:20,130 --> 00:13:25,320 And if I go to the miners, yeah, it's not going more than minus one. 227 00:13:25,470 --> 00:13:28,220 So that is pretty much it for this lecture. 228 00:13:28,530 --> 00:13:35,040 So in short, what we have done in the movie we've just created is this that number of tickets to be 229 00:13:35,040 --> 00:13:35,750 equal to one. 230 00:13:35,760 --> 00:13:38,070 As I mentioned, you can start from zero if you want. 231 00:13:38,490 --> 00:13:44,110 Right after that, we create that function to obtain the tickets based on the ticket. 232 00:13:44,130 --> 00:13:45,090 That's right. 233 00:13:45,210 --> 00:13:50,860 If it's and we are increasing to one, if it's not if it's something else, then you just decreasing 234 00:13:50,910 --> 00:13:51,630 to minus one. 235 00:13:52,140 --> 00:13:56,610 And then we are setting back to this number of tickets, then go back in the index. 236 00:13:56,850 --> 00:14:02,850 We just use that main container where these buttons, all of these buttons are stored. 237 00:14:02,850 --> 00:14:08,340 So I'm going to use this button and the same container later on and they have classes. 238 00:14:08,520 --> 00:14:15,480 So these are stored in the two separate containers and they have add classes and minus some targeting 239 00:14:15,480 --> 00:14:20,160 those containers in each and every child of those containers. 240 00:14:20,160 --> 00:14:27,180 After that, I'm calling the update tickets for the model and I'm calling the updated tickets from The 241 00:14:27,180 --> 00:14:30,840 View because I need to show the users what they're doing here. 242 00:14:32,190 --> 00:14:33,660 And that is pretty much it. 243 00:14:33,660 --> 00:14:39,960 Ladies and gentlemen, in here, we just create additional if statement that we don't want the tickets 244 00:14:39,960 --> 00:14:42,240 to go below minus below one. 245 00:14:42,240 --> 00:14:42,600 Right. 246 00:14:43,530 --> 00:14:44,430 That is pretty much it. 247 00:14:44,430 --> 00:14:46,860 But if you want to target zero, you can just go there. 248 00:14:47,010 --> 00:14:47,400 Right. 249 00:14:47,520 --> 00:14:54,090 That your logic and I appreciate your logic and yeah, you can do whatever you want, actually, but 250 00:14:54,120 --> 00:14:59,700 I want you to learn and we use that Itogi that matches last time we used the closest. 251 00:14:59,700 --> 00:15:04,110 But for this one it was more appropriate to use this Naches method. 252 00:15:04,440 --> 00:15:06,420 OK, so I will see you in the next one. 253 00:15:06,420 --> 00:15:07,320 I hope you enjoyed this one.