diff --git a/javascript/index.js b/javascript/index.js index 9f30552db..d70fb5e19 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -28,13 +28,110 @@ // Iteration 1 - using callbacks -// ... + +getInstruction('mashedPotatoes', 0, (step0) => { + document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step0}
  • `; + }, (error) => console.log(error)); + + getInstruction('mashedPotatoes', 1, (step1) => { + document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step1}
  • `; + + }, (error) => console.log(error)); + + getInstruction('mashedPotatoes', 2, (step2) => { + document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step2}
  • `; + + }, (error) => console.log(error)); + + getInstruction('mashedPotatoes', 3, (step3) => { + document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step3}
  • `; + + }, (error) => console.log(error)); + + getInstruction('mashedPotatoes', 4, (step4) => { + document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step4}
  • `; + + document.querySelector("#mashedPotatoes").innerHTML += `
  • Mashed potatoes are ready!
  • `; + document.querySelector("#mashedPotatoesImg").removeAttribute("hidden"); + }, (error) => console.log(error)); + + // 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 += `
  • ${step7}
  • `; + document.querySelector("#steak").innerHTML += `
  • Stake is ready!
  • `; + document.querySelector("#steakImg").removeAttribute("hidden"); + }) + .catch((error) => console.log(error)); + + // Iteration 3 using async/await -// ... + +async function makeBroccoli() { + try { + const step0 = await obtainInstruction('broccoli', 0); + document.querySelector("#broccoli").innerHTML += `
  • ${step0}
  • `; + + const step1 = await obtainInstruction('broccoli', 1); + document.querySelector("#broccoli").innerHTML += `
  • ${step1}
  • `; + + const step2 = await obtainInstruction('broccoli', 2); + document.querySelector("#broccoli").innerHTML += `
  • ${step2}
  • `; + + const step3 = await obtainInstruction('broccoli', 3); + document.querySelector("#broccoli").innerHTML += `
  • ${step3}
  • `; + + const step4 = await obtainInstruction('broccoli', 4); + document.querySelector("#broccoli").innerHTML += `
  • ${step4}
  • `; + + const step5 = await obtainInstruction('broccoli', 5); + document.querySelector("#broccoli").innerHTML += `
  • ${step5}
  • `; + + const step6 = await obtainInstruction('broccoli', 6); + document.querySelector("#broccoli").innerHTML += `
  • ${step6}
  • `; + + // Final message after all steps + document.querySelector("#broccoli").innerHTML += `
  • Broccoli is ready!
  • `; + document.querySelector("#broccoliImg").removeAttribute("hidden"); + } catch (error) { + console.log(error); + } +} + +makeBroccoli(); + // Bonus 2 - Promise all // ... \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..b1b91adbb --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "lab-es6-promises", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}