Original subtitles

1 1

Time for coding challenge number two. 2

2

And in this one, your goal is to basically recreate 3

3

what I'm just gonna show you here on the screen. 4

4

So when I opened the page 5

5

then there will be an image loading in the background 6

6

and as soon as that arrives it is displayed 7

7

and after two seconds it disappears, 8

8

and another image starts loading in the background, 9

9

it is then also displayed and again, after two seconds 10

10

it disappeared and that's actually it. 11

11

So that's what I say right here. 12

12

And so this time the tasks 13

13

are actually not gonna be really descriptive. 14

14

And so in this one, you should now pretend 15

15

that you're actually working on your own. 16

16

So at least a little bit. 17

17

And in fact, this challenge is difficult on purpose. 18

18

So this is not an easy one 19

19

but I hope that with some time and with some effort 20

20

and also with revealing everything that we learned 21

21

so far in the section, 22

22

you can at least complete parts of this challenge. 23

23

But anyway let's now, still take a look at your tasks here. 24

24

So I want you to create a function called create image 25

25

which receives as an input, a variable called image path. 26

26

So this is basically the path to an image 27

27

that I'll show you in a minute. 28

28

Now this function should return a promise 29

29

which creates a new image. 30

30

So really a new image in the DOM info that you can use 31

31

a document.createElement with the image tag. 32

32

And so this is how we learn to do it 33

33

in the advanced DOM section, right? 34

34

So you create that image and you set the source attribute 35

35

to the provided image path that you received here. 36

36

And as you already know 37

37

this setting, the source path is an asynchronous operation. 38

38

And so basically your task 39

39

in this part one is to promisifying all of that. 40

40

So when the image is done loading 41

41

you should append that image 42

42

to the DOM element that has the images class 43

43

and then resolve the promise. 44

44

And to fulfill the value of the promise 45

45

should be the image element itself. 46

46

And in case there is an error 47

47

while the image is being loaded, 48

48

and so that is the error event that you need to listen for, 49

49

so in that case, reject the promise. 50

50

And again, if this part is too tricky for you, 51

51

then you can always just start watching the solution 52

52

at least for this part, all right? 53

53

And so after the first part of promisifying, 54

54

the image loading comes of course consuming that promise. 55

55

So after the image has loaded 56

56

I want you to pause the execution for two seconds 57

57

using the wait function that we created previously. 58

58

Then after these two seconds have passed, 59

59

I want you to hide the current image 60

60

by setting display to none. 61

61

Now then you should load a second image. 62

62

Now, in order to hide the current image, my hint here 63

63

that you use the image element that was returned 64

64

by the create image promise. 65

65

So remember that the result value of the promise 66

66

should be the actual image element itself. 67

67

And so you can use that element to hide it. 68

68

You will just need a global variable for that. 69

69

But I hope that once you reach this part, 70

70

you will notice that for yourself. 71

71

Anyway, after the second image has loaded, 72

72

so this part here in the step number four, 73

73

so after this has happened 74

74

I want you to pause execution again, for two seconds. 75

75

And then after these two seconds have passed 76

76

hide again the current image. 77

77

So just to make sure you understood what exactly is needed 78

78

this is here what should happen. 79

79

So the image is loading, then it's displaying, 80

80

then it's hiding and loading again, 81

81

and so now it's hidden one more time. 82

82

Now the images for doing this are here in this image folder. 83

83

And so the path to these images is gonna be image, 84

84

so IMG/ and then IMG-1.jpg and IMG-2.jpg. 85

85

And here to actually see this effect 86

86

go to the network tab and set your speed to fast 3G, 87

87

because otherwise the images are going to load too fast 88

88

for you to actually see any effect. 89

89

So again don't stress if this becomes overwhelming 90

90

and too difficult. 91

91

So I designed this one on purpose 92

92

to be a real challenge for you. 93

93

And so if you need to watch parts of the solution, 94

94

then don't worry about that at all. 95

95

As always what matters is that you actually try. 96

96

But anyway, good luck for this one 97

97

and take all the time you need 98

98

and then I see you back here. 99

99

Okay, welcome back. 100

100

So I hope that you did at least part of it. 101

101

And so let's start with the solution here. 102

102

So create image, which should take in an image path. 103

103

And then whenever we are promised to find something 104

104

we always return in you promise, 105

105

and also the promise is always done in the same way, 106

106

at least in the beginning. 107

107

So we have to resolve function and de reject function 108

108

which are received by our executer function. 109

109

Now we are told to create a new image 110

110

using document.createElement. 111

111

And so we want to create an element of the type image 112

112

and to that IMG. 113

113

And then all we need to do 114

114

is to set the source property of that, 115

115

to the image path that is received. 116

116

And so then on that image, we can wait for the load event. 117

117

And so let's see what was the task here. 118

118

So when the image is done loading 119

119

append it to the DOM element with the images class 120

120

and to resolve the promise with the image element itself. 121

121

So that's out here select the element with the images class. 122

122

So ImgContainer, let's say, dot querySelector images. 123

123

Let's just take a look here in the HTML. 124

124

And so that's this element here. 125

125

And so again we should now append the image to that element. 126

126

And so that's, ImgContainer.append, 127

127

just again like we learned in the advanced DOM section. 128

