diff --git a/index.html b/index.html
index c15c92dce..05dc6d822 100644
--- a/index.html
+++ b/index.html
@@ -10,16 +10,16 @@
diff --git a/javascript/index.js b/javascript/index.js
index 9f30552db..ac6df5c98 100644
--- a/javascript/index.js
+++ b/javascript/index.js
@@ -4,37 +4,189 @@
// 🚨🚨🚨 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(food, step, callback, errorCallback)
+//
+
+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}`;
+
+ }, () => {
+ console.log('error preparing mashedPotatoes step 4....');
+
+ })
+
+ }, () => {
+ console.log('error preparing mashedPotatoes step 3....');
+
+ })
+ }, () => {
+ console.log('error preparing mashedPotatoes step 2....');
+
+ })
+ }, () => {
+ console.log('error preparing mashedPotatoes step 1....');
+
+ })
+}, () => {
+ console.log('error preparing mashedPotatoes step 0....');
+})
+
+
+
// Iteration 2 - using promises
// ...
+// function obtainInstruction(food, step)
+//
+ 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}`;
+ return obtainInstruction('steak', 8);
+ })
+
+ .catch(function(error) {});
+
+
+
+
+
// Iteration 3 using async/await
// ...
+// async function makeBroccoli()
+//
+ 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}`;
+
+ document.querySelector("#broccoli").innerHTML += `Broccoli is ready!`;
+ } catch(error) {
+ console.log(error);
+ }
+ }
+
+ makeBroccoli();
+
// Bonus 2 - Promise all
-// ...
\ No newline at end of file
+// function makeBrusselsSprouts()
+//
+
+function makeBrusselsSprouts() {
+ const steps = [
+ obtainInstruction('brusselsSprouts', 0),
+ obtainInstruction('brusselsSprouts', 1),
+ obtainInstruction('brusselsSprouts', 2),
+ obtainInstruction('brusselsSprouts', 3),
+ obtainInstruction('brusselsSprouts', 4),
+ obtainInstruction('brusselsSprouts', 5),
+ obtainInstruction('brusselsSprouts', 6),
+ obtainInstruction('brusselsSprouts', 7)
+ ];
+
+ Promise.all(steps)
+ .then((allSteps) => {
+ // allSteps es un array con los textos de cada instrucción
+ allSteps.forEach((step) => {
+ document.querySelector("#brusselsSprouts").innerHTML += `${step}`;
+ });
+ // mensaje final
+ document.querySelector("#brusselsSprouts").innerHTML += `Brussels sprouts are ready!`;
+ })
+ .catch((error) => console.log(error));
+}
+
+makeBrusselsSprouts();
\ No newline at end of file
diff --git a/javascript/obtainInstruction.js b/javascript/obtainInstruction.js
index 66e18b933..4fcf58cee 100644
--- a/javascript/obtainInstruction.js
+++ b/javascript/obtainInstruction.js
@@ -9,6 +9,7 @@ function obtainInstruction(food, step) {
// Get the instruction string
let instruction;
+
if (food === "mashedPotatoes") {
instruction = mashedPotatoes[step];
}
+ 
+ 
+ 
+