WEBVTT 1 00:00:01.440 --> 00:00:05.400 Welcome back to the last lecture of the section. 2 00:00:05.400 --> 00:00:07.680 And so in this one, we're gonna apply 3 00:00:07.680 --> 00:00:09.230 everything that we learned 4 00:00:09.230 --> 00:00:13.093 in the last few videos to Coding Challenge #3. 5 00:00:14.580 --> 00:00:18.200 And this coding challenge basically has two part. 6 00:00:18.200 --> 00:00:20.390 So in the first part, I want you to write 7 00:00:20.390 --> 00:00:23.560 an async function called loadNPause, 8 00:00:23.560 --> 00:00:26.663 which will basically recreate Coding Challenge #2, 9 00:00:27.560 --> 00:00:30.420 but this time using async/await. 10 00:00:30.420 --> 00:00:33.150 And so of course, that is only about the part 11 00:00:33.150 --> 00:00:36.230 where we actually consume the promise. 12 00:00:36.230 --> 00:00:39.640 Then you can compare the two versions that you have 13 00:00:39.640 --> 00:00:42.070 and think about the big differences 14 00:00:42.070 --> 00:00:44.183 and also see which one you like more. 15 00:00:45.320 --> 00:00:46.900 Now in order to do this, 16 00:00:46.900 --> 00:00:51.423 don't forget to set your network tab to Fast 3G. 17 00:00:52.910 --> 00:00:54.000 Alright? 18 00:00:54.000 --> 00:00:55.660 So that's part number one, 19 00:00:55.660 --> 00:00:58.750 basically converting what we did before, 20 00:00:58.750 --> 00:01:00.860 but then comes part number two, 21 00:01:00.860 --> 00:01:03.360 which is again a more difficult one. 22 00:01:03.360 --> 00:01:06.030 And actually in this one, you will do something 23 00:01:06.030 --> 00:01:07.890 that we didn't do before, 24 00:01:07.890 --> 00:01:10.790 but I'm sure that with the instructions here, 25 00:01:10.790 --> 00:01:12.630 you can make it. 26 00:01:12.630 --> 00:01:14.310 So, what I want you to do 27 00:01:14.310 --> 00:01:17.535 is to create an async function loadAll, 28 00:01:17.535 --> 00:01:21.120 and this one receives an array of image path, 29 00:01:21.120 --> 00:01:22.920 and so that's this one. 30 00:01:22.920 --> 00:01:25.400 So it's an array which contains the path 31 00:01:25.400 --> 00:01:30.380 of all three images in the image folder, okay? 32 00:01:30.380 --> 00:01:34.397 So you receive debt array in the function 33 00:01:34.397 --> 00:01:37.020 and then I want you to use the map method 34 00:01:37.020 --> 00:01:41.400 to loop over the array in order to load all the images 35 00:01:41.400 --> 00:01:44.993 that are here in this array with the createImage function. 36 00:01:46.070 --> 00:01:50.483 So this one here where we promise a fight, loading an image. 37 00:01:51.750 --> 00:01:53.280 Okay? 38 00:01:53.280 --> 00:01:57.020 Of course the map method will then result in a new array 39 00:01:57.020 --> 00:02:00.820 and you should call this one images like this. 40 00:02:00.820 --> 00:02:03.630 Now keep in mind that createImage here 41 00:02:03.630 --> 00:02:05.560 will return a promise. 42 00:02:05.560 --> 00:02:08.490 And so the callback function of the map method 43 00:02:08.490 --> 00:02:10.530 needs to be special. 44 00:02:10.530 --> 00:02:13.020 So you need to consume the promise 45 00:02:13.020 --> 00:02:15.290 that comes from createImage 46 00:02:15.290 --> 00:02:17.810 and so therefore, as I said 47 00:02:17.810 --> 00:02:20.070 the callback function in the map method 48 00:02:20.070 --> 00:02:22.560 should be a special type of function. 49 00:02:22.560 --> 00:02:25.640 So I'm not spoiling which function it is, 50 00:02:25.640 --> 00:02:29.200 but hopefully you can guess what I'm talking about. 51 00:02:29.200 --> 00:02:30.550 Alright? 52 00:02:30.550 --> 00:02:33.670 But anyway, next I want you to check out 53 00:02:33.670 --> 00:02:36.170 this images array in the console 54 00:02:36.170 --> 00:02:38.633 and is it what you expected? 55 00:02:39.560 --> 00:02:41.750 So again, here I want you to think 56 00:02:41.750 --> 00:02:44.350 about the results that you get. 57 00:02:44.350 --> 00:02:46.490 So these images array, 58 00:02:46.490 --> 00:02:49.390 and think if you expected it to be like this, 59 00:02:49.390 --> 00:02:51.103 and also if it makes sense, 60 00:02:52.850 --> 00:02:53.683 okay? 61 00:02:53.683 --> 00:02:57.230 And what I just said will make sense once you get there. 62 00:02:57.230 --> 00:02:59.500 Then in the next step, you should use 63 00:02:59.500 --> 00:03:01.740 a promise combinator function 64 00:03:01.740 --> 00:03:05.120 to actually get the images from the array. 65 00:03:05.120 --> 00:03:08.810 So this is a very important hint right there. 66 00:03:08.810 --> 00:03:12.280 line:15% Then finally, you should also add the parallel class 67 00:03:12.280 --> 00:03:14.100 line:15% to all the images. 68 00:03:14.100 --> 00:03:18.230 line:15% And so once again, you should probably loop over the images 69 00:03:18.230 --> 00:03:21.560 line:15% and then to each of them add to this class. 70 00:03:21.560 --> 00:03:23.720 line:15% So again, this part two here 71 00:03:23.720 --> 00:03:26.130 actually contains some new parts 72 00:03:26.130 --> 00:03:28.610 that you will have to figure out on your own 73 00:03:28.610 --> 00:03:31.200 and experiment a little bit with that. 74 00:03:31.200 --> 00:03:33.190 But at this point of the course, 75 00:03:33.190 --> 00:03:35.920 so already pretty deep into it, 76 00:03:35.920 --> 00:03:39.050 it's probably a good idea that you start experimenting 77 00:03:39.050 --> 00:03:41.140 with some stuff on your own. 78 00:03:41.140 --> 00:03:44.470 And so that's why I created this challenge like this. 79 00:03:44.470 --> 00:03:47.870 So good luck with this take all the time that you need 80 00:03:47.870 --> 00:03:49.973 line:15% and then I see you back here. 81 00:03:53.960 --> 00:03:58.590 line:15% Welcome back here to my solution now. 82 00:03:58.590 --> 00:04:01.210 So as you see, I already have all the code here 83 00:04:01.210 --> 00:04:02.430 from Challenge #2 84 00:04:03.340 --> 00:04:06.170 and so what we're going to change now is 85 00:04:06.170 --> 00:04:08.190 basically this part here. 86 00:04:08.190 --> 00:04:12.460 So we will recreate this big then chain 87 00:04:12.460 --> 00:04:14.093 using now async/await. 88 00:04:14.970 --> 00:04:17.303 So the function is called loadNPause, 89 00:04:20.600 --> 00:04:24.820 and it is an async function which doesn't have any arguments 90 00:04:26.040 --> 00:04:27.643 or missing to function keywords. 91 00:04:28.600 --> 00:04:30.850 So it doesn't have any arguments 92 00:04:30.850 --> 00:04:32.480 and so as always, 93 00:04:32.480 --> 00:04:35.630 we need to wrap everything into a try block 94 00:04:38.720 --> 00:04:41.220 and in here here, the error. 95 00:04:41.220 --> 00:04:44.070 And actually right now it is already allowed 96 00:04:44.070 --> 00:04:47.240 to use catch without the error. 97 00:04:47.240 --> 00:04:50.950 So that's new in JavaScript previously that wasn't allowed, 98 00:04:50.950 --> 00:04:54.730 but just to make it consistent, I always used to error here, 99 00:04:54.730 --> 00:04:56.963 even if I then don't need it. 100 00:04:57.800 --> 00:05:01.980 But here let's just log it to the console as always. 101 00:05:01.980 --> 00:05:03.200 Alright. 102 00:05:03.200 --> 00:05:05.900 So here is the first promise. 103 00:05:05.900 --> 00:05:07.660 So this one... 104 00:05:07.660 --> 00:05:10.170 So let's put that here 105 00:05:10.170 --> 00:05:12.540 and since we're using async/await, 106 00:05:12.540 --> 00:05:15.080 I will now await that promise 107 00:05:15.080 --> 00:05:18.340 and store the results into image. 108 00:05:18.340 --> 00:05:21.300 So that's basically the variable that we have here 109 00:05:21.300 --> 00:05:24.510 as the barometer in the then method. 110 00:05:24.510 --> 00:05:27.793 And so that's the same name that makes sense here. 111 00:05:28.830 --> 00:05:29.930 So image, 112 00:05:29.930 --> 00:05:34.150 and let's use one here because we're gonna have multiple 113 00:05:34.150 --> 00:05:36.510 or actually that's not even necessary 114 00:05:36.510 --> 00:05:40.093 because this time we won't need the currentImg variable, 115 00:05:41.650 --> 00:05:42.483 okay? 116 00:05:42.483 --> 00:05:45.870 But more about that once we reach that point. 117 00:05:45.870 --> 00:05:50.180 So again, the image is of course, the result of this 118 00:05:50.180 --> 00:05:52.160 successful promise. 119 00:05:52.160 --> 00:05:52.993 Alright? 120 00:05:52.993 --> 00:05:56.390 And so with that, we already translated this year. 121 00:05:56.390 --> 00:06:00.943 Now what we is to simply log this to the console. 122 00:06:03.140 --> 00:06:07.203 And so here we have Load image 1 already. 123 00:06:08.390 --> 00:06:10.933 Then next up we have this wait. 124 00:06:12.520 --> 00:06:17.340 And so here we can just await for wait 2. 125 00:06:18.460 --> 00:06:19.870 And just like before, 126 00:06:19.870 --> 00:06:23.400 since the weight promise does not have any resolved value, 127 00:06:23.400 --> 00:06:27.253 we actually don't need to save anything to any variable. 128 00:06:28.230 --> 00:06:30.350 So here we basically just pass 129 00:06:30.350 --> 00:06:32.910 the execution for two seconds, 130 00:06:32.910 --> 00:06:35.053 and then what we want to do is this, 131 00:06:36.590 --> 00:06:38.380 but not exactly this, 132 00:06:38.380 --> 00:06:40.600 because now instead of current image, 133 00:06:40.600 --> 00:06:43.290 we can use simply image. 134 00:06:43.290 --> 00:06:45.200 And that's because now we are 135 00:06:45.200 --> 00:06:47.620 still here in the same function 136 00:06:47.620 --> 00:06:49.460 or actually in the same block 137 00:06:49.460 --> 00:06:51.510 and so in the same scope 138 00:06:51.510 --> 00:06:56.510 while here we defined the image in one function, 139 00:06:56.520 --> 00:06:59.650 and then we set the style in another function. 140 00:06:59.650 --> 00:07:02.883 And so then we needed to use this global variable. 141 00:07:03.980 --> 00:07:07.430 So like this, it is a lot better of course. 142 00:07:07.430 --> 00:07:10.683 And so now we just need to do the same for image two. 143 00:07:13.210 --> 00:07:17.110 So, again we don't need the external variable. 144 00:07:17.110 --> 00:07:19.133 We can now simply reassign image. 145 00:07:20.060 --> 00:07:23.203 So image 2, then image 2 loaded, 146 00:07:24.300 --> 00:07:27.223 and the rest works simply exactly the same. 147 00:07:29.200 --> 00:07:31.640 Here let's just change to error 148 00:07:31.640 --> 00:07:35.400 and with that, we should already be good to go. 149 00:07:35.400 --> 00:07:37.090 So loadNPause, 150 00:07:37.090 --> 00:07:39.600 and here let me comment this out 151 00:07:39.600 --> 00:07:42.473 so that the same logic doesn't happen twice. 152 00:07:44.230 --> 00:07:46.203 And so this is already part one. 153 00:07:47.440 --> 00:07:51.018 Let's set on network here to Slow, 154 00:07:51.018 --> 00:07:53.683 or actually Fast 3G, 155 00:07:58.030 --> 00:08:01.180 And let's actually inspect the images arriving here. 156 00:08:01.180 --> 00:08:05.170 So I think that this now part here is really helpful. 157 00:08:05.170 --> 00:08:06.863 So seeing everything arrive, 158 00:08:09.700 --> 00:08:12.400 it's just a bit difficult. 159 00:08:12.400 --> 00:08:14.253 But anyway, let's just try it. 160 00:08:15.890 --> 00:08:18.123 And so here you see the image loading. 161 00:08:21.730 --> 00:08:24.740 And so then here was the waiting time of two seconds 162 00:08:24.740 --> 00:08:27.453 and then the next image loaded and finished. 163 00:08:28.520 --> 00:08:32.240 So again, image 1 loaded during all this time, 164 00:08:32.240 --> 00:08:35.700 then we had or two second waiting time right here. 165 00:08:35.700 --> 00:08:39.190 And then during this time, the second image loaded, 166 00:08:39.190 --> 00:08:42.013 and here we can actually get all this detail about that. 167 00:08:44.080 --> 00:08:46.530 So this is really interesting stuff 168 00:08:46.530 --> 00:08:48.683 if you want to dig deep into this. 169 00:08:49.730 --> 00:08:50.563 Alright? 170 00:08:50.563 --> 00:08:52.663 But anyway, that's part one. 171 00:08:53.500 --> 00:08:56.370 And so now let's go to part two 172 00:08:56.370 --> 00:08:59.787 to create this async function called loadAll 173 00:09:00.630 --> 00:09:02.750 which receives image array. 174 00:09:02.750 --> 00:09:07.500 And then we loop over the array and create an array images. 175 00:09:07.500 --> 00:09:09.893 So just keeping these names in mind. 176 00:09:13.960 --> 00:09:16.303 So part two will be, 177 00:09:18.100 --> 00:09:22.610 loadAll is an async function 178 00:09:22.610 --> 00:09:24.483 which takes an imgArr. 179 00:09:29.370 --> 00:09:32.683 Then is always this block. 180 00:09:33.780 --> 00:09:34.953 So try catch. 181 00:09:36.290 --> 00:09:40.690 And now here, we have to create that images array, 182 00:09:40.690 --> 00:09:45.690 which is the result of imgArr.map. 183 00:09:47.160 --> 00:09:50.920 But now we need to think about the callback function here, 184 00:09:50.920 --> 00:09:52.480 right? 185 00:09:52.480 --> 00:09:55.990 So in each iteration of the array, we have one image 186 00:09:57.110 --> 00:10:00.150 and we want to use the createImage function 187 00:10:02.033 --> 00:10:04.650 to load that image. 188 00:10:04.650 --> 00:10:08.810 Now this function here returns a promise, 189 00:10:08.810 --> 00:10:09.770 right? 190 00:10:09.770 --> 00:10:13.090 And so we should await that promise. 191 00:10:13.090 --> 00:10:15.573 Otherwise nothing is going to happen. 192 00:10:16.620 --> 00:10:20.280 And so here we need to make this function an async function 193 00:10:21.320 --> 00:10:24.643 so that then in there we can use, await. 194 00:10:25.740 --> 00:10:26.573 Alright? 195 00:10:28.500 --> 00:10:32.563 So let's actually pause this one here, just as instructed, 196 00:10:35.270 --> 00:10:40.060 and instead we will call loadAll with 197 00:10:40.060 --> 00:10:41.513 this test array. 198 00:10:44.070 --> 00:10:44.963 Alright. 199 00:10:47.050 --> 00:10:48.980 And then the instruction was also 200 00:10:48.980 --> 00:10:51.103 to check out these images array. 201 00:10:54.320 --> 00:10:55.663 So, images. 202 00:10:57.840 --> 00:10:59.498 Now, okay? 203 00:10:59.498 --> 00:11:02.183 And so now let's take a look at the console. 204 00:11:03.310 --> 00:11:05.823 Let's make it a bit bigger again here. 205 00:11:07.210 --> 00:11:12.210 And so what we got here are actually three promises. 206 00:11:13.000 --> 00:11:15.210 So we have an array of promises 207 00:11:15.210 --> 00:11:18.220 and not the images themselves. 208 00:11:18.220 --> 00:11:21.340 And this is actually a big source of confusion 209 00:11:21.340 --> 00:11:24.240 for most async/await beginners. 210 00:11:24.240 --> 00:11:26.420 And I actually remember really well 211 00:11:26.420 --> 00:11:29.040 when I first stumbled upon this problem 212 00:11:29.040 --> 00:11:32.630 and didn't really understand why this was happening. 213 00:11:32.630 --> 00:11:34.680 However, with all the knowledge 214 00:11:34.680 --> 00:11:37.000 that you just learned in the section, 215 00:11:37.000 --> 00:11:39.070 if we really think about is 216 00:11:39.070 --> 00:11:41.113 then it might actually make sense. 217 00:11:42.400 --> 00:11:46.370 So, here we have an async function, right? 218 00:11:46.370 --> 00:11:48.710 And this is an arrow function. 219 00:11:48.710 --> 00:11:51.290 So we have an implicit return. 220 00:11:51.290 --> 00:11:54.250 So this is like returning something 221 00:11:54.250 --> 00:11:58.240 from this callback function in each iteration, right? 222 00:11:58.240 --> 00:12:00.060 However, as we already know, 223 00:12:00.060 --> 00:12:03.580 an async function will always return a promise 224 00:12:03.580 --> 00:12:07.990 and not really the value that we're interested in, right? 225 00:12:07.990 --> 00:12:10.780 Instead, the value that we want to return 226 00:12:10.780 --> 00:12:14.140 is going to be the fulfilled value of the promise 227 00:12:14.140 --> 00:12:16.330 that the async function returns. 228 00:12:16.330 --> 00:12:17.690 Remember that? 229 00:12:17.690 --> 00:12:20.770 And so that is exactly what is happening here, 230 00:12:20.770 --> 00:12:23.423 but it is happening simply three times. 231 00:12:24.310 --> 00:12:26.680 So we are returning something three times 232 00:12:26.680 --> 00:12:28.840 from an async function here, 233 00:12:28.840 --> 00:12:33.840 and so therefore the result will be three promises, okay? 234 00:12:33.860 --> 00:12:36.220 So just like it happened in that lecture 235 00:12:36.220 --> 00:12:39.140 where we attempted to return a string 236 00:12:39.140 --> 00:12:42.870 from one of the functions, remember that? 237 00:12:42.870 --> 00:12:46.323 So here it is indeed the exact same situation. 238 00:12:47.220 --> 00:12:50.973 So again, we end up with this array of promises, 239 00:12:51.950 --> 00:12:52.910 okay? 240 00:12:52.910 --> 00:12:54.810 But of course behind the scenes, 241 00:12:54.810 --> 00:12:57.020 the images are already being loaded, 242 00:12:57.020 --> 00:12:59.140 and so we're basically fine. 243 00:12:59.140 --> 00:13:01.640 So all we need to do now is to get 244 00:13:01.640 --> 00:13:05.293 these image elements themselves out of the promise. 245 00:13:06.410 --> 00:13:08.870 So how can we do that? 246 00:13:08.870 --> 00:13:11.740 Well, we could take each promise out of the array 247 00:13:11.740 --> 00:13:14.140 and then manually await it, 248 00:13:14.140 --> 00:13:16.570 but that wouldn't make much sense. 249 00:13:16.570 --> 00:13:19.280 First because we would have additional work 250 00:13:19.280 --> 00:13:21.910 and second, because then that work 251 00:13:21.910 --> 00:13:25.860 would not be happening in parallel, right? 252 00:13:25.860 --> 00:13:28.810 But we want it to be happening in parallel 253 00:13:28.810 --> 00:13:31.873 and therefore we can use Promise.all. 254 00:13:33.300 --> 00:13:36.440 So Promise.all is perfect for this 255 00:13:36.440 --> 00:13:39.870 because it already expects an array of images. 256 00:13:39.870 --> 00:13:43.910 And so this images array is already perfect 257 00:13:43.910 --> 00:13:46.823 to handle by dysfunction, 258 00:13:47.740 --> 00:13:48.573 right? 259 00:13:49.540 --> 00:13:51.420 And so now we simply need to 260 00:13:53.240 --> 00:13:55.090 store the image elements here. 261 00:13:55.090 --> 00:13:58.553 So let's call it that into this array. 262 00:14:00.300 --> 00:14:02.943 So let's then take a look at that. 263 00:14:07.450 --> 00:14:11.560 And so now this is of course going to take some time. 264 00:14:11.560 --> 00:14:16.290 So this can only happen once the images are actually loaded. 265 00:14:16.290 --> 00:14:18.573 And so now indeed, here we go. 266 00:14:20.950 --> 00:14:22.410 Alright? 267 00:14:22.410 --> 00:14:26.460 So here are the three image elements and they're now hidden 268 00:14:26.460 --> 00:14:29.753 and so that's why we need to add the parallel class later. 269 00:14:31.150 --> 00:14:35.290 So, again this worked because here in this loop, 270 00:14:35.290 --> 00:14:38.100 of course, the await keyword did its job 271 00:14:38.100 --> 00:14:41.640 of pausing the execution of the function, right? 272 00:14:41.640 --> 00:14:44.130 And so therefore only after that, 273 00:14:44.130 --> 00:14:47.260 we did then Promise.all to actually get 274 00:14:47.260 --> 00:14:51.270 the image elements out of the promises array. 275 00:14:51.270 --> 00:14:53.600 So this was a bit tricky 276 00:14:53.600 --> 00:14:55.690 but maybe you did figure out that 277 00:14:55.690 --> 00:14:57.723 this is how you solve this problem. 278 00:14:58.560 --> 00:15:01.130 So once you need to use async await 279 00:15:01.130 --> 00:15:03.990 in a map method like this, 280 00:15:03.990 --> 00:15:06.530 which believe me is pretty common, 281 00:15:06.530 --> 00:15:09.210 then you end up with an array of promises 282 00:15:09.210 --> 00:15:13.820 that you can then as a next step handle like this. 283 00:15:13.820 --> 00:15:17.143 So with the Promise.all combinator function. 284 00:15:18.320 --> 00:15:21.630 And so now what the next step is actually pretty easy. 285 00:15:21.630 --> 00:15:25.290 All they have to do is to loop over this array 286 00:15:25.290 --> 00:15:27.993 and add the parallel class to it. 287 00:15:28.990 --> 00:15:31.283 So image element. 288 00:15:33.010 --> 00:15:35.630 And so now we don't want a new array. 289 00:15:35.630 --> 00:15:39.423 We simply want to do something on each of the elements. 290 00:15:40.290 --> 00:15:45.290 And so img.classlist.add parallel 291 00:15:47.870 --> 00:15:50.040 like this. 292 00:15:50.040 --> 00:15:52.533 Let's get rid of this console.log here, 293 00:15:54.210 --> 00:15:55.850 and in our network tab... 294 00:15:57.610 --> 00:16:00.073 Oh, this is pretty big. 295 00:16:02.210 --> 00:16:05.353 So you see the images are all loading there now. 296 00:16:06.730 --> 00:16:07.720 Right? 297 00:16:07.720 --> 00:16:09.220 And here we go! 298 00:16:09.220 --> 00:16:12.090 So now we have the images nicely displayed 299 00:16:12.090 --> 00:16:14.250 and set side-by-side. 300 00:16:14.250 --> 00:16:15.210 Let's make it a bit smaller 301 00:16:15.210 --> 00:16:16.943 so we can actually see something. 302 00:16:18.110 --> 00:16:20.350 Now and indeed, there we go. 303 00:16:20.350 --> 00:16:22.700 Let's just see it one more time. 304 00:16:22.700 --> 00:16:25.373 Also here the resources actually loading. 305 00:16:27.750 --> 00:16:29.993 To see it, we need to make it even smaller. 306 00:16:31.250 --> 00:16:32.900 And so you see that down here, 307 00:16:32.900 --> 00:16:35.430 the three images basically started loading 308 00:16:35.430 --> 00:16:37.070 all at the same time, 309 00:16:37.070 --> 00:16:39.710 which is because of this loop here, 310 00:16:39.710 --> 00:16:41.430 which we'll of course execute 311 00:16:41.430 --> 00:16:44.863 these three callback functions, all one after another. 312 00:16:47.260 --> 00:16:50.534 Now, okay? 313 00:16:50.534 --> 00:16:51.367 Alright. 314 00:16:52.800 --> 00:16:57.210 And with this, we are actually finished with this challenge 315 00:16:57.210 --> 00:17:00.140 and also with this whole section. 316 00:17:00.140 --> 00:17:02.110 So make sure that you understood 317 00:17:02.110 --> 00:17:04.680 what we did here in this part two, 318 00:17:04.680 --> 00:17:06.930 because this is pretty important. 319 00:17:06.930 --> 00:17:11.560 But besides that, your job is now done for this section. 320 00:17:11.560 --> 00:17:14.550 So really happy to still see you here 321 00:17:14.550 --> 00:17:16.520 and still learning JavaScript 322 00:17:16.520 --> 00:17:19.260 and still making progress. 323 00:17:19.260 --> 00:17:23.020 So well done, you can be really proud of yourself. 324 00:17:23.020 --> 00:17:24.760 And I really mean that. 325 00:17:24.760 --> 00:17:28.433 And now I see you back here next time in the next section.