1 00:00:01,530 --> 00:00:03,700 Welcome back, guys, to another lecture today. 2 00:00:03,720 --> 00:00:08,520 We're going to work on the car model and we're going to create this car model really quick. 3 00:00:08,720 --> 00:00:18,280 Now go back to your map, your starter inside the models, create a new file car called Cartagena's. 4 00:00:18,600 --> 00:00:22,690 Now, here we're going to export export a class. 5 00:00:22,710 --> 00:00:25,870 So before class class. 6 00:00:26,040 --> 00:00:30,760 Now, this class, remember, every class needs to have a constructor. 7 00:00:30,780 --> 00:00:34,860 Now, the constructor of this class will not take any parameters. 8 00:00:35,040 --> 00:00:40,290 So it only will take these movies items. 9 00:00:41,730 --> 00:00:43,580 That will be an empty array. 10 00:00:43,660 --> 00:00:44,040 Right. 11 00:00:44,130 --> 00:00:46,370 So we will have an empty movies array. 12 00:00:46,380 --> 00:00:51,370 So later on, we're going to store the movies that we want to buy here, the items that we want to buy. 13 00:00:51,990 --> 00:00:54,410 Now, we need to create a couple of methods here. 14 00:00:54,420 --> 00:00:57,660 The first method that we need to create is called add item. 15 00:00:58,140 --> 00:01:05,270 And inside we want to be stored a number of movies, title of the movie and the price of that movie. 16 00:01:05,280 --> 00:01:11,040 Right now I can do this and I can create an object here called Item. 17 00:01:11,520 --> 00:01:17,420 And inside I'm going to just specify number equal to this. 18 00:01:17,430 --> 00:01:19,770 I'm sorry, this that number equal to the number. 19 00:01:19,770 --> 00:01:28,050 But the S6 when we we can also skip this part because I'm going to use the same exact names, but I 20 00:01:28,050 --> 00:01:29,720 can just use them like this. 21 00:01:30,060 --> 00:01:34,200 So I haven't shown you this before, but this is how you can create those. 22 00:01:34,510 --> 00:01:34,910 Right. 23 00:01:35,040 --> 00:01:40,080 So you don't have to specify these that number equal to that number, these that these the title equal 24 00:01:40,080 --> 00:01:41,070 to that title. 25 00:01:41,280 --> 00:01:45,720 Now I'm just going to create one here and I'll say this. 26 00:01:46,620 --> 00:01:51,970 That number is equal to that number that we are passing through the method. 27 00:01:52,040 --> 00:01:56,330 Right now, this is exactly same as this. 28 00:01:56,820 --> 00:02:03,480 So we missing here something I want everything that every time we create a new we adding new item, 29 00:02:03,480 --> 00:02:09,570 I want to have a specific ID because later on we're going to need that ID add in JavaScript you can 30 00:02:09,570 --> 00:02:13,830 create your own specific I.D. using a timestamps and stuff like that. 31 00:02:14,070 --> 00:02:22,460 But there is a better way actually you can use this unique I.D. So if you go back to NPM and PMG as 32 00:02:22,470 --> 00:02:26,590 dot com package slash unique idea or just type on the Internet. 33 00:02:26,820 --> 00:02:29,800 So here is how you can install it after that. 34 00:02:29,820 --> 00:02:31,510 Here is how you can require it. 35 00:02:31,900 --> 00:02:34,190 Right now I'm just going to copy this one. 36 00:02:34,410 --> 00:02:41,840 I have open a new tab, so make sure that you are inside your MAPI starter npm install unique ID that 37 00:02:41,840 --> 00:02:42,630 is that safe. 38 00:02:42,910 --> 00:02:48,390 I'm going to save as development dependency and that should take a couple of seconds. 39 00:02:48,390 --> 00:02:48,610 Right. 40 00:02:48,660 --> 00:02:49,570 Not too long. 41 00:02:50,100 --> 00:02:52,440 OK, go back to your package. 42 00:02:52,450 --> 00:02:59,010 Jason in here is we do have these unique ID cool in your version might be different. 43 00:02:59,010 --> 00:02:59,950 Don't worry about that one. 44 00:02:59,970 --> 00:03:08,310 Now one more thing we need to do is to import this one import unique idea. 45 00:03:10,020 --> 00:03:18,770 Sorry, not equal from and we're going to say unique ID here is always giving us the outer finish. 46 00:03:19,030 --> 00:03:27,650 Right now here, what we can do is to set this unique idea like this without semicolon actually. 47 00:03:27,690 --> 00:03:28,050 Right. 48 00:03:28,500 --> 00:03:33,840 So this will call the method for creating Unicode and it will create a unique ID for us. 49 00:03:34,170 --> 00:03:39,720 Now, one more thing that we need to do is we actually we created this theory and I want to push this 50 00:03:39,720 --> 00:03:41,520 item inside that array. 51 00:03:41,610 --> 00:03:45,890 So outside here, outside from this object. 52 00:03:46,110 --> 00:03:53,230 So you say this that moves items that push your idea of use, push and push the item back there. 53 00:03:53,610 --> 00:03:59,480 Now, also, we need to return the item next so we are done with this method. 54 00:03:59,700 --> 00:04:02,910 So let's create two more methods here. 55 00:04:04,180 --> 00:04:08,310 The next method that I'm going to create is show list or you can show us your card. 56 00:04:08,310 --> 00:04:10,320 Doesn't matter in here. 57 00:04:10,320 --> 00:04:14,180 Return these movies items. 58 00:04:14,310 --> 00:04:18,810 So it will return the full array after we adding things. 59 00:04:18,900 --> 00:04:21,180 The disarray will be full so we can use this method. 60 00:04:21,180 --> 00:04:22,470 Maybe, maybe not. 61 00:04:22,800 --> 00:04:29,960 OK, next thing that I want to add here is to be able to delete the item from the card. 62 00:04:30,180 --> 00:04:34,170 And for doing this we will need to have this idea here. 63 00:04:34,170 --> 00:04:40,500 Right, because the number, the title, the price can always be different and we will not be able to 64 00:04:40,500 --> 00:04:41,760 find this one here. 65 00:04:42,000 --> 00:04:43,290 So first things first. 66 00:04:43,530 --> 00:04:48,360 I will use find index to find the current index const index 67 00:04:51,090 --> 00:04:53,670 equal to these that movie. 68 00:04:53,680 --> 00:04:59,730 So I'm searching this movie Saidon and I'm saying, OK, dot, dot, fine index. 69 00:04:59,950 --> 00:05:05,980 Remember, we used fine and finding eggs during our practice before, and I want to say the current 70 00:05:06,100 --> 00:05:13,210 element, so grab the current element in the current element, it should be equal to the idea that we 71 00:05:13,210 --> 00:05:14,290 are passing through here. 72 00:05:15,950 --> 00:05:16,280 Right. 73 00:05:16,300 --> 00:05:20,530 So I'm looking through each and every element and when, whoops, this should be semicolon here. 74 00:05:20,750 --> 00:05:27,630 And when this method is satisfied, it's true, then that index will be stored in our constant. 75 00:05:27,640 --> 00:05:32,700 Right now, what we can do this move is items that slice. 76 00:05:33,250 --> 00:05:34,530 So we're going to use the place better. 77 00:05:34,750 --> 00:05:37,220 I'm going to define the index in one. 78 00:05:37,610 --> 00:05:39,040 So what this will do. 79 00:05:39,070 --> 00:05:46,870 Now, this will remove only one element because we specifying one element in the index saying, OK, 80 00:05:46,870 --> 00:05:48,100 start from that position. 81 00:05:48,100 --> 00:05:52,980 And that's one because this index is going to give us the position of the element. 82 00:05:52,990 --> 00:05:54,490 We find it right. 83 00:05:54,670 --> 00:05:59,650 So, for example, if I have five elements we are searching for number three, it will find that position 84 00:05:59,650 --> 00:06:00,260 of the three. 85 00:06:00,310 --> 00:06:02,100 So I say position three, delete it. 86 00:06:02,420 --> 00:06:03,460 That's only one. 87 00:06:03,580 --> 00:06:06,160 If you put two here, it will delete the next one as well. 88 00:06:06,280 --> 00:06:07,840 But that's not our goal. 89 00:06:08,470 --> 00:06:15,940 And the next thing that we want to do is to update number of movies. 90 00:06:16,180 --> 00:06:16,560 Right. 91 00:06:17,860 --> 00:06:24,280 For example, this number here, let's add, for example, if I have five, if I if I want to buy five, 92 00:06:24,300 --> 00:06:25,390 because then I change my mind. 93 00:06:25,510 --> 00:06:27,640 I want to have six or seven tickets. 94 00:06:27,640 --> 00:06:27,910 Right. 95 00:06:28,240 --> 00:06:30,250 So here we need two things. 96 00:06:30,250 --> 00:06:33,660 The idea and the new number. 97 00:06:34,480 --> 00:06:34,830 Right. 98 00:06:35,860 --> 00:06:42,910 Because this idea, again, we're going to use to find it enough that we just kind of going to update 99 00:06:42,910 --> 00:06:43,000 it. 100 00:06:43,000 --> 00:06:44,530 And this we will do in one line. 101 00:06:44,710 --> 00:06:49,870 So we will say this, that movies are items that fine. 102 00:06:49,990 --> 00:06:52,910 So here we are using the cousin of this one. 103 00:06:53,350 --> 00:06:54,690 So this is fine index. 104 00:06:54,700 --> 00:06:55,610 This is the cousin. 105 00:06:55,930 --> 00:07:04,300 So what this will do, it will go to the cops, to the current element again and the current, Heidi. 106 00:07:06,760 --> 00:07:11,590 Ideally, that will be equal to the idea that we are passing on top to the function. 107 00:07:11,940 --> 00:07:20,110 OK, so when this is done, when we find that item from this class, from this array, so we're going 108 00:07:20,110 --> 00:07:21,900 to find it, for example, it's on them. 109 00:07:22,270 --> 00:07:26,200 It's on the first I don't know, it's on the fifth position. 110 00:07:26,500 --> 00:07:30,460 And that item we can just get the number. 111 00:07:30,810 --> 00:07:37,720 I get the number here and we can update it to the new number that we are passing on top. 112 00:07:39,100 --> 00:07:40,150 And that's pretty much it. 113 00:07:40,180 --> 00:07:48,100 Ladies and gentlemen, so we find that we find that in sorry we find it element and we just assigning 114 00:07:48,520 --> 00:07:51,610 the new number to this number property here. 115 00:07:52,330 --> 00:07:53,530 And that's pretty much it. 116 00:07:53,560 --> 00:07:54,920 Now I'm going to save this one. 117 00:07:55,480 --> 00:07:57,040 So we need to test this. 118 00:07:57,040 --> 00:07:59,920 By the way, uh, close this one. 119 00:07:59,920 --> 00:08:05,160 Open the index and let's close this one. 120 00:08:05,560 --> 00:08:11,350 Now, in the index, we first need to import this movie instead of a movie. 121 00:08:11,350 --> 00:08:13,180 I'm just going to put a card in here. 122 00:08:13,180 --> 00:08:13,970 I will say card. 123 00:08:14,230 --> 00:08:15,240 That is good. 124 00:08:15,490 --> 00:08:16,170 Now here. 125 00:08:17,110 --> 00:08:19,480 So we have create the search object. 126 00:08:19,480 --> 00:08:20,700 The movie object. 127 00:08:20,890 --> 00:08:22,490 What else did we create something else. 128 00:08:22,510 --> 00:08:28,810 OK, let's say the card object now for the test is testing purposes. 129 00:08:28,810 --> 00:08:32,680 I'm going to use the object with capital. 130 00:08:32,680 --> 00:08:33,940 It's better now. 131 00:08:33,940 --> 00:08:37,450 I'm going to use this window here and I'm going scroll down. 132 00:08:37,690 --> 00:08:42,760 So movie controller, this is still in the movie in here, I will say. 133 00:08:43,970 --> 00:08:47,840 Car controller, nice. 134 00:08:47,930 --> 00:08:55,070 So here I will say window that card, equal new car. 135 00:08:55,120 --> 00:08:58,580 Remember, we don't have to specify anything because our car. 136 00:09:00,260 --> 00:09:04,520 Doesn't require a constructor to have something right now that is pretty much it. 137 00:09:04,550 --> 00:09:14,300 So what we can do is actually open up here, inspect it, go to the console lock and window that car. 138 00:09:14,340 --> 00:09:17,880 We do have the access and here it is, the empty movies item. 139 00:09:17,930 --> 00:09:23,870 Right now, I can use this card here and add items I can call the function and I will say the number 140 00:09:23,870 --> 00:09:25,520 will be five here. 141 00:09:25,550 --> 00:09:32,480 Then the second parameter was the title title of the movie in The Price, for example. 142 00:09:32,590 --> 00:09:34,260 Then let's save this one. 143 00:09:34,280 --> 00:09:34,860 Here it is. 144 00:09:35,330 --> 00:09:42,920 Now you can see that the idea, that unique idea that we generated from that AMPM script is working. 145 00:09:43,130 --> 00:09:48,060 OK, let's use the arrow up and let's change this to three. 146 00:09:49,220 --> 00:09:51,590 Let's find the movie title one here. 147 00:09:52,130 --> 00:09:52,740 Enter. 148 00:09:53,570 --> 00:10:01,820 Now, if I go to the card only, I will have two items inside in that array and I have different unique 149 00:10:01,820 --> 00:10:02,420 IDs. 150 00:10:02,450 --> 00:10:09,160 Right now, let's add one more movie to here and let's seven. 151 00:10:10,760 --> 00:10:10,940 Good. 152 00:10:11,420 --> 00:10:15,340 Now, what I want to do is to delete the second one, right. 153 00:10:15,410 --> 00:10:21,520 So how we were doing it card that the lead item in here for the delete. 154 00:10:21,530 --> 00:10:26,390 We only need to specify where was it this ID. 155 00:10:26,390 --> 00:10:26,750 Right. 156 00:10:27,140 --> 00:10:30,310 By the way, the I.D. saved is a screen here. 157 00:10:30,320 --> 00:10:38,360 So remember you need to pass it as a string and I'm going to hit enter in this shou we should have two 158 00:10:38,360 --> 00:10:40,000 at the moment right. 159 00:10:40,160 --> 00:10:43,930 Without this one in the middle which were number three or one. 160 00:10:44,060 --> 00:10:44,490 Right. 161 00:10:44,960 --> 00:10:45,530 OK. 162 00:10:47,850 --> 00:10:53,370 So I'm just going to see the cart here it is, we do have the two items and here it is. 163 00:10:53,370 --> 00:10:55,680 We do have the movie title one. 164 00:10:56,490 --> 00:10:58,660 Did we believe that one or not? 165 00:11:00,660 --> 00:11:01,840 Let's see what's happening here. 166 00:11:02,880 --> 00:11:03,720 OK, you know what? 167 00:11:03,850 --> 00:11:05,250 I'm just going to start from the beginning. 168 00:11:05,430 --> 00:11:06,870 So I'm going to add one item. 169 00:11:08,720 --> 00:11:09,210 Here it is. 170 00:11:09,210 --> 00:11:12,510 I'm adding this one and I want to delete this one. 171 00:11:13,520 --> 00:11:19,080 So if you go back to the car, so we have actually we do have three now. 172 00:11:19,500 --> 00:11:22,160 Right, because we can clean it now. 173 00:11:22,170 --> 00:11:24,060 I just want to add the last one. 174 00:11:25,710 --> 00:11:26,520 Delete the last one. 175 00:11:26,520 --> 00:11:26,840 Sorry. 176 00:11:27,330 --> 00:11:30,570 So car delete item in here. 177 00:11:30,570 --> 00:11:31,860 I'm going to pass the last one. 178 00:11:32,700 --> 00:11:36,140 I'm going to hit enter and let's see the card object. 179 00:11:36,180 --> 00:11:39,150 We do have two but are we deleting the right one. 180 00:11:41,970 --> 00:11:44,460 Actually we're not deleting the right one. 181 00:11:44,480 --> 00:11:46,340 And why is this happening. 182 00:11:46,560 --> 00:11:47,240 No idea. 183 00:11:47,910 --> 00:11:51,480 Let's check to see if we are having some problems here. 184 00:11:52,860 --> 00:11:54,410 And the problem is obvious. 185 00:11:54,420 --> 00:12:00,480 So we are assigning it instead of checking if they are equal to the one that we are passing. 186 00:12:00,490 --> 00:12:02,130 So save that one here. 187 00:12:02,130 --> 00:12:05,010 It's OK right now. 188 00:12:06,330 --> 00:12:08,130 I'm just going to go back to the card. 189 00:12:09,990 --> 00:12:11,250 We don't have nothing, right? 190 00:12:11,250 --> 00:12:18,540 So I'm going to add an item here in the cart and I'm going to specify one here. 191 00:12:19,830 --> 00:12:21,630 One, that's it. 192 00:12:21,870 --> 00:12:24,540 Go back, put two here. 193 00:12:25,500 --> 00:12:28,770 And to save it, let's check the card. 194 00:12:28,860 --> 00:12:30,150 We have two objects there. 195 00:12:32,820 --> 00:12:33,450 Nice. 196 00:12:33,450 --> 00:12:35,100 And I want to delete the first one. 197 00:12:35,970 --> 00:12:38,230 So let's check if that will work. 198 00:12:38,230 --> 00:12:41,280 Card delete item nice in close. 199 00:12:41,290 --> 00:12:44,910 We need to put the ID, delete it then call it. 200 00:12:44,910 --> 00:12:48,210 We do have one but let's leave this with ending with. 201 00:12:48,210 --> 00:12:50,910 We will we we will be. 202 00:12:50,910 --> 00:12:52,140 There it is. 203 00:12:53,190 --> 00:12:53,810 That's it. 204 00:12:54,270 --> 00:13:00,180 Now let's update it cardno update number of the movies in here. 205 00:13:00,180 --> 00:13:02,010 We need to pass the I.D. first. 206 00:13:03,960 --> 00:13:04,410 Oops. 207 00:13:05,990 --> 00:13:11,420 So I'm just going to pass the I.D. and after that, I want the number to be changed to five, this one 208 00:13:11,900 --> 00:13:16,670 and here the car dated. 209 00:13:18,590 --> 00:13:21,520 Ladies and gentlemen, this is everything that we have done so far. 210 00:13:21,710 --> 00:13:25,190 So sorry about the hiccup before, but it wasn't on purpose. 211 00:13:25,250 --> 00:13:30,440 So here, instead of checking if it's equal to I was just assigning it to decide here. 212 00:13:30,440 --> 00:13:31,640 And that was the problem. 213 00:13:31,860 --> 00:13:33,800 Now, displacement that is working. 214 00:13:34,040 --> 00:13:36,260 The update is working the show list. 215 00:13:36,470 --> 00:13:38,570 It's going to work if you use the show list. 216 00:13:38,750 --> 00:13:43,700 So called the show list and. 217 00:13:45,830 --> 00:13:47,880 And it will give you back the entire array. 218 00:13:48,030 --> 00:13:49,950 Actually, we do have only one, right? 219 00:13:51,050 --> 00:13:52,800 So that is pretty much it. 220 00:13:52,820 --> 00:13:56,420 We're going to do this next time and we're going to change the controller. 221 00:13:56,420 --> 00:14:00,640 But this was the model and next time we will do the controller. 222 00:14:00,770 --> 00:14:01,670 So take care. 223 00:14:01,940 --> 00:14:06,470 And this is how we are adding new items we use. 224 00:14:06,470 --> 00:14:11,480 We learn something new, how to create a unique I.D. We return this the entire one, and we push the 225 00:14:11,480 --> 00:14:12,830 item that we just created. 226 00:14:13,130 --> 00:14:17,480 Then we just delete that based on the idea using the index and the splice model. 227 00:14:17,720 --> 00:14:23,540 And after that we update it using the fine and to the new to the new value here. 228 00:14:23,720 --> 00:14:24,750 So that's pretty much it. 229 00:14:24,820 --> 00:14:25,830 I'll see you in the next one.