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