From 7f22933e9789a4aaacb4d972b0f57f3ebfb3ff75 Mon Sep 17 00:00:00 2001
From: Pablo Cabrera <pablo.cabrera.lopez@gmail.com>
Date: Thu, 4 Sep 2025 20:36:39 +0200
Subject: [PATCH] solved lab

---
 javascript/index.js | 137 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 117 insertions(+), 20 deletions(-)

diff --git a/javascript/index.js b/javascript/index.js
index 9f30552db..ebf6e10e6 100644
--- a/javascript/index.js
+++ b/javascript/index.js
@@ -4,37 +4,134 @@
 // 🚨🚨🚨 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", 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", 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", 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", 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", 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");
+        }, (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( (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>`
+    document.querySelector("#steakImg").removeAttribute("hidden");
+    document.querySelector("#steak").innerHTML += `<li>Steak is ready!</li>`
+  })
+  .catch( (error) => console.log(error));
 
 // Iteration 3 using async/await
-// ...
+async function makeBroccoli() {
+  const step0 = await obtainInstruction('broccoli', 0);
+  document.querySelector("#broccoli").innerHTML += `<li>${step0}</li>`
+  const step1 = await obtainInstruction('broccoli', 1);
+  document.querySelector("#broccoli").innerHTML += `<li>${step1}</li>`
+  const step2 = await obtainInstruction('broccoli', 2);
+  document.querySelector("#broccoli").innerHTML += `<li>${step2}</li>`
+  const step3 = await obtainInstruction('broccoli', 3);
+  document.querySelector("#broccoli").innerHTML += `<li>${step3}</li>`
+  const step4 = await obtainInstruction('broccoli', 4);
+  document.querySelector("#broccoli").innerHTML += `<li>${step4}</li>`
+  const step5 = await obtainInstruction('broccoli', 5);
+  document.querySelector("#broccoli").innerHTML += `<li>${step5}</li>`
+  const step6 = await obtainInstruction('broccoli', 6);
+  document.querySelector("#broccoli").innerHTML += `<li>${step6}</li>`
+  document.querySelector("#broccoliImg").removeAttribute("hidden");
+  document.querySelector("#broccoli").innerHTML += `<li>Broccoli is ready!</li>`
+}
+
+// Llamar la función para que se ejecute
+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((steps) => {
+  // steps es un array con todos los resultados en orden
+  steps.forEach((step, index) => {
+    document.querySelector("#brusselsSprouts").innerHTML += `<li>${step}</li>`
+  });
+  document.querySelector("#brusselsSproutsImg").removeAttribute("hidden");
+  document.querySelector("#brusselsSprouts").innerHTML += `<li>Brussels sprouts are ready!</li>`
+})
+.catch((error) => console.log(error));
\ No newline at end of file