1 00:00:01,590 --> 00:00:06,660 Welcome back, ladies and gentlemen, this lecture, we are going to finally learn how to display the 2 00:00:06,660 --> 00:00:13,320 data that we have inserted into the storage and put it back to the UI right in. 3 00:00:13,320 --> 00:00:16,230 Where do you think we should create a function for this? 4 00:00:16,470 --> 00:00:22,410 So when I click food, I should see that what we have added here, if I choose food, right, if I choose 5 00:00:22,410 --> 00:00:24,440 exercise, it should be the exercise panel. 6 00:00:24,690 --> 00:00:27,600 So where do you think that I should put that function? 7 00:00:28,440 --> 00:00:28,830 Right. 8 00:00:29,460 --> 00:00:34,710 So that function should go to into app UI controller in that function should go here. 9 00:00:35,100 --> 00:00:38,400 And the name of the function we're going to do it is going to see an item. 10 00:00:38,910 --> 00:00:39,270 Right. 11 00:00:39,270 --> 00:00:42,620 Is going to be a function and going to take some parameters. 12 00:00:42,630 --> 00:00:45,640 But don't worry about those parameters at this stage. 13 00:00:46,050 --> 00:00:50,160 So yeah, we need to get that function going. 14 00:00:50,160 --> 00:00:57,600 Should hear this function will be for the display to display what. 15 00:00:57,840 --> 00:01:01,320 To display the item to the UI. 16 00:01:02,130 --> 00:01:03,750 But how are we going to grab these items? 17 00:01:03,770 --> 00:01:04,890 Where where are we going to grab it. 18 00:01:04,960 --> 00:01:06,450 And we created this here. 19 00:01:06,940 --> 00:01:07,350 Right. 20 00:01:08,330 --> 00:01:11,940 But we need to find a way how to return. 21 00:01:11,940 --> 00:01:17,390 The entire object that we just created in that is this new Kalari here. 22 00:01:17,550 --> 00:01:19,110 So we're going to just return. 23 00:01:20,820 --> 00:01:24,350 Return what new gallery? 24 00:01:24,930 --> 00:01:28,710 So basically, we are returning what we have stored. 25 00:01:30,120 --> 00:01:44,370 So we can't make a comment here and saying return what a return added gallery object and we're going 26 00:01:44,370 --> 00:01:47,860 to use this for UI manipulation. 27 00:01:49,860 --> 00:01:50,660 How cool is this? 28 00:01:51,030 --> 00:01:52,440 So we're going to return it. 29 00:01:52,440 --> 00:01:57,460 But here where we are calling the function in add calories. 30 00:01:57,810 --> 00:02:00,900 So this is our main controller function, right? 31 00:02:00,960 --> 00:02:09,210 We control everything here, but here, let's say at the gallery and new gallery. 32 00:02:10,690 --> 00:02:17,370 OK, so now here we need to store it somewhere and I'm going to store it here in a variable. 33 00:02:18,450 --> 00:02:19,720 How are we going to call this variable? 34 00:02:19,740 --> 00:02:21,360 Let's call this very new. 35 00:02:23,960 --> 00:02:33,280 New ad gallery, so this new ad, Kalari, we're going to store it here in that variable. 36 00:02:33,530 --> 00:02:35,850 So because we return at something, right? 37 00:02:36,440 --> 00:02:41,290 We return it that new Kaleri and we store it here, you know, I do have that object. 38 00:02:41,540 --> 00:02:42,530 So how cool is this? 39 00:02:43,200 --> 00:02:52,970 OK, so what we are going to do so here I'm going to need to say, OK, and the inserted. 40 00:02:56,280 --> 00:03:10,650 They inserted Kalari from above to you, I write to the UI, the user interface, and remember, we 41 00:03:10,650 --> 00:03:14,220 did create this add item, so I'm just going to call that an item. 42 00:03:14,220 --> 00:03:15,190 So I'm going to call it. 43 00:03:15,810 --> 00:03:17,250 So what we used. 44 00:03:17,250 --> 00:03:18,500 So I'm just going to page this here. 45 00:03:18,510 --> 00:03:19,100 Don't worry about it. 46 00:03:19,320 --> 00:03:26,180 So we're going to use this app UI controller, dot an item in here. 47 00:03:26,190 --> 00:03:27,750 We're going to pass this new. 48 00:03:29,610 --> 00:03:38,960 So way I'm doing this this new Kalari is actually going to hold the gallery, the description, the 49 00:03:39,940 --> 00:03:43,920 and and I'm not sure if it's going to hold what it was holding. 50 00:03:44,750 --> 00:03:45,310 Check it out. 51 00:03:45,840 --> 00:03:50,070 Yeah, it's going to hold these four things, but it's not going to hold the type. 52 00:03:50,250 --> 00:03:52,530 So I'm not going to manually put the top there. 53 00:03:53,550 --> 00:03:54,030 Right. 54 00:03:54,390 --> 00:03:55,650 Because I'm going to use the time. 55 00:03:55,710 --> 00:03:59,140 So I'm going to see and we're we're going to get the tag from here. 56 00:03:59,160 --> 00:04:02,220 Gets from input actually from this here. 57 00:04:03,000 --> 00:04:03,550 Right. 58 00:04:03,600 --> 00:04:06,580 So I'm going to put it here, dot type. 59 00:04:07,980 --> 00:04:10,700 Now we're going to test this one insurer in in a minute. 60 00:04:11,100 --> 00:04:19,260 So if your controller will call it an item because it's public function from the app UI controller and 61 00:04:19,260 --> 00:04:26,100 we're going to pass in two here parameters, this is what we have done to look at is how it's scaling 62 00:04:26,460 --> 00:04:27,300 this form. 63 00:04:27,310 --> 00:04:32,060 Input goes into Hewat Gallery and this goes to the next one. 64 00:04:32,250 --> 00:04:33,690 So we are scaling it. 65 00:04:33,840 --> 00:04:38,010 We just go like it's like steps from one step to another. 66 00:04:38,440 --> 00:04:38,900 Yeah. 67 00:04:38,910 --> 00:04:44,220 So there was a method here in a software development, if you want, you can check it out and. 68 00:04:44,220 --> 00:04:48,010 Yeah, so it's a waterfall method and yeah. 69 00:04:48,120 --> 00:04:49,020 You can check that one. 70 00:04:49,890 --> 00:04:58,020 So what we're going to do so here actually our function is empty and we need to grab the object. 71 00:04:59,190 --> 00:05:05,940 So I'm going to say I object just like that and I'm going to sit tight now. 72 00:05:06,330 --> 00:05:09,630 Not like that but come on. 73 00:05:12,120 --> 00:05:15,570 So what I'm going to do is I'm going to say comes along. 74 00:05:17,370 --> 00:05:18,030 I'm going to say. 75 00:05:19,220 --> 00:05:32,540 Type in, plus, I'm going to get the type and let's also check if the object has a description, if 76 00:05:32,540 --> 00:05:37,030 this object contains that one, if that is OK, that means we are golden. 77 00:05:37,040 --> 00:05:43,070 We get to go and we can use that information here and we can display it to the item. 78 00:05:43,940 --> 00:05:50,450 So I'm just going to refresh and close most of the things here and I'm going to say food. 79 00:05:50,720 --> 00:05:53,540 One hundred and fifty. 80 00:05:54,020 --> 00:05:54,500 Yeah. 81 00:05:54,800 --> 00:05:55,880 Or something like that. 82 00:05:55,880 --> 00:05:56,930 And I'm going to hit here. 83 00:05:57,170 --> 00:06:01,430 So the tide is going to be and we didn't space it. 84 00:06:01,430 --> 00:06:05,450 That's why in the description is full, this description. 85 00:06:06,260 --> 00:06:08,600 So this is, ladies and gentlemen, working. 86 00:06:08,600 --> 00:06:10,130 So what we going to do. 87 00:06:10,620 --> 00:06:11,870 It sounds like my father. 88 00:06:11,870 --> 00:06:13,040 This is working. 89 00:06:13,550 --> 00:06:15,080 So what are we going to do here? 90 00:06:16,250 --> 00:06:19,670 We need to find a way how we can manipulate this. 91 00:06:19,820 --> 00:06:21,350 So we're going to do a couple of things here. 92 00:06:22,010 --> 00:06:24,280 I'm going to create a variable here, Mark-Up. 93 00:06:26,050 --> 00:06:33,130 And why need this variable, it's going to be empty here, so this variable will actually contain the 94 00:06:33,130 --> 00:06:41,410 markup for these two containers exercise, whereas the other one in a food slider. 95 00:06:41,420 --> 00:06:41,740 Right. 96 00:06:42,310 --> 00:06:47,680 So actually here, I'm going to copy this food, just going to copy it. 97 00:06:47,680 --> 00:06:49,890 And I'm going to comment this one because we don't need it. 98 00:06:50,310 --> 00:06:52,090 Now, if I go back here, I don't have it. 99 00:06:52,720 --> 00:06:56,860 And I do have some unexpected token probably here. 100 00:06:56,880 --> 00:07:04,030 Yeah, I'm just going to delete that one and now I'm going to put it here. 101 00:07:05,470 --> 00:07:08,920 So what I why I need this. 102 00:07:09,250 --> 00:07:10,530 So it's very simple. 103 00:07:10,540 --> 00:07:17,050 We're going to use this one, but we're going to just replace this calorie, this text with our own 104 00:07:17,050 --> 00:07:18,820 text that is coming from the object. 105 00:07:19,510 --> 00:07:21,580 And yeah, you're going to see it. 106 00:07:21,580 --> 00:07:22,060 Why? 107 00:07:22,210 --> 00:07:25,350 And I'm going to store this markup inside this here. 108 00:07:25,360 --> 00:07:29,200 So how can I do just I'm just going to come in for one second. 109 00:07:30,460 --> 00:07:32,530 Maybe I should create that giffels condition. 110 00:07:33,760 --> 00:07:44,680 So if Taieb is equal to that, then I'm going to say markup will be equal to. 111 00:07:45,670 --> 00:07:47,110 So I'm going to uncommented this one. 112 00:07:47,890 --> 00:07:50,680 I'm going to cut it and I'm going to put a single quotes. 113 00:07:51,010 --> 00:07:54,000 So why are the single post will work. 114 00:07:54,280 --> 00:08:03,400 So in my in my HTML, I do have double quotes and it's working full here because we need to put it in 115 00:08:03,400 --> 00:08:03,880 one line. 116 00:08:03,890 --> 00:08:07,330 We don't there is a spacing too much and this is not working. 117 00:08:07,360 --> 00:08:08,680 So this is going to be a little bit boring. 118 00:08:08,920 --> 00:08:15,430 But I'm just trying to say that this is working because if it was double quotes, it will be interpreted 119 00:08:15,430 --> 00:08:17,920 as a string and here then it will be skipped. 120 00:08:18,220 --> 00:08:24,930 So you can use single quotes in Inside the death and inside this here you can have double quotes. 121 00:08:24,940 --> 00:08:26,620 You can't have single quotes as well. 122 00:08:27,040 --> 00:08:27,410 Right. 123 00:08:28,360 --> 00:08:32,260 If everything here was a single quote outside, you use double quotes. 124 00:08:32,270 --> 00:08:43,060 I hope I'm clear now we need to get rid of that white space and we need to just just just put it in 125 00:08:43,060 --> 00:08:47,650 one line that will be a little bit boring for you guys, but it is what it is. 126 00:08:48,100 --> 00:08:52,900 So we're going to put this entire chunk of HTML here. 127 00:08:53,950 --> 00:08:56,020 I'm going to leave that calorie balance for now. 128 00:08:58,380 --> 00:09:08,550 Yeah, this should go as well, and we don't have too much, but that's pretty much it now, our markup 129 00:09:08,550 --> 00:09:10,740 is pretty much done. 130 00:09:10,860 --> 00:09:12,000 See how long it is. 131 00:09:12,320 --> 00:09:14,580 OK, you don't need to worry about that one. 132 00:09:15,820 --> 00:09:22,110 So the other one is ls if Taib is equal to burn. 133 00:09:24,270 --> 00:09:24,720 Right. 134 00:09:24,750 --> 00:09:32,680 And then I am going to use the same markup but for the exercise. 135 00:09:33,210 --> 00:09:35,910 So this is the container, the slider. 136 00:09:35,910 --> 00:09:42,240 So everything that inside I'm just going to comment and Seimas here inside the slider. 137 00:09:42,240 --> 00:09:47,250 What I have I'm just going to copy control see and I'm going to commentate. 138 00:09:47,700 --> 00:09:48,120 Right. 139 00:09:48,660 --> 00:09:51,690 And I'm just gonna put it here now. 140 00:09:51,690 --> 00:09:52,980 The same story goes here. 141 00:09:53,790 --> 00:09:58,950 I need to I need to make it a little bit faster like that. 142 00:09:58,960 --> 00:09:59,270 Oops. 143 00:10:01,520 --> 00:10:07,100 Make sure you don't delete something by mistake, otherwise, the e-mail, when we finally have the 144 00:10:07,100 --> 00:10:10,910 final I mean, when we have the final 145 00:10:13,400 --> 00:10:17,420 display, when we display that one, finally, it will not look good. 146 00:10:17,710 --> 00:10:17,950 Right? 147 00:10:18,050 --> 00:10:21,320 Because if you delete one tag, it will. 148 00:10:21,320 --> 00:10:24,340 Yeah, it will mess up the entire thing. 149 00:10:25,310 --> 00:10:25,850 No. 150 00:10:27,890 --> 00:10:29,170 OK, we're getting there. 151 00:10:29,180 --> 00:10:29,850 We're getting there. 152 00:10:31,400 --> 00:10:33,530 OK, I need to get rid of this. 153 00:10:35,390 --> 00:10:36,050 What happened? 154 00:10:36,950 --> 00:10:39,270 I hate what I'm doing with this big girl. 155 00:10:40,910 --> 00:10:43,190 OK, now we have done the hardest part. 156 00:10:43,190 --> 00:10:44,020 Is that done? 157 00:10:44,870 --> 00:10:47,240 So we do have in this market variable. 158 00:10:47,240 --> 00:10:50,000 We do have to hold this entire container. 159 00:10:50,190 --> 00:10:53,170 If I save it, if I go now to exercise, it will be empty. 160 00:10:53,450 --> 00:10:57,680 So basically we are going to do is we going to replace this tax here? 161 00:10:58,610 --> 00:11:05,270 We're going to replace it with some from that is coming from our object right now. 162 00:11:05,660 --> 00:11:07,860 It's very easy. 163 00:11:08,150 --> 00:11:15,050 So the next step that we are going to do is probably we need to this lecture is going to be a little 164 00:11:15,050 --> 00:11:16,880 bit longer than the other ones. 165 00:11:17,330 --> 00:11:22,880 But we need to do it like this other way, otherwise it will not work. 166 00:11:23,100 --> 00:11:24,090 OK, no. 167 00:11:25,670 --> 00:11:31,340 So we are done with this and we're going to say here, Dom manipulation. 168 00:11:34,580 --> 00:11:48,320 Now, manipulation and that we should we say we are going to try to place the formal markup back to 169 00:11:48,320 --> 00:11:56,060 the dorm using the replace stream method. 170 00:11:57,560 --> 00:12:03,040 So now I do have one interesting method and I'm here are going to create another variable called additive. 171 00:12:04,910 --> 00:12:08,450 Come on, I'm going to say edit it without caps. 172 00:12:08,450 --> 00:12:10,460 Lock added that. 173 00:12:11,210 --> 00:12:12,290 So I'm going to see. 174 00:12:15,070 --> 00:12:21,730 That market that will be changed, Mark-Up, and you will see why I'm using this so this change market, 175 00:12:21,730 --> 00:12:28,510 what I'm going to do is I'm going to say, OK, I'm going to use that markup that I have on top that 176 00:12:28,510 --> 00:12:28,990 replace. 177 00:12:29,110 --> 00:12:35,320 So the strings have replaced have its own string method that we can use. 178 00:12:35,740 --> 00:12:41,760 So what I can do is actually I can search whatever I like from here, from this markup or from this, 179 00:12:42,160 --> 00:12:43,210 and I can change it. 180 00:12:43,540 --> 00:12:43,870 Right. 181 00:12:44,020 --> 00:12:50,620 Because this markup, when it's for ADD is going to go here and it's going to set this variable to this 182 00:12:50,620 --> 00:12:54,050 container and this to this HTML code. 183 00:12:54,280 --> 00:12:54,680 All right. 184 00:12:55,000 --> 00:13:01,420 So based on our based on our adding, based on the type, we're going to have different markup. 185 00:13:01,430 --> 00:13:04,190 So it's not going to set both markups in one place. 186 00:13:04,210 --> 00:13:13,050 So here what I'm going to say, I want to replace the idea with item object idea. 187 00:13:13,390 --> 00:13:17,200 OK, so now how are we going to do this? 188 00:13:17,980 --> 00:13:21,320 I do have the idea here, but this is not ideal. 189 00:13:21,520 --> 00:13:30,940 So what I want is actually to replace these ideas, these zero here, because the idea is the idea from 190 00:13:31,180 --> 00:13:35,050 our new Kalari that we are returning so it can be zero one two. 191 00:13:35,050 --> 00:13:35,410 Right. 192 00:13:35,770 --> 00:13:42,910 So what we can do here is I'm going to say, OK, I'm going to use percentage and I'm going to say it 193 00:13:42,920 --> 00:13:43,300 here. 194 00:13:43,750 --> 00:13:47,470 And now I can target those percentages. 195 00:13:50,470 --> 00:13:53,240 I can replace it just like that. 196 00:13:53,680 --> 00:13:58,660 So it will look through my code and I need to do use it for the same for the burning. 197 00:13:58,990 --> 00:13:59,310 Right. 198 00:13:59,650 --> 00:14:01,780 It will look through my markup code. 199 00:14:02,800 --> 00:14:05,890 It is for the burn and it will replace that one. 200 00:14:06,370 --> 00:14:12,010 Now, I'm going to copy this entire line and I'm going to say anything markup, but I'm not going to 201 00:14:12,010 --> 00:14:14,490 use this markup because I already replaced the idea. 202 00:14:14,680 --> 00:14:17,440 I just want to continue now to replace what? 203 00:14:17,740 --> 00:14:18,780 The description. 204 00:14:18,970 --> 00:14:27,220 So I'm just going to replace this description and I'm going to use it here, these percentage sign. 205 00:14:27,220 --> 00:14:28,600 And I'm going to say description. 206 00:14:31,610 --> 00:14:39,110 And I'm going to copy the entire thing and also we need to change the description for this here for 207 00:14:39,110 --> 00:14:42,310 the running right in now. 208 00:14:42,610 --> 00:14:49,850 I'm going to say Ed Mark-Up and I'm going to replace the description with item description. 209 00:14:51,050 --> 00:14:53,420 So let's do this. 210 00:14:54,290 --> 00:14:57,950 Let's save this one and see what's happening before doing anything else. 211 00:14:58,250 --> 00:15:02,930 Now, there is a one interesting method that we're going to use. 212 00:15:03,080 --> 00:15:09,410 It's called So I don't string representing the position relative to the element, and that is called 213 00:15:09,410 --> 00:15:12,130 insert a Jast adjacent HMO. 214 00:15:12,440 --> 00:15:22,460 So we have before begin after Biggin, before and after N, but we are going to use. 215 00:15:22,490 --> 00:15:27,140 So if you look up in Internet, I'm just going to show you who it is. 216 00:15:27,890 --> 00:15:35,490 If you go to this, if you just type insert adjacent e-mail and it will give you the developer Mozilla. 217 00:15:36,080 --> 00:15:41,330 And now here we can use this element to insert adjacent in the position and the text. 218 00:15:41,330 --> 00:15:49,400 We have three or four different positions here in what text we want to be there right in actually our 219 00:15:49,400 --> 00:15:50,710 taxes edited markup. 220 00:15:50,990 --> 00:15:58,460 So we're going to use before end because I just want to put it inside where we're just going to show 221 00:15:58,460 --> 00:15:58,670 you. 222 00:15:58,940 --> 00:16:05,210 I just want this new edited markup to be inside this slider here. 223 00:16:05,750 --> 00:16:06,920 So I'm just going to copy it. 224 00:16:07,940 --> 00:16:08,360 Right. 225 00:16:08,780 --> 00:16:11,360 And we do have exercise slider. 226 00:16:12,620 --> 00:16:17,320 And I'm going to go there and I'm going to put it in here for now. 227 00:16:17,360 --> 00:16:20,720 This is a class name and I do have this full slide it right. 228 00:16:22,830 --> 00:16:31,890 And I'm going to put it here now, what I what I'm going to do is also we need to create I'm sorry, 229 00:16:32,190 --> 00:16:34,650 we need here to see Slider. 230 00:16:36,490 --> 00:16:39,840 We need to create another variable slider container. 231 00:16:40,920 --> 00:16:49,480 And that slider container will actually be here and that will be equal to HTML. 232 00:16:49,740 --> 00:16:51,230 You will see what I'm trying to do now. 233 00:16:52,500 --> 00:16:53,620 Let's get rid of that. 234 00:16:53,880 --> 00:16:59,550 Now, this food slider we need to insert in our HTML class names. 235 00:17:00,270 --> 00:17:00,780 Right. 236 00:17:01,560 --> 00:17:07,740 And we can call it food slider class. 237 00:17:08,860 --> 00:17:09,170 Right. 238 00:17:09,930 --> 00:17:10,840 Or just food slider. 239 00:17:10,860 --> 00:17:13,710 Don't worry about in class and put it here then. 240 00:17:13,710 --> 00:17:22,470 We do have exercise slider and we're going to use these exercise slider. 241 00:17:23,510 --> 00:17:28,740 You know, I can use this HTML class names object here and replace it. 242 00:17:28,740 --> 00:17:30,830 Right, because I do have access to that one. 243 00:17:30,990 --> 00:17:36,150 So slider container will be html class names, dot food slider. 244 00:17:36,360 --> 00:17:43,260 Very good in this guy here will be class names, exercise slider. 245 00:17:43,800 --> 00:17:51,210 So that is why I need this to put it here and eliminate the syntax is like this. 246 00:17:51,890 --> 00:18:05,130 OK, now I need here to say document, I need to target that one document query selector and the query 247 00:18:05,130 --> 00:18:12,390 selector will be the slider container if it's four and it will be this slider container. 248 00:18:12,390 --> 00:18:19,170 If it's for burn it will be displayed a container and I'm going to insert these adjacent HTML and the 249 00:18:19,170 --> 00:18:27,030 position will be, as I told you before, and and this will be the edited markup. 250 00:18:28,770 --> 00:18:33,670 So I hope that is going to be the one the result. 251 00:18:33,900 --> 00:18:34,620 So let's see. 252 00:18:35,730 --> 00:18:36,240 Don't worry. 253 00:18:36,240 --> 00:18:39,740 If you don't understand right now, you're going to do understand in a second. 254 00:18:39,750 --> 00:18:41,130 So I'm going to say food. 255 00:18:42,050 --> 00:18:46,530 One hundred and fifty calories and something happened here. 256 00:18:46,530 --> 00:18:46,840 Right. 257 00:18:47,040 --> 00:18:48,840 So if I go back to food, here it is. 258 00:18:49,080 --> 00:18:53,190 I do have the food from this markup. 259 00:18:53,190 --> 00:18:58,950 We target this idea and we put it we target a description which is here. 260 00:18:59,220 --> 00:19:02,940 We replaced it with the op item, object description. 261 00:19:03,180 --> 00:19:10,580 But let's see if we do have the right idea, because this here, this idea of zero. 262 00:19:10,770 --> 00:19:13,460 Now, what will happen if I add another class? 263 00:19:13,860 --> 00:19:19,160 So it will be ice cream, two to twenty two. 264 00:19:19,590 --> 00:19:24,270 So if it if I go back here I will have the ice cream. 265 00:19:24,270 --> 00:19:24,510 Right. 266 00:19:24,510 --> 00:19:33,750 And if I inspect it I should have idea of one y because we do have the array of at which you show you 267 00:19:33,750 --> 00:19:35,730 we do have the zero ninety one. 268 00:19:36,190 --> 00:19:36,500 Right. 269 00:19:36,510 --> 00:19:42,450 We're going to need these ID after that we're going to delete this, this, this div here. 270 00:19:42,930 --> 00:19:44,560 So that is pretty much it. 271 00:19:44,880 --> 00:19:53,010 So what we have done is actually based on the type we create the container, the container which we, 272 00:19:53,020 --> 00:20:03,270 where we are going to at the this markup and in the markup we add this percentage this side, because 273 00:20:03,450 --> 00:20:05,730 after that it will be easily to replace. 274 00:20:05,850 --> 00:20:11,220 If I just leave I d like it is it will replace this one idea. 275 00:20:11,370 --> 00:20:16,530 It will be zero equal at zero and that is not what I want. 276 00:20:16,650 --> 00:20:18,780 It will replace something that I don't want. 277 00:20:18,960 --> 00:20:20,860 And same goes for the description. 278 00:20:21,190 --> 00:20:24,120 Now let's change something else. 279 00:20:24,300 --> 00:20:28,040 I do have one for the calories, right. 280 00:20:29,100 --> 00:20:35,910 Actually you don't see it, but here should be calories in here should be calories as well. 281 00:20:38,770 --> 00:20:45,180 OK, but we need to find the calories, where are the calories we need to find it here, right. 282 00:20:45,700 --> 00:20:53,680 So calorie burn, I do have this here, which is going to put it like this without the clothes. 283 00:20:56,140 --> 00:20:56,640 Right. 284 00:21:00,110 --> 00:21:02,990 And the same goes for the word. 285 00:21:05,810 --> 00:21:07,750 For the running. 286 00:21:07,820 --> 00:21:15,860 OK, now let's see, just going to add one food, one one enter. 287 00:21:16,370 --> 00:21:17,240 Go back here. 288 00:21:19,130 --> 00:21:20,660 Is there one calorie? 289 00:21:20,690 --> 00:21:29,690 OK, let's add exercise running a hundred and 1500 at it. 290 00:21:29,900 --> 00:21:30,890 Go back there. 291 00:21:31,670 --> 00:21:34,160 Here is calorie burn running. 292 00:21:34,580 --> 00:21:35,460 How cool is that? 293 00:21:35,520 --> 00:21:41,990 So if you are happy with this, I'm so happy that we have managed to create an application that is working 294 00:21:41,990 --> 00:21:42,690 for us. 295 00:21:43,130 --> 00:21:46,340 This application is actually changing some things. 296 00:21:46,550 --> 00:21:50,140 So we get the object. 297 00:21:50,870 --> 00:21:52,240 We get the idea. 298 00:21:53,210 --> 00:21:55,340 We get the description, we get the calories. 299 00:21:55,520 --> 00:21:58,960 We inserted back the markup that we just grab it. 300 00:21:58,970 --> 00:22:01,370 I, I do this here. 301 00:22:02,150 --> 00:22:04,190 I leave it intentionally in order to see. 302 00:22:04,370 --> 00:22:07,100 And now I comment because we are not going to need it anymore. 303 00:22:07,370 --> 00:22:08,630 But these are mad. 304 00:22:08,930 --> 00:22:17,690 Dash zero or burn that zero will help us because that will be our ID, that when we are deleting things 305 00:22:17,990 --> 00:22:19,610 we are going to we're going to find them. 306 00:22:19,610 --> 00:22:19,890 Right. 307 00:22:20,540 --> 00:22:27,140 So now if I go here and inspect because this is the first element it will have, OK, that's food I 308 00:22:27,140 --> 00:22:28,370 was thinking about running. 309 00:22:29,570 --> 00:22:33,110 Yeah, it will have a burn of zero. 310 00:22:33,110 --> 00:22:34,610 So if we add it will have another one. 311 00:22:34,670 --> 00:22:35,750 So thank you very much. 312 00:22:35,750 --> 00:22:39,830 I hope you enjoy this one and yet go back through the lecture. 313 00:22:39,830 --> 00:22:43,700 If you didn't understand some words, but is actually pretty much simple. 314 00:22:43,940 --> 00:22:46,160 We, we didn't return anything here. 315 00:22:46,160 --> 00:22:47,750 We returned the edit calorie. 316 00:22:48,680 --> 00:22:54,410 No, we call the function an item from our add calories, main control or function. 317 00:22:54,680 --> 00:22:58,130 And we just passed in this object here in the time. 318 00:22:58,640 --> 00:23:06,020 And based on the type here we choose which HTML markup to change in. 319 00:23:06,260 --> 00:23:13,040 Now, the key key point is that we use to replace this string method replace to replace something from 320 00:23:13,040 --> 00:23:16,390 the markup with our with our values. 321 00:23:16,400 --> 00:23:16,600 Right. 322 00:23:16,610 --> 00:23:18,920 These are the values that we just entered before. 323 00:23:19,130 --> 00:23:19,930 And how cool is that? 324 00:23:20,030 --> 00:23:20,780 It's not finished. 325 00:23:20,990 --> 00:23:22,310 We need to do here. 326 00:23:22,490 --> 00:23:27,470 I need to I need to show the notification and we will do that next time. 327 00:23:27,620 --> 00:23:28,430 So thank you very much. 328 00:23:28,430 --> 00:23:29,780 I will see you in the next one.