WEBVTT 1 00:00:01.180 --> 00:00:04.053 Time for coding challenge number two. 2 00:00:05.520 --> 00:00:09.230 And in this one, your goal is to basically recreate 3 00:00:09.230 --> 00:00:12.540 what I'm just gonna show you here on the screen. 4 00:00:12.540 --> 00:00:14.440 So when I opened the page 5 00:00:14.440 --> 00:00:17.480 then there will be an image loading in the background 6 00:00:17.480 --> 00:00:20.520 and as soon as that arrives it is displayed 7 00:00:20.520 --> 00:00:22.790 and after two seconds it disappears, 8 00:00:22.790 --> 00:00:26.010 and another image starts loading in the background, 9 00:00:26.010 --> 00:00:29.420 it is then also displayed and again, after two seconds 10 00:00:29.420 --> 00:00:32.533 it disappeared and that's actually it. 11 00:00:35.040 --> 00:00:37.870 So that's what I say right here. 12 00:00:37.870 --> 00:00:39.690 And so this time the tasks 13 00:00:39.690 --> 00:00:42.790 are actually not gonna be really descriptive. 14 00:00:42.790 --> 00:00:45.470 And so in this one, you should now pretend 15 00:00:45.470 --> 00:00:48.600 that you're actually working on your own. 16 00:00:48.600 --> 00:00:50.590 So at least a little bit. 17 00:00:50.590 --> 00:00:55.003 And in fact, this challenge is difficult on purpose. 18 00:00:56.091 --> 00:00:58.610 So this is not an easy one 19 00:00:58.610 --> 00:01:02.090 but I hope that with some time and with some effort 20 00:01:02.090 --> 00:01:04.910 and also with revealing everything that we learned 21 00:01:04.910 --> 00:01:07.170 so far in the section, 22 00:01:07.170 --> 00:01:11.070 you can at least complete parts of this challenge. 23 00:01:11.070 --> 00:01:15.770 But anyway let's now, still take a look at your tasks here. 24 00:01:15.770 --> 00:01:19.610 So I want you to create a function called create image 25 00:01:19.610 --> 00:01:24.610 which receives as an input, a variable called image path. 26 00:01:24.650 --> 00:01:27.350 So this is basically the path to an image 27 00:01:27.350 --> 00:01:29.520 that I'll show you in a minute. 28 00:01:29.520 --> 00:01:31.890 Now this function should return a promise 29 00:01:31.890 --> 00:01:34.550 which creates a new image. 30 00:01:34.550 --> 00:01:38.860 So really a new image in the DOM info that you can use 31 00:01:38.860 --> 00:01:43.480 a document.createElement with the image tag. 32 00:01:43.480 --> 00:01:45.510 And so this is how we learn to do it 33 00:01:45.510 --> 00:01:48.633 in the advanced DOM section, right? 34 00:01:49.660 --> 00:01:53.430 So you create that image and you set the source attribute 35 00:01:53.430 --> 00:01:57.510 to the provided image path that you received here. 36 00:01:57.510 --> 00:01:59.280 And as you already know 37 00:01:59.280 --> 00:02:04.260 this setting, the source path is an asynchronous operation. 38 00:02:04.260 --> 00:02:06.690 And so basically your task 39 00:02:06.690 --> 00:02:11.000 in this part one is to promisifying all of that. 40 00:02:11.000 --> 00:02:13.800 So when the image is done loading 41 00:02:13.800 --> 00:02:15.420 you should append that image 42 00:02:15.420 --> 00:02:19.080 to the DOM element that has the images class 43 00:02:19.080 --> 00:02:21.730 and then resolve the promise. 44 00:02:21.730 --> 00:02:24.290 And to fulfill the value of the promise 45 00:02:24.290 --> 00:02:26.633 should be the image element itself. 46 00:02:27.990 --> 00:02:29.600 And in case there is an error 47 00:02:29.600 --> 00:02:31.970 while the image is being loaded, 48 00:02:31.970 --> 00:02:36.490 and so that is the error event that you need to listen for, 49 00:02:36.490 --> 00:02:38.823 so in that case, reject the promise. 50 00:02:39.830 --> 00:02:42.972 And again, if this part is too tricky for you, 51 00:02:42.972 --> 00:02:47.550 then you can always just start watching the solution 52 00:02:47.550 --> 00:02:51.940 at least for this part, all right? 53 00:02:51.940 --> 00:02:54.333 And so after the first part of promisifying, 54 00:02:55.240 --> 00:02:58.933 the image loading comes of course consuming that promise. 55 00:03:00.120 --> 00:03:02.210 So after the image has loaded 56 00:03:02.210 --> 00:03:05.560 I want you to pause the execution for two seconds 57 00:03:05.560 --> 00:03:09.540 using the wait function that we created previously. 58 00:03:09.540 --> 00:03:12.660 Then after these two seconds have passed, 59 00:03:12.660 --> 00:03:14.930 I want you to hide the current image 60 00:03:14.930 --> 00:03:17.060 by setting display to none. 61 00:03:17.060 --> 00:03:20.380 Now then you should load a second image. 62 00:03:20.380 --> 00:03:24.740 Now, in order to hide the current image, my hint here 63 00:03:24.740 --> 00:03:27.760 that you use the image element that was returned 64 00:03:27.760 --> 00:03:30.093 by the create image promise. 65 00:03:31.120 --> 00:03:34.250 So remember that the result value of the promise 66 00:03:34.250 --> 00:03:37.330 should be the actual image element itself. 67 00:03:37.330 --> 00:03:40.720 And so you can use that element to hide it. 68 00:03:40.720 --> 00:03:43.890 You will just need a global variable for that. 69 00:03:43.890 --> 00:03:46.390 But I hope that once you reach this part, 70 00:03:46.390 --> 00:03:48.163 you will notice that for yourself. 71 00:03:49.510 --> 00:03:52.790 Anyway, after the second image has loaded, 72 00:03:52.790 --> 00:03:57.500 so this part here in the step number four, 73 00:03:57.500 --> 00:03:59.150 so after this has happened 74 00:03:59.150 --> 00:04:01.714 I want you to pause execution again, for two seconds. 75 00:04:01.714 --> 00:04:06.330 And then after these two seconds have passed 76 00:04:06.330 --> 00:04:08.193 hide again the current image. 77 00:04:09.240 --> 00:04:14.040 So just to make sure you understood what exactly is needed 78 00:04:14.040 --> 00:04:16.380 this is here what should happen. 79 00:04:16.380 --> 00:04:18.980 So the image is loading, then it's displaying, 80 00:04:18.980 --> 00:04:22.580 then it's hiding and loading again, 81 00:04:22.580 --> 00:04:25.483 and so now it's hidden one more time. 82 00:04:26.660 --> 00:04:30.423 Now the images for doing this are here in this image folder. 83 00:04:31.720 --> 00:04:35.310 And so the path to these images is gonna be image, 84 00:04:35.310 --> 00:04:38.387 so IMG/ and then IMG-1.jpg and IMG-2.jpg. 85 00:04:43.900 --> 00:04:46.260 And here to actually see this effect 86 00:04:46.260 --> 00:04:51.260 go to the network tab and set your speed to fast 3G, 87 00:04:51.760 --> 00:04:55.560 because otherwise the images are going to load too fast 88 00:04:55.560 --> 00:04:57.653 for you to actually see any effect. 89 00:05:00.742 --> 00:05:04.920 So again don't stress if this becomes overwhelming 90 00:05:04.920 --> 00:05:06.690 and too difficult. 91 00:05:06.690 --> 00:05:08.440 So I designed this one on purpose 92 00:05:08.440 --> 00:05:11.110 to be a real challenge for you. 93 00:05:11.110 --> 00:05:14.090 And so if you need to watch parts of the solution, 94 00:05:14.090 --> 00:05:16.163 then don't worry about that at all. 95 00:05:17.670 --> 00:05:20.583 As always what matters is that you actually try. 96 00:05:21.420 --> 00:05:23.800 But anyway, good luck for this one 97 00:05:23.800 --> 00:05:25.510 and take all the time you need 98 00:05:25.510 --> 00:05:27.103 and then I see you back here. 99 00:05:31.010 --> 00:05:33.370 Okay, welcome back. 100 00:05:33.370 --> 00:05:37.140 So I hope that you did at least part of it. 101 00:05:37.140 --> 00:05:41.100 And so let's start with the solution here. 102 00:05:41.100 --> 00:05:46.100 So create image, which should take in an image path. 103 00:05:50.470 --> 00:05:53.510 And then whenever we are promised to find something 104 00:05:53.510 --> 00:05:57.660 we always return in you promise, 105 00:05:57.660 --> 00:06:01.500 and also the promise is always done in the same way, 106 00:06:01.500 --> 00:06:03.170 at least in the beginning. 107 00:06:03.170 --> 00:06:06.255 So we have to resolve function and de reject function 108 00:06:06.255 --> 00:06:10.793 which are received by our executer function. 109 00:06:13.256 --> 00:06:16.040 Now we are told to create a new image 110 00:06:16.040 --> 00:06:19.103 using document.createElement. 111 00:06:21.680 --> 00:06:25.790 And so we want to create an element of the type image 112 00:06:25.790 --> 00:06:26.953 and to that IMG. 113 00:06:27.970 --> 00:06:29.580 And then all we need to do 114 00:06:29.580 --> 00:06:32.650 is to set the source property of that, 115 00:06:32.650 --> 00:06:35.193 to the image path that is received. 116 00:06:37.870 --> 00:06:42.793 And so then on that image, we can wait for the load event. 117 00:06:47.200 --> 00:06:51.790 And so let's see what was the task here. 118 00:06:51.790 --> 00:06:53.270 So when the image is done loading 119 00:06:53.270 --> 00:06:57.090 append it to the DOM element with the images class 120 00:06:57.090 --> 00:07:00.803 and to resolve the promise with the image element itself. 121 00:07:03.680 --> 00:07:08.680 So that's out here select the element with the images class. 122 00:07:10.720 --> 00:07:15.720 So ImgContainer, let's say, dot querySelector images. 123 00:07:21.890 --> 00:07:24.113 Let's just take a look here in the HTML. 124 00:07:25.000 --> 00:07:27.533 And so that's this element here. 125 00:07:33.700 --> 00:07:37.970 And so again we should now append the image to that element. 126 00:07:37.970 --> 00:07:41.900 And so that's, ImgContainer.append, 127 00:07:41.900 --> 00:07:46.210 just again like we learned in the advanced DOM section. 128 00:07:46.210 --> 00:07:48.110 So if you skipped that one, 129 00:07:48.110 --> 00:07:50.803 then maybe you need it to this part of the solution. 130 00:07:53.410 --> 00:07:56.760 But anyway, now we also want to resolve the promise 131 00:07:56.760 --> 00:08:00.750 because this load event of course means 132 00:08:00.750 --> 00:08:03.280 that loading the image was successful. 133 00:08:03.280 --> 00:08:06.680 And so this is where we will then resolve the promise, 134 00:08:06.680 --> 00:08:09.710 so mark it as successful 135 00:08:09.710 --> 00:08:12.733 and remember the resolved value should be the image. 136 00:08:13.810 --> 00:08:18.753 And now we should also listen to the error event, remember? 137 00:08:21.400 --> 00:08:25.710 And so in this case, we will then reject the promise 138 00:08:25.710 --> 00:08:27.873 with a new error as always. 139 00:08:29.190 --> 00:08:31.600 And let's say image not found 140 00:08:31.600 --> 00:08:34.743 because that is probably the most likely error. 141 00:08:37.270 --> 00:08:39.380 So here it actually says 142 00:08:39.380 --> 00:08:41.330 that we should test the error handler 143 00:08:41.330 --> 00:08:43.213 by passing a wrong image path. 144 00:08:44.240 --> 00:08:48.173 And so the error message here that makes sense is this one. 145 00:08:50.890 --> 00:08:54.170 And so this should actually complete part one 146 00:08:54.170 --> 00:08:57.100 and I know that I'm doing it quite fast here 147 00:08:57.100 --> 00:09:01.040 but that's because we actually did many of the things here 148 00:09:01.040 --> 00:09:04.690 already before but simply in a different context 149 00:09:04.690 --> 00:09:08.080 but we already know what resolve and reject do. 150 00:09:08.080 --> 00:09:10.653 And so this, I think should be understandable. 151 00:09:13.110 --> 00:09:16.210 But anyway, let's now handle the fulfilled, 152 00:09:16.210 --> 00:09:19.500 so the successful promise, 153 00:09:19.500 --> 00:09:22.477 and so that's this part here. 154 00:09:22.477 --> 00:09:25.370 And so remember that here we received the image 155 00:09:26.650 --> 00:09:28.003 as the resolved to value. 156 00:09:29.370 --> 00:09:33.150 And I'll actually, we don't need to really do anything here, 157 00:09:33.150 --> 00:09:35.650 so because the image is already 158 00:09:35.650 --> 00:09:39.300 being appended to the DOM up here. 159 00:09:39.300 --> 00:09:41.250 And so for now, at least 160 00:09:41.250 --> 00:09:43.750 we can just lock something to the console, 161 00:09:43.750 --> 00:09:46.500 like image one, load it, 162 00:09:46.500 --> 00:09:50.200 and then a bit later we will actually worry about 163 00:09:50.200 --> 00:09:51.993 waiting these two seconds. 164 00:09:52.960 --> 00:09:54.993 So let's go here to our part. 165 00:09:56.781 --> 00:10:00.260 And of course, I need to actually pass in the path 166 00:10:00.260 --> 00:10:01.203 so the image. 167 00:10:02.160 --> 00:10:04.300 So as I said, that's an image 168 00:10:04.300 --> 00:10:09.300 and VS code is nice enough to give us that path. 169 00:10:10.870 --> 00:10:13.653 And indeed here is the image already. 170 00:10:14.680 --> 00:10:18.623 So as I said, I will just set it here to fast, 3G now. 171 00:10:19.910 --> 00:10:21.940 And so now you see it's taking some time 172 00:10:24.470 --> 00:10:26.890 but eventually it will arrive. 173 00:10:26.890 --> 00:10:29.400 And so as it arrived after that, 174 00:10:29.400 --> 00:10:32.720 then we lock to the console image one loaded. 175 00:10:32.720 --> 00:10:35.140 And so again that happened 176 00:10:35.140 --> 00:10:37.633 because the promise was actually resolved. 177 00:10:39.950 --> 00:10:43.913 That's also right away at the catch handler. 178 00:10:47.840 --> 00:10:50.170 And so here we just want to log the error 179 00:10:51.100 --> 00:10:52.783 and let's format just nicely. 180 00:10:54.870 --> 00:10:57.610 So let's just change the name here 181 00:10:59.690 --> 00:11:04.253 and now we get or error, so image not found. 182 00:11:06.650 --> 00:11:10.320 And so now here, we could do something more realistic 183 00:11:10.320 --> 00:11:12.830 like giving the user a real error message 184 00:11:12.830 --> 00:11:15.530 or something here on the screen, 185 00:11:15.530 --> 00:11:18.313 but in this case that's simply not necessary. 186 00:11:19.900 --> 00:11:24.900 So let's go back here and tackle step number three, 187 00:11:25.200 --> 00:11:28.640 which is to pause the execution for two seconds 188 00:11:28.640 --> 00:11:31.790 using this wait function we created earlier. 189 00:11:31.790 --> 00:11:33.283 So let's grabbed that here. 190 00:11:34.420 --> 00:11:38.817 So this one and I'm gonna put it right here 191 00:11:42.010 --> 00:11:42.923 at the beginning. 192 00:11:45.750 --> 00:11:49.363 And so now in here, we will wait for two seconds. 193 00:11:50.370 --> 00:11:53.460 And so this is gonna return a promise. 194 00:11:53.460 --> 00:11:57.800 So this part here, and so let's now return that 195 00:11:57.800 --> 00:12:02.363 so that we can chain the next then handler on that. 196 00:12:03.530 --> 00:12:06.943 And wait doesn't have any resolved value, remember. 197 00:12:08.628 --> 00:12:13.628 And so we don't specify any argument 198 00:12:13.730 --> 00:12:16.200 or any parameter in this function. 199 00:12:16.200 --> 00:12:18.760 And now remember, here what we want to do, 200 00:12:18.760 --> 00:12:21.500 is to then hide this first image. 201 00:12:21.500 --> 00:12:25.510 So this one, however, this image is only defined 202 00:12:25.510 --> 00:12:28.690 in this function but not in this one. 203 00:12:28.690 --> 00:12:30.750 And so that's why I said previously 204 00:12:30.750 --> 00:12:34.183 that we are going to need a global variable to do that. 205 00:12:35.810 --> 00:12:39.713 So let's do current image. 206 00:12:41.160 --> 00:12:45.830 And then here all we do is to set current image 207 00:12:45.830 --> 00:12:50.830 to the image and then we can hide it right here. 208 00:12:51.440 --> 00:12:55.147 So that's currentImg.style.display set to none. 209 00:13:01.900 --> 00:13:03.400 And so this should load the image 210 00:13:03.400 --> 00:13:06.460 and then after two seconds it will hide it. 211 00:13:06.460 --> 00:13:08.110 So let's the wait for it. 212 00:13:08.110 --> 00:13:11.290 One, two, and there we go. 213 00:13:11.290 --> 00:13:15.080 Great, so we have that working as well. 214 00:13:15.080 --> 00:13:20.080 And now load a second image and yeah, that's actually it. 215 00:13:21.840 --> 00:13:24.760 So then we just have to pause execution again 216 00:13:24.760 --> 00:13:29.430 after two seconds and then height the current image again. 217 00:13:29.430 --> 00:13:32.493 And so this one is now gonna be simply the same. 218 00:13:34.230 --> 00:13:38.013 So where are we going to load the next image? 219 00:13:38.910 --> 00:13:40.940 Well, it's gonna be right here 220 00:13:40.940 --> 00:13:44.300 so that we can then chain the next then handler 221 00:13:44.300 --> 00:13:45.633 into our chain here. 222 00:13:46.520 --> 00:13:48.870 So we will return a new promise 223 00:13:48.870 --> 00:13:51.610 which is the one that is returned 224 00:13:51.610 --> 00:13:55.840 by createImage and this time, 225 00:13:55.840 --> 00:13:59.667 so I'm missing the quotes, now okay, 226 00:14:02.200 --> 00:14:03.493 and then another then. 227 00:14:05.110 --> 00:14:08.262 And so here we are back to receiving an image. 228 00:14:08.262 --> 00:14:10.323 And now let's just do exactly the same. 229 00:14:12.910 --> 00:14:15.320 So we assigned the current image to image 230 00:14:15.320 --> 00:14:18.230 so that in the next step we can then hide it, 231 00:14:18.230 --> 00:14:21.723 then image two load it and we wait two more seconds. 232 00:14:23.207 --> 00:14:25.183 And then in the next handler, 233 00:14:27.860 --> 00:14:30.403 we hide the current image again. 234 00:14:33.080 --> 00:14:34.773 And so let's see. 235 00:14:36.140 --> 00:14:38.180 So after the second image has loaded 236 00:14:38.180 --> 00:14:43.180 pause execution for two seconds again, check that we did. 237 00:14:43.200 --> 00:14:45.140 And then after two seconds have passed 238 00:14:45.140 --> 00:14:49.010 hide to current image, so check again. 239 00:14:49.010 --> 00:14:52.793 So we did both and so our code should be complete now. 240 00:14:53.800 --> 00:14:55.143 And so let's wait for it. 241 00:14:56.660 --> 00:15:00.550 One, two, and there it goes, 242 00:15:00.550 --> 00:15:03.090 so now the second one is loading in the background 243 00:15:03.090 --> 00:15:06.580 and one, two seconds and that's it. 244 00:15:06.580 --> 00:15:10.310 That's our very small mini application 245 00:15:10.310 --> 00:15:12.990 which had the simple goal of showing you 246 00:15:12.990 --> 00:15:16.470 how we can promisify this logic here 247 00:15:16.470 --> 00:15:19.520 of setting the source attribute of an image, 248 00:15:19.520 --> 00:15:22.080 basically asynchronously. 249 00:15:22.080 --> 00:15:25.860 So I hope that you managed to do this part here, 250 00:15:25.860 --> 00:15:27.860 so promisifying all that. 251 00:15:27.860 --> 00:15:30.150 And also then understanding the logic 252 00:15:30.150 --> 00:15:32.400 that I wanted to implement here. 253 00:15:32.400 --> 00:15:34.770 And if you did something a little bit different 254 00:15:34.770 --> 00:15:36.997 then that's of course not a problem at all. 255 00:15:38.480 --> 00:15:39.890 So I keep saying it 256 00:15:39.890 --> 00:15:42.860 but that's just because it's really true. 257 00:15:42.860 --> 00:15:45.270 So what I want is you to try 258 00:15:45.270 --> 00:15:48.070 and to practice and the results will follow. 259 00:15:48.070 --> 00:15:50.583 If not today, then some other day.