LAB | #Promise me a dinner

Introduction

Due to the asynchronous nature of JavaScript, promises and callbacks are very important. Both allow us to control the flow of the operations and execute tasks in sequence.

Requirements

• Fork this repo
• Clone this repo

Submission

Upon completion, run the following commands:

$ git add .
$ git commit -m "done"
$ git push origin master

Create Pull Request so your TAs can check up your work.

Instructions

Iteration 0 | The starter code

We provided you with some starter code:

• javascript/data.js - contains four arrays with steps to preparing 4 different foods: mashed potatoes, steak, brussels sprouts and broccoli.

• javascript/getInstruction.js - contains a function getInstruction that uses callbacks to asynchronously retrieve instruction steps for any food. It uses setTimeout to mimic an asynchronous operation.

  getInstruction(food, step, callback, errorCallback)

  ❗ You should not make any changes in this file.

• javascript/obtainInstruction.js - has a function obtainInstruction that uses promises to asynchronously retrieve instruction steps for any food. It also uses setTimeout to mimic an asynchronous operation.

  obtainInstruction(food, step)

  ❗ You should not make any changes to this file either.

• javascript/index.js - in this file we left an example to show you how the code should execute. However, the provided code doesn't use nested callbacks or promises yet, which is why the steps won't print in the correct order. Your task in the first iteration will be to do this properly, but more on that later.

• index.html - contains a base HTML structure needed so no need to add any code there. Previously mentioned JavaScript files are already linked to the index.html. The data.js loads first to make sure arrays that hold instructions are already loaded and can be used in other files, where we need them.
  ❗ You should not make any changes to this file.

Out of sync

You should write your code only in the javascript/index.js file.

Now, open the file and take a look at the starter code provided there. The provided code doesn't use nested callbacks to enforce a sequence of execution, which is why the steps are not displayed in the correct order.

Go ahead and open the index.html page in the browser. Notice how the cooking steps are displayed out of order.

Screenshot

❗ Before you start working on Iteration 1, comment out the initial code in javascript/index.js.

Iteration 1 | Make the mashed potatoes with callbacks

Using nested callbacks print the cooking steps to make Mashed Potatoes in the correct order. Write your JavaScript in the provided javascript/index.js file. Once again, a reminder not to alter the getInstruction.js file.

// Iteration 1 - using callbacks
getInstruction('mashedPotatoes', 0, (step0) => {
  document.querySelector("#mashedPotatoes").innerHTML += `<li>${step0}</li>`
  // ... Your code here
    // ...
});

After the last step, you should display an additional <li> with the text: Mashed potatoes are ready!.

Expected Result

Iteration 2 | Make the stake with promises

Using promises and the then() statement print the directions to display the cooking instruction for the Stake in the correct order. This time, you will have to call the function obtainInstruction which returns a pending Promise.

Continue working in the javascript/index.js. You should not alter the obtainInstruction.js file.

// Iteration 2 - using promises
obtainInstruction('steak', 0)
  .then( (step0) => {
    document.querySelector("#steak").innerHTML += `<li>${step0}</li>`
    //  ... Your code here
  })
  // ... Your code here

After the last step, you should display an additional <li> with the text: Stake is ready!.

Expected Result

Iteration 3 | Make the broccoli with async/await

Using promises with the async and await syntax print the directions to make Brussels Sprouts in the correct order. You will need the function obtainInstruction which returns a pending Promise.

async function makeBroccoli() {
  // ... Your code here
}

After the last step, you should display an additional <li> with the text: Broccoli is ready!.

Expected Result

Bonus 1

When the specific food is ready to be served (all steps are listed), remove the hidden attribute from the <img /> element that represents the food, so that the image gets displayed.

Expected Result

Bonus 2

Using Promise.all display the cooking steps to make Brussels Sprouts in the correct order.

After the last step, you should display an additional <li> with the text: Brussels sprouts are ready!.

The final result should look like this - with all the cooking steps displaying in the correct order:

Happy coding! 💙