diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/javascript/getInstruction.js b/javascript/getInstruction.js index 50dc7b26d..4a7b0975f 100644 --- a/javascript/getInstruction.js +++ b/javascript/getInstruction.js @@ -5,9 +5,9 @@ function getInstruction(food, step, callback, errorCallback) { setTimeout(() => { // Get the instruction string - let instruction; + let instruction; // yemegin yapilisindaki o anki adimi temsilen - if (food === "mashedPotatoes") { + if (food === "mashedPotatoes") { //burada condition ile verilen yemegin tarifinin hangi adimini istiyorsak onu elde ediyoruz if bloklari ile instruction = mashedPotatoes[step]; } else if (food === "steak") { @@ -21,7 +21,7 @@ function getInstruction(food, step, callback, errorCallback) { }; // Invoke the provided callback or errorCallback - if (!instruction) { + if (!instruction) { //instruction yoksa error donmesi lazim iceride erroru yaziyoruz errorCallback("Instruction step does not exist!"); } else { callback(instruction); diff --git a/javascript/index.js b/javascript/index.js index 9f30552db..44ac6fd2a 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -4,26 +4,24 @@ // 🚨🚨🚨 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", 0, (step1) => { // step 1 is value of instruction, in other words, it's the output of first step. + document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step1}
  • `; + getInstruction("mashedPotatoes", 1, (step2) => { document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step2}
  • `; + getInstruction("mashedPotatoes", 2, (step3) => { + document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step3}
  • `; + getInstruction("mashedPotatoes", 3, (step4) => { + document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step4}
  • `; + getInstruction("mashedPotatoes", 4, (step5) => { + document.querySelector("#mashedPotatoes").innerHTML += `
  • ${step5}
  • `; + document.querySelector("#mashedPotatoes").innerHTML += `
  • Mashed potatoes are ready!
  • `; + document.querySelector("#mashedPotatoesImg").removeAttribute("hidden"); + }, (error) => console.log(error)); + }, (error) => console.log(error)); + }, (error) => console.log(error)); }, (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)); +}, (error) => console.log(error)) @@ -33,8 +31,100 @@ // Iteration 2 - using promises // ... +obtainInstruction("steak", 0) + .then((outputOfStep0) => { + document.querySelector("#steak").innerHTML += `
  • ${outputOfStep0}
  • `; + return obtainInstruction("steak", 1) + }) + .then((outputOfStep1) => { + document.querySelector("#steak").innerHTML += `
  • ${outputOfStep1}
  • `; + return obtainInstruction("steak", 2) + }) + .then((outputOfStep2) => { + document.querySelector("#steak").innerHTML += `
  • ${outputOfStep2}
  • `; + return obtainInstruction("steak", 3) + }) + .then((outputOfStep3) => { + document.querySelector("#steak").innerHTML += `
  • ${outputOfStep3}
  • `; + return obtainInstruction("steak", 4) + }) + .then((outputOfStep4) => { + document.querySelector("#steak").innerHTML += `
  • ${outputOfStep4}
  • `; + return obtainInstruction("steak", 5) + }) + .then((outputOfStep5) => { + document.querySelector("#steak").innerHTML += `
  • ${outputOfStep5}
  • `; + return obtainInstruction("steak", 6) + }) + .then((outputOfStep6) => { + document.querySelector("#steak").innerHTML += `
  • ${outputOfStep6}
  • `; + return obtainInstruction("steak", 7) + }) + .then((outputOfStep7) => { + document.querySelector("#steak").innerHTML += `
  • ${outputOfStep7}
  • `; + document.querySelector("#steak").innerHTML += `
  • Stake is ready!
  • `; + document.querySelector("#steakImg").removeAttribute("hidden"); + }) + .catch((error) => console.log(error)) + // Iteration 3 using async/await // ... +async function makeBroccoli() { + + try { + const outputStep0 = await obtainInstruction("broccoli", 0); + document.querySelector("#broccoli").innerHTML += `
  • ${outputStep0}
  • `; + + const outputStep1 = await obtainInstruction("broccoli", 1); + document.querySelector("#broccoli").innerHTML += `
  • ${outputStep1}
  • `; + + const outputStep2 = await obtainInstruction("broccoli", 2); + document.querySelector("#broccoli").innerHTML += `
  • ${outputStep2}
  • `; + + const outputStep3 = await obtainInstruction("broccoli", 3); + document.querySelector("#broccoli").innerHTML += `
  • ${outputStep3}
  • `; + + const outputStep4 = await obtainInstruction("broccoli", 4); + document.querySelector("#broccoli").innerHTML += `
  • ${outputStep4}
  • `; + + const outputStep5 = await obtainInstruction("broccoli", 5); + document.querySelector("#broccoli").innerHTML += `
  • ${outputStep5}
  • `; + + const outputStep6 = await obtainInstruction("broccoli", 6); + document.querySelector("#broccoli").innerHTML += `
  • ${outputStep6}
  • `; + + document.querySelector("#steak").innerHTML += `
  • Broccoli is ready!
  • `; + document.querySelector("#broccoliImg").removeAttribute("hidden") + + } + catch (error) { + console.log(error) + } + +} + +makeBroccoli() + + + // Bonus 2 - Promise all -// ... \ No newline at end of file +// ... + +Promise.all( //just writing down all functions that returns each steps value one by one + [ obtainInstruction("brusselsSprouts", 0), // IT NEEDS TO BE ARRAY WITH SQUARE BRACKETS [] + obtainInstruction("brusselsSprouts", 1), + obtainInstruction("brusselsSprouts", 2), + obtainInstruction("brusselsSprouts", 3), + obtainInstruction("brusselsSprouts", 4), + obtainInstruction("brusselsSprouts", 5), + obtainInstruction("brusselsSprouts", 6), + obtainInstruction("brusselsSprouts", 7),] +).then((steps => { //returns an array so i need to be careful and use map methodds to process data that i exrtracted + steps.forEach(step => { + document.querySelector("#brusselsSprouts").innerHTML += `
  • ${step}
  • `; + }); + document.querySelector("#steak").innerHTML += `
  • Brussels sprouts are ready!
  • `; + document.querySelector("#brusselsSproutsImg").removeAttribute("hidden") + +})) \ No newline at end of file