128

So if you skipped that one, 129

129

then maybe you need it to this part of the solution. 130

130

But anyway, now we also want to resolve the promise 131

131

because this load event of course means 132

132

that loading the image was successful. 133

133

And so this is where we will then resolve the promise, 134

134

so mark it as successful 135

135

and remember the resolved value should be the image. 136

136

And now we should also listen to the error event, remember? 137

137

And so in this case, we will then reject the promise 138

138

with a new error as always. 139

139

And let's say image not found 140

140

because that is probably the most likely error. 141

141

So here it actually says 142

142

that we should test the error handler 143

143

by passing a wrong image path. 144

144

And so the error message here that makes sense is this one. 145

145

And so this should actually complete part one 146

146

and I know that I'm doing it quite fast here 147

147

but that's because we actually did many of the things here 148

148

already before but simply in a different context 149

149

but we already know what resolve and reject do. 150

150

And so this, I think should be understandable. 151

151

But anyway, let's now handle the fulfilled, 152

152

so the successful promise, 153

153

and so that's this part here. 154

154

And so remember that here we received the image 155

155

as the resolved to value. 156

156

And I'll actually, we don't need to really do anything here, 157

157

so because the image is already 158

158

being appended to the DOM up here. 159

159

And so for now, at least 160

160

we can just lock something to the console, 161

161

like image one, load it, 162

162

and then a bit later we will actually worry about 163

163

waiting these two seconds. 164

164

So let's go here to our part. 165

165

And of course, I need to actually pass in the path 166

166

so the image. 167

167

So as I said, that's an image 168

168

and VS code is nice enough to give us that path. 169

169

And indeed here is the image already. 170

170

So as I said, I will just set it here to fast, 3G now. 171

171

And so now you see it's taking some time 172

172

but eventually it will arrive. 173

173

And so as it arrived after that, 174

174

then we lock to the console image one loaded. 175

175

And so again that happened 176

176

because the promise was actually resolved. 177

177

That's also right away at the catch handler. 178

178

And so here we just want to log the error 179

179

and let's format just nicely. 180

180

So let's just change the name here 181

181

and now we get or error, so image not found. 182

182

And so now here, we could do something more realistic 183

183

like giving the user a real error message 184

184

or something here on the screen, 185

185

but in this case that's simply not necessary. 186

186

So let's go back here and tackle step number three, 187

187

which is to pause the execution for two seconds 188

188

using this wait function we created earlier. 189

189

So let's grabbed that here. 190

190

So this one and I'm gonna put it right here 191

191

at the beginning. 192

192

And so now in here, we will wait for two seconds. 193

193

And so this is gonna return a promise. 194

194

So this part here, and so let's now return that 195

195

so that we can chain the next then handler on that. 196

196

And wait doesn't have any resolved value, remember. 197

197

And so we don't specify any argument 198

198

or any parameter in this function. 199

199

And now remember, here what we want to do, 200

200

is to then hide this first image. 201

201

So this one, however, this image is only defined 202

202

in this function but not in this one. 203

203

And so that's why I said previously 204

204

that we are going to need a global variable to do that. 205

205

So let's do current image. 206

206

And then here all we do is to set current image 207

207

to the image and then we can hide it right here. 208

208

So that's currentImg.style.display set to none. 209

209

And so this should load the image 210

210

and then after two seconds it will hide it. 211

211

So let's the wait for it. 212

212

One, two, and there we go. 213

213

Great, so we have that working as well. 214

214

And now load a second image and yeah, that's actually it. 215

215

So then we just have to pause execution again 216

216

after two seconds and then height the current image again. 217

217

And so this one is now gonna be simply the same. 218

218

So where are we going to load the next image? 219

219

Well, it's gonna be right here 220

220

so that we can then chain the next then handler 221

221

into our chain here. 222

222

So we will return a new promise 223

223

which is the one that is returned 224

224

by createImage and this time, 225

225

so I'm missing the quotes, now okay, 226

226

and then another then. 227

227

And so here we are back to receiving an image. 228

228

And now let's just do exactly the same. 229

229

So we assigned the current image to image 230

230

so that in the next step we can then hide it, 231

231

then image two load it and we wait two more seconds. 232

232

And then in the next handler, 233

233

we hide the current image again. 234

234

And so let's see. 235

235

So after the second image has loaded 236

236

pause execution for two seconds again, check that we did. 237

237

And then after two seconds have passed 238

238

hide to current image, so check again. 239

239

So we did both and so our code should be complete now. 240

240

And so let's wait for it. 241

241

One, two, and there it goes, 242

242

so now the second one is loading in the background 243

243

and one, two seconds and that's it. 244

244

That's our very small mini application 245

245

which had the simple goal of showing you 246

246

how we can promisify this logic here 247

247

of setting the source attribute of an image, 248

248

basically asynchronously. 249

249

So I hope that you managed to do this part here, 250

250

so promisifying all that. 251

251

And also then understanding the logic 252

252

that I wanted to implement here. 253

253

And if you did something a little bit different 254

254

then that's of course not a problem at all. 255

255

So I keep saying it 256

256

but that's just because it's really true. 257

257

So what I want is you to try 258

258

and to practice and the results will follow. 259

259

If not today, then some other day.