Skip to content
Open

done #1713

Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 86 additions & 3 deletions javascript/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,96 @@


// 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><strong>Mashed potatoes are ready!</strong></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>`;
document.querySelector("steak").innerHTML += `<li><strong>Steak is ready!</strong></li>`;
document.querySelector("#steakImg").removeAttribute("hidden");
})
.catch((err) => console.log(err));


// Iteration 3 using async/await
// ...
// Iteration 3 - using async/await
async function makeBroccoli() {
try {
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><strong>Broccoli is ready!</strong></li>`;
document.querySelector("#broccoliImg").removeAttribute("hidden");
} catch (error) {
console.log(error);
}
}
makeBroccoli();


// Bonus 2 - Promise all
// ...