Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,180 --> 00:00:04,053
Time for coding challenge number two.
2
2
00:00:05,520 --> 00:00:09,230
And in this one, your goal is to basically recreate
3
3
00:00:09,230 --> 00:00:12,540
what I'm just gonna show you here on the screen.
4
4
00:00:12,540 --> 00:00:14,440
So when I opened the page
5
5
00:00:14,440 --> 00:00:17,480
then there will be an image loading in the background
6
6
00:00:17,480 --> 00:00:20,520
and as soon as that arrives it is displayed
7
7
00:00:20,520 --> 00:00:22,790
and after two seconds it disappears,
8
8
00:00:22,790 --> 00:00:26,010
and another image starts loading in the background,
9
9
00:00:26,010 --> 00:00:29,420
it is then also displayed and again, after two seconds
10
10
00:00:29,420 --> 00:00:32,533
it disappeared and that's actually it.
11
11
00:00:35,040 --> 00:00:37,870
So that's what I say right here.
12
12
00:00:37,870 --> 00:00:39,690
And so this time the tasks
13
13
00:00:39,690 --> 00:00:42,790
are actually not gonna be really descriptive.
14
14
00:00:42,790 --> 00:00:45,470
And so in this one, you should now pretend
15
15
00:00:45,470 --> 00:00:48,600
that you're actually working on your own.
16
16
00:00:48,600 --> 00:00:50,590
So at least a little bit.
17
17
00:00:50,590 --> 00:00:55,003
And in fact, this challenge is difficult on purpose.
18
18
00:00:56,091 --> 00:00:58,610
So this is not an easy one
19
19
00:00:58,610 --> 00:01:02,090
but I hope that with some time and with some effort
20
20
00:01:02,090 --> 00:01:04,910
and also with revealing everything that we learned
21
21
00:01:04,910 --> 00:01:07,170
so far in the section,
22
22
00:01:07,170 --> 00:01:11,070
you can at least complete parts of this challenge.
23
23
00:01:11,070 --> 00:01:15,770
But anyway let's now, still take a look at your tasks here.
24
24
00:01:15,770 --> 00:01:19,610
So I want you to create a function called create image
25
25
00:01:19,610 --> 00:01:24,610
which receives as an input, a variable called image path.
26
26
00:01:24,650 --> 00:01:27,350
So this is basically the path to an image
27
27
00:01:27,350 --> 00:01:29,520
that I'll show you in a minute.
28
28
00:01:29,520 --> 00:01:31,890
Now this function should return a promise
29
29
00:01:31,890 --> 00:01:34,550
which creates a new image.
30
30
00:01:34,550 --> 00:01:38,860
So really a new image in the DOM info that you can use
31
31
00:01:38,860 --> 00:01:43,480
a document.createElement with the image tag.
32
32
00:01:43,480 --> 00:01:45,510
And so this is how we learn to do it
33
33
00:01:45,510 --> 00:01:48,633
in the advanced DOM section, right?
34
34
00:01:49,660 --> 00:01:53,430
So you create that image and you set the source attribute
35
35
00:01:53,430 --> 00:01:57,510
to the provided image path that you received here.
36
36
00:01:57,510 --> 00:01:59,280
And as you already know
37
37
00:01:59,280 --> 00:02:04,260
this setting, the source path is an asynchronous operation.
38
38
00:02:04,260 --> 00:02:06,690
And so basically your task
39
39
00:02:06,690 --> 00:02:11,000
in this part one is to promisifying all of that.
40
40
00:02:11,000 --> 00:02:13,800
So when the image is done loading
41
41
00:02:13,800 --> 00:02:15,420
you should append that image
42
42
00:02:15,420 --> 00:02:19,080
to the DOM element that has the images class
43
43
00:02:19,080 --> 00:02:21,730
and then resolve the promise.
44
44
00:02:21,730 --> 00:02:24,290
And to fulfill the value of the promise
45
45
00:02:24,290 --> 00:02:26,633
should be the image element itself.
46
46
00:02:27,990 --> 00:02:29,600
And in case there is an error
47
47
00:02:29,600 --> 00:02:31,970
while the image is being loaded,
48
48
00:02:31,970 --> 00:02:36,490
and so that is the error event that you need to listen for,
49
49
00:02:36,490 --> 00:02:38,823
so in that case, reject the promise.
50
50
00:02:39,830 --> 00:02:42,972
And again, if this part is too tricky for you,
51
51
00:02:42,972 --> 00:02:47,550
then you can always just start watching the solution
52
52
00:02:47,550 --> 00:02:51,940
at least for this part, all right?
53
53
00:02:51,940 --> 00:02:54,333
And so after the first part of promisifying,
54
54
00:02:55,240 --> 00:02:58,933
the image loading comes of course consuming that promise.
55
55
00:03:00,120 --> 00:03:02,210
So after the image has loaded
56
56
00:03:02,210 --> 00:03:05,560
I want you to pause the execution for two seconds
57
57
00:03:05,560 --> 00:03:09,540
using the wait function that we created previously.
58
58
00:03:09,540 --> 00:03:12,660
Then after these two seconds have passed,
59
59
00:03:12,660 --> 00:03:14,930
I want you to hide the current image
60
60
00:03:14,930 --> 00:03:17,060
by setting display to none.
61
61
00:03:17,060 --> 00:03:20,380
Now then you should load a second image.
62
62
00:03:20,380 --> 00:03:24,740
Now, in order to hide the current image, my hint here
63
63
00:03:24,740 --> 00:03:27,760
that you use the image element that was returned
64
64
00:03:27,760 --> 00:03:30,093
by the create image promise.
65
65
00:03:31,120 --> 00:03:34,250
So remember that the result value of the promise
66
66
00:03:34,250 --> 00:03:37,330
should be the actual image element itself.
67
67
00:03:37,330 --> 00:03:40,720
And so you can use that element to hide it.
68
68
00:03:40,720 --> 00:03:43,890
You will just need a global variable for that.
69
69
00:03:43,890 --> 00:03:46,390
But I hope that once you reach this part,
70
70
00:03:46,390 --> 00:03:48,163
you will notice that for yourself.
71
71
00:03:49,510 --> 00:03:52,790
Anyway, after the second image has loaded,
72
72
00:03:52,790 --> 00:03:57,500
so this part here in the step number four,
73
73
00:03:57,500 --> 00:03:59,150
so after this has happened
74
74
00:03:59,150 --> 00:04:01,714
I want you to pause execution again, for two seconds.
75
75
00:04:01,714 --> 00:04:06,330
And then after these two seconds have passed
76
76
00:04:06,330 --> 00:04:08,193
hide again the current image.
77
77
00:04:09,240 --> 00:04:14,040
So just to make sure you understood what exactly is needed
78
78
00:04:14,040 --> 00:04:16,380
this is here what should happen.
79
79
00:04:16,380 --> 00:04:18,980
So the image is loading, then it's displaying,
80
80
00:04:18,980 --> 00:04:22,580
then it's hiding and loading again,
81
81
00:04:22,580 --> 00:04:25,483
and so now it's hidden one more time.
82
82
00:04:26,660 --> 00:04:30,423
Now the images for doing this are here in this image folder.
83
83
00:04:31,720 --> 00:04:35,310
And so the path to these images is gonna be image,
84
84
00:04:35,310 --> 00:04:38,387
so IMG/ and then IMG-1.jpg and IMG-2.jpg.
85
85
00:04:43,900 --> 00:04:46,260
And here to actually see this effect
86
86
00:04:46,260 --> 00:04:51,260
go to the network tab and set your speed to fast 3G,
87
87
00:04:51,760 --> 00:04:55,560
because otherwise the images are going to load too fast
88
88
00:04:55,560 --> 00:04:57,653
for you to actually see any effect.
89
89
00:05:00,742 --> 00:05:04,920
So again don't stress if this becomes overwhelming
90
90
00:05:04,920 --> 00:05:06,690
and too difficult.
91
91
00:05:06,690 --> 00:05:08,440
So I designed this one on purpose
92
92
00:05:08,440 --> 00:05:11,110
to be a real challenge for you.
93
93
00:05:11,110 --> 00:05:14,090
And so if you need to watch parts of the solution,
94
94
00:05:14,090 --> 00:05:16,163
then don't worry about that at all.
95
95
00:05:17,670 --> 00:05:20,583
As always what matters is that you actually try.
96
96
00:05:21,420 --> 00:05:23,800
But anyway, good luck for this one
97
97
00:05:23,800 --> 00:05:25,510
and take all the time you need
98
98
00:05:25,510 --> 00:05:27,103
and then I see you back here.
99
99
00:05:31,010 --> 00:05:33,370
Okay, welcome back.
100
100
00:05:33,370 --> 00:05:37,140
So I hope that you did at least part of it.
101
101
00:05:37,140 --> 00:05:41,100
And so let's start with the solution here.
102
102
00:05:41,100 --> 00:05:46,100
So create image, which should take in an image path.
103
103
00:05:50,470 --> 00:05:53,510
And then whenever we are promised to find something
104
104
00:05:53,510 --> 00:05:57,660
we always return in you promise,
105
105
00:05:57,660 --> 00:06:01,500
and also the promise is always done in the same way,
106
106
00:06:01,500 --> 00:06:03,170
at least in the beginning.
107
107
00:06:03,170 --> 00:06:06,255
So we have to resolve function and de reject function
108
108
00:06:06,255 --> 00:06:10,793
which are received by our executer function.
109
109
00:06:13,256 --> 00:06:16,040
Now we are told to create a new image
110
110
00:06:16,040 --> 00:06:19,103
using document.createElement.
111
111
00:06:21,680 --> 00:06:25,790
And so we want to create an element of the type image
112
112
00:06:25,790 --> 00:06:26,953
and to that IMG.
113
113
00:06:27,970 --> 00:06:29,580
And then all we need to do
114
114
00:06:29,580 --> 00:06:32,650
is to set the source property of that,
115
115
00:06:32,650 --> 00:06:35,193
to the image path that is received.
116
116
00:06:37,870 --> 00:06:42,793
And so then on that image, we can wait for the load event.
117
117
00:06:47,200 --> 00:06:51,790
And so let's see what was the task here.
118
118
00:06:51,790 --> 00:06:53,270
So when the image is done loading
119
119
00:06:53,270 --> 00:06:57,090
append it to the DOM element with the images class
120
120
00:06:57,090 --> 00:07:00,803
and to resolve the promise with the image element itself.
121
121
00:07:03,680 --> 00:07:08,680
So that's out here select the element with the images class.
122
122
00:07:10,720 --> 00:07:15,720
So ImgContainer, let's say, dot querySelector images.
123
123
00:07:21,890 --> 00:07:24,113
Let's just take a look here in the HTML.
124
124
00:07:25,000 --> 00:07:27,533
And so that's this element here.
125
125
00:07:33,700 --> 00:07:37,970
And so again we should now append the image to that element.
126
126
00:07:37,970 --> 00:07:41,900
And so that's, ImgContainer.append,
127
127
00:07:41,900 --> 00:07:46,210
just again like we learned in the advanced DOM section.
128
128
00:07:46,210 --> 00:07:48,110
So if you skipped that one,
129
129
00:07:48,110 --> 00:07:50,803
then maybe you need it to this part of the solution.
130
130
00:07:53,410 --> 00:07:56,760
But anyway, now we also want to resolve the promise
131
131
00:07:56,760 --> 00:08:00,750
because this load event of course means
132
132
00:08:00,750 --> 00:08:03,280
that loading the image was successful.
133
133
00:08:03,280 --> 00:08:06,680
And so this is where we will then resolve the promise,
134
134
00:08:06,680 --> 00:08:09,710
so mark it as successful
135
135
00:08:09,710 --> 00:08:12,733
and remember the resolved value should be the image.
136
136
00:08:13,810 --> 00:08:18,753
And now we should also listen to the error event, remember?
137
137
00:08:21,400 --> 00:08:25,710
And so in this case, we will then reject the promise
138
138
00:08:25,710 --> 00:08:27,873
with a new error as always.
139
139
00:08:29,190 --> 00:08:31,600
And let's say image not found
140
140
00:08:31,600 --> 00:08:34,743
because that is probably the most likely error.
141
141
00:08:37,270 --> 00:08:39,380
So here it actually says
142
142
00:08:39,380 --> 00:08:41,330
that we should test the error handler
143
143
00:08:41,330 --> 00:08:43,213
by passing a wrong image path.
144
144
00:08:44,240 --> 00:08:48,173
And so the error message here that makes sense is this one.
145
145
00:08:50,890 --> 00:08:54,170
And so this should actually complete part one
146
146
00:08:54,170 --> 00:08:57,100
and I know that I'm doing it quite fast here
147
147
00:08:57,100 --> 00:09:01,040
but that's because we actually did many of the things here
148
148
00:09:01,040 --> 00:09:04,690
already before but simply in a different context
149
149
00:09:04,690 --> 00:09:08,080
but we already know what resolve and reject do.
150
150
00:09:08,080 --> 00:09:10,653
And so this, I think should be understandable.
151
151
00:09:13,110 --> 00:09:16,210
But anyway, let's now handle the fulfilled,
152
152
00:09:16,210 --> 00:09:19,500
so the successful promise,
153
153
00:09:19,500 --> 00:09:22,477
and so that's this part here.
154
154
00:09:22,477 --> 00:09:25,370
And so remember that here we received the image
155
155
00:09:26,650 --> 00:09:28,003
as the resolved to value.
156
156
00:09:29,370 --> 00:09:33,150
And I'll actually, we don't need to really do anything here,
157
157
00:09:33,150 --> 00:09:35,650
so because the image is already
158
158
00:09:35,650 --> 00:09:39,300
being appended to the DOM up here.
159
159
00:09:39,300 --> 00:09:41,250
And so for now, at least
160
160
00:09:41,250 --> 00:09:43,750
we can just lock something to the console,
161
161
00:09:43,750 --> 00:09:46,500
like image one, load it,
162
162
00:09:46,500 --> 00:09:50,200
and then a bit later we will actually worry about
163
163
00:09:50,200 --> 00:09:51,993
waiting these two seconds.
164
164
00:09:52,960 --> 00:09:54,993
So let's go here to our part.
165
165
00:09:56,781 --> 00:10:00,260
And of course, I need to actually pass in the path
166
166
00:10:00,260 --> 00:10:01,203
so the image.
167
167
00:10:02,160 --> 00:10:04,300
So as I said, that's an image
168
168
00:10:04,300 --> 00:10:09,300
and VS code is nice enough to give us that path.
169
169
00:10:10,870 --> 00:10:13,653
And indeed here is the image already.
170
170
00:10:14,680 --> 00:10:18,623
So as I said, I will just set it here to fast, 3G now.
171
171
00:10:19,910 --> 00:10:21,940
And so now you see it's taking some time
172
172
00:10:24,470 --> 00:10:26,890
but eventually it will arrive.
173
173
00:10:26,890 --> 00:10:29,400
And so as it arrived after that,
174
174
00:10:29,400 --> 00:10:32,720
then we lock to the console image one loaded.
175
175
00:10:32,720 --> 00:10:35,140
And so again that happened
176
176
00:10:35,140 --> 00:10:37,633
because the promise was actually resolved.
177
177
00:10:39,950 --> 00:10:43,913
That's also right away at the catch handler.
178
178
00:10:47,840 --> 00:10:50,170
And so here we just want to log the error
179
179
00:10:51,100 --> 00:10:52,783
and let's format just nicely.
180
180
00:10:54,870 --> 00:10:57,610
So let's just change the name here
181
181
00:10:59,690 --> 00:11:04,253
and now we get or error, so image not found.
182
182
00:11:06,650 --> 00:11:10,320
And so now here, we could do something more realistic
183
183
00:11:10,320 --> 00:11:12,830
like giving the user a real error message
184
184
00:11:12,830 --> 00:11:15,530
or something here on the screen,
185
185
00:11:15,530 --> 00:11:18,313
but in this case that's simply not necessary.
186
186
00:11:19,900 --> 00:11:24,900
So let's go back here and tackle step number three,
187
187
00:11:25,200 --> 00:11:28,640
which is to pause the execution for two seconds
188
188
00:11:28,640 --> 00:11:31,790
using this wait function we created earlier.
189
189
00:11:31,790 --> 00:11:33,283
So let's grabbed that here.
190
190
00:11:34,420 --> 00:11:38,817
So this one and I'm gonna put it right here
191
191
00:11:42,010 --> 00:11:42,923
at the beginning.
192
192
00:11:45,750 --> 00:11:49,363
And so now in here, we will wait for two seconds.
193
193
00:11:50,370 --> 00:11:53,460
And so this is gonna return a promise.
194
194
00:11:53,460 --> 00:11:57,800
So this part here, and so let's now return that
195
195
00:11:57,800 --> 00:12:02,363
so that we can chain the next then handler on that.
196
196
00:12:03,530 --> 00:12:06,943
And wait doesn't have any resolved value, remember.
197
197
00:12:08,628 --> 00:12:13,628
And so we don't specify any argument
198
198
00:12:13,730 --> 00:12:16,200
or any parameter in this function.
199
199
00:12:16,200 --> 00:12:18,760
And now remember, here what we want to do,
200
200
00:12:18,760 --> 00:12:21,500
is to then hide this first image.
201
201
00:12:21,500 --> 00:12:25,510
So this one, however, this image is only defined
202
202
00:12:25,510 --> 00:12:28,690
in this function but not in this one.
203
203
00:12:28,690 --> 00:12:30,750
And so that's why I said previously
204
204
00:12:30,750 --> 00:12:34,183
that we are going to need a global variable to do that.
205
205
00:12:35,810 --> 00:12:39,713
So let's do current image.
206
206
00:12:41,160 --> 00:12:45,830
And then here all we do is to set current image
207
207
00:12:45,830 --> 00:12:50,830
to the image and then we can hide it right here.
208
208
00:12:51,440 --> 00:12:55,147
So that's currentImg.style.display set to none.
209
209
00:13:01,900 --> 00:13:03,400
And so this should load the image
210
210
00:13:03,400 --> 00:13:06,460
and then after two seconds it will hide it.
211
211
00:13:06,460 --> 00:13:08,110
So let's the wait for it.
212
212
00:13:08,110 --> 00:13:11,290
One, two, and there we go.
213
213
00:13:11,290 --> 00:13:15,080
Great, so we have that working as well.
214
214
00:13:15,080 --> 00:13:20,080
And now load a second image and yeah, that's actually it.
215
215
00:13:21,840 --> 00:13:24,760
So then we just have to pause execution again
216
216
00:13:24,760 --> 00:13:29,430
after two seconds and then height the current image again.
217
217
00:13:29,430 --> 00:13:32,493
And so this one is now gonna be simply the same.
218
218
00:13:34,230 --> 00:13:38,013
So where are we going to load the next image?
219
219
00:13:38,910 --> 00:13:40,940
Well, it's gonna be right here
220
220
00:13:40,940 --> 00:13:44,300
so that we can then chain the next then handler
221
221
00:13:44,300 --> 00:13:45,633
into our chain here.
222
222
00:13:46,520 --> 00:13:48,870
So we will return a new promise
223
223
00:13:48,870 --> 00:13:51,610
which is the one that is returned
224
224
00:13:51,610 --> 00:13:55,840
by createImage and this time,
225
225
00:13:55,840 --> 00:13:59,667
so I'm missing the quotes, now okay,
226
226
00:14:02,200 --> 00:14:03,493
and then another then.
227
227
00:14:05,110 --> 00:14:08,262
And so here we are back to receiving an image.
228
228
00:14:08,262 --> 00:14:10,323
And now let's just do exactly the same.
229
229
00:14:12,910 --> 00:14:15,320
So we assigned the current image to image
230
230
00:14:15,320 --> 00:14:18,230
so that in the next step we can then hide it,
231
231
00:14:18,230 --> 00:14:21,723
then image two load it and we wait two more seconds.
232
232
00:14:23,207 --> 00:14:25,183
And then in the next handler,
233
233
00:14:27,860 --> 00:14:30,403
we hide the current image again.
234
234
00:14:33,080 --> 00:14:34,773
And so let's see.
235
235
00:14:36,140 --> 00:14:38,180
So after the second image has loaded
236
236
00:14:38,180 --> 00:14:43,180
pause execution for two seconds again, check that we did.
237
237
00:14:43,200 --> 00:14:45,140
And then after two seconds have passed
238
238
00:14:45,140 --> 00:14:49,010
hide to current image, so check again.
239
239
00:14:49,010 --> 00:14:52,793
So we did both and so our code should be complete now.
240
240
00:14:53,800 --> 00:14:55,143
And so let's wait for it.
241
241
00:14:56,660 --> 00:15:00,550
One, two, and there it goes,
242
242
00:15:00,550 --> 00:15:03,090
so now the second one is loading in the background
243
243
00:15:03,090 --> 00:15:06,580
and one, two seconds and that's it.
244
244
00:15:06,580 --> 00:15:10,310
That's our very small mini application
245
245
00:15:10,310 --> 00:15:12,990
which had the simple goal of showing you
246
246
00:15:12,990 --> 00:15:16,470
how we can promisify this logic here
247
247
00:15:16,470 --> 00:15:19,520
of setting the source attribute of an image,
248
248
00:15:19,520 --> 00:15:22,080
basically asynchronously.
249
249
00:15:22,080 --> 00:15:25,860
So I hope that you managed to do this part here,
250
250
00:15:25,860 --> 00:15:27,860
so promisifying all that.
251
251
00:15:27,860 --> 00:15:30,150
And also then understanding the logic
252
252
00:15:30,150 --> 00:15:32,400
that I wanted to implement here.
253
253
00:15:32,400 --> 00:15:34,770
And if you did something a little bit different
254
254
00:15:34,770 --> 00:15:36,997
then that's of course not a problem at all.
255
255
00:15:38,480 --> 00:15:39,890
So I keep saying it
256
256
00:15:39,890 --> 00:15:42,860
but that's just because it's really true.
257
257
00:15:42,860 --> 00:15:45,270
So what I want is you to try
258
258
00:15:45,270 --> 00:15:48,070
and to practice and the results will follow.
259
259
00:15:48,070 --> 00:15:50,583
If not today, then some other day.
22885
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.