From 8ccf421c4a8c8cd4ee8f5d3de5cb39e7271a0fdf Mon Sep 17 00:00:00 2001
From: Vera Fileyeva <veremei.vera@gmail.com>
Date: Mon, 29 Sep 2025 14:14:09 +0100
Subject: [PATCH] lab is done with bonuses

---
 index.html          |   4 +-
 javascript/index.js | 158 +++++++++++++++++++++++++++++++++++++-------
 2 files changed, 136 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index c15c92dce..0226dac9f 100644
--- a/index.html
+++ b/index.html
@@ -18,9 +18,9 @@
       <div>
         <img src="images/brussels-sprouts.jpg" id="brusselsSproutsImg" hidden />
       </div>
-      <div>  
+      <div>
         <img src="images/broccoli.jpg" id="broccoliImg" hidden />
-      </div>        
+      </div>
     </section>
     <hr />
     <section id="steps">
diff --git a/javascript/index.js b/javascript/index.js
index 9f30552db..aa229c69e 100644
--- a/javascript/index.js
+++ b/javascript/index.js
@@ -4,37 +4,147 @@
 // 🚨🚨🚨 Comment out the below code before you start working on the code
 
 // Out of sync
-  getInstruction("mashedPotatoes", 0, (step1) => {
-    document.querySelector("#mashedPotatoes").innerHTML += `<li>${step1}</li>`;
-  }, (error) => console.log(error));
-  
-  getInstruction("mashedPotatoes", 1, (step2) => {
-    document.querySelector("#mashedPotatoes").innerHTML += `<li>${step2}</li>`;
-  }, (error) => console.log(error));
-  
-  getInstruction("mashedPotatoes", 2, (step3) => {
-    document.querySelector("#mashedPotatoes").innerHTML += `<li>${step3}</li>`;
-  }, (error) => console.log(error));
-  
-  getInstruction("mashedPotatoes", 3, (step4) => {
-    document.querySelector("#mashedPotatoes").innerHTML += `<li>${step4}</li>`;
-  }, (error) => console.log(error));
-  
-  getInstruction("mashedPotatoes", 4, (step5) => {
-    document.querySelector("#mashedPotatoes").innerHTML += `<li>${step5}</li>`;
-    document.querySelector("#mashedPotatoesImg").removeAttribute("hidden");
-  }, (error) => console.log(error));
+// getInstruction("mashedPotatoes", 0, (step1) => {
+//   document.querySelector("#mashedPotatoes").innerHTML += `<li>${step1}</li>`;
+// }, (error) => console.log(error));
+
+// getInstruction("mashedPotatoes", 1, (step2) => {
+//   document.querySelector("#mashedPotatoes").innerHTML += `<li>${step2}</li>`;
+// }, (error) => console.log(error));
+
+// getInstruction("mashedPotatoes", 2, (step3) => {
+//   document.querySelector("#mashedPotatoes").innerHTML += `<li>${step3}</li>`;
+// }, (error) => console.log(error));
 
+// getInstruction("mashedPotatoes", 3, (step4) => {
+//   document.querySelector("#mashedPotatoes").innerHTML += `<li>${step4}</li>`;
+// }, (error) => console.log(error));
 
+// getInstruction("mashedPotatoes", 4, (step5) => {
+//   document.querySelector("#mashedPotatoes").innerHTML += `<li>${step5}</li>`;
+//   document.querySelector("#mashedPotatoesImg").removeAttribute("hidden");
+// }, (error) => console.log(error));
 
 // Iteration 1 - using callbacks
-// ...
+getInstruction("mashedPotatoes", 0, (step0) => {
+  document.querySelector("#mashedPotatoes").innerHTML += `<li>${step0}</li>`;
+  getInstruction("mashedPotatoes", 1, (step1) => {
+    document.querySelector("#mashedPotatoes").innerHTML += `<li>${step1}</li>`;
+    getInstruction("mashedPotatoes", 2, (step2) => {
+      document.querySelector(
+        "#mashedPotatoes"
+      ).innerHTML += `<li>${step2}</li>`;
+      getInstruction("mashedPotatoes", 3, (step3) => {
+        document.querySelector(
+          "#mashedPotatoes"
+        ).innerHTML += `<li>${step3}</li>`;
+        getInstruction("mashedPotatoes", 4, (step4) => {
+          document.querySelector(
+            "#mashedPotatoes"
+          ).innerHTML += `<li>${step4}</li>`;
+          document.querySelector(
+            "#mashedPotatoes"
+          ).innerHTML += `<li>Mashed potatoes are ready!</li>`;
+          document
+            .querySelector("#mashedPotatoesImg")
+            .removeAttribute("hidden");
+        });
+      });
+    });
+  });
+});
 
 // Iteration 2 - using promises
-// ...
+obtainInstruction("steak", 0)
+  .then((step0) => {
+    document.querySelector("#steak").innerHTML += `<li>${step0}</li>`;
+    return obtainInstruction("steak", 1);
+  })
+  .then((step1) => {
+    document.querySelector("#steak").innerHTML += `<li>${step1}</li>`;
+    return obtainInstruction("steak", 2);
+  })
+  .then((step2) => {
+    document.querySelector("#steak").innerHTML += `<li>${step2}</li>`;
+    return obtainInstruction("steak", 3);
+  })
+  .then((step3) => {
+    document.querySelector("#steak").innerHTML += `<li>${step3}</li>`;
+    return obtainInstruction("steak", 4);
+  })
+  .then((step4) => {
+    document.querySelector("#steak").innerHTML += `<li>${step4}</li>`;
+    return obtainInstruction("steak", 5);
+  })
+  .then((step5) => {
+    document.querySelector("#steak").innerHTML += `<li>${step5}</li>`;
+    return obtainInstruction("steak", 6);
+  })
+  .then((step6) => {
+    document.querySelector("#steak").innerHTML += `<li>${step6}</li>`;
+    return obtainInstruction("steak", 7);
+  })
+  .then((step7) => {
+    document.querySelector("#steak").innerHTML += `<li>${step7}</li>`;
+  })
+  .catch((error) => {
+    console.log(error);
+  })
+  .finally(() => {
+    document.querySelector("#steak").innerHTML += `<li>Stake is ready!</li>`;
+    document.querySelector("#steakImg").removeAttribute("hidden");
+  });
 
 // Iteration 3 using async/await
-// ...
+async function makeBroccoli() {
+  try {
+    const step1 = await obtainInstruction("broccoli", 0);
+    const step2 = await obtainInstruction("broccoli", 1);
+    const step3 = await obtainInstruction("broccoli", 2);
+    const step4 = await obtainInstruction("broccoli", 3);
+    const step5 = await obtainInstruction("broccoli", 4);
+    const step6 = await obtainInstruction("broccoli", 5);
+    const step7 = await obtainInstruction("broccoli", 6);
+
+    document.querySelector("#broccoli").innerHTML = `<li>${step1}</li>
+      <li>${step2}</li>
+      <li>${step3}</li>
+      <li>${step4}</li>
+      <li>${step5}</li>
+      <li>${step6}</li>
+      <li>${step7}</li>`;
+  } catch (error) {
+    console.log(error);
+  } finally {
+    document.querySelector(
+      "#broccoli"
+    ).innerHTML += `<li>Broccoli is ready!</li>`;
+    document.querySelector("#broccoliImg").removeAttribute("hidden");
+  }
+}
+
+makeBroccoli();
 
 // Bonus 2 - Promise all
-// ...
\ No newline at end of file
+Promise.all([
+  obtainInstruction("brusselsSprouts", 0),
+  obtainInstruction("brusselsSprouts", 1),
+  obtainInstruction("brusselsSprouts", 2),
+  obtainInstruction("brusselsSprouts", 3),
+  obtainInstruction("brusselsSprouts", 4),
+  obtainInstruction("brusselsSprouts", 5),
+  obtainInstruction("brusselsSprouts", 6),
+  obtainInstruction("brusselsSprouts", 7),
+])
+  .then((responseToPromiseAll) => {
+    responseToPromiseAll.forEach((oneStep) => {
+      document.querySelector(
+        "#brusselsSprouts"
+      ).innerHTML += `<li>${oneStep}</li>`;
+    });
+    document.querySelector(
+      "#brusselsSprouts"
+    ).innerHTML += `<li>Brussels sprouts are ready!</li>`;
+    document.querySelector("#brusselsSproutsImg").removeAttribute("hidden");
+  })
+  .catch((err) => console.log(err));