feat: Coding Challenge 3 of Asynchronous Section Done

Author: ralvarezdev

08-asynchronous/script.js

@@ -197,11 +197,72 @@ const createImage = function (imgPath)
   });
 };
 
-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));
+// 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));
+
+// Coding Challenge 3
+
+/*
+Your tasks:
+PART 1
+1. Write an async function 'loadNPause' that recreates Challenge #2, this time
+using async/await (only the part where the promise is consumed, reuse the
+'createImage' function from before)
+2. Compare the two versions, think about the big differences, and see which one
+you like more
+3. Don't forget to test the error handler, and to set the network speed to “Fast 3G”
+in the dev tools Network tab
+PART 2
+1. Create an async function 'loadAll' that receives an array of image paths
+'imgArr'
+2. Use .map to loop over the array, to load all the images with the
+'createImage' function (call the resulting array 'imgs')
+3. Check out the 'imgs' array in the console! Is it like you expected?
+4. Use a promise combinator function to actually get the images from the array 😉
+5. Add the 'parallel' class to all the images (it has some CSS styles)
+Test data Part 2: ['img/img-1.jpg', 'img/img-2.jpg', 'img/img-
+3.jpg']. To test, turn off the 'loadNPause' function
+*/
+
+const loadNPause = async function (imgPath)
+{
+  try
+  {
+    const img = await createImage(imgPath);
+    await wait(2);
+    hideImg(img);
+  }
+  catch (err)
+  {
+    console.error(err);
+  }
+};
+
+// loadNPause('img/img-1.jpg');
+
+const loadAll = async function (...imgArr)
+{
+  try
+  {
+    const imgs = imgArr.map(async img => await createImage(img));
+    console.log(imgs);
+
+    const imgsEl = await Promise.all(imgs);
+    console.log(imgsEl);
+
+    imgsEl.forEach(img => img.classList.add('parallel'));
+  }
+  catch (err)
+  {
+    console.error(err);
+  }
+
+};
+
+loadAll('img/img-1.jpg', 'img/img-2.jpg', 'img/img-3.jpg');