1 00:00:01,890 --> 00:00:04,080 Welcome, everyone, in this lecture. 2 00:00:04,110 --> 00:00:11,130 We're going to learn about how to prevent even bubbling when we tried to delete an item, how we can 3 00:00:11,130 --> 00:00:19,680 use the I.D. that we just inserted in our HTML, you will see what I'm trying to say in just a second 4 00:00:19,890 --> 00:00:21,180 and how we can use the Perrineau. 5 00:00:21,180 --> 00:00:24,020 So these three things, we're going to do it. 6 00:00:24,030 --> 00:00:28,470 I'm just going to write it down and and I'm going to delete it after each and every lecture. 7 00:00:29,100 --> 00:00:35,760 Probably that is the best idea now, but prevent the event bubbling. 8 00:00:37,450 --> 00:00:40,350 Remember, we even delegation, we're going to use something like that. 9 00:00:41,220 --> 00:00:43,830 We will use unique. 10 00:00:46,330 --> 00:00:49,990 Ideas from our 11 00:00:52,510 --> 00:00:53,290 HTML. 12 00:00:55,150 --> 00:00:59,680 What else, these DP's are going to come and we're just going to show you we're going to come from this 13 00:00:59,680 --> 00:01:00,440 board, right? 14 00:01:00,460 --> 00:01:04,570 These are these I'm talking about these ideas in unique. 15 00:01:09,600 --> 00:01:15,480 Ideas from our HTML Food and exercise panel. 16 00:01:16,920 --> 00:01:21,090 OK, now what else are we going to do is we can use Barend. 17 00:01:23,790 --> 00:01:30,840 Note, I'm just going to leave this note down manipulation or traversing so that what we're going to 18 00:01:30,840 --> 00:01:37,710 do so I'm just going to close this bar and I'm just going to add something here. 19 00:01:37,980 --> 00:01:41,740 So you will be you will be exactly sure what we are doing. 20 00:01:41,820 --> 00:01:48,030 So I'm going to add food one like five hundred or that. 21 00:01:49,020 --> 00:01:57,620 So when I click here, I do have these a button, so if I inspect it, it will be this button. 22 00:01:57,630 --> 00:02:02,700 So when I click hour RFA time circle or that will be the delete button. 23 00:02:02,820 --> 00:02:03,170 Right. 24 00:02:03,180 --> 00:02:04,400 That is just the icon. 25 00:02:04,920 --> 00:02:06,990 I want this to be done at the moment. 26 00:02:06,990 --> 00:02:07,710 It's not working. 27 00:02:07,860 --> 00:02:08,280 Right. 28 00:02:08,520 --> 00:02:09,600 I'm just selecting it there. 29 00:02:09,780 --> 00:02:10,490 Nothing else. 30 00:02:10,710 --> 00:02:13,560 So I want this to be gone. 31 00:02:13,590 --> 00:02:16,110 And also here it is. 32 00:02:16,110 --> 00:02:17,640 I'm talking about these IDs. 33 00:02:18,090 --> 00:02:22,200 So if I add another one, I don't know, say ice cream. 34 00:02:25,860 --> 00:02:32,100 And if I add that one, so if I go here, I will have the ice cream, if I inspect it, I would like 35 00:02:32,100 --> 00:02:33,330 to see idea of one. 36 00:02:33,510 --> 00:02:36,720 Remember those ideas we created back a couple of lectures. 37 00:02:37,320 --> 00:02:45,930 And now what we are going to do is first we need to create event listener in the event listener should 38 00:02:45,930 --> 00:02:47,610 be on this button. 39 00:02:49,020 --> 00:02:55,260 When we create this point, actually, we're going to click it's it's AI class and we do have the same 40 00:02:55,260 --> 00:02:56,730 eyeglass, same same button. 41 00:02:57,360 --> 00:02:58,380 It's here, right? 42 00:02:58,380 --> 00:03:01,800 Even in the food or exercise slider. 43 00:03:02,160 --> 00:03:09,870 So we remember that when we do want to prevent event bubbling to prevent to go and traverse through 44 00:03:09,870 --> 00:03:16,130 the DOM, we would like to put the event delegation on the spirit. 45 00:03:16,140 --> 00:03:23,610 No, if I put this bit in the lead item here when I click this one, if I want to find it Spearin, 46 00:03:23,610 --> 00:03:24,720 I'm going to find it here. 47 00:03:24,870 --> 00:03:27,060 Right, this exercise slider. 48 00:03:27,210 --> 00:03:31,230 So that is the parent for this button, but for this button. 49 00:03:31,800 --> 00:03:32,250 Right. 50 00:03:32,460 --> 00:03:33,360 For the food. 51 00:03:34,050 --> 00:03:36,030 The slider is has a different name. 52 00:03:36,030 --> 00:03:38,520 So I will need to use two separate. 53 00:03:39,510 --> 00:03:41,790 I will need to use two separate event listeners. 54 00:03:42,210 --> 00:03:43,260 And I'm not going to do that. 55 00:03:43,410 --> 00:03:51,960 I'm just going to find for these both for these buttons or for these one slider exercise and food slider. 56 00:03:51,960 --> 00:03:54,930 I just want to find which is the most common parent. 57 00:03:54,960 --> 00:03:55,880 So I'm going to go up. 58 00:03:56,310 --> 00:03:57,480 This is not the parent. 59 00:03:58,140 --> 00:04:00,550 Right, because he felt this was the parent. 60 00:04:00,550 --> 00:04:02,730 This closing this will not be here. 61 00:04:03,060 --> 00:04:04,140 This is not the parent. 62 00:04:04,500 --> 00:04:04,790 Right. 63 00:04:04,830 --> 00:04:06,990 This is closed for the main panel result. 64 00:04:07,740 --> 00:04:11,130 These is closed by the main panel graph. 65 00:04:11,940 --> 00:04:18,810 Now, this day, it's closed here in the last one is main panel or main container. 66 00:04:18,810 --> 00:04:20,460 Whatever we want, we can use. 67 00:04:20,610 --> 00:04:30,480 I know that the parent of those panels or these two panels for the food and for the exercise will be 68 00:04:30,480 --> 00:04:34,760 this main panel or where it is or main container. 69 00:04:34,860 --> 00:04:40,800 So whatever you want to use now before doing anything, I'm just going to put in our last names. 70 00:04:40,800 --> 00:04:41,280 Right. 71 00:04:41,280 --> 00:04:42,210 And I'm going to put it here. 72 00:04:42,210 --> 00:04:55,350 I'm going to say main main panel and I'm going to use the main what was just like that main panel. 73 00:04:55,740 --> 00:04:57,140 That's pretty much it. 74 00:04:57,330 --> 00:05:02,580 So now I do have in our e-mail CSS class names, private object. 75 00:05:02,580 --> 00:05:04,380 I do have that one so I can use it. 76 00:05:04,740 --> 00:05:10,320 OK, now remember where we fire up these events, listeners. 77 00:05:10,530 --> 00:05:13,470 So we have the function called group event listeners in. 78 00:05:13,470 --> 00:05:21,810 The most logical here is to call these mean to put the event listener for that button when we clicked 79 00:05:21,810 --> 00:05:22,350 with the here. 80 00:05:22,470 --> 00:05:34,590 No, I'm just going to say here that we are doing event delegation when delete button is clicked. 81 00:05:34,920 --> 00:05:35,310 Right. 82 00:05:36,150 --> 00:05:37,440 You can put it whatever you want. 83 00:05:37,620 --> 00:05:46,440 OK, we are going to set this one document, the query selector so HTML class names don't mean panel. 84 00:05:46,440 --> 00:05:49,110 So we're going to set this one as we talk. 85 00:05:49,110 --> 00:05:50,710 We need to find the parents. 86 00:05:50,710 --> 00:05:52,440 So we're going to set this on the parent. 87 00:05:52,770 --> 00:05:54,630 So I'm going to say an event listener. 88 00:05:54,810 --> 00:05:57,480 In any event, listener will be unclick. 89 00:05:59,190 --> 00:05:59,610 Right. 90 00:05:59,820 --> 00:06:01,860 And I'm going to pass in the function here. 91 00:06:05,160 --> 00:06:06,050 Like that. 92 00:06:06,120 --> 00:06:14,490 So I'm just going to close this here and I'm going to pass so this event, we talk about this before, 93 00:06:14,580 --> 00:06:19,740 so we will pass the event object because every event listener is a callback function that have access 94 00:06:19,740 --> 00:06:20,600 to this event. 95 00:06:20,700 --> 00:06:25,610 We can just call it anything E.V. maybe you can call E or E or event. 96 00:06:26,280 --> 00:06:26,970 It's up to you. 97 00:06:29,440 --> 00:06:29,950 Nice. 98 00:06:30,250 --> 00:06:32,510 So I'm just going to see if it's going to work. 99 00:06:32,830 --> 00:06:34,890 I'm going to do console lock. 100 00:06:35,770 --> 00:06:36,770 You don't target. 101 00:06:37,300 --> 00:06:43,810 Let's see if it's working, because this remember, if you see something strange, because when I click 102 00:06:43,810 --> 00:06:45,280 here, everything is in the mean. 103 00:06:46,420 --> 00:06:48,000 Everything is in the main panel. 104 00:06:48,220 --> 00:06:51,100 So whenever I click, wherever I click, it's going to be targeted. 105 00:06:51,130 --> 00:06:51,640 Here it is. 106 00:06:51,880 --> 00:06:52,870 This is the main panel. 107 00:06:53,020 --> 00:06:55,450 When I click here, it's going to be targeted at this one. 108 00:06:55,700 --> 00:07:01,270 But what I do want is when I have food, I have some calories inserted. 109 00:07:02,260 --> 00:07:04,840 I want when I click this button, here it is. 110 00:07:05,260 --> 00:07:06,930 I just want something to happen. 111 00:07:06,940 --> 00:07:09,560 Needs to disappear in that hour. 112 00:07:10,150 --> 00:07:17,970 That is the section two of these projects to to make what whatever we have seen in food or exercise 113 00:07:17,980 --> 00:07:19,870 failed to disappear when we click. 114 00:07:20,000 --> 00:07:20,350 Right. 115 00:07:21,010 --> 00:07:24,370 So here I'm not going to do like this. 116 00:07:24,370 --> 00:07:29,020 I'm just going to create a function and that will be for delete calories. 117 00:07:29,020 --> 00:07:31,330 And yeah, let's call it the calories. 118 00:07:33,300 --> 00:07:43,360 And we got to pass what we got to pass this event here and I'm going to copy this entire one and we 119 00:07:43,370 --> 00:07:49,440 got to pass it here before the daily calories, right. 120 00:07:51,270 --> 00:07:59,430 And we're going to pass it would the DEVANT so we can pass in the event, Lisa, because we before we 121 00:07:59,430 --> 00:08:06,420 did that one show, he or whatever name you want, I'm just going to delete everything from here and 122 00:08:06,420 --> 00:08:08,330 see if this is going to work. 123 00:08:08,550 --> 00:08:13,800 So it's going to be delete delete calories. 124 00:08:14,500 --> 00:08:24,030 OK, now I'm just going to say what he target and what I would like to do is going to blast. 125 00:08:24,330 --> 00:08:26,160 I'm just going press the button here. 126 00:08:26,460 --> 00:08:26,970 Just go. 127 00:08:28,660 --> 00:08:33,990 I'm just going press here it is pressing some some somewhere on the main panel, and that is working. 128 00:08:34,000 --> 00:08:40,540 So that means this e this class is being called from out from inside this event. 129 00:08:40,540 --> 00:08:41,510 Listener Nice. 130 00:08:42,040 --> 00:08:44,300 So we are done with this now. 131 00:08:44,320 --> 00:08:50,180 Just going to delete this and continue working so with our code. 132 00:08:50,380 --> 00:08:52,180 I'm just going to create a couple of variables. 133 00:08:53,290 --> 00:08:55,580 And the first variable will be the parent node. 134 00:08:55,840 --> 00:09:03,930 Don't worry, it will be clear after I do this, the other one, will we get into the idea and the time? 135 00:09:04,660 --> 00:09:10,230 OK, we do have such a number of areas for variables that I haven't talk about. 136 00:09:10,410 --> 00:09:17,170 No, remember that we can grab the parent node and that's why I just want to grab the parent. 137 00:09:17,170 --> 00:09:22,810 I don't need actually just to show you here, I don't need just actually these. 138 00:09:24,320 --> 00:09:32,480 To target these eyeglass or these delete media, I just want to target the entire did this entire and 139 00:09:32,480 --> 00:09:35,570 I just want to delete it, that is my goal. 140 00:09:35,570 --> 00:09:39,710 So that is what I will do, is that is why I'm going to use this parent. 141 00:09:39,710 --> 00:09:40,020 No. 142 00:09:40,220 --> 00:09:41,900 So I'm just going to Conjola. 143 00:09:45,310 --> 00:09:52,110 For either parent node in either target the parent, no. 144 00:09:52,310 --> 00:09:54,050 OK, let's discuss a little bit. 145 00:09:54,580 --> 00:10:01,870 So this AI class, so when I click it, the parent know this class is actually this B10, right. 146 00:10:01,870 --> 00:10:03,230 Because that is the parent. 147 00:10:03,910 --> 00:10:05,180 Now the next parent. 148 00:10:05,200 --> 00:10:06,030 So I did that. 149 00:10:06,820 --> 00:10:10,180 So this should give me the beat and delete item. 150 00:10:10,630 --> 00:10:14,620 So I'm just going to I'm just gonna print it out so you can see. 151 00:10:15,670 --> 00:10:19,670 So we're going to add, let's add food. 152 00:10:20,110 --> 00:10:21,610 One hundred and fifty. 153 00:10:21,620 --> 00:10:23,420 OK, so when I go here. 154 00:10:24,100 --> 00:10:30,490 So when I click these it will give me the beat and write it as I told you, it will give me the parent 155 00:10:30,760 --> 00:10:32,770 because I jump one from this. 156 00:10:32,780 --> 00:10:39,250 This will give me the parent now if I do another parent node. 157 00:10:40,090 --> 00:10:46,060 So if I go one up, one level up that one level, it will give me the parent of this button, which 158 00:10:46,060 --> 00:10:49,780 is this div class and it will give me this class name. 159 00:10:50,140 --> 00:10:51,490 But that is not what I want. 160 00:10:51,610 --> 00:10:57,610 I just want to go one level up so that it's not going to go into D div container, it's not going to 161 00:10:57,610 --> 00:11:05,350 go into this container, but it should go into this because this is the parent that holds these three 162 00:11:05,350 --> 00:11:10,930 containers, their separate one sorry, one, two, three containers. 163 00:11:11,170 --> 00:11:16,320 So when I'm here, when I go one level up, it should go straight that make space. 164 00:11:16,350 --> 00:11:17,800 Lets make space a little bit here. 165 00:11:19,270 --> 00:11:19,720 Oops. 166 00:11:19,940 --> 00:11:20,750 Oh no. 167 00:11:21,880 --> 00:11:22,900 So it will go here. 168 00:11:23,150 --> 00:11:26,740 OK, I'm going to save it in. 169 00:11:27,760 --> 00:11:33,760 Don't worry, it looks a little bit strange but it's going to work now when I, when I display this 170 00:11:33,760 --> 00:11:40,600 I want to have this class and I'm going to copy it just to prove it to you because you can easily forget 171 00:11:41,080 --> 00:11:42,230 what you're trying to get. 172 00:11:43,540 --> 00:11:47,230 Now I'm going to go back there when I click this guy. 173 00:11:47,270 --> 00:11:48,250 Here it is. 174 00:11:48,850 --> 00:11:51,190 I do have the same class. 175 00:11:51,280 --> 00:11:52,990 It's returning me the entire day. 176 00:11:52,990 --> 00:11:56,620 But I just want to show you that I need this class or the ID. 177 00:11:56,620 --> 00:11:56,970 Right. 178 00:11:57,250 --> 00:11:57,970 So that's it. 179 00:11:57,970 --> 00:12:00,940 When I cover it, it's selecting the entire idea. 180 00:12:01,090 --> 00:12:02,640 And that is basically what I want. 181 00:12:02,770 --> 00:12:05,760 So if I had another food with. 182 00:12:07,480 --> 00:12:14,560 So yeah, when I click that one, it will give me the container for this one right before was giving 183 00:12:14,560 --> 00:12:16,420 me the container for the other one. 184 00:12:17,300 --> 00:12:17,820 Here it is. 185 00:12:17,860 --> 00:12:21,710 So now I do have the both containers visible and select. 186 00:12:21,770 --> 00:12:22,580 OK, good. 187 00:12:23,800 --> 00:12:31,260 Now what I need is to grab this idea here and remember I have I d an ID zero, right. 188 00:12:31,870 --> 00:12:36,640 So I just need to grab that ID and it's very simple as this. 189 00:12:37,150 --> 00:12:40,210 So now let me show you one more. 190 00:12:40,210 --> 00:12:44,080 I don't want to leave you souper one. 191 00:12:44,500 --> 00:12:48,760 I just don't want to leave you guessing what it will be. 192 00:12:48,760 --> 00:12:54,070 So when I click I'm going to get this ID and this actually it's mine from before. 193 00:12:54,110 --> 00:12:54,460 Right. 194 00:12:54,820 --> 00:12:57,130 So that's at zero. 195 00:12:57,310 --> 00:13:02,610 And I need and if you want to check, you can go inspect it and it's at zero. 196 00:13:02,860 --> 00:13:05,230 OK, so I need that one. 197 00:13:06,040 --> 00:13:08,670 But what would what will I do with that one. 198 00:13:08,980 --> 00:13:16,000 OK, so I'm going to say I'm done with this, but I'm going to copy the entire thing and I'm going to 199 00:13:16,000 --> 00:13:22,990 put it in an apparent note and I'm going to say, OK, the parent should be equal to this and this should 200 00:13:22,990 --> 00:13:25,540 be on top because you know how we get it. 201 00:13:25,810 --> 00:13:31,240 OK, now I'm going to say, if the parent node, if I do have a result, if I found a parent node, 202 00:13:32,170 --> 00:13:46,240 OK, so what I would like to do, I would like to get this at zero or at one or it can be even burned 203 00:13:46,240 --> 00:13:49,030 zero in button one. 204 00:13:50,030 --> 00:13:50,340 Right. 205 00:13:50,620 --> 00:13:53,410 That will come when we add when we burn calories. 206 00:13:53,680 --> 00:13:54,130 So. 207 00:13:55,000 --> 00:13:55,450 Right. 208 00:13:55,780 --> 00:13:58,000 So it can be even that one or where it is. 209 00:14:01,280 --> 00:14:06,480 It is or it can be this one burned one, burned zero, burned one again, nice. 210 00:14:06,610 --> 00:14:09,100 So we will grab those. 211 00:14:09,260 --> 00:14:10,360 But how are we going to do this? 212 00:14:10,850 --> 00:14:13,540 OK, these variable get ideas. 213 00:14:14,050 --> 00:14:16,690 I will say that the variable to be equal to parent. 214 00:14:16,690 --> 00:14:21,460 No, that split not push split. 215 00:14:22,160 --> 00:14:29,380 And I will say that I want to split where I where I had these dash in my string. 216 00:14:29,860 --> 00:14:30,220 Right. 217 00:14:30,460 --> 00:14:32,820 So where are you going to find this dash in the string. 218 00:14:33,250 --> 00:14:34,360 I want to split it. 219 00:14:34,360 --> 00:14:41,080 And what this actually will do is in these get idee variable, it will be stored on erry. 220 00:14:41,650 --> 00:14:48,020 So if I cancel, like you will see that there will be an array comes along. 221 00:14:48,220 --> 00:14:49,690 Get it now. 222 00:14:49,960 --> 00:14:52,690 I will do have an array with two items. 223 00:14:53,080 --> 00:15:00,340 The first item will be this and in that zero or add in one, the dash will be admitted. 224 00:15:00,340 --> 00:15:01,360 It's not going to be there. 225 00:15:01,370 --> 00:15:04,060 That's why I use split to return millenary. 226 00:15:04,250 --> 00:15:04,670 Oh yeah. 227 00:15:05,590 --> 00:15:12,940 So I'm just going to the console are just going to say for one hundred and fifty I'm going to go back 228 00:15:12,940 --> 00:15:13,350 there. 229 00:15:13,540 --> 00:15:18,700 So when I click delete I just want to have an array here it is two items inside. 230 00:15:19,010 --> 00:15:21,310 The first item is add on the zero position. 231 00:15:21,310 --> 00:15:27,400 The second element is one on its first, it's zero on its first position. 232 00:15:28,010 --> 00:15:36,780 OK, so I did get this what I want, but why do I need this and look closer. 233 00:15:37,060 --> 00:15:42,010 These is and in zero this is array of strings. 234 00:15:42,280 --> 00:15:44,200 It's not array of numbers. 235 00:15:44,200 --> 00:15:50,860 And I need this guy here to be an actual to be actual number. 236 00:15:51,160 --> 00:15:51,600 Right. 237 00:15:51,850 --> 00:15:57,370 So what I can do, I do have another variable idea in that variable. 238 00:15:58,720 --> 00:16:03,040 I just want to store we're going to use the same method pass int. 239 00:16:05,640 --> 00:16:13,710 Remember, this will pass a string to an integer and I will say, OK, get it, in which position will 240 00:16:13,710 --> 00:16:15,390 be that I'm not going to save it. 241 00:16:15,600 --> 00:16:19,050 The position one it's always going to be the position one because this is there. 242 00:16:19,410 --> 00:16:24,060 And I know this for sure because I do have only. 243 00:16:25,040 --> 00:16:33,830 And dash zero eight, dash one and dash fifty five, for example, I do have that to this split method 244 00:16:33,830 --> 00:16:37,370 will give me two area of two items always. 245 00:16:37,610 --> 00:16:43,610 OK, so the idea is there and what I want is the time. 246 00:16:43,610 --> 00:16:49,640 So I get to get the type, the type I will be able to get it as a string. 247 00:16:49,640 --> 00:16:51,230 I don't need it to pass it. 248 00:16:51,500 --> 00:16:52,610 I don't need that. 249 00:16:53,180 --> 00:16:56,540 And that will be in the position of zero and get rid of this one. 250 00:16:56,870 --> 00:16:57,270 OK. 251 00:16:57,380 --> 00:17:00,440 No, just to test it out, console log. 252 00:17:00,620 --> 00:17:04,610 Just grab control of this both idee and type. 253 00:17:05,210 --> 00:17:06,170 We are done. 254 00:17:06,530 --> 00:17:07,190 Pretty much done. 255 00:17:07,690 --> 00:17:14,660 OK, so I'm just going to say here, I'm going to add it up through one hundred and fifty. 256 00:17:14,840 --> 00:17:15,880 I'm going to hit enter. 257 00:17:17,990 --> 00:17:23,180 So now when I click this one, I want to have zero in nice. 258 00:17:23,750 --> 00:17:26,350 So I do have the type, I do have the idea. 259 00:17:26,630 --> 00:17:27,710 So what's next. 260 00:17:28,250 --> 00:17:29,720 Well next is to create. 261 00:17:30,590 --> 00:17:42,380 I'm just going to show you here we need to create, delete, delete the item from our storage object 262 00:17:42,770 --> 00:17:46,510 with the idea in time. 263 00:17:47,000 --> 00:17:49,870 OK, that is going to be our next lecture. 264 00:17:50,150 --> 00:17:56,320 Also we need to delete the calories from the UI, right? 265 00:17:56,540 --> 00:17:58,070 I need to delete it from here. 266 00:17:58,070 --> 00:18:01,220 When I click here, bam, I just want this to be gone. 267 00:18:01,640 --> 00:18:02,690 Not just this one. 268 00:18:02,690 --> 00:18:04,400 The first one should be gone as well. 269 00:18:04,400 --> 00:18:04,700 Right. 270 00:18:05,280 --> 00:18:10,370 OK, I'm just going to give you the space there and what's the last point I want to do? 271 00:18:10,880 --> 00:18:12,530 The last part is to update. 272 00:18:12,980 --> 00:18:13,730 To show. 273 00:18:15,670 --> 00:18:21,290 Updated values in the storage and how are we going to do that? 274 00:18:21,310 --> 00:18:27,810 We have already calculate calories and that contains this method that we are displaying. 275 00:18:27,820 --> 00:18:29,660 So we're going to just call this same old. 276 00:18:30,070 --> 00:18:36,100 So this step, I'm not going to just type it right now, but it will be super, super simple for the 277 00:18:36,100 --> 00:18:36,610 next lecture. 278 00:18:36,610 --> 00:18:36,860 Right. 279 00:18:37,030 --> 00:18:39,160 So we need to take care only of these two. 280 00:18:39,370 --> 00:18:42,580 In this one we already have created and we just going to call it. 281 00:18:43,390 --> 00:18:43,890 That's it. 282 00:18:43,930 --> 00:18:47,710 That's pretty much what we will what we will do. 283 00:18:47,990 --> 00:18:48,350 Right. 284 00:18:48,580 --> 00:18:52,060 So I'm just going to call this method, calculate calories here and done. 285 00:18:52,060 --> 00:18:54,150 But these two, we need to do it separately. 286 00:18:54,280 --> 00:19:01,900 So what we have done this today will create event listener and we have done the event delegation. 287 00:19:02,470 --> 00:19:02,830 Right. 288 00:19:03,130 --> 00:19:09,550 Because if you remember in Domme, the lectures about the time I showed you, what is the event bubbling? 289 00:19:09,550 --> 00:19:17,020 So if you don't know, go back, watch them, you know, have a good example with all of those on order, 290 00:19:17,020 --> 00:19:17,890 at least elements. 291 00:19:18,380 --> 00:19:18,790 All right. 292 00:19:19,150 --> 00:19:20,990 And that's pretty much it. 293 00:19:21,490 --> 00:19:23,470 Also, we've created the lead count calories. 294 00:19:23,740 --> 00:19:26,200 We've been able to get the parent know. 295 00:19:27,320 --> 00:19:27,790 Right. 296 00:19:28,540 --> 00:19:30,040 So even I haven't shown you. 297 00:19:30,230 --> 00:19:32,590 I'm just going to create the exercise. 298 00:19:32,590 --> 00:19:37,240 I'm going to say run one hundred and fifty. 299 00:19:37,450 --> 00:19:45,170 So if I go the exercise, it will be giving me the same and some reason it's working. 300 00:19:46,440 --> 00:19:47,920 OK, let's see. 301 00:19:47,920 --> 00:19:48,670 Let's test it out. 302 00:19:48,690 --> 00:19:50,660 I don't want to do food. 303 00:19:50,770 --> 00:19:52,090 One hundred fifty. 304 00:19:52,090 --> 00:19:54,750 OK, and I'm going to do exercise eggs. 305 00:19:54,910 --> 00:19:55,980 A hundred and fifty. 306 00:19:56,020 --> 00:19:56,630 Very good. 307 00:19:56,860 --> 00:20:01,510 Now when I click here once I'm working. 308 00:20:04,780 --> 00:20:11,570 It's probably not working, these make me look bad because we haven't we haven't gone a lot since I 309 00:20:11,570 --> 00:20:14,360 was a little bit scared for a second. 310 00:20:14,640 --> 00:20:17,340 Okay, for one one. 311 00:20:17,480 --> 00:20:20,160 Okay, x x. 312 00:20:20,510 --> 00:20:23,750 That's not your X, by the way, right now. 313 00:20:24,800 --> 00:20:25,340 Yes. 314 00:20:25,460 --> 00:20:26,570 That's is working. 315 00:20:26,740 --> 00:20:33,050 OK, ladies and gentlemen, I will stop the lecture here without any more hiccups, and I will see you 316 00:20:33,050 --> 00:20:33,740 in the next one.