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();