From 61fa400db2fa1ed4f65e6bafe15f2956c0a95ad8 Mon Sep 17 00:00:00 2001
From: rbc33 <ricardobenthem@gmail.com>
Date: Tue, 4 Nov 2025 19:51:22 +0100
Subject: [PATCH 1/2] Done

---
 javascript/index.js | 164 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 139 insertions(+), 25 deletions(-)

diff --git a/javascript/index.js b/javascript/index.js
index 9f30552db..ff2aacc36 100644
--- a/javascript/index.js
+++ b/javascript/index.js
@@ -4,37 +4,151 @@
 // 🚨🚨🚨 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,
+			(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>
+                    <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>`
+	obtainInstruction('steak', 1).then((step1) => {
+		document.querySelector('#steak').innerHTML += `<li>${step1}</li>`
+		obtainInstruction('steak', 2).then((step2) => {
+			document.querySelector('#steak').innerHTML += `<li>${step2}</li>`
+			obtainInstruction('steak', 3).then((step3) => {
+				document.querySelector('#steak').innerHTML += `<li>${step3}</li>`
+				obtainInstruction('steak', 4).then((step4) => {
+					document.querySelector('#steak').innerHTML += `<li>${step4}</li>`
+					obtainInstruction('steak', 5).then((step5) => {
+						document.querySelector('#steak').innerHTML += `<li>${step5}</li>`
+						obtainInstruction('steak', 6).then((step6) => {
+							document.querySelector('#steak').innerHTML += `<li>${step6}</li>`
+							obtainInstruction('steak', 7).then((step7) => {
+								document.querySelector('#steak').innerHTML += `<li>${step7}</li>
+                <li>Stake is ready!</li>`
+								document.querySelector('#steakImg').removeAttribute('hidden')
+							})
+						})
+					})
+				})
+			})
+		})
+	})
+})
 
 // 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('#broccoli').innerHTML += `<li>Broccoli is ready!</li>`
+	document.querySelector('#broccoliImg').removeAttribute('hidden')
+}
+makeBroccoli()
 // Bonus 2 - Promise all
-// ...
\ No newline at end of file
+const step0 = obtainInstruction('brusselsSprouts', 0)
+const step1 = obtainInstruction('brusselsSprouts', 1)
+const step2 = obtainInstruction('brusselsSprouts', 2)
+const step3 = obtainInstruction('brusselsSprouts', 3)
+const step4 = obtainInstruction('brusselsSprouts', 4)
+const step5 = obtainInstruction('brusselsSprouts', 5)
+const step6 = obtainInstruction('brusselsSprouts', 6)
+const step7 = obtainInstruction('brusselsSprouts', 7)
+Promise.all([step0, step1, step2, step3, step4, step5, step6, step7])
+	.then((values) =>
+		values.map(
+			(v) =>
+				(document.querySelector(
+					'#brusselsSprouts'
+				).innerHTML += `<li>${v}</li>`)
+		)
+	)
+	.then(
+		() =>
+			(document.querySelector(
+				'#brusselsSprouts'
+			).innerHTML += `<li>Brussels sprouts are ready!</li>`),
+		document.querySelector('#brusselsSproutsImg').removeAttribute('hidden')
+	)

From 50dceaae8d6664ea69bed0ff1cbe7ce154e3882a Mon Sep 17 00:00:00 2001
From: rbc33 <ricardobenthem@gmail.com>
Date: Sat, 8 Nov 2025 11:32:42 +0100
Subject: [PATCH 2/2] Done

---
 javascript/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/javascript/index.js b/javascript/index.js
index ff2aacc36..49ddd9fc7 100644
--- a/javascript/index.js
+++ b/javascript/index.js
@@ -29,8 +29,8 @@
 getInstruction(
 	'mashedPotatoes',
 	0,
-	(step0) => {
-		document.querySelector('#mashedPotatoes').innerHTML += `<li>${step0}</li>`
+	(step1) => {
+		document.querySelector('#mashedPotatoes').innerHTML += `<li>${step1}</li>`
 		getInstruction(
 			'mashedPotatoes',
 			1,
@@ -145,7 +145,7 @@ Promise.all([step0, step1, step2, step3, step4, step5, step6, step7])
 				).innerHTML += `<li>${v}</li>`)
 		)
 	)
-	.then(
+	.finally(
 		() =>
 			(document.querySelector(
 				'#brusselsSprouts'