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.