WEBVTT 1 00:00:01.150 --> 00:00:03.970 Okay, so let's now implement 2 00:00:03.970 --> 00:00:07.483 the feature of updating recipe servings. 3 00:00:08.920 --> 00:00:12.240 And this time, we're actually starting in the controller, 4 00:00:12.240 --> 00:00:15.993 just so we can outline what we want to happen. 5 00:00:17.350 --> 00:00:21.593 So let's come down here and add yet another controller. 6 00:00:23.830 --> 00:00:28.830 So control servings, let's say. 7 00:00:32.640 --> 00:00:36.520 And I keep calling these functions here, controllers, 8 00:00:36.520 --> 00:00:39.220 but that's just because we're using 9 00:00:39.220 --> 00:00:42.100 the model view controller pattern. 10 00:00:42.100 --> 00:00:45.900 So they could also be called handlers, because in the end, 11 00:00:45.900 --> 00:00:48.820 that's what they are, they are simply event handlers, 12 00:00:48.820 --> 00:00:52.610 that will run whenever some event happens. 13 00:00:52.610 --> 00:00:55.550 Now, in this case, this controller here 14 00:00:55.550 --> 00:00:59.470 will eventually be executed when the user clicks 15 00:00:59.470 --> 00:01:01.380 on one of these buttons here. 16 00:01:01.380 --> 00:01:05.500 So either to decrease, or to increase the servings. 17 00:01:05.500 --> 00:01:10.140 And so that will then increase or decrease this number here, 18 00:01:10.140 --> 00:01:14.747 and also adjust all of these ingredients, right? 19 00:01:17.690 --> 00:01:22.010 So this controller is actually going to be very simple. 20 00:01:22.010 --> 00:01:27.010 All we have to do here is to update the recipe servings, 21 00:01:32.670 --> 00:01:33.703 so in the state. 22 00:01:35.440 --> 00:01:38.203 So basically updating the underlying data. 23 00:01:39.630 --> 00:01:44.630 And then all we have to do is to update the view as well. 24 00:01:44.870 --> 00:01:49.290 So actually updating the recipe view, 25 00:01:49.290 --> 00:01:53.150 because that is of course, the view that will be impacted 26 00:01:53.150 --> 00:01:56.670 by controlling the servings, right? 27 00:01:56.670 --> 00:01:59.280 So in this case, we will actually have no, 28 00:01:59.280 --> 00:02:02.400 like servings view, because these buttons, 29 00:02:02.400 --> 00:02:05.030 and everything that happens when we click on them 30 00:02:05.030 --> 00:02:09.620 is already in the recipe view, all right? 31 00:02:09.620 --> 00:02:13.750 So here, updating the servings in the state 32 00:02:13.750 --> 00:02:16.490 has of course to do with the model. 33 00:02:16.490 --> 00:02:19.300 And so in the model, we would like to have 34 00:02:19.300 --> 00:02:22.260 some method which does that for us. 35 00:02:22.260 --> 00:02:25.480 So as always, we will not want to manipulate data 36 00:02:25.480 --> 00:02:28.020 directly here in a controller, 37 00:02:28.020 --> 00:02:31.380 instead we delegate that task to the model, 38 00:02:31.380 --> 00:02:33.600 which is all about the data. 39 00:02:33.600 --> 00:02:36.490 So again, in the model, we will like to have 40 00:02:36.490 --> 00:02:41.490 a method called update servings, 41 00:02:41.890 --> 00:02:44.890 and then we can pass in the new servings. 42 00:02:44.890 --> 00:02:48.720 So let's just say six here, for experimenting. 43 00:02:48.720 --> 00:02:51.300 And so let's, now go to the model 44 00:02:51.300 --> 00:02:53.123 and actually implement this. 45 00:02:54.770 --> 00:02:58.283 So load recipe, then results, 46 00:02:59.430 --> 00:03:03.863 then here, we will have the update servings function. 47 00:03:06.160 --> 00:03:09.123 And so this will then take in the number of servings, 48 00:03:10.530 --> 00:03:13.083 let's call it new servings, actually. 49 00:03:14.710 --> 00:03:19.230 Now what this function will do is to reach into the state, 50 00:03:19.230 --> 00:03:23.030 and in particular into the recipe ingredients, 51 00:03:23.030 --> 00:03:26.173 and then change the quantity in each ingredient. 52 00:03:27.060 --> 00:03:30.417 So we have state.recipe, 53 00:03:30.417 --> 00:03:35.417 and then we have that ingredients array, ingredients. 54 00:03:36.130 --> 00:03:38.210 And so again, in each ingredient, 55 00:03:38.210 --> 00:03:42.280 we now want to change the quantity property. 56 00:03:42.280 --> 00:03:45.900 So just to remember, again, our data, because I know 57 00:03:45.900 --> 00:03:50.520 this can be quite confusing, let's do a search here, 58 00:03:50.520 --> 00:03:52.170 because that will then change us, 59 00:03:53.060 --> 00:03:55.763 or actually it will show us here some real data. 60 00:03:57.730 --> 00:04:00.033 So here is a recipe. 61 00:04:01.160 --> 00:04:05.063 Ah, this is actually only the search data. 62 00:04:06.160 --> 00:04:10.900 But this is the actual data here, so for the entire recipe. 63 00:04:10.900 --> 00:04:14.250 And so remember that we have two ingredients in there 64 00:04:14.250 --> 00:04:16.290 and each ingredient is an object, 65 00:04:16.290 --> 00:04:18.590 which contains the quantity. 66 00:04:18.590 --> 00:04:21.730 And so this is the quantity we want to change. 67 00:04:21.730 --> 00:04:26.730 For example, here this quantity two is four four servings, 68 00:04:27.130 --> 00:04:29.183 but if we had eight servings, 69 00:04:29.183 --> 00:04:32.670 then the quantity should become eight, right? 70 00:04:32.670 --> 00:04:34.150 So the servings doubled, 71 00:04:34.150 --> 00:04:36.533 and so the quantity needs to double as well. 72 00:04:37.682 --> 00:04:40.980 And so that's the kind of logic that we will write now. 73 00:04:40.980 --> 00:04:43.640 And so, yeah, this was just to show you 74 00:04:43.640 --> 00:04:45.550 that it is the quantity property 75 00:04:45.550 --> 00:04:48.903 inside of the ingredient that we will want to mutate. 76 00:04:52.610 --> 00:04:56.763 So we want to do something for each of these ingredients. 77 00:04:57.800 --> 00:05:01.940 So we don't want a new array, and we could do that also. 78 00:05:01.940 --> 00:05:03.660 So we could create a new array, 79 00:05:03.660 --> 00:05:06.690 and then override state.recipe. 80 00:05:06.690 --> 00:05:08.950 But let's just do it like this. 81 00:05:08.950 --> 00:05:11.163 So basically with side effects. 82 00:05:12.950 --> 00:05:14.690 So in each iteration of the loop, 83 00:05:14.690 --> 00:05:16.990 we have the current ingredient. 84 00:05:16.990 --> 00:05:20.150 And then here, we want to do something with it. 85 00:05:20.150 --> 00:05:22.700 So basically, we want to change it. 86 00:05:22.700 --> 00:05:27.700 So ingredients.quantity, should become something new. 87 00:05:28.470 --> 00:05:31.343 And now how do we calculate this new quantity? 88 00:05:32.270 --> 00:05:35.650 Well, we will basically use this formula. 89 00:05:35.650 --> 00:05:36.950 So let me write that here. 90 00:05:37.800 --> 00:05:42.690 So new quantity equals the old quantity 91 00:05:44.700 --> 00:05:49.700 times the new servings divided by the old servings. 92 00:05:53.880 --> 00:05:57.550 And let's use the example that I mentioned earlier. 93 00:05:57.550 --> 00:06:01.523 So changing from four servings to eight servings. 94 00:06:02.430 --> 00:06:05.563 And I think we had the quantity of two. 95 00:06:06.810 --> 00:06:11.080 So two times, and then the new servings again, 96 00:06:11.080 --> 00:06:14.860 were eight divided by four. 97 00:06:14.860 --> 00:06:19.000 And so this would then be eight divided by four is two, 98 00:06:19.000 --> 00:06:21.200 times two is four. 99 00:06:21.200 --> 00:06:24.920 So again, if we double the servings like this, 100 00:06:24.920 --> 00:06:27.880 then we also need to double the quantity. 101 00:06:27.880 --> 00:06:30.960 So we then multiply the original quantity 102 00:06:30.960 --> 00:06:33.193 by this ratio here, basically. 103 00:06:34.710 --> 00:06:38.220 Now okay, so just basic mathematics here. 104 00:06:38.220 --> 00:06:41.500 And so let's not put this formula here. 105 00:06:41.500 --> 00:06:44.080 So the old quantity is in this case, 106 00:06:44.080 --> 00:06:49.080 also ingredients.quantity, so the original one, 107 00:06:49.250 --> 00:06:52.570 and then times the new servings. 108 00:06:52.570 --> 00:06:54.223 So the one we are getting here, 109 00:06:55.160 --> 00:07:00.160 divided by state.recipe.servings, now, okay. 110 00:07:06.130 --> 00:07:08.763 So with this, we are changing all the ingredients. 111 00:07:09.700 --> 00:07:11.420 In order to finish, of course, 112 00:07:11.420 --> 00:07:15.200 we also need to update the servings in the state. 113 00:07:15.200 --> 00:07:19.020 Because otherwise, if we tried to update the servings twice, 114 00:07:19.020 --> 00:07:22.460 then by the second time, we would still be using 115 00:07:22.460 --> 00:07:24.860 the old value of two servings. 116 00:07:24.860 --> 00:07:27.210 And so of course, we need to update this value. 117 00:07:28.110 --> 00:07:33.110 So state.recipe.servings, needs to be the new servings. 118 00:07:34.330 --> 00:07:37.240 And we're doing that here at the end of the function, 119 00:07:37.240 --> 00:07:41.380 because otherwise, we could not preserve this old. 120 00:07:41.380 --> 00:07:44.763 So this original value here, okay? 121 00:07:45.810 --> 00:07:49.650 So this, we update the servings of the current recipe. 122 00:07:49.650 --> 00:07:53.000 And again, that works because we already have 123 00:07:53.000 --> 00:07:54.503 the recipe in the state. 124 00:07:56.980 --> 00:08:01.780 Okay, and so then we need to simply update the recipe view. 125 00:08:01.780 --> 00:08:05.850 And by now what we will do is to actually simply overwrite 126 00:08:05.850 --> 00:08:07.760 the complete recipe. 127 00:08:07.760 --> 00:08:11.320 So basically, we will simply render it again. 128 00:08:11.320 --> 00:08:15.660 So exactly what we had here actually, in control recipes. 129 00:08:15.660 --> 00:08:19.510 So taking the recipe out of the state, 130 00:08:19.510 --> 00:08:21.143 and then simply rendering it. 131 00:08:22.240 --> 00:08:25.923 So let's copy this down here. 132 00:08:28.900 --> 00:08:31.810 So we do that, because we don't want to 133 00:08:31.810 --> 00:08:34.460 like manually go ahead and 134 00:08:35.690 --> 00:08:38.370 change all these values here one by one. 135 00:08:38.370 --> 00:08:41.600 So we would have to select this element and this element, 136 00:08:41.600 --> 00:08:45.970 and this one, and then manually change all of that. 137 00:08:45.970 --> 00:08:49.190 And the same here for this value, right? 138 00:08:49.190 --> 00:08:51.840 And so we don't want to have all of that work. 139 00:08:51.840 --> 00:08:54.570 And so for now, we will simply, 140 00:08:54.570 --> 00:08:58.910 well update this entire element here again, 141 00:08:58.910 --> 00:09:02.003 so this entire view, okay? 142 00:09:06.130 --> 00:09:09.730 And now let's actually call this controller here, 143 00:09:09.730 --> 00:09:14.730 without having to create the event listener just yet. 144 00:09:14.830 --> 00:09:17.940 So just to test if everything is working. 145 00:09:17.940 --> 00:09:20.573 And so let's do that, after all of this. 146 00:09:21.690 --> 00:09:24.310 So here in the init function at the end, 147 00:09:24.310 --> 00:09:27.143 we call control servings. 148 00:09:28.890 --> 00:09:30.970 And so with this, we can guarantee 149 00:09:30.970 --> 00:09:33.823 that there is already a recipe loaded. 150 00:09:34.880 --> 00:09:38.130 So let's actually use the example of eight here 151 00:09:38.130 --> 00:09:40.363 so that we double the values. 152 00:09:43.010 --> 00:09:45.023 Not well, that's not really working. 153 00:09:49.070 --> 00:09:52.590 There seems to be some kind of bug here. 154 00:09:52.590 --> 00:09:56.810 Oh, and for each is of course, wrong here. 155 00:09:56.810 --> 00:09:59.573 But we also have some other problem here apparently, 156 00:10:00.410 --> 00:10:04.740 which is that we are trying to read for each on undefined. 157 00:10:04.740 --> 00:10:08.090 So let's first fix that small error. 158 00:10:08.090 --> 00:10:10.490 So it's called for each. 159 00:10:10.490 --> 00:10:14.170 And then that other problem actually comes from the fact 160 00:10:14.170 --> 00:10:16.130 that we are doing it wrong. 161 00:10:16.130 --> 00:10:19.800 So we are not taking into account the asynchronous nature 162 00:10:19.800 --> 00:10:21.263 of our application here. 163 00:10:22.280 --> 00:10:27.240 So, basically, here, we are trying to control the servings 164 00:10:27.240 --> 00:10:31.970 simply after registering these handler functions here. 165 00:10:31.970 --> 00:10:36.900 But by that time, no recipe has yet arrived from the API. 166 00:10:36.900 --> 00:10:41.900 And so therefore, state.recipe is not yet defined. 167 00:10:41.960 --> 00:10:44.900 And so here we are then trying to read ingredients 168 00:10:44.900 --> 00:10:48.920 from the recipe that doesn't exist, okay? 169 00:10:48.920 --> 00:10:50.780 Does that make sense? 170 00:10:50.780 --> 00:10:55.000 And this is actually a great demonstration of the pitfalls 171 00:10:55.000 --> 00:10:58.100 of working with Asynchronous JavaScript. 172 00:10:58.100 --> 00:11:02.580 So if we really wanted to test this here right now, 173 00:11:02.580 --> 00:11:06.870 we could probably do that right here, 174 00:11:06.870 --> 00:11:08.793 after we control the recipes. 175 00:11:11.070 --> 00:11:13.253 So basically, after the recipe is loaded. 176 00:11:14.150 --> 00:11:16.433 So let's just temporarily put this here, 177 00:11:17.700 --> 00:11:20.533 or probably even better, right here. 178 00:11:22.224 --> 00:11:25.940 Let's just mark this very clearly as a test, all right? 179 00:11:26.970 --> 00:11:28.960 And let's see what happens now. 180 00:11:28.960 --> 00:11:32.423 Oh, and now we have the eight servings that we want. 181 00:11:33.260 --> 00:11:36.230 And here, these values, they should have changed. 182 00:11:36.230 --> 00:11:39.450 Well, I'm not sure what they looked like before. 183 00:11:39.450 --> 00:11:42.790 But we can reach here now, 184 00:11:42.790 --> 00:11:46.460 but here we also already have the eight servings. 185 00:11:46.460 --> 00:11:49.000 So this is not a good comparison. 186 00:11:49.000 --> 00:11:53.863 But let's try it here with four. 187 00:11:56.820 --> 00:11:58.270 And so we have four. 188 00:11:58.270 --> 00:12:01.030 And yeah, these values are actually half 189 00:12:01.030 --> 00:12:02.820 of what they were before. 190 00:12:02.820 --> 00:12:06.530 And so that means that our update servings function 191 00:12:06.530 --> 00:12:10.770 is already doing its job, so that's great. 192 00:12:10.770 --> 00:12:13.010 So we can remove that from here 193 00:12:13.010 --> 00:12:16.880 because now we will actually want the controller to run 194 00:12:16.880 --> 00:12:21.880 whenever we click one of the buttons in the recipe view. 195 00:12:22.060 --> 00:12:24.420 And so what we will do now is to create 196 00:12:24.420 --> 00:12:27.143 a new event listener in the recipe. 197 00:12:28.240 --> 00:12:30.810 So here in this recipe view. 198 00:12:30.810 --> 00:12:32.860 And again, that's because that's 199 00:12:32.860 --> 00:12:34.920 where these buttons already are. 200 00:12:34.920 --> 00:12:39.920 And so there is no need to create a new, like servings view. 201 00:12:40.070 --> 00:12:43.940 So here, I will simply create a new method. 202 00:12:43.940 --> 00:12:48.940 And as always, it's called add handler and then something. 203 00:12:49.020 --> 00:12:52.640 So here, let's call it update servings, 204 00:12:52.640 --> 00:12:54.610 to make its purpose really clear 205 00:12:56.780 --> 00:13:00.510 and then as always the handler function. 206 00:13:00.510 --> 00:13:03.350 And again, that handler function will of course, 207 00:13:03.350 --> 00:13:07.983 then be debt controller that we just wrote here, okay? 208 00:13:11.070 --> 00:13:14.090 Now, how will we actually do this? 209 00:13:14.090 --> 00:13:17.370 So the parent element here is this whole recipe, 210 00:13:17.370 --> 00:13:19.830 but the elements that we are interested in, 211 00:13:19.830 --> 00:13:21.640 are these two buttons. 212 00:13:21.640 --> 00:13:26.360 So these buttons increase servings, 213 00:13:26.360 --> 00:13:29.230 end button decrease servings. 214 00:13:29.230 --> 00:13:32.650 And the class that they have both in common, 215 00:13:32.650 --> 00:13:36.350 is this button tiny, right 216 00:13:36.350 --> 00:13:38.920 Now, each of these buttons also 217 00:13:38.920 --> 00:13:40.923 has some elements inside of it. 218 00:13:42.430 --> 00:13:45.940 And so yeah, the best way of doing this 219 00:13:45.940 --> 00:13:50.690 is actually once again, doing event delegation. 220 00:13:50.690 --> 00:13:52.990 So we already have the parent element. 221 00:13:52.990 --> 00:13:56.280 And so we can listen for events on that one. 222 00:13:56.280 --> 00:14:01.083 And then check if the click target was one of those buttons. 223 00:14:03.570 --> 00:14:05.970 And so this is actually going to be very similar 224 00:14:05.970 --> 00:14:07.990 to what we did in the last video 225 00:14:07.990 --> 00:14:10.223 with the pagination buttons. 226 00:14:11.450 --> 00:14:14.553 So add event listener, click. 227 00:14:18.880 --> 00:14:22.050 And then here again, we want to actually select 228 00:14:22.050 --> 00:14:27.050 that button element that was clicked or not. 229 00:14:27.160 --> 00:14:31.600 So here we then use again, event.target, 230 00:14:31.600 --> 00:14:33.990 which is the clicked element. 231 00:14:33.990 --> 00:14:38.880 And then once again, we use the closest method, 232 00:14:38.880 --> 00:14:43.370 which is, I think I've said it before, an amazing method, 233 00:14:43.370 --> 00:14:47.580 which is really, really useful for event delegation. 234 00:14:47.580 --> 00:14:50.180 And so again, we are looking for 235 00:14:51.450 --> 00:14:53.593 elements with the button tiny class. 236 00:14:56.620 --> 00:14:59.810 So button tiny and that is important because 237 00:14:59.810 --> 00:15:03.463 the user might click, actually on this. 238 00:15:05.400 --> 00:15:09.930 So on this SVG element instead of the button element itself, 239 00:15:09.930 --> 00:15:13.030 and so then that will basically look 240 00:15:13.030 --> 00:15:17.380 for the closest button tiny, right? 241 00:15:17.380 --> 00:15:19.450 But of course, if we're clicking outside 242 00:15:19.450 --> 00:15:22.060 of any of these buttons, then this closest 243 00:15:22.060 --> 00:15:26.183 will not return any element, it will return null. 244 00:15:27.260 --> 00:15:30.683 And so we need to check for that, just like before. 245 00:15:31.910 --> 00:15:34.500 So if null button, then return. 246 00:15:34.500 --> 00:15:39.420 But otherwise, let's simply for now login to the console. 247 00:15:39.420 --> 00:15:42.853 And so now we need to connect this here with a controller. 248 00:15:44.010 --> 00:15:45.833 And so let's do that. 249 00:15:47.260 --> 00:15:51.020 So that's, and let's actually do this here. 250 00:15:51.020 --> 00:15:53.563 So keep it close to the other recipe view. 251 00:15:54.970 --> 00:15:59.920 So recipe view.add handler update servings, 252 00:15:59.920 --> 00:16:03.883 which will then receive control servings, 253 00:16:05.110 --> 00:16:09.800 so that it can execute our controller function. 254 00:16:09.800 --> 00:16:13.670 And so if we now put some value here, let's say eight, 255 00:16:13.670 --> 00:16:16.560 then that should actually already update the servings 256 00:16:16.560 --> 00:16:19.063 and re render the recipe view. 257 00:16:21.430 --> 00:16:22.363 So let's see. 258 00:16:23.930 --> 00:16:27.323 Let's take a look here at this value and these values here. 259 00:16:29.280 --> 00:16:33.053 Oh, and nothing happened because of course, we didn't call. 260 00:16:34.740 --> 00:16:39.230 So here, we didn't call control recipes yet, right? 261 00:16:39.230 --> 00:16:41.180 So we didn't call the handler function. 262 00:16:42.150 --> 00:16:44.423 But let's actually do that, now, right. 263 00:16:50.820 --> 00:16:55.080 And you see that the number here change to eight. 264 00:16:55.080 --> 00:16:58.313 And here all the values changed as well. 265 00:16:59.700 --> 00:17:01.930 So that's great means again, 266 00:17:01.930 --> 00:17:05.450 that our update servings function is doing its job. 267 00:17:05.450 --> 00:17:09.490 And the same can be set for control servings. 268 00:17:09.490 --> 00:17:12.060 Now, we can also see that 269 00:17:12.060 --> 00:17:14.513 the correct button here was selected. 270 00:17:15.410 --> 00:17:18.660 Now it's actually not showing it anymore, here. 271 00:17:18.660 --> 00:17:23.470 But that's probably because the DOM was re rendered here. 272 00:17:23.470 --> 00:17:26.210 And so this new button is not exactly 273 00:17:26.210 --> 00:17:27.710 this button that we have here. 274 00:17:28.660 --> 00:17:30.260 But that doesn't really matter 275 00:17:30.260 --> 00:17:32.760 because all I wanted was to check 276 00:17:32.760 --> 00:17:36.143 if the selection was correct here, and it was. 277 00:17:37.030 --> 00:17:40.390 So let's try that again now with the increase button, 278 00:17:40.390 --> 00:17:44.547 and watch again what happens with ingredients, okay? 279 00:17:44.547 --> 00:17:48.770 And so here, we got the button increased servings. 280 00:17:48.770 --> 00:17:51.270 Now okay, so we're almost done here. 281 00:17:51.270 --> 00:17:53.670 Now, all we want to do is, of course, 282 00:17:53.670 --> 00:17:56.810 to decrease the value when we click here, 283 00:17:56.810 --> 00:18:01.810 and increase the value when we click the plus button. 284 00:18:01.930 --> 00:18:05.890 And so we don't want to always set the value to eight, 285 00:18:05.890 --> 00:18:08.513 but instead, do that dynamically. 286 00:18:09.410 --> 00:18:13.150 And there are multiple ways in which we can do that. 287 00:18:13.150 --> 00:18:15.193 So let's think about this a little bit. 288 00:18:16.030 --> 00:18:18.240 So we could do it right in the controller 289 00:18:18.240 --> 00:18:20.420 because right here, we already know 290 00:18:20.420 --> 00:18:22.860 what the current number of servings is. 291 00:18:22.860 --> 00:18:25.410 And so then here, we could simply take that, 292 00:18:25.410 --> 00:18:29.490 and decrease or increase that value by one. 293 00:18:29.490 --> 00:18:33.710 And so that would then yield the effect that we want. 294 00:18:33.710 --> 00:18:36.750 However, I would like to keep this controller here 295 00:18:36.750 --> 00:18:40.420 as flexible and as robust as possible. 296 00:18:40.420 --> 00:18:42.600 And so I don't want this controller 297 00:18:42.600 --> 00:18:45.520 to be the one responsible for telling, 298 00:18:45.520 --> 00:18:47.610 which should be the next serving. 299 00:18:47.610 --> 00:18:50.169 So the next number of servings. 300 00:18:50.169 --> 00:18:52.060 So that should come from the view, 301 00:18:52.060 --> 00:18:55.570 and not from the controller, because it is in the view 302 00:18:55.570 --> 00:18:59.680 where the user is actually updating the servings. 303 00:18:59.680 --> 00:19:02.030 And so in order to keep this controller 304 00:19:02.030 --> 00:19:05.800 as flexible as possible, we can simply pass in, 305 00:19:05.800 --> 00:19:07.640 basically the new servings, 306 00:19:07.640 --> 00:19:11.373 and then pass that new servings into update servings. 307 00:19:13.520 --> 00:19:17.193 Okay, so new servings here. 308 00:19:20.040 --> 00:19:22.480 And then use that here as well. 309 00:19:22.480 --> 00:19:26.420 And so now we will determine this new servings in the view, 310 00:19:26.420 --> 00:19:30.210 and pass that value down into this controller, all right? 311 00:19:32.720 --> 00:19:34.740 But now here in this function, 312 00:19:34.740 --> 00:19:37.473 how will we determine the new servings? 313 00:19:38.330 --> 00:19:41.380 Well, once again, here we will need to connect 314 00:19:41.380 --> 00:19:44.110 the user interface with decode. 315 00:19:44.110 --> 00:19:48.900 And as always, for that we use the special data properties. 316 00:19:48.900 --> 00:19:52.820 So let's come to our button or both our buttons 317 00:19:53.780 --> 00:19:56.360 and then add a new property here. 318 00:19:56.360 --> 00:20:00.340 And so then we can read the value from that property 319 00:20:00.340 --> 00:20:03.023 in the Add event listener function. 320 00:20:04.660 --> 00:20:09.603 So let's say data, update, to. 321 00:20:13.090 --> 00:20:17.100 And then here the value should be the current servings, 322 00:20:17.100 --> 00:20:21.600 and plus one, right, because this is the button 323 00:20:21.600 --> 00:20:24.150 to increase the servings, 324 00:20:24.150 --> 00:20:27.350 while actually both are called increase, 325 00:20:27.350 --> 00:20:30.730 but this one has a minus sign. 326 00:20:30.730 --> 00:20:34.210 So this icon here is called icon minus. 327 00:20:34.210 --> 00:20:36.713 So that means that we are decreasing the value. 328 00:20:37.690 --> 00:20:39.860 But anyway, what we want here 329 00:20:39.860 --> 00:20:44.860 is basically the current servings minus one, right? 330 00:20:48.520 --> 00:20:49.990 And then in the other button, 331 00:20:49.990 --> 00:20:52.733 we want the same, but plus one. 332 00:20:53.910 --> 00:20:55.280 So as I said, in the beginning, 333 00:20:55.280 --> 00:20:58.970 this is pretty similar to the pagination buttons, 334 00:20:58.970 --> 00:21:01.790 until let's actually change the increase 335 00:21:02.650 --> 00:21:05.023 that we have in both to update. 336 00:21:07.330 --> 00:21:10.600 Okay, and let's then actually use this class 337 00:21:10.600 --> 00:21:12.120 to select the buttons. 338 00:21:12.120 --> 00:21:14.200 Because button tiny is a class 339 00:21:14.200 --> 00:21:17.270 that is actually more about styling, 340 00:21:17.270 --> 00:21:19.330 and this button update servings 341 00:21:19.330 --> 00:21:24.330 is more about the functionality, so let's use that one here. 342 00:21:26.768 --> 00:21:30.713 And so now we can read, now, of course, that value. 343 00:21:31.740 --> 00:21:36.740 So const update, two equals the button.data set.update to. 344 00:21:47.080 --> 00:21:49.190 Alright, so here updates two as well. 345 00:21:49.190 --> 00:21:51.380 And it has this camel case here, 346 00:21:51.380 --> 00:21:55.600 because when there is a dash in the property name, 347 00:21:55.600 --> 00:22:00.600 then that will be converted to camelcase notation like this. 348 00:22:00.840 --> 00:22:03.093 And here, we can actually use destructuring, 349 00:22:05.110 --> 00:22:07.053 so that makes the code even cleaner. 350 00:22:08.270 --> 00:22:11.473 Then we can pass that value here to update to, 351 00:22:12.330 --> 00:22:15.460 and that's it, right? 352 00:22:15.460 --> 00:22:19.080 Now, here, we just need to convert that to a number, 353 00:22:19.080 --> 00:22:21.963 but besides that, we should be good to go. 354 00:22:23.110 --> 00:22:25.340 So it should be working now. 355 00:22:25.340 --> 00:22:28.230 So instead of changing to the hard coded value of eight 356 00:22:28.230 --> 00:22:31.373 we had before, let's see what happens now. 357 00:22:32.920 --> 00:22:35.780 Now we get undefined servings. 358 00:22:35.780 --> 00:22:38.750 So let's try to understand what's happening. 359 00:22:38.750 --> 00:22:41.310 But at least the button here was correct. 360 00:22:41.310 --> 00:22:43.870 So the value used to be four, 361 00:22:43.870 --> 00:22:46.580 and so the plus button that we clicked 362 00:22:46.580 --> 00:22:50.183 had the data update to, set to five. 363 00:22:51.780 --> 00:22:56.780 Okay, so here, let's simply check the value of update to, 364 00:22:57.040 --> 00:23:00.513 maybe we did something wrong in getting that value. 365 00:23:04.800 --> 00:23:07.483 Yeah, it looks like there is undefined. 366 00:23:08.940 --> 00:23:13.053 So let's go back and check what's going on here. 367 00:23:15.700 --> 00:23:17.220 But it looks correct. 368 00:23:17.220 --> 00:23:22.220 So update to is not spelled wrong, am I right? 369 00:23:22.300 --> 00:23:26.010 Update to, man, so, 370 00:23:26.010 --> 00:23:28.920 well, let's try to get rid of destructuring, 371 00:23:28.920 --> 00:23:33.613 but that shouldn't be the cause, update to, 372 00:23:36.940 --> 00:23:39.050 Oh, and actually, that should be the cause 373 00:23:39.050 --> 00:23:42.310 because of this conversion that we have here. 374 00:23:42.310 --> 00:23:47.310 So I was trying to convert plus a button data set, 375 00:23:47.540 --> 00:23:51.010 and then trying to get update to from there. 376 00:23:51.010 --> 00:23:54.713 So I'm sure that now it will work, but let's see. 377 00:23:57.210 --> 00:24:01.573 And yes, it does, so now we get the number there. 378 00:24:03.530 --> 00:24:07.133 So beautiful, and you see the values changing down there. 379 00:24:09.800 --> 00:24:12.230 And everything works correctly. 380 00:24:12.230 --> 00:24:15.100 Now there's just this flickering of the image here. 381 00:24:15.100 --> 00:24:18.390 But we will take care of that in the next lecture. 382 00:24:18.390 --> 00:24:20.840 For now let's experiment 383 00:24:20.840 --> 00:24:24.270 and see what happens here at a certain point. 384 00:24:24.270 --> 00:24:26.510 So here we reach zero servings, 385 00:24:26.510 --> 00:24:29.220 and then we go even further down. 386 00:24:29.220 --> 00:24:32.390 And so this of course doesn't make any sense. 387 00:24:32.390 --> 00:24:34.873 And so we need to add a check here. 388 00:24:36.610 --> 00:24:40.153 So basically, we only want to call the handler, 389 00:24:41.090 --> 00:24:45.933 if the number we will update to is greater than zero. 390 00:24:47.270 --> 00:24:50.890 So we don't want to update to zero or anything below. 391 00:24:50.890 --> 00:24:55.033 And so then in that case, we simply don't call the handler. 392 00:24:57.440 --> 00:25:00.830 Okay, now here, let's put it back to the structuring 393 00:25:00.830 --> 00:25:02.233 like we had it before. 394 00:25:03.860 --> 00:25:05.680 So I really prefer that. 395 00:25:05.680 --> 00:25:09.150 And then I will simply do the conversion from the string. 396 00:25:09.150 --> 00:25:11.430 So right now this is a string. 397 00:25:11.430 --> 00:25:15.863 So I will simply convert that here, and also here. 398 00:25:18.740 --> 00:25:22.380 I can also get rid of this console.log here 399 00:25:22.380 --> 00:25:26.463 to make the function a bit cleaner, and so let's see again. 400 00:25:27.870 --> 00:25:30.790 So it keeps working here. 401 00:25:30.790 --> 00:25:35.110 But then as we reach one, it doesn't go any further down. 402 00:25:35.110 --> 00:25:39.760 Okay, so beautiful, that works. 403 00:25:39.760 --> 00:25:43.880 But we're still using this kind of hack of updating 404 00:25:43.880 --> 00:25:46.073 the entire view here at once. 405 00:25:47.100 --> 00:25:50.260 So remember, here in the controller, 406 00:25:50.260 --> 00:25:53.110 in order to basically update the recipe view, 407 00:25:53.110 --> 00:25:56.420 we are simply rendering it all over again. 408 00:25:56.420 --> 00:25:58.343 And so that takes some time, 409 00:25:59.220 --> 00:26:01.663 especially noticeable here in the image. 410 00:26:03.190 --> 00:26:06.740 So you see, I think it's basically trying to download 411 00:26:06.740 --> 00:26:11.680 the image again, and so that means, of course, trouble. 412 00:26:11.680 --> 00:26:13.240 And so in the next lecture, 413 00:26:13.240 --> 00:26:15.840 we will develop a simple algorithm, 414 00:26:15.840 --> 00:26:19.530 which will basically only update the DOM in places 415 00:26:19.530 --> 00:26:23.350 where we actually want to update the markup. 416 00:26:23.350 --> 00:26:27.250 So only, for example, this number here, and these numbers, 417 00:26:27.250 --> 00:26:31.050 and leaving everything else the same, 418 00:26:31.050 --> 00:26:33.530 so without re rendering everything, 419 00:26:33.530 --> 00:26:35.920 and that will be a lot of fun. 420 00:26:35.920 --> 00:26:37.763 And so let's go do that next.