folder contains an index.html file you will play with. Read the JavaScript code inside this file and open this page in a browser. See if you can get it to work. You should be able to load a series of doggy pictures like this:

Now modify this file (index.html) by misspelling some image file names in the demo1(), demo2(), and demo3() functions. Will you still be able to load the image galleries? You may use browser debugging tools to see the error messages from JavaScript console. Below is an example from Chrome developer tool:

Short Answer Questions

Question 1: In the given index.html file, getImage() function creates and returns promise objects. What do these promise objects do? Or in other words, what kind of tasks do they represent?

Question 2: What are the differences among the three ways the images are fetched from the file system and then displayed in browser?

Question 3: Research online and explain how Promise.all() behave.

Question 4: If you were to design an image gallery on the web, which approach will you adopt: demo1(), demo2(), demo3(), or something else? Explain why.

you can find the index and the js here. you can view page source on the index.htnk page to see the code

http://f4e.bfc.mwp.accessdomain.com/wp-content/uploads/2018/11/es6-promise.min_.js

view-source:http://f4e.bfc.mwp.accessdomain.com/wp-content/uploads/2018/11/index.html

for demo1 demo2 ext

function demo1(){ var doggies = ['dog1.png', 'dog2.png', 'dog3.png', 'dog4.png', 'dog5.png']; doggyplayground1.innerHTML = ''; displayimagesInSequence(doggies); }

function demo2(){ var doggies = ['dog1.png', 'dog2.png', 'dog3.png', 'dog4.png', 'dog5.png']; doggyplayground2.innerHTML = 'Fetching doggies...'; displayimagesAtOnce(doggies); }

function demo3(){ var doggies = ['dog1.png', 'dog2.png', 'dog3.png', 'dog4.png', 'dog5.png']; doggyplayground3.innerHTML = ''; displayimagesBestofBothWorlds(doggies); }