From c88ef0b11b94ffb67bdc3de6009728516a77bdcc Mon Sep 17 00:00:00 2001
From: Igor Montovani <igor.montovani@gmail.com>
Date: Tue, 4 Nov 2025 14:46:41 +0100
Subject: [PATCH] lab done

---
 index.html            |   2 +-
 javascript/data.js    |   5 +-
 javascript/index.js   | 153 +++++++++++++++++++++++++++++++++++-------
 package-lock.json     |   6 ++
 stylesheets/style.css |   5 +-
 5 files changed, 141 insertions(+), 30 deletions(-)
 create mode 100644 package-lock.json

diff --git a/index.html b/index.html
index c15c92dce..cac90f3e8 100644
--- a/index.html
+++ b/index.html
@@ -50,6 +50,6 @@
     <script src="javascript/data.js"></script>
     <script src="javascript/getInstruction.js"></script>
     <script src="javascript/obtainInstruction.js"></script>
-    <script src="javascript/index.js"></script>
+    <script type="module" src="javascript/index.js"></script>
   </body>
 </html>
diff --git a/javascript/data.js b/javascript/data.js
index 0e0444977..52dbc0fb5 100644
--- a/javascript/data.js
+++ b/javascript/data.js
@@ -1,4 +1,5 @@
-const steak = [
+
+  const steak = [
   "season steak generously with salt, pepper and garlic powder",
   "place in zip lock bag",
   "cook in sous vide at 120 F for 1-2 hours",
@@ -36,4 +37,4 @@ const broccoli = [
   'cook for 3 to 4 minutes, or until tender',
   'drain, then leave to steam dry for a minute',
   'enjoy'
-];
\ No newline at end of file
+];
diff --git a/javascript/index.js b/javascript/index.js
index 9f30552db..d51f118e9 100644
--- a/javascript/index.js
+++ b/javascript/index.js
@@ -4,37 +4,140 @@
 // 🚨🚨🚨 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,
+  (step1) => {
+    document.querySelector("#mashedPotatoes").innerHTML += `<li>${step1}</li>`;
+    getInstruction(
+      "mashedPotatoes",
+      1,
+      (step2) => {
+        document.querySelector(
+          "#mashedPotatoes"
+        ).innerHTML += `<li>${step2}</li>`;
+        getInstruction(
+          "mashedPotatoes",
+          2,
+          (step3) => {
+            document.querySelector(
+              "#mashedPotatoes"
+            ).innerHTML += `<li>${step3}</li>`;
+            getInstruction(
+              "mashedPotatoes",
+              3,
+              (step4) => {
+                document.querySelector(
+                  "#mashedPotatoes"
+                ).innerHTML += `<li>${step4}</li>`;
+                getInstruction(
+                  "mashedPotatoes",
+                  4,
+                  (step5) => {
+                    document.querySelector(
+                      "#mashedPotatoes"
+                    ).innerHTML += `<li>${step5}</li>`;
+                    document
+                      .querySelector("#mashedPotatoesImg")
+                      .removeAttribute("hidden");
+                    document.querySelector(
+                      "#mashedPotatoes"
+                    ).innerHTML += `<li> Mashed potatoes are ready!</li>`;
+                  },
+                  (error) => console.log(error)
+                );
+              },
+              (error) => console.log(error)
+            );
+          },
+          (error) => console.log(error)
+        );
+      },
+      (error) => console.log(error)
+    );
+  },
+  (error) => console.log(error)
+);
 
 // Iteration 2 - using promises
-// ...
-
+obtainInstruction("steak", 0)
+.then((response) => {
+  document.querySelector("#steak").innerHTML += `<li>${response}</li>`;
+  return obtainInstruction("steak", 1)
+  .then((response) => {
+    document.querySelector("#steak").innerHTML += `<li>${response}</li>`;
+    return obtainInstruction('steak',2)
+    .then((response)=>{
+      document.querySelector("#steak").innerHTML += `<li>${response}</li>`;
+      return obtainInstruction('steak',3)
+      .then((response)=>{
+        document.querySelector("#steak").innerHTML += `<li>${response}</li>`;
+        return obtainInstruction('steak',4)
+        .then((response)=>{
+          document.querySelector("#steak").innerHTML += `<li>${response}</li>`;
+          return obtainInstruction('steak',5)
+          .then((response)=>{
+            document.querySelector("#steak").innerHTML += `<li>${response}</li>`;
+            return obtainInstruction('steak',6)
+            .then((response)=>{
+              document.querySelector("#steak").innerHTML += `<li>${response}</li>`;
+              return obtainInstruction('steak',7)
+              .then((response)=>{
+                document.querySelector("#steak").innerHTML += `<li>${response}</li>`;
+                document.querySelector('#steak').innerHTML += `<li>Your Steak is ready!</li>`
+              }).catch((reject)=> console.log('error: ',reject))
+            })
+            })
+        })
+      })    
+    })
+  })
+})
 // Iteration 3 using async/await
-// ...
+async function makeBroccoli(){
+  try {
+    const step1 = await obtainInstruction('broccoli',0)
+    document.querySelector("#broccoli").innerHTML += `<li>${step1}</li>`;
+    const step2 = await obtainInstruction('broccoli',1)
+    document.querySelector("#broccoli").innerHTML += `<li>${step2}</li>`;
+    const step3 = await obtainInstruction('broccoli',2)
+    document.querySelector("#broccoli").innerHTML += `<li>${step3}</li>`;
+    const step4 = await obtainInstruction('broccoli',3)
+    document.querySelector("#broccoli").innerHTML += `<li>${step4}</li>`;
+    const step5 = await obtainInstruction('broccoli',4)
+    document.querySelector("#broccoli").innerHTML += `<li>${step5}</li>`;
+    const step6 = await obtainInstruction('broccoli',5)
+    document.querySelector("#broccoli").innerHTML += `<li>${step6}</li>`;
+    const step7 = await obtainInstruction('broccoli',6)
+    document.querySelector("#broccoli").innerHTML += `<li>${step7}</li>`;
+    document.querySelector('#broccoli').innerHTML += `<li>Your Broccoli is ready!</li>`
+  } 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": {}
+}
diff --git a/stylesheets/style.css b/stylesheets/style.css
index ce0114cf5..48058ebd5 100644
--- a/stylesheets/style.css
+++ b/stylesheets/style.css
@@ -4,6 +4,7 @@
 
 body {
   padding: 20px;
+  background-color: #363535;
 }
 
 img {
@@ -13,7 +14,7 @@ img {
 li {
   font-size: 16px;
   line-height: 1.5rem;
-  color: #545454;
+  color: #fdf6f6;
   /* text-transform: capitalize; */
 }
 
@@ -72,7 +73,7 @@ button {
   font-size: 3rem;
   padding: 1rem;
   background: #eeeeee;
-  color: black;
+  color: rgb(239, 227, 227);
   transition: all.2s;
 }