Time for coding challenge number two.
And in this one, your goal is to basically recreate
what I'm just gonna show you here on the screen.
So when I opened the page
then there will be an image loading in the background
and as soon as that arrives it is displayed
and after two seconds it disappears,
and another image starts loading in the background,
it is then also displayed and again, after two seconds
it disappeared and that's actually it.
So that's what I say right here.
And so this time the tasks
are actually not gonna be really descriptive.
And so in this one, you should now pretend
that you're actually working on your own.
So at least a little bit.
And in fact, this challenge is difficult on purpose.
So this is not an easy one
but I hope that with some time and with some effort
and also with revealing everything that we learned
so far in the section,
you can at least complete parts of this challenge.
But anyway let's now, still take a look at your tasks here.
So I want you to create a function called create image
which receives as an input, a variable called image path.
So this is basically the path to an image
that I'll show you in a minute.
Now this function should return a promise
which creates a new image.
So really a new image in the DOM info that you can use
a document.createElement with the image tag.
And so this is how we learn to do it
in the advanced DOM section, right?
So you create that image and you set the source attribute
to the provided image path that you received here.
And as you already know
this setting, the source path is an asynchronous operation.
And so basically your task
in this part one is to promisifying all of that.
So when the image is done loading
you should append that image
to the DOM element that has the images class
and then resolve the promise.
And to fulfill the value of the promise
should be the image element itself.
And in case there is an error
while the image is being loaded,
and so that is the error event that you need to listen for,
so in that case, reject the promise.
And again, if this part is too tricky for you,
then you can always just start watching the solution
at least for this part, all right?
And so after the first part of promisifying,
the image loading comes of course consuming that promise.
So after the image has loaded
I want you to pause the execution for two seconds
using the wait function that we created previously.
Then after these two seconds have passed,
I want you to hide the current image
by setting display to none.
Now then you should load a second image.
Now, in order to hide the current image, my hint here
that you use the image element that was returned
by the create image promise.
So remember that the result value of the promise
should be the actual image element itself.
And so you can use that element to hide it.
You will just need a global variable for that.
But I hope that once you reach this part,
you will notice that for yourself.
Anyway, after the second image has loaded,
so this part here in the step number four,
so after this has happened
I want you to pause execution again, for two seconds.
And then after these two seconds have passed
hide again the current image.
So just to make sure you understood what exactly is needed
this is here what should happen.
So the image is loading, then it's displaying,
then it's hiding and loading again,
and so now it's hidden one more time.
Now the images for doing this are here in this image folder.
And so the path to these images is gonna be image,
so IMG/ and then IMG-1.jpg and IMG-2.jpg.
And here to actually see this effect
go to the network tab and set your speed to fast 3G,
because otherwise the images are going to load too fast
for you to actually see any effect.
So again don't stress if this becomes overwhelming
and too difficult.
So I designed this one on purpose
to be a real challenge for you.
And so if you need to watch parts of the solution,
then don't worry about that at all.
As always what matters is that you actually try.
But anyway, good luck for this one
and take all the time you need
and then I see you back here.
Okay, welcome back.
So I hope that you did at least part of it.
And so let's start with the solution here.
So create image, which should take in an image path.
And then whenever we are promised to find something
we always return in you promise,
and also the promise is always done in the same way,
at least in the beginning.
So we have to resolve function and de reject function
which are received by our executer function.
Now we are told to create a new image
using document.createElement.
And so we want to create an element of the type image
and to that IMG.
And then all we need to do
is to set the source property of that,
to the image path that is received.
And so then on that image, we can wait for the load event.
And so let's see what was the task here.
So when the image is done loading
append it to the DOM element with the images class
and to resolve the promise with the image element itself.
So that's out here select the element with the images class.
So ImgContainer, let's say, dot querySelector images.
Let's just take a look here in the HTML.
And so that's this element here.
And so again we should now append the image to that element.
And so that's, ImgContainer.append,
just again like we learned in the advanced DOM section.
So if you skipped that one,
then maybe you need it to this part of the solution.
But anyway, now we also want to resolve the promise
because this load event of course means
that loading the image was successful.
And so this is where we will then resolve the promise,
so mark it as successful
and remember the resolved value should be the image.
And now we should also listen to the error event, remember?
And so in this case, we will then reject the promise
with a new error as always.
And let's say image not found
because that is probably the most likely error.
So here it actually says
that we should test the error handler
by passing a wrong image path.
And so the error message here that makes sense is this one.
And so this should actually complete part one
and I know that I'm doing it quite fast here
but that's because we actually did many of the things here
already before but simply in a different context
but we already know what resolve and reject do.
And so this, I think should be understandable.
But anyway, let's now handle the fulfilled,
so the successful promise,
and so that's this part here.
And so remember that here we received the image
as the resolved to value.
And I'll actually, we don't need to really do anything here,
so because the image is already
being appended to the DOM up here.
And so for now, at least
we can just lock something to the console,
like image one, load it,
and then a bit later we will actually worry about
waiting these two seconds.
So let's go here to our part.
And of course, I need to actually pass in the path
so the image.
So as I said, that's an image
and VS code is nice enough to give us that path.
And indeed here is the image already.
So as I said, I will just set it here to fast, 3G now.
And so now you see it's taking some time
but eventually it will arrive.
And so as it arrived after that,
then we lock to the console image one loaded.
And so again that happened
because the promise was actually resolved.
That's also right away at the catch handler.
And so here we just want to log the error
and let's format just nicely.
So let's just change the name here
and now we get or error, so image not found.
And so now here, we could do something more realistic
like giving the user a real error message
or something here on the screen,
but in this case that's simply not necessary.
So let's go back here and tackle step number three,
which is to pause the execution for two seconds
using this wait function we created earlier.
So let's grabbed that here.
So this one and I'm gonna put it right here
at the beginning.
And so now in here, we will wait for two seconds.
And so this is gonna return a promise.
So this part here, and so let's now return that
so that we can chain the next then handler on that.
And wait doesn't have any resolved value, remember.
And so we don't specify any argument
or any parameter in this function.
And now remember, here what we want to do,
is to then hide this first image.
So this one, however, this image is only defined
in this function but not in this one.
And so that's why I said previously
that we are going to need a global variable to do that.
So let's do current image.
And then here all we do is to set current image
to the image and then we can hide it right here.
So that's currentImg.style.display set to none.
And so this should load the image
and then after two seconds it will hide it.
So let's the wait for it.
One, two, and there we go.
Great, so we have that working as well.
And now load a second image and yeah, that's actually it.
So then we just have to pause execution again
after two seconds and then height the current image again.
And so this one is now gonna be simply the same.
So where are we going to load the next image?
Well, it's gonna be right here
so that we can then chain the next then handler
into our chain here.
So we will return a new promise
which is the one that is returned
by createImage and this time,
so I'm missing the quotes, now okay,
and then another then.
And so here we are back to receiving an image.
And now let's just do exactly the same.
So we assigned the current image to image
so that in the next step we can then hide it,
then image two load it and we wait two more seconds.
And then in the next handler,
we hide the current image again.
And so let's see.
So after the second image has loaded
pause execution for two seconds again, check that we did.
And then after two seconds have passed
hide to current image, so check again.
So we did both and so our code should be complete now.
And so let's wait for it.
One, two, and there it goes,
so now the second one is loading in the background
and one, two seconds and that's it.
That's our very small mini application
which had the simple goal of showing you
how we can promisify this logic here
of setting the source attribute of an image,
basically asynchronously.
So I hope that you managed to do this part here,
so promisifying all that.
And also then understanding the logic
that I wanted to implement here.
And if you did something a little bit different
then that's of course not a problem at all.
So I keep saying it
but that's just because it's really true.
So what I want is you to try
and to practice and the results will follow.
If not today, then some other day.