1 00:00:01,020 --> 00:00:02,590 Welcome, everyone, in this lecture. 2 00:00:02,610 --> 00:00:08,520 We are going to learn about event bubbling and the event delegation to this lecture will be after our 3 00:00:08,520 --> 00:00:11,780 storage HMO when we are finished with those things. 4 00:00:11,820 --> 00:00:19,530 Now, create this app that gives an inside application BMT and inside is index HTML. 5 00:00:19,530 --> 00:00:22,940 Just link this app just right now. 6 00:00:24,150 --> 00:00:27,420 What is even bubbling an event delegation. 7 00:00:27,420 --> 00:00:29,910 We didn't I didn't have a chance to explain to you. 8 00:00:29,910 --> 00:00:31,500 That's why I'm doing this. 9 00:00:31,680 --> 00:00:34,710 And I consider this is a very important for you to know. 10 00:00:34,710 --> 00:00:40,170 Now, even bubbling is something that is happening when we have an event in that bubbles through the 11 00:00:40,170 --> 00:00:40,620 dorm. 12 00:00:41,040 --> 00:00:47,460 For example, let's say that we have event here in this trash, right when we click this icon, actually, 13 00:00:47,880 --> 00:00:51,480 and that event is going to bubble up to its parent. 14 00:00:51,480 --> 00:00:57,890 The first parent of this attack, I mean, of this AI class is actually the trash. 15 00:00:58,110 --> 00:01:04,440 These atrip then is going to bubble up to the bearing, the Spanish that not actually parent, but to 16 00:01:04,440 --> 00:01:05,610 do list is the parent. 17 00:01:05,610 --> 00:01:09,090 And after that, these elai have its own you. 18 00:01:09,090 --> 00:01:10,610 Well, as a parent, right. 19 00:01:12,090 --> 00:01:14,190 That is how the event will bubble up. 20 00:01:14,260 --> 00:01:17,990 It will spread through the dorm like like a virus. 21 00:01:18,030 --> 00:01:21,080 So we need to have a way how we can stop it. 22 00:01:21,390 --> 00:01:30,600 So as I told you, we can have any mouse click or any event that we have on any elements in our extremophile 23 00:01:30,810 --> 00:01:32,950 and that element have its own parents. 24 00:01:32,970 --> 00:01:42,600 So, for example, if we even put your event, even listner to these elements, they are inside the 25 00:01:42,600 --> 00:01:46,030 U.S. So they are child of the UL class. 26 00:01:46,030 --> 00:01:47,530 So your class is the parent. 27 00:01:47,940 --> 00:01:54,720 Now, this is called even bubbling and we need to find it, fix it with even delegation. 28 00:01:54,870 --> 00:02:00,570 So event delegation is simply to stop the bubbling through the dome, and it's quite opposite to what 29 00:02:00,570 --> 00:02:02,030 event bubbling is doing. 30 00:02:02,340 --> 00:02:06,780 So the solution is to find, for example, all of these trash. 31 00:02:06,990 --> 00:02:08,970 We need to find a parent in the parent. 32 00:02:09,450 --> 00:02:11,070 We don't have to go further. 33 00:02:11,070 --> 00:02:13,260 We can just find a parent. 34 00:02:13,260 --> 00:02:17,520 It's this ALLAI or you don't have to be the first parent you're going to find. 35 00:02:17,520 --> 00:02:18,570 You don't have to be this. 36 00:02:18,720 --> 00:02:20,010 It can be even this. 37 00:02:20,190 --> 00:02:26,160 But the thing is that we need to find a parent of the element that we want to catch. 38 00:02:26,160 --> 00:02:26,550 Right. 39 00:02:26,730 --> 00:02:28,660 Of the event that we want to catch. 40 00:02:28,870 --> 00:02:31,950 So now when we have a parent, we can put an event handler on that parent. 41 00:02:32,280 --> 00:02:35,100 And with our dumb manipulation, we can target a child. 42 00:02:35,670 --> 00:02:36,780 So I know the parent. 43 00:02:36,780 --> 00:02:38,360 I can target the child. 44 00:02:38,670 --> 00:02:39,740 That is pretty much it. 45 00:02:39,870 --> 00:02:44,850 Now, again, even bubblies happening when we have event bubbling through the DOM, an event handler 46 00:02:44,850 --> 00:02:45,690 is the opposite. 47 00:02:46,020 --> 00:02:50,520 We're trying to catch that event bubbling and we put that event on the parent. 48 00:02:50,520 --> 00:02:54,920 We not put it on the item that we want that event to happen. 49 00:02:55,660 --> 00:02:55,920 Good. 50 00:02:56,550 --> 00:03:01,020 Now, I'm going to show you how this is working in the real deal. 51 00:03:01,020 --> 00:03:04,890 So I'm going to put here you will see how this event is bubbling. 52 00:03:05,100 --> 00:03:12,510 OK, now just put here even bubbling and event delegation. 53 00:03:13,650 --> 00:03:18,060 So the first will be event bubbling. 54 00:03:18,360 --> 00:03:25,080 And now we're going to find some you can find any element that you want to test this out. 55 00:03:25,290 --> 00:03:28,860 So I'm going to find this to do list element. 56 00:03:28,860 --> 00:03:29,190 Right. 57 00:03:29,190 --> 00:03:32,160 I'm just going to get get this ALLAI class. 58 00:03:32,820 --> 00:03:36,720 So I want to document that query selector. 59 00:03:36,720 --> 00:03:46,920 I want to to target sorry to target that one in what I also want to say an event listener in here. 60 00:03:46,920 --> 00:03:55,320 It will be click and I'm just going to need to do list the function so I'm not going to call the function 61 00:03:55,320 --> 00:03:57,000 with these brackets here. 62 00:03:57,300 --> 00:03:59,850 The function will be called by the event listener. 63 00:04:00,030 --> 00:04:09,600 We can just name the function here and function to do list right here and see here Conjola for example, 64 00:04:09,870 --> 00:04:14,010 to do list element click. 65 00:04:14,670 --> 00:04:16,340 OK, let's find it out. 66 00:04:16,350 --> 00:04:20,760 Open your localhost, open the index, the HMO file. 67 00:04:21,060 --> 00:04:22,830 And when I click here, here it is. 68 00:04:24,180 --> 00:04:30,150 It's happening to do list allai element is clicked right now. 69 00:04:31,260 --> 00:04:33,240 This is not showing you actually anything. 70 00:04:33,420 --> 00:04:36,900 So how we can just see if this event bubbles up. 71 00:04:37,230 --> 00:04:39,000 So that will be the example. 72 00:04:39,000 --> 00:04:41,070 So I need to do copy this. 73 00:04:41,670 --> 00:04:45,570 I will put it here and I will target to do list. 74 00:04:45,570 --> 00:04:46,740 I will target this one. 75 00:04:46,740 --> 00:04:51,960 So actually of the element, this is the parent, so I'm just going to target that one 76 00:04:54,450 --> 00:04:56,740 and we it's going to be same unclad. 77 00:04:56,760 --> 00:04:59,850 What are we going to change here only to do an. 78 00:05:00,260 --> 00:05:04,250 Yeah, so we're going to change here to writing inside a console. 79 00:05:05,000 --> 00:05:09,230 Let's see, do you pal clicked? 80 00:05:10,250 --> 00:05:13,840 No, I'm going to go do something else as well. 81 00:05:13,880 --> 00:05:16,700 I'm not going to show you, so I'm going to do it. 82 00:05:16,700 --> 00:05:21,740 One more finding of the parent element and I'm going to grab this list wrapper class. 83 00:05:21,740 --> 00:05:22,070 Right. 84 00:05:22,310 --> 00:05:26,750 And I'm going to select it with the query selector and what's happening this. 85 00:05:27,980 --> 00:05:30,710 OK, that shouldn't be there if you catch it. 86 00:05:30,710 --> 00:05:31,360 Good on you. 87 00:05:32,210 --> 00:05:38,180 So I'm going to say here at least wrapper, OK, that should be the class you can put in any class you 88 00:05:38,180 --> 00:05:38,390 want. 89 00:05:38,390 --> 00:05:41,030 But I just want to have some sense. 90 00:05:41,240 --> 00:05:42,320 Right list. 91 00:05:42,920 --> 00:05:46,520 Rapper rapper clicked. 92 00:05:46,910 --> 00:05:49,940 Now I'm going to refresh here. 93 00:05:50,150 --> 00:05:51,680 I'm going to delete everything. 94 00:05:51,680 --> 00:06:02,360 And so when I click here you will see that look to do list element click this one fired up first and 95 00:06:02,360 --> 00:06:05,870 after that these three as well. 96 00:06:06,080 --> 00:06:07,670 But I didn't click them right. 97 00:06:07,820 --> 00:06:10,940 I didn't target these to do list. 98 00:06:10,940 --> 00:06:13,460 I didn't go through a list wrapper. 99 00:06:13,460 --> 00:06:15,620 I didn't click any of this. 100 00:06:15,620 --> 00:06:15,910 Right. 101 00:06:16,040 --> 00:06:19,760 So now least at least Rahbar and that's why is there. 102 00:06:20,060 --> 00:06:22,460 So yeah, that is pretty much it. 103 00:06:22,480 --> 00:06:24,710 That is pretty much what is happening. 104 00:06:24,860 --> 00:06:29,480 So this even goes up to its parents and that is called even bubbling. 105 00:06:29,480 --> 00:06:31,310 And we need to stop it. 106 00:06:31,910 --> 00:06:32,290 Right. 107 00:06:32,570 --> 00:06:35,750 See how many things are fired with one click in. 108 00:06:35,750 --> 00:06:38,300 That is was not my intention. 109 00:06:38,540 --> 00:06:40,820 I just want this guy here when I click. 110 00:06:41,030 --> 00:06:45,530 I just want to see this, not everything else that I've put on top. 111 00:06:45,530 --> 00:06:51,400 So because this to do is and this list here that is hidden, you can't see it actually see it. 112 00:06:52,430 --> 00:06:57,320 So this was to do list as wildfire in the least wrapper. 113 00:06:57,470 --> 00:06:57,830 Right. 114 00:06:58,760 --> 00:06:59,510 How cool is this? 115 00:07:00,140 --> 00:07:04,010 OK, now we need to find a way how to stop it and we can stop it. 116 00:07:04,280 --> 00:07:08,600 We using the event delegation. 117 00:07:09,080 --> 00:07:11,030 OK, so I'm going to comment this. 118 00:07:11,030 --> 00:07:12,320 We don't need it anymore. 119 00:07:13,850 --> 00:07:18,260 Let's make it like this more so we can select more things. 120 00:07:18,440 --> 00:07:20,330 Now, the event delegation, how are we going to do this? 121 00:07:20,600 --> 00:07:22,910 So we are doing event delegation. 122 00:07:22,910 --> 00:07:24,320 We have a couple of scenarios. 123 00:07:25,010 --> 00:07:32,570 For example, when through JavaScript, through manipulation, through anything, I put I put new items 124 00:07:32,570 --> 00:07:37,310 here in this ally in this you know, the list I put another list item. 125 00:07:37,630 --> 00:07:38,030 Right. 126 00:07:38,270 --> 00:07:47,120 If I do that with JavaScript, with through JavaScript, not coding it here, not coding in here, then 127 00:07:47,120 --> 00:07:50,000 I need to use this event delegation. 128 00:07:50,000 --> 00:07:56,510 The second thing is, if we have the same class name, for example, to many of the items that we want, 129 00:07:56,510 --> 00:08:03,080 for example, to delete or to put some event listeners on, then only the first one will be selected. 130 00:08:03,080 --> 00:08:05,020 For example, you will see what I'm trying to say. 131 00:08:05,450 --> 00:08:14,600 So what I did say is that secondees is when we have same class names in more than one item in how is 132 00:08:14,600 --> 00:08:15,290 this happening here? 133 00:08:15,290 --> 00:08:19,010 It is this class FFA trash, it's pretty much everywhere. 134 00:08:19,100 --> 00:08:19,490 Right. 135 00:08:19,700 --> 00:08:22,580 And even this one is same in every area. 136 00:08:22,610 --> 00:08:27,090 But we have one, two, three, four, five or. 137 00:08:27,140 --> 00:08:27,410 Yeah. 138 00:08:27,650 --> 00:08:28,700 How many others do we have. 139 00:08:29,690 --> 00:08:30,260 Four. 140 00:08:30,350 --> 00:08:30,740 Five. 141 00:08:30,740 --> 00:08:30,990 Yeah. 142 00:08:31,160 --> 00:08:31,670 Or four. 143 00:08:31,700 --> 00:08:32,120 Four. 144 00:08:32,270 --> 00:08:37,760 We have four allies so I have four same class names and that's not good enough. 145 00:08:38,150 --> 00:08:42,680 Let me just show you what I'm trying to say here now. 146 00:08:42,920 --> 00:08:44,090 I will say document. 147 00:08:45,890 --> 00:08:54,350 Not like that document, that query selector, and what I'm going to select is this to do list trash, 148 00:08:55,220 --> 00:08:56,960 just going to select this class here. 149 00:08:57,250 --> 00:09:00,380 I'm just going to select this atrip element, write the link. 150 00:09:00,890 --> 00:09:02,930 So, yeah, I'm going to do that. 151 00:09:03,080 --> 00:09:11,150 And I'm going to add event listener and I'm going to say unclick and I'm going to put a function here 152 00:09:11,150 --> 00:09:11,700 straight away. 153 00:09:12,010 --> 00:09:12,350 Right. 154 00:09:12,350 --> 00:09:14,480 We can we did have a couple of options. 155 00:09:14,480 --> 00:09:18,750 We can do it like this or we can just write down the function. 156 00:09:19,070 --> 00:09:29,720 Now I'm just going to say, cause a lot the trash item or link was plagued, OK? 157 00:09:30,720 --> 00:09:31,030 Good. 158 00:09:31,830 --> 00:09:41,100 So let me just show you inside our each element we did had that we did have that eyeglass, right? 159 00:09:41,400 --> 00:09:41,700 We did. 160 00:09:42,420 --> 00:09:45,170 So the thing is that we need to click the icon. 161 00:09:45,630 --> 00:09:47,810 So I'm just going to go refresh this one. 162 00:09:48,150 --> 00:09:51,060 And when I click here, nothing happens. 163 00:09:51,720 --> 00:09:55,010 But by the way, we need to change something. 164 00:09:55,290 --> 00:10:02,130 These aircrafts I'm holding out and I'm selecting all of them and I'm going to put hash because I don't 165 00:10:02,130 --> 00:10:08,400 want them to go anywhere, because otherwise I need to put here event and prevent default because I 166 00:10:08,400 --> 00:10:13,250 want to stop dealing to do its job and to submit somewhere to go somewhere. 167 00:10:13,480 --> 00:10:16,160 Right now, I'm just going to refresh again. 168 00:10:16,620 --> 00:10:21,090 So make sure that you're refreshing with and through whatever you do, because sometimes this takes 169 00:10:21,090 --> 00:10:21,710 a while to work. 170 00:10:21,900 --> 00:10:24,210 So if I click here, how cool is this? 171 00:10:24,210 --> 00:10:24,630 It's working. 172 00:10:24,990 --> 00:10:30,480 But if I click here, look, there is no no nothing, nothing showing that it's not working. 173 00:10:30,480 --> 00:10:38,520 But if I click again here, there's mean that I click two times, three times for and that is because 174 00:10:38,520 --> 00:10:45,000 I do have the same class name all over my to do list all over this in order to list. 175 00:10:45,060 --> 00:10:46,950 I do have the same same class name. 176 00:10:47,010 --> 00:10:50,730 So here when I highlighted it's the same same here. 177 00:10:50,900 --> 00:10:54,230 No there is a way how we can stop this. 178 00:10:54,240 --> 00:10:59,820 I'm just going to comment this one now we need to find what did I say in the event delegation. 179 00:11:00,090 --> 00:11:15,030 We we so we target the parent in any parent doesn't have to be and we can stop this and we can delegate 180 00:11:15,030 --> 00:11:15,810 this bubbling. 181 00:11:16,050 --> 00:11:23,460 So I'm going to say here, more loose wrapper and I will be document that query selector and I'm going 182 00:11:23,460 --> 00:11:30,990 to select the list of wrapper class, the entire thing that is holding this unordered list. 183 00:11:30,990 --> 00:11:31,220 Right. 184 00:11:31,230 --> 00:11:32,330 I'm just targeting this one. 185 00:11:32,520 --> 00:11:37,230 So inside we have the entire notat least and we have this Ellyse. 186 00:11:37,440 --> 00:11:38,550 OK, cool. 187 00:11:38,820 --> 00:11:41,130 No Liz wrapper. 188 00:11:41,310 --> 00:11:43,260 I'm just going to say query selecter. 189 00:11:43,860 --> 00:11:48,150 Sorry, adding that listener so I can do it in one go. 190 00:11:48,150 --> 00:11:52,800 But I just wanted to create the variable like this and I say click 191 00:11:55,830 --> 00:11:58,800 in here, I'm going to create a function 192 00:12:02,640 --> 00:12:04,430 so I'm not going to name the function outside. 193 00:12:04,440 --> 00:12:06,090 Now here is what we want. 194 00:12:06,090 --> 00:12:08,660 We want to find the child right. 195 00:12:08,760 --> 00:12:16,350 So how we can find a child that we we want from this guy here, because this guy is the parent and I 196 00:12:16,350 --> 00:12:20,430 want to find a child and I want to find actually this trash here. 197 00:12:21,150 --> 00:12:27,060 OK, now, so if I do comes a lot easier. 198 00:12:27,130 --> 00:12:30,870 Target, do you see what I'm missing? 199 00:12:30,870 --> 00:12:34,170 I'm missing to pass this event here. 200 00:12:34,170 --> 00:12:35,370 So e doctorial. 201 00:12:35,400 --> 00:12:36,210 Let's see what's happening. 202 00:12:36,210 --> 00:12:39,900 So when I click here, make sure that you do refresh this one. 203 00:12:39,930 --> 00:12:41,360 You don't go anywhere like that. 204 00:12:43,110 --> 00:12:51,240 OK, so it gives me these to do list L Clementino also if I click here it's going to give me that FFI 205 00:12:51,240 --> 00:12:51,840 trash. 206 00:12:52,290 --> 00:12:52,790 Oh yeah. 207 00:12:52,890 --> 00:12:54,690 That is pretty much cool. 208 00:12:54,900 --> 00:12:58,770 So we can see if. 209 00:13:00,760 --> 00:13:01,810 Either target. 210 00:13:04,440 --> 00:13:05,460 That last name. 211 00:13:08,750 --> 00:13:18,550 OK, class name is equal equal to the FFA trash, not like that, it's not going to work otherwise. 212 00:13:18,950 --> 00:13:23,930 So I'm going to say, OK, like this bad boy here, dargah else 213 00:13:26,960 --> 00:13:39,560 council log you have missed, you have clicked outside already outside the trash, like, OK, that 214 00:13:39,560 --> 00:13:39,930 was it. 215 00:13:40,070 --> 00:13:45,940 So now I just want to say when I click on the trash, I can, I can, I want to see the result. 216 00:13:45,950 --> 00:13:48,800 Otherwise I don't want to target anything. 217 00:13:48,870 --> 00:13:49,210 Right. 218 00:13:49,850 --> 00:13:54,650 So let me click here quick outside the trash I can hear is three times, four times. 219 00:13:54,860 --> 00:13:57,050 But when I click here is actually I'm getting that one. 220 00:13:57,480 --> 00:13:59,650 So that is pretty much it. 221 00:13:59,960 --> 00:14:08,390 What we also can do, we can get the parent right, OK, like we can get variable parent, we can get 222 00:14:08,390 --> 00:14:14,030 the parent of this trash because sometimes we need the parents, sometimes we need all of these things. 223 00:14:14,180 --> 00:14:22,580 So either target the parent node and console like the parent. 224 00:14:23,540 --> 00:14:23,990 Right. 225 00:14:24,300 --> 00:14:26,340 OK, let's see what's happening here. 226 00:14:27,170 --> 00:14:28,520 So when I click here. 227 00:14:29,220 --> 00:14:34,190 OK, so the parent node, is this actually a traveling, which is true. 228 00:14:34,520 --> 00:14:40,290 Right, this AI class I'm just going to show you with for better visualization or this one here is a 229 00:14:40,310 --> 00:14:40,530 man. 230 00:14:40,820 --> 00:14:44,600 So this icon here is inside is Aytaroun. 231 00:14:45,620 --> 00:14:48,460 Now, most of the times we do have here I. 232 00:14:48,470 --> 00:14:49,780 D right. 233 00:14:49,790 --> 00:14:57,590 Unique ideas like I'm going to say here, I'm going to give it idy here and I'm going to say ID or one 234 00:14:58,130 --> 00:14:58,700 like that. 235 00:15:00,710 --> 00:15:01,970 I'm just going to put it here. 236 00:15:01,970 --> 00:15:04,820 I'm going to say down two, not three. 237 00:15:05,750 --> 00:15:06,380 I'm seeing one. 238 00:15:06,380 --> 00:15:11,150 I'm putting something else here, I need my coffee immediately. 239 00:15:11,150 --> 00:15:12,050 So therefore. 240 00:15:12,410 --> 00:15:17,720 Right, so sometimes you need to get these ideas and how you can get these ideas is very simple. 241 00:15:17,960 --> 00:15:20,900 You can just type the idea and that's pretty much here. 242 00:15:21,110 --> 00:15:24,680 Now, just kind of refresh refresh here. 243 00:15:25,490 --> 00:15:30,470 OK, so when I click here, I just expect to have this though, and this one is coming from the other 244 00:15:30,470 --> 00:15:31,010 comes along. 245 00:15:31,160 --> 00:15:34,280 So if I click here, I have this, there are four. 246 00:15:34,460 --> 00:15:36,980 So now I can do whatever I want. 247 00:15:37,130 --> 00:15:37,550 Right. 248 00:15:38,360 --> 00:15:43,940 And sometimes when we want to remove this entire block, let me just let me just show you. 249 00:15:44,450 --> 00:15:48,020 So when we want to put the entire block, we don't need this pan. 250 00:15:48,170 --> 00:15:55,290 We don't need these eight traveling, but we need this entire to do list element and how we can do this 251 00:15:55,340 --> 00:15:55,820 simple. 252 00:15:55,880 --> 00:15:57,290 We don't have any ideas here. 253 00:15:57,290 --> 00:15:57,560 Right. 254 00:15:57,740 --> 00:16:02,600 We don't have anything to find because based on the idea, you can just search it and you can delete 255 00:16:02,600 --> 00:16:02,720 it. 256 00:16:03,050 --> 00:16:07,400 But now what I can do, I'm just going to commandeers all of this. 257 00:16:08,040 --> 00:16:09,510 First I need to copy. 258 00:16:10,070 --> 00:16:15,230 Then I'm going to say VAR Aaron and I'm going to say parent parent. 259 00:16:16,070 --> 00:16:19,870 I'm going to go one step above and give me the other parent node. 260 00:16:20,030 --> 00:16:25,970 So this, this one will give me the other parent know and this is the entire to do list. 261 00:16:25,970 --> 00:16:30,830 I can OK just going to comes along here, just refresh. 262 00:16:31,190 --> 00:16:33,260 So when I click go to the console. 263 00:16:33,260 --> 00:16:35,150 When I click here, here it is. 264 00:16:35,150 --> 00:16:37,250 It's giving me the entire when I click here. 265 00:16:38,690 --> 00:16:40,040 I've missed the icon by the way. 266 00:16:40,370 --> 00:16:41,570 It's going to give me that one. 267 00:16:41,660 --> 00:16:42,950 OK, so now it's easy. 268 00:16:43,070 --> 00:16:46,210 I do have this entire allai so I can remove it. 269 00:16:46,220 --> 00:16:46,600 Right. 270 00:16:46,760 --> 00:16:55,130 So what I need to do is just to have that remove as pretty much basically it. 271 00:16:55,550 --> 00:16:59,510 Now we were able to remove the item from the graphical user interface. 272 00:16:59,660 --> 00:17:04,220 But let me just say, clicking on the icon here, it's remove let's click the first one. 273 00:17:04,850 --> 00:17:05,440 That's it. 274 00:17:05,480 --> 00:17:07,250 The last one in. 275 00:17:07,250 --> 00:17:07,820 Here we go. 276 00:17:09,170 --> 00:17:11,810 That is pretty much it, ladies and gentlemen. 277 00:17:12,050 --> 00:17:17,750 So we have event bubley that even bubbles through the DOM. 278 00:17:17,780 --> 00:17:20,300 If we don't catch it in, how are we going to catch it? 279 00:17:20,300 --> 00:17:27,820 If we use even delegation location where we put the delegation, we put it on the parent like this right 280 00:17:27,830 --> 00:17:33,290 on the list wrapper, and after that we finding the target that we want and that is what we are going 281 00:17:33,290 --> 00:17:36,110 to use in our project in future. 282 00:17:36,110 --> 00:17:40,210 And that project will be about burning calories. 283 00:17:40,230 --> 00:17:44,630 We're going to use some similar we're not going to use the same tactic, but we're going to use this 284 00:17:44,630 --> 00:17:45,620 event babblings. 285 00:17:45,620 --> 00:17:47,120 So bubbling and delegation. 286 00:17:47,130 --> 00:17:51,410 So make sure that you understand now, because when we're going to do that, you're not going to be 287 00:17:51,410 --> 00:17:57,200 able to understand how we managed to come to delete calories from that budget. 288 00:17:57,200 --> 00:17:58,130 So thank you very much. 289 00:17:58,220 --> 00:17:59,780 I hope you enjoy it now. 290 00:17:59,780 --> 00:18:01,070 We'll see you in the next one.