Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,150 --> 00:00:03,970 Okay, so let's now implement 2 2 00:00:03,970 --> 00:00:07,483 the feature of updating recipe servings. 3 3 00:00:08,920 --> 00:00:12,240 And this time, we're actually starting in the controller, 4 4 00:00:12,240 --> 00:00:15,993 just so we can outline what we want to happen. 5 5 00:00:17,350 --> 00:00:21,593 So let's come down here and add yet another controller. 6 6 00:00:23,830 --> 00:00:28,830 So control servings, let's say. 7 7 00:00:32,640 --> 00:00:36,520 And I keep calling these functions here, controllers, 8 8 00:00:36,520 --> 00:00:39,220 but that's just because we're using 9 9 00:00:39,220 --> 00:00:42,100 the model view controller pattern. 10 10 00:00:42,100 --> 00:00:45,900 So they could also be called handlers, because in the end, 11 11 00:00:45,900 --> 00:00:48,820 that's what they are, they are simply event handlers, 12 12 00:00:48,820 --> 00:00:52,610 that will run whenever some event happens. 13 13 00:00:52,610 --> 00:00:55,550 Now, in this case, this controller here 14 14 00:00:55,550 --> 00:00:59,470 will eventually be executed when the user clicks 15 15 00:00:59,470 --> 00:01:01,380 on one of these buttons here. 16 16 00:01:01,380 --> 00:01:05,500 So either to decrease, or to increase the servings. 17 17 00:01:05,500 --> 00:01:10,140 And so that will then increase or decrease this number here, 18 18 00:01:10,140 --> 00:01:14,747 and also adjust all of these ingredients, right? 19 19 00:01:17,690 --> 00:01:22,010 So this controller is actually going to be very simple. 20 20 00:01:22,010 --> 00:01:27,010 All we have to do here is to update the recipe servings, 21 21 00:01:32,670 --> 00:01:33,703 so in the state. 22 22 00:01:35,440 --> 00:01:38,203 So basically updating the underlying data. 23 23 00:01:39,630 --> 00:01:44,630 And then all we have to do is to update the view as well. 24 24 00:01:44,870 --> 00:01:49,290 So actually updating the recipe view, 25 25 00:01:49,290 --> 00:01:53,150 because that is of course, the view that will be impacted 26 26 00:01:53,150 --> 00:01:56,670 by controlling the servings, right? 27 27 00:01:56,670 --> 00:01:59,280 So in this case, we will actually have no, 28 28 00:01:59,280 --> 00:02:02,400 like servings view, because these buttons, 29 29 00:02:02,400 --> 00:02:05,030 and everything that happens when we click on them 30 30 00:02:05,030 --> 00:02:09,620 is already in the recipe view, all right? 31 31 00:02:09,620 --> 00:02:13,750 So here, updating the servings in the state 32 32 00:02:13,750 --> 00:02:16,490 has of course to do with the model. 33 33 00:02:16,490 --> 00:02:19,300 And so in the model, we would like to have 34 34 00:02:19,300 --> 00:02:22,260 some method which does that for us. 35 35 00:02:22,260 --> 00:02:25,480 So as always, we will not want to manipulate data 36 36 00:02:25,480 --> 00:02:28,020 directly here in a controller, 37 37 00:02:28,020 --> 00:02:31,380 instead we delegate that task to the model, 38 38 00:02:31,380 --> 00:02:33,600 which is all about the data. 39 39 00:02:33,600 --> 00:02:36,490 So again, in the model, we will like to have 40 40 00:02:36,490 --> 00:02:41,490 a method called update servings, 41 41 00:02:41,890 --> 00:02:44,890 and then we can pass in the new servings. 42 42 00:02:44,890 --> 00:02:48,720 So let's just say six here, for experimenting. 43 43 00:02:48,720 --> 00:02:51,300 And so let's, now go to the model 44 44 00:02:51,300 --> 00:02:53,123 and actually implement this. 45 45 00:02:54,770 --> 00:02:58,283 So load recipe, then results, 46 46 00:02:59,430 --> 00:03:03,863 then here, we will have the update servings function. 47 47 00:03:06,160 --> 00:03:09,123 And so this will then take in the number of servings, 48 48 00:03:10,530 --> 00:03:13,083 let's call it new servings, actually. 49 49 00:03:14,710 --> 00:03:19,230 Now what this function will do is to reach into the state, 50 50 00:03:19,230 --> 00:03:23,030 and in particular into the recipe ingredients, 51 51 00:03:23,030 --> 00:03:26,173 and then change the quantity in each ingredient. 52 52 00:03:27,060 --> 00:03:30,417 So we have state.recipe, 53 53 00:03:30,417 --> 00:03:35,417 and then we have that ingredients array, ingredients. 54 54 00:03:36,130 --> 00:03:38,210 And so again, in each ingredient, 55 55 00:03:38,210 --> 00:03:42,280 we now want to change the quantity property. 56 56 00:03:42,280 --> 00:03:45,900 So just to remember, again, our data, because I know 57 57 00:03:45,900 --> 00:03:50,520 this can be quite confusing, let's do a search here, 58 58 00:03:50,520 --> 00:03:52,170 because that will then change us, 59 59 00:03:53,060 --> 00:03:55,763 or actually it will show us here some real data. 60 60 00:03:57,730 --> 00:04:00,033 So here is a recipe. 61 61 00:04:01,160 --> 00:04:05,063 Ah, this is actually only the search data. 62 62 00:04:06,160 --> 00:04:10,900 But this is the actual data here, so for the entire recipe. 63 63 00:04:10,900 --> 00:04:14,250 And so remember that we have two ingredients in there 64 64 00:04:14,250 --> 00:04:16,290 and each ingredient is an object, 65 65 00:04:16,290 --> 00:04:18,590 which contains the quantity. 66 66 00:04:18,590 --> 00:04:21,730 And so this is the quantity we want to change. 67 67 00:04:21,730 --> 00:04:26,730 For example, here this quantity two is four four servings, 68 68 00:04:27,130 --> 00:04:29,183 but if we had eight servings, 69 69 00:04:29,183 --> 00:04:32,670 then the quantity should become eight, right? 70 70 00:04:32,670 --> 00:04:34,150 So the servings doubled, 71 71 00:04:34,150 --> 00:04:36,533 and so the quantity needs to double as well. 72 72 00:04:37,682 --> 00:04:40,980 And so that's the kind of logic that we will write now. 73 73 00:04:40,980 --> 00:04:43,640 And so, yeah, this was just to show you 74 74 00:04:43,640 --> 00:04:45,550 that it is the quantity property 75 75 00:04:45,550 --> 00:04:48,903 inside of the ingredient that we will want to mutate. 76 76 00:04:52,610 --> 00:04:56,763 So we want to do something for each of these ingredients. 77 77 00:04:57,800 --> 00:05:01,940 So we don't want a new array, and we could do that also. 78 78 00:05:01,940 --> 00:05:03,660 So we could create a new array, 79 79 00:05:03,660 --> 00:05:06,690 and then override state.recipe. 80 80 00:05:06,690 --> 00:05:08,950 But let's just do it like this. 81 81 00:05:08,950 --> 00:05:11,163 So basically with side effects. 82 82 00:05:12,950 --> 00:05:14,690 So in each iteration of the loop, 83 83 00:05:14,690 --> 00:05:16,990 we have the current ingredient. 84 84 00:05:16,990 --> 00:05:20,150 And then here, we want to do something with it. 85 85 00:05:20,150 --> 00:05:22,700 So basically, we want to change it. 86 86 00:05:22,700 --> 00:05:27,700 So ingredients.quantity, should become something new. 87 87 00:05:28,470 --> 00:05:31,343 And now how do we calculate this new quantity? 88 88 00:05:32,270 --> 00:05:35,650 Well, we will basically use this formula. 89 89 00:05:35,650 --> 00:05:36,950 So let me write that here. 90 90 00:05:37,800 --> 00:05:42,690 So new quantity equals the old quantity 91 91 00:05:44,700 --> 00:05:49,700 times the new servings divided by the old servings. 92 92 00:05:53,880 --> 00:05:57,550 And let's use the example that I mentioned earlier. 93 93 00:05:57,550 --> 00:06:01,523 So changing from four servings to eight servings. 94 94 00:06:02,430 --> 00:06:05,563 And I think we had the quantity of two. 95 95 00:06:06,810 --> 00:06:11,080 So two times, and then the new servings again, 96 96 00:06:11,080 --> 00:06:14,860 were eight divided by four. 97 97 00:06:14,860 --> 00:06:19,000 And so this would then be eight divided by four is two, 98 98 00:06:19,000 --> 00:06:21,200 times two is four. 99 99 00:06:21,200 --> 00:06:24,920 So again, if we double the servings like this, 100 100 00:06:24,920 --> 00:06:27,880 then we also need to double the quantity. 101 101 00:06:27,880 --> 00:06:30,960 So we then multiply the original quantity 102 102 00:06:30,960 --> 00:06:33,193 by this ratio here, basically. 103 103 00:06:34,710 --> 00:06:38,220 Now okay, so just basic mathematics here. 104 104 00:06:38,220 --> 00:06:41,500 And so let's not put this formula here. 105 105 00:06:41,500 --> 00:06:44,080 So the old quantity is in this case, 106 106 00:06:44,080 --> 00:06:49,080 also ingredients.quantity, so the original one, 107 107 00:06:49,250 --> 00:06:52,570 and then times the new servings. 108 108 00:06:52,570 --> 00:06:54,223 So the one we are getting here, 109 109 00:06:55,160 --> 00:07:00,160 divided by state.recipe.servings, now, okay. 110 110 00:07:06,130 --> 00:07:08,763 So with this, we are changing all the ingredients. 111 111 00:07:09,700 --> 00:07:11,420 In order to finish, of course, 112 112 00:07:11,420 --> 00:07:15,200 we also need to update the servings in the state. 113 113 00:07:15,200 --> 00:07:19,020 Because otherwise, if we tried to update the servings twice, 114 114 00:07:19,020 --> 00:07:22,460 then by the second time, we would still be using 115 115 00:07:22,460 --> 00:07:24,860 the old value of two servings. 116 116 00:07:24,860 --> 00:07:27,210 And so of course, we need to update this value. 117 117 00:07:28,110 --> 00:07:33,110 So state.recipe.servings, needs to be the new servings. 118 118 00:07:34,330 --> 00:07:37,240 And we're doing that here at the end of the function, 119 119 00:07:37,240 --> 00:07:41,380 because otherwise, we could not preserve this old. 120 120 00:07:41,380 --> 00:07:44,763 So this original value here, okay? 121 121 00:07:45,810 --> 00:07:49,650 So this, we update the servings of the current recipe. 122 122 00:07:49,650 --> 00:07:53,000 And again, that works because we already have 123 123 00:07:53,000 --> 00:07:54,503 the recipe in the state. 124 124 00:07:56,980 --> 00:08:01,780 Okay, and so then we need to simply update the recipe view. 125 125 00:08:01,780 --> 00:08:05,850 And by now what we will do is to actually simply overwrite 126 126 00:08:05,850 --> 00:08:07,760 the complete recipe. 127 127 00:08:07,760 --> 00:08:11,320 So basically, we will simply render it again. 128 128 00:08:11,320 --> 00:08:15,660 So exactly what we had here actually, in control recipes. 129 129 00:08:15,660 --> 00:08:19,510 So taking the recipe out of the state, 130 130 00:08:19,510 --> 00:08:21,143 and then simply rendering it. 131 131 00:08:22,240 --> 00:08:25,923 So let's copy this down here. 132 132 00:08:28,900 --> 00:08:31,810 So we do that, because we don't want to 133 133 00:08:31,810 --> 00:08:34,460 like manually go ahead and 134 134 00:08:35,690 --> 00:08:38,370 change all these values here one by one. 135 135 00:08:38,370 --> 00:08:41,600 So we would have to select this element and this element, 136 136 00:08:41,600 --> 00:08:45,970 and this one, and then manually change all of that. 137 137 00:08:45,970 --> 00:08:49,190 And the same here for this value, right? 138 138 00:08:49,190 --> 00:08:51,840 And so we don't want to have all of that work. 139 139 00:08:51,840 --> 00:08:54,570 And so for now, we will simply, 140 140 00:08:54,570 --> 00:08:58,910 well update this entire element here again, 141 141 00:08:58,910 --> 00:09:02,003 so this entire view, okay? 142 142 00:09:06,130 --> 00:09:09,730 And now let's actually call this controller here, 143 143 00:09:09,730 --> 00:09:14,730 without having to create the event listener just yet. 144 144 00:09:14,830 --> 00:09:17,940 So just to test if everything is working. 145 145 00:09:17,940 --> 00:09:20,573 And so let's do that, after all of this. 146 146 00:09:21,690 --> 00:09:24,310 So here in the init function at the end, 147 147 00:09:24,310 --> 00:09:27,143 we call control servings. 148 148 00:09:28,890 --> 00:09:30,970 And so with this, we can guarantee 149 149 00:09:30,970 --> 00:09:33,823 that there is already a recipe loaded. 150 150 00:09:34,880 --> 00:09:38,130 So let's actually use the example of eight here 151 151 00:09:38,130 --> 00:09:40,363 so that we double the values. 152 152 00:09:43,010 --> 00:09:45,023 Not well, that's not really working. 153 153 00:09:49,070 --> 00:09:52,590 There seems to be some kind of bug here. 154 154 00:09:52,590 --> 00:09:56,810 Oh, and for each is of course, wrong here. 155 155 00:09:56,810 --> 00:09:59,573 But we also have some other problem here apparently, 156 156 00:10:00,410 --> 00:10:04,740 which is that we are trying to read for each on undefined. 157 157 00:10:04,740 --> 00:10:08,090 So let's first fix that small error. 158 158 00:10:08,090 --> 00:10:10,490 So it's called for each. 159 159 00:10:10,490 --> 00:10:14,170 And then that other problem actually comes from the fact 160 160 00:10:14,170 --> 00:10:16,130 that we are doing it wrong. 161 161 00:10:16,130 --> 00:10:19,800 So we are not taking into account the asynchronous nature 162 162 00:10:19,800 --> 00:10:21,263 of our application here. 163 163 00:10:22,280 --> 00:10:27,240 So, basically, here, we are trying to control the servings 164 164 00:10:27,240 --> 00:10:31,970 simply after registering these handler functions here. 165 165 00:10:31,970 --> 00:10:36,900 But by that time, no recipe has yet arrived from the API. 166 166 00:10:36,900 --> 00:10:41,900 And so therefore, state.recipe is not yet defined. 167 167 00:10:41,960 --> 00:10:44,900 And so here we are then trying to read ingredients 168 168 00:10:44,900 --> 00:10:48,920 from the recipe that doesn't exist, okay? 169 169 00:10:48,920 --> 00:10:50,780 Does that make sense? 170 170 00:10:50,780 --> 00:10:55,000 And this is actually a great demonstration of the pitfalls 171 171 00:10:55,000 --> 00:10:58,100 of working with Asynchronous JavaScript. 172 172 00:10:58,100 --> 00:11:02,580 So if we really wanted to test this here right now, 173 173 00:11:02,580 --> 00:11:06,870 we could probably do that right here, 174 174 00:11:06,870 --> 00:11:08,793 after we control the recipes. 175 175 00:11:11,070 --> 00:11:13,253 So basically, after the recipe is loaded. 176 176 00:11:14,150 --> 00:11:16,433 So let's just temporarily put this here, 177 177 00:11:17,700 --> 00:11:20,533 or probably even better, right here. 178 178 00:11:22,224 --> 00:11:25,940 Let's just mark this very clearly as a test, all right? 179 179 00:11:26,970 --> 00:11:28,960 And let's see what happens now. 180 180 00:11:28,960 --> 00:11:32,423 Oh, and now we have the eight servings that we want. 181 181 00:11:33,260 --> 00:11:36,230 And here, these values, they should have changed. 182 182 00:11:36,230 --> 00:11:39,450 Well, I'm not sure what they looked like before. 183 183 00:11:39,450 --> 00:11:42,790 But we can reach here now, 184 184 00:11:42,790 --> 00:11:46,460 but here we also already have the eight servings. 185 185 00:11:46,460 --> 00:11:49,000 So this is not a good comparison. 186 186 00:11:49,000 --> 00:11:53,863 But let's try it here with four. 187 187 00:11:56,820 --> 00:11:58,270 And so we have four. 188 188 00:11:58,270 --> 00:12:01,030 And yeah, these values are actually half 189 189 00:12:01,030 --> 00:12:02,820 of what they were before. 190 190 00:12:02,820 --> 00:12:06,530 And so that means that our update servings function 191 191 00:12:06,530 --> 00:12:10,770 is already doing its job, so that's great. 192 192 00:12:10,770 --> 00:12:13,010 So we can remove that from here 193 193 00:12:13,010 --> 00:12:16,880 because now we will actually want the controller to run 194 194 00:12:16,880 --> 00:12:21,880 whenever we click one of the buttons in the recipe view. 195 195 00:12:22,060 --> 00:12:24,420 And so what we will do now is to create 196 196 00:12:24,420 --> 00:12:27,143 a new event listener in the recipe. 197 197 00:12:28,240 --> 00:12:30,810 So here in this recipe view. 198 198 00:12:30,810 --> 00:12:32,860 And again, that's because that's 199 199 00:12:32,860 --> 00:12:34,920 where these buttons already are. 200 200 00:12:34,920 --> 00:12:39,920 And so there is no need to create a new, like servings view. 201 201 00:12:40,070 --> 00:12:43,940 So here, I will simply create a new method. 202 202 00:12:43,940 --> 00:12:48,940 And as always, it's called add handler and then something. 203 203 00:12:49,020 --> 00:12:52,640 So here, let's call it update servings, 204 204 00:12:52,640 --> 00:12:54,610 to make its purpose really clear 205 205 00:12:56,780 --> 00:13:00,510 and then as always the handler function. 206 206 00:13:00,510 --> 00:13:03,350 And again, that handler function will of course, 207 207 00:13:03,350 --> 00:13:07,983 then be debt controller that we just wrote here, okay? 208 208 00:13:11,070 --> 00:13:14,090 Now, how will we actually do this? 209 209 00:13:14,090 --> 00:13:17,370 So the parent element here is this whole recipe, 210 210 00:13:17,370 --> 00:13:19,830 but the elements that we are interested in, 211 211 00:13:19,830 --> 00:13:21,640 are these two buttons. 212 212 00:13:21,640 --> 00:13:26,360 So these buttons increase servings, 213 213 00:13:26,360 --> 00:13:29,230 end button decrease servings. 214 214 00:13:29,230 --> 00:13:32,650 And the class that they have both in common, 215 215 00:13:32,650 --> 00:13:36,350 is this button tiny, right 216 216 00:13:36,350 --> 00:13:38,920 Now, each of these buttons also 217 217 00:13:38,920 --> 00:13:40,923 has some elements inside of it. 218 218 00:13:42,430 --> 00:13:45,940 And so yeah, the best way of doing this 219 219 00:13:45,940 --> 00:13:50,690 is actually once again, doing event delegation. 220 220 00:13:50,690 --> 00:13:52,990 So we already have the parent element. 221 221 00:13:52,990 --> 00:13:56,280 And so we can listen for events on that one. 222 222 00:13:56,280 --> 00:14:01,083 And then check if the click target was one of those buttons. 223 223 00:14:03,570 --> 00:14:05,970 And so this is actually going to be very similar 224 224 00:14:05,970 --> 00:14:07,990 to what we did in the last video 225 225 00:14:07,990 --> 00:14:10,223 with the pagination buttons. 226 226 00:14:11,450 --> 00:14:14,553 So add event listener, click. 227 227 00:14:18,880 --> 00:14:22,050 And then here again, we want to actually select 228 228 00:14:22,050 --> 00:14:27,050 that button element that was clicked or not. 229 229 00:14:27,160 --> 00:14:31,600 So here we then use again, event.target, 230 230 00:14:31,600 --> 00:14:33,990 which is the clicked element. 231 231 00:14:33,990 --> 00:14:38,880 And then once again, we use the closest method, 232 232 00:14:38,880 --> 00:14:43,370 which is, I think I've said it before, an amazing method, 233 233 00:14:43,370 --> 00:14:47,580 which is really, really useful for event delegation. 234 234 00:14:47,580 --> 00:14:50,180 And so again, we are looking for 235 235 00:14:51,450 --> 00:14:53,593 elements with the button tiny class. 236 236 00:14:56,620 --> 00:14:59,810 So button tiny and that is important because 237 237 00:14:59,810 --> 00:15:03,463 the user might click, actually on this. 238 238 00:15:05,400 --> 00:15:09,930 So on this SVG element instead of the button element itself, 239 239 00:15:09,930 --> 00:15:13,030 and so then that will basically look 240 240 00:15:13,030 --> 00:15:17,380 for the closest button tiny, right? 241 241 00:15:17,380 --> 00:15:19,450 But of course, if we're clicking outside 242 242 00:15:19,450 --> 00:15:22,060 of any of these buttons, then this closest 243 243 00:15:22,060 --> 00:15:26,183 will not return any element, it will return null. 244 244 00:15:27,260 --> 00:15:30,683 And so we need to check for that, just like before. 245 245 00:15:31,910 --> 00:15:34,500 So if null button, then return. 246 246 00:15:34,500 --> 00:15:39,420 But otherwise, let's simply for now login to the console. 247 247 00:15:39,420 --> 00:15:42,853 And so now we need to connect this here with a controller. 248 248 00:15:44,010 --> 00:15:45,833 And so let's do that. 249 249 00:15:47,260 --> 00:15:51,020 So that's, and let's actually do this here. 250 250 00:15:51,020 --> 00:15:53,563 So keep it close to the other recipe view. 251 251 00:15:54,970 --> 00:15:59,920 So recipe view.add handler update servings, 252 252 00:15:59,920 --> 00:16:03,883 which will then receive control servings, 253 253 00:16:05,110 --> 00:16:09,800 so that it can execute our controller function. 254 254 00:16:09,800 --> 00:16:13,670 And so if we now put some value here, let's say eight, 255 255 00:16:13,670 --> 00:16:16,560 then that should actually already update the servings 256 256 00:16:16,560 --> 00:16:19,063 and re render the recipe view. 257 257 00:16:21,430 --> 00:16:22,363 So let's see. 258 258 00:16:23,930 --> 00:16:27,323 Let's take a look here at this value and these values here. 259 259 00:16:29,280 --> 00:16:33,053 Oh, and nothing happened because of course, we didn't call. 260 260 00:16:34,740 --> 00:16:39,230 So here, we didn't call control recipes yet, right? 261 261 00:16:39,230 --> 00:16:41,180 So we didn't call the handler function. 262 262 00:16:42,150 --> 00:16:44,423 But let's actually do that, now, right. 263 263 00:16:50,820 --> 00:16:55,080 And you see that the number here change to eight. 264 264 00:16:55,080 --> 00:16:58,313 And here all the values changed as well. 265 265 00:16:59,700 --> 00:17:01,930 So that's great means again, 266 266 00:17:01,930 --> 00:17:05,450 that our update servings function is doing its job. 267 267 00:17:05,450 --> 00:17:09,490 And the same can be set for control servings. 268 268 00:17:09,490 --> 00:17:12,060 Now, we can also see that 269 269 00:17:12,060 --> 00:17:14,513 the correct button here was selected. 270 270 00:17:15,410 --> 00:17:18,660 Now it's actually not showing it anymore, here. 271 271 00:17:18,660 --> 00:17:23,470 But that's probably because the DOM was re rendered here. 272 272 00:17:23,470 --> 00:17:26,210 And so this new button is not exactly 273 273 00:17:26,210 --> 00:17:27,710 this button that we have here. 274 274 00:17:28,660 --> 00:17:30,260 But that doesn't really matter 275 275 00:17:30,260 --> 00:17:32,760 because all I wanted was to check 276 276 00:17:32,760 --> 00:17:36,143 if the selection was correct here, and it was. 277 277 00:17:37,030 --> 00:17:40,390 So let's try that again now with the increase button, 278 278 00:17:40,390 --> 00:17:44,547 and watch again what happens with ingredients, okay? 279 279 00:17:44,547 --> 00:17:48,770 And so here, we got the button increased servings. 280 280 00:17:48,770 --> 00:17:51,270 Now okay, so we're almost done here. 281 281 00:17:51,270 --> 00:17:53,670 Now, all we want to do is, of course, 282 282 00:17:53,670 --> 00:17:56,810 to decrease the value when we click here, 283 283 00:17:56,810 --> 00:18:01,810 and increase the value when we click the plus button. 284 284 00:18:01,930 --> 00:18:05,890 And so we don't want to always set the value to eight, 285 285 00:18:05,890 --> 00:18:08,513 but instead, do that dynamically. 286 286 00:18:09,410 --> 00:18:13,150 And there are multiple ways in which we can do that. 287 287 00:18:13,150 --> 00:18:15,193 So let's think about this a little bit. 288 288 00:18:16,030 --> 00:18:18,240 So we could do it right in the controller 289 289 00:18:18,240 --> 00:18:20,420 because right here, we already know 290 290 00:18:20,420 --> 00:18:22,860 what the current number of servings is. 291 291 00:18:22,860 --> 00:18:25,410 And so then here, we could simply take that, 292 292 00:18:25,410 --> 00:18:29,490 and decrease or increase that value by one. 293 293 00:18:29,490 --> 00:18:33,710 And so that would then yield the effect that we want. 294 294 00:18:33,710 --> 00:18:36,750 However, I would like to keep this controller here 295 295 00:18:36,750 --> 00:18:40,420 as flexible and as robust as possible. 296 296 00:18:40,420 --> 00:18:42,600 And so I don't want this controller 297 297 00:18:42,600 --> 00:18:45,520 to be the one responsible for telling, 298 298 00:18:45,520 --> 00:18:47,610 which should be the next serving. 299 299 00:18:47,610 --> 00:18:50,169 So the next number of servings. 300 300 00:18:50,169 --> 00:18:52,060 So that should come from the view, 301 301 00:18:52,060 --> 00:18:55,570 and not from the controller, because it is in the view 302 302 00:18:55,570 --> 00:18:59,680 where the user is actually updating the servings. 303 303 00:18:59,680 --> 00:19:02,030 And so in order to keep this controller 304 304 00:19:02,030 --> 00:19:05,800 as flexible as possible, we can simply pass in, 305 305 00:19:05,800 --> 00:19:07,640 basically the new servings, 306 306 00:19:07,640 --> 00:19:11,373 and then pass that new servings into update servings. 307 307 00:19:13,520 --> 00:19:17,193 Okay, so new servings here. 308 308 00:19:20,040 --> 00:19:22,480 And then use that here as well. 309 309 00:19:22,480 --> 00:19:26,420 And so now we will determine this new servings in the view, 310 310 00:19:26,420 --> 00:19:30,210 and pass that value down into this controller, all right? 311 311 00:19:32,720 --> 00:19:34,740 But now here in this function, 312 312 00:19:34,740 --> 00:19:37,473 how will we determine the new servings? 313 313 00:19:38,330 --> 00:19:41,380 Well, once again, here we will need to connect 314 314 00:19:41,380 --> 00:19:44,110 the user interface with decode. 315 315 00:19:44,110 --> 00:19:48,900 And as always, for that we use the special data properties. 316 316 00:19:48,900 --> 00:19:52,820 So let's come to our button or both our buttons 317 317 00:19:53,780 --> 00:19:56,360 and then add a new property here. 318 318 00:19:56,360 --> 00:20:00,340 And so then we can read the value from that property 319 319 00:20:00,340 --> 00:20:03,023 in the Add event listener function. 320 320 00:20:04,660 --> 00:20:09,603 So let's say data, update, to. 321 321 00:20:13,090 --> 00:20:17,100 And then here the value should be the current servings, 322 322 00:20:17,100 --> 00:20:21,600 and plus one, right, because this is the button 323 323 00:20:21,600 --> 00:20:24,150 to increase the servings, 324 324 00:20:24,150 --> 00:20:27,350 while actually both are called increase, 325 325 00:20:27,350 --> 00:20:30,730 but this one has a minus sign. 326 326 00:20:30,730 --> 00:20:34,210 So this icon here is called icon minus. 327 327 00:20:34,210 --> 00:20:36,713 So that means that we are decreasing the value. 328 328 00:20:37,690 --> 00:20:39,860 But anyway, what we want here 329 329 00:20:39,860 --> 00:20:44,860 is basically the current servings minus one, right? 330 330 00:20:48,520 --> 00:20:49,990 And then in the other button, 331 331 00:20:49,990 --> 00:20:52,733 we want the same, but plus one. 332 332 00:20:53,910 --> 00:20:55,280 So as I said, in the beginning, 333 333 00:20:55,280 --> 00:20:58,970 this is pretty similar to the pagination buttons, 334 334 00:20:58,970 --> 00:21:01,790 until let's actually change the increase 335 335 00:21:02,650 --> 00:21:05,023 that we have in both to update. 336 336 00:21:07,330 --> 00:21:10,600 Okay, and let's then actually use this class 337 337 00:21:10,600 --> 00:21:12,120 to select the buttons. 338 338 00:21:12,120 --> 00:21:14,200 Because button tiny is a class 339 339 00:21:14,200 --> 00:21:17,270 that is actually more about styling, 340 340 00:21:17,270 --> 00:21:19,330 and this button update servings 341 341 00:21:19,330 --> 00:21:24,330 is more about the functionality, so let's use that one here. 342 342 00:21:26,768 --> 00:21:30,713 And so now we can read, now, of course, that value. 343 343 00:21:31,740 --> 00:21:36,740 So const update, two equals the button.data set.update to. 344 344 00:21:47,080 --> 00:21:49,190 Alright, so here updates two as well. 345 345 00:21:49,190 --> 00:21:51,380 And it has this camel case here, 346 346 00:21:51,380 --> 00:21:55,600 because when there is a dash in the property name, 347 347 00:21:55,600 --> 00:22:00,600 then that will be converted to camelcase notation like this. 348 348 00:22:00,840 --> 00:22:03,093 And here, we can actually use destructuring, 349 349 00:22:05,110 --> 00:22:07,053 so that makes the code even cleaner. 350 350 00:22:08,270 --> 00:22:11,473 Then we can pass that value here to update to, 351 351 00:22:12,330 --> 00:22:15,460 and that's it, right? 352 352 00:22:15,460 --> 00:22:19,080 Now, here, we just need to convert that to a number, 353 353 00:22:19,080 --> 00:22:21,963 but besides that, we should be good to go. 354 354 00:22:23,110 --> 00:22:25,340 So it should be working now. 355 355 00:22:25,340 --> 00:22:28,230 So instead of changing to the hard coded value of eight 356 356 00:22:28,230 --> 00:22:31,373 we had before, let's see what happens now. 357 357 00:22:32,920 --> 00:22:35,780 Now we get undefined servings. 358 358 00:22:35,780 --> 00:22:38,750 So let's try to understand what's happening. 359 359 00:22:38,750 --> 00:22:41,310 But at least the button here was correct. 360 360 00:22:41,310 --> 00:22:43,870 So the value used to be four, 361 361 00:22:43,870 --> 00:22:46,580 and so the plus button that we clicked 362 362 00:22:46,580 --> 00:22:50,183 had the data update to, set to five. 363 363 00:22:51,780 --> 00:22:56,780 Okay, so here, let's simply check the value of update to, 364 364 00:22:57,040 --> 00:23:00,513 maybe we did something wrong in getting that value. 365 365 00:23:04,800 --> 00:23:07,483 Yeah, it looks like there is undefined. 366 366 00:23:08,940 --> 00:23:13,053 So let's go back and check what's going on here. 367 367 00:23:15,700 --> 00:23:17,220 But it looks correct. 368 368 00:23:17,220 --> 00:23:22,220 So update to is not spelled wrong, am I right? 369 369 00:23:22,300 --> 00:23:26,010 Update to, man, so, 370 370 00:23:26,010 --> 00:23:28,920 well, let's try to get rid of destructuring, 371 371 00:23:28,920 --> 00:23:33,613 but that shouldn't be the cause, update to, 372 372 00:23:36,940 --> 00:23:39,050 Oh, and actually, that should be the cause 373 373 00:23:39,050 --> 00:23:42,310 because of this conversion that we have here. 374 374 00:23:42,310 --> 00:23:47,310 So I was trying to convert plus a button data set, 375 375 00:23:47,540 --> 00:23:51,010 and then trying to get update to from there. 376 376 00:23:51,010 --> 00:23:54,713 So I'm sure that now it will work, but let's see. 377 377 00:23:57,210 --> 00:24:01,573 And yes, it does, so now we get the number there. 378 378 00:24:03,530 --> 00:24:07,133 So beautiful, and you see the values changing down there. 379 379 00:24:09,800 --> 00:24:12,230 And everything works correctly. 380 380 00:24:12,230 --> 00:24:15,100 Now there's just this flickering of the image here. 381 381 00:24:15,100 --> 00:24:18,390 But we will take care of that in the next lecture. 382 382 00:24:18,390 --> 00:24:20,840 For now let's experiment 383 383 00:24:20,840 --> 00:24:24,270 and see what happens here at a certain point. 384 384 00:24:24,270 --> 00:24:26,510 So here we reach zero servings, 385 385 00:24:26,510 --> 00:24:29,220 and then we go even further down. 386 386 00:24:29,220 --> 00:24:32,390 And so this of course doesn't make any sense. 387 387 00:24:32,390 --> 00:24:34,873 And so we need to add a check here. 388 388 00:24:36,610 --> 00:24:40,153 So basically, we only want to call the handler, 389 389 00:24:41,090 --> 00:24:45,933 if the number we will update to is greater than zero. 390 390 00:24:47,270 --> 00:24:50,890 So we don't want to update to zero or anything below. 391 391 00:24:50,890 --> 00:24:55,033 And so then in that case, we simply don't call the handler. 392 392 00:24:57,440 --> 00:25:00,830 Okay, now here, let's put it back to the structuring 393 393 00:25:00,830 --> 00:25:02,233 like we had it before. 394 394 00:25:03,860 --> 00:25:05,680 So I really prefer that. 395 395 00:25:05,680 --> 00:25:09,150 And then I will simply do the conversion from the string. 396 396 00:25:09,150 --> 00:25:11,430 So right now this is a string. 397 397 00:25:11,430 --> 00:25:15,863 So I will simply convert that here, and also here. 398 398 00:25:18,740 --> 00:25:22,380 I can also get rid of this console.log here 399 399 00:25:22,380 --> 00:25:26,463 to make the function a bit cleaner, and so let's see again. 400 400 00:25:27,870 --> 00:25:30,790 So it keeps working here. 401 401 00:25:30,790 --> 00:25:35,110 But then as we reach one, it doesn't go any further down. 402 402 00:25:35,110 --> 00:25:39,760 Okay, so beautiful, that works. 403 403 00:25:39,760 --> 00:25:43,880 But we're still using this kind of hack of updating 404 404 00:25:43,880 --> 00:25:46,073 the entire view here at once. 405 405 00:25:47,100 --> 00:25:50,260 So remember, here in the controller, 406 406 00:25:50,260 --> 00:25:53,110 in order to basically update the recipe view, 407 407 00:25:53,110 --> 00:25:56,420 we are simply rendering it all over again. 408 408 00:25:56,420 --> 00:25:58,343 And so that takes some time, 409 409 00:25:59,220 --> 00:26:01,663 especially noticeable here in the image. 410 410 00:26:03,190 --> 00:26:06,740 So you see, I think it's basically trying to download 411 411 00:26:06,740 --> 00:26:11,680 the image again, and so that means, of course, trouble. 412 412 00:26:11,680 --> 00:26:13,240 And so in the next lecture, 413 413 00:26:13,240 --> 00:26:15,840 we will develop a simple algorithm, 414 414 00:26:15,840 --> 00:26:19,530 which will basically only update the DOM in places 415 415 00:26:19,530 --> 00:26:23,350 where we actually want to update the markup. 416 416 00:26:23,350 --> 00:26:27,250 So only, for example, this number here, and these numbers, 417 417 00:26:27,250 --> 00:26:31,050 and leaving everything else the same, 418 418 00:26:31,050 --> 00:26:33,530 so without re rendering everything, 419 419 00:26:33,530 --> 00:26:35,920 and that will be a lot of fun. 420 420 00:26:35,920 --> 00:26:37,763 And so let's go do that next. 37810