diff --git a/javascript/index.js b/javascript/index.js index 9f30552db..aee88e140 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -4,37 +4,110 @@ // 🚨🚨🚨 Comment out the below code before you start working on the code // Out of sync - getInstruction("mashedPotatoes", 0, (step1) => { - document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step1}
  • `; - }, (error) => console.log(error)); - - getInstruction("mashedPotatoes", 1, (step2) => { - document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step2}
  • `; - }, (error) => console.log(error)); - - getInstruction("mashedPotatoes", 2, (step3) => { - document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step3}
  • `; - }, (error) => console.log(error)); - - getInstruction("mashedPotatoes", 3, (step4) => { - document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step4}
  • `; - }, (error) => console.log(error)); - - getInstruction("mashedPotatoes", 4, (step5) => { - document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step5}
  • `; - document.querySelector("#mashedPotatoesImg").removeAttribute("hidden"); - }, (error) => console.log(error)); +// getInstruction("mashedPotatoes", 0, (step1) => { +// document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step1}
  • `; +// }, (error) => console.log(error)); + +// getInstruction("mashedPotatoes", 1, (step2) => { +// document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step2}
  • `; +// }, (error) => console.log(error)); + +// getInstruction("mashedPotatoes", 2, (step3) => { +// document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step3}
  • `; +// }, (error) => console.log(error)); +// getInstruction("mashedPotatoes", 3, (step4) => { +// document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step4}
  • `; +// }, (error) => console.log(error)); +// getInstruction("mashedPotatoes", 4, (step5) => { +// document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step5}
  • `; +// document.querySelector("#mashedPotatoesImg").removeAttribute("hidden"); +// }, (error) => console.log(error)); // Iteration 1 - using callbacks -// ... +getInstruction("mashedPotatoes", 0, (step0) => { + document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step0}
  • `; + getInstruction("mashedPotatoes", 1, (step1) => { + document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step1}
  • `; + getInstruction("mashedPotatoes", 2, (step2) => { + document.querySelector( + "#mashedPotatoes" + ).innerHTML += `
  • ${step2}
  • `; + getInstruction("mashedPotatoes", 3, (step3) => { + document.querySelector( + "#mashedPotatoes" + ).innerHTML += `
  • ${step3}
  • `; + getInstruction("mashedPotatoes", 4, (step4) => { + document.querySelector( + "#mashedPotatoes" + ).innerHTML += `
  • ${step4}
  • `; + document.querySelector( + "#mashedPotatoes" + ).innerHTML += `
  • Mashed potatoes are ready!
  • `; + mashedPotatoesImg.removeAttribute("hidden"); + }); + }); + }); + }); +}); // Iteration 2 - using promises -// ... +obtainInstruction("steak", 0) + .then((step0) => { + document.querySelector("#steak").innerHTML += `
  • ${step0}
  • `; + return obtainInstruction("steak", 1); + }) + .then((step1) => { + document.querySelector("#steak").innerHTML += `
  • ${step1}
  • `; + return obtainInstruction("steak", 2); + }) + .then((step2) => { + document.querySelector("#steak").innerHTML += `
  • ${step2}
  • `; + return obtainInstruction("steak", 3); + }) + .then((step3) => { + document.querySelector("#steak").innerHTML += `
  • ${step3}
  • `; + return obtainInstruction("steak", 4); + }) + .then((step4) => { + document.querySelector("#steak").innerHTML += `
  • ${step4}
  • `; + return obtainInstruction("steak", 5); + }) + .then((step5) => { + document.querySelector("#steak").innerHTML += `
  • ${step5}
  • `; + return obtainInstruction("steak", 6); + }) + .then((step6) => { + document.querySelector("#steak").innerHTML += `
  • ${step6}
  • `; + return obtainInstruction("steak", 7); + }) + .then((step7) => { + document.querySelector("#steak").innerHTML += `
  • Steak is ready!
  • `; + steakImg.removeAttribute("hidden"); + }) + .catch((error) => { + console.log("error!"); + }); // Iteration 3 using async/await -// ... +async function makeBroccoli() { + try{ + const broccoliSteps = document.querySelector("#broccoli"); + for(let step =0; step <=5 ; step++){ + const instruction = await obtainInstruction("broccoli", step); + broccoliSteps.innerHTML += `
  • ${instruction}
  • `; + } + broccoliSteps.innerHTML += `
  • Broccoli is ready!
  • `; + broccoliImg.removeAttribute("hidden"); + } + catch (error){ + console.log("Error fetching instructions:", error); + } +} + +makeBroccoli(); + // Bonus 2 - Promise all -// ... \ No newline at end of file +Promiseall();