feat: Coding Challenge 2 of Asynchronous Section Done

Author: ralvarezdev

08-asynchronous/script.js

@@ -128,6 +128,80 @@ const whereAmI = function (lat, lng)
     .catch(err => console.log(`An Error Ocurred: ${ err }`));
 };
 
-whereAmI(lat1, lng1);
+// whereAmI(lat1, lng1);
 // whereAmI(lat2, lng2);
 // whereAmI(lat3, lng3);
+
+// Coding Challenge 2
+
+/*
+Your tasks:
+Tasks are not super-descriptive this time, so that you can figure out some stuff by
+yourself. Pretend you're working on your own 😉
+PART 1
+1. Create a function 'createImage' which receives 'imgPath' as an input.
+This function returns a promise which creates a new image (use
+document.createElement('img')) and sets the .src attribute to the
+provided image path
+2. When the image is done loading, append it to the DOM element with the
+'images' class, and resolve the promise. The fulfilled value should be the
+image element itself. In case there is an error loading the image (listen for
+the'error' event), reject the promise
+3. If this part is too tricky for you, just watch the first part of the solution
+PART 2
+4. Consume the promise using .then and also add an error handler
+5. After the image has loaded, pause execution for 2 seconds using the 'wait'
+function we created earlier
+6. After the 2 seconds have passed, hide the current image (set display CSS
+property to 'none'), and load a second image (Hint: Use the image element
+returned by the 'createImage' promise to hide the current image. You will
+need a global variable for that 😉)
+7. After the second image has loaded, pause execution for 2 seconds again
+8. After the 2 seconds have passed, hide the current image
+Test data: Images in the img folder. Test the error handler by passing a wrong
+image path. Set the network speed to “Fast 3G” in the dev tools Network tab,
+otherwise images load too fast
+*/
+
+let currImg;
+
+const imgsContainer = document.querySelector('.images');
+
+const hideImg = () =>
+{
+  currImg.style.display = 'none';
+};
+
+const wait = function (seconds)
+{
+  return new Promise(resolve => setTimeout(resolve, seconds * 1000));
+};
+
+const createImage = function (imgPath)
+{
+  return new Promise(function (resolve, reject)
+  {
+    const img = document.createElement('img');
+    img.src = imgPath;
+    currImg = img;
+
+    img.addEventListener('load', function ()
+    {
+      imgsContainer.insertAdjacentElement('afterbegin', img);
+      resolve(img);
+    });
+    img.addEventListener('error', function ()
+    {
+      reject('Error: Image Not Found');
+    });
+  });
+};
+
+createImage('img/img-1.jpg')
+  .then(() => wait(2))
+  .then(() => hideImg(currImg))
+  .then(() => createImage('img/img-2.jpg'))
+  .then(() => wait(2))
+  .then(() => hideImg(currImg))
+  .then(() => createImage('img/img-error.jpg'))
+  .catch(err => console.log(err));