Due to the asynchronous nature of Javascript promises & callbacks are very important. Both allow us to control the flow of the operations, meaning its sequence.
- Fork this repo
- Clone this repo
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.
We provided you with some starter code:
- in the
data.js
we provided you with the arrays of steps to preparing 3 different foods: steak, brussels sprouts, and mash potatoes. - in the
public/javascripts/addFood.js
file there is a functionaddFood(step, id, callback)
that mimics the asynchronous nature of JavaScript. You should not make any changes in this file. - in the
public/javascripts/script.js
file, we gave you a simplefor
loop to show you how the code should execute, but in the provided code there are no callbacks nor promises to handle the asynchronicity, so the steps won't print in the correct order. - in the
index.html
file, there is base HTML structure needed so no need to add any code there. All already mentioned JavaScript files are already linked to theindex.html
. Thedata.js
loads first to make sure variables that hold instructions to preparing food are already loaded and can be used in other files, where we need them.
Notice how the steps to cooking the food are out of order, and all the images are already displayed on the table.
You should write your solution in the public/javascripts/script.js
file.
Using callbacks print the directions to make Steak in the correct order. Write your JavaScript in the provided public/javascripts/script.js
file. Once again, a reminder not to alter the addFood.js
file.
addFood(steak[0], '#steak', () => {
// ... your code here
});
Using promises and the then
statement print the directions to make Mash Potatoes in the correct order.
addFood(mashPotatoes[0], '#mashPotatoes').then(res => {
// ... your code here
});
Using promises with the async
and await
syntax print the directions to make Brussels Sprouts in the correct order
async function makeFood(steps, id) {
// ... your code here
}
When the specific food is ready to be served (all steps are listed), add the image that represents that food to the #table
div.
Using promise.all
when all dinner items (Steak, Mash Potatoes, and Brussels Sprouts) are all done and added to the table, alert Dinner is served!
Final should look like this - all the steps are in the correct orders:
Happy coding! ❤️