├── .github
└── stale.yml
├── .gitignore
├── README.md
├── images
├── broccoli.jpg
├── brussels-sprouts.jpg
├── mashed-potatoes.jpg
└── steak.jpg
├── index.html
├── javascript
├── data.js
├── getInstruction.js
├── index.js
└── obtainInstruction.js
├── media
└── dinner-is-served.mp3
└── stylesheets
└── style.css
/.github/stale.yml:
--------------------------------------------------------------------------------
1 | # Configuration for probot-stale - https://github.com/probot/stale
2 |
3 | # Number of days of inactivity before an Issue or Pull Request becomes stale
4 | daysUntilStale: 21
5 |
6 | # Number of days of inactivity before an Issue or Pull Request with the stale label is closed.
7 | # Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale.
8 | daysUntilClose: 7
9 |
10 | # Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
11 | exemptLabels:
12 | - bug
13 | - enhancement
14 |
15 | # Label to use when marking as stale
16 | staleLabel: stale
17 |
18 | # Comment to post when marking as stale. Set to `false` to disable
19 | markComment: >
20 | This pull request has been automatically marked as stale because it didn't have any recent activity. It will be closed if no further activity occurs. Thank you.
21 | closeComment: >
22 | This pull request has been automatically closed. Thank you.
23 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # LAB | #Promise me a dinner
4 |
5 | ## Introduction
6 |
7 | Due to the asynchronous nature of JavaScript, promises and callbacks are very important. Both allow us to control the flow of the operations and execute tasks in sequence.
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | ## Requirements
16 |
17 | - Fork this repo
18 | - Clone this repo
19 |
20 | ## Submission
21 |
22 | - Upon completion, run the following commands:
23 |
24 | ```shell
25 | $ git add .
26 | $ git commit -m "done"
27 | $ git push origin master
28 | ```
29 |
30 |
31 | - Create a Pull Request and submit your assignment.
32 |
33 |
34 |
35 | ## Instructions
36 |
37 | ## Iteration 0 | The starter code
38 |
39 | We provided you with some starter code:
40 |
41 | - **`javascript/data.js`** - contains four arrays with steps to preparing 4 different foods: _mashed potatoes_, _steak_, _brussels sprouts_ and _broccoli_.
42 |
43 |
44 |
45 | - **`javascript/getInstruction.js`** - contains a function **`getInstruction`** that **uses callbacks** to asynchronously retrieve instruction steps for any food. It uses `setTimeout` to mimic an asynchronous operation.
46 |
47 | ```js
48 | getInstruction(food, step, callback, errorCallback)
49 | ```
50 |
51 | :exclamation: **You should not make any changes to this file.**
52 |
53 |
54 |
55 | - **`javascript/obtainInstruction.js`** - has a function **`obtainInstruction`** that **uses promises** to asynchronously retrieve instruction steps for any food. It also uses `setTimeout` to mimic an asynchronous operation.
56 |
57 | ```js
58 | obtainInstruction(food, step)
59 | ```
60 |
61 | :exclamation: **You should not make any changes to this file either.**
62 |
63 |
64 |
65 | - **`javascript/index.js`** - in this file we left an example to show you how the code should execute. However, the provided code doesn't use nested callbacks or promises *yet*, which is why the steps won't print in the correct order. Your task in the first iteration will be to do this properly, but more on that later.
66 |
67 |
68 |
69 | - **`index.html`** - contains a base HTML structure needed so no need to add any code there. Previously mentioned JavaScript files are already linked to the `index.html`. The `data.js` loads first to make sure arrays that hold instructions are already loaded and can be used in other files, where we need them.
70 | :exclamation: **You should not make any changes to this file.**
71 |
72 |
73 |
74 | ----
75 |
76 | ### Out of sync
77 |
78 | **You should write your code only in the `javascript/index.js` file.**
79 |
80 | Now, open the file and take a look at the starter code provided there. The provided code doesn't use nested callbacks to enforce a sequence of execution, which is why the steps are not displayed in the correct order.
81 |
82 | Go ahead and open the `index.html` page in the browser. Notice how the cooking steps are displayed out of order.
83 |
84 |
85 |
86 |
87 | Screenshot
88 |
89 | 
90 |
91 |
92 |
93 |
94 |
95 | :exclamation:Before you start working on Iteration 1, comment out the initial code in `javascript/index.js`.
96 |
97 |
98 |
99 |
100 |
101 | ----
102 |
103 | ## Iteration 1 | Make the mashed potatoes with callbacks
104 |
105 | Using nested callbacks print the cooking steps to make Mashed Potatoes in the correct order. Write your JavaScript in the provided `javascript/index.js` file. Once again, a reminder not to alter the `getInstruction.js` file.
106 |
107 | ```javascript
108 | // Iteration 1 - using callbacks
109 | getInstruction('mashedPotatoes', 0, (step0) => {
110 | document.querySelector("#mashedPotatoes").innerHTML += `
${step0}
`
111 | // ... Your code here
112 | // ...
113 | });
114 | ```
115 |
116 |
117 |
118 | After the last step, you should display an additional `
` with the text: `Mashed potatoes are ready!`.
119 |
120 |
121 |
122 |
123 | Expected Result
124 |
125 | 
126 |
127 |
128 |
129 |
130 |
131 | ----
132 |
133 | ## Iteration 2 | Make the stake with promises
134 |
135 |
136 | Using promises and the `then()` statement print the directions to display the cooking instruction for the Stake in the correct order.
137 | This time, you will have to call the function `obtainInstruction` which returns a pending Promise.
138 |
139 | Continue working in the `javascript/index.js`. You should not alter the `obtainInstruction.js` file.
140 |
141 | ```javascript
142 | // Iteration 2 - using promises
143 | obtainInstruction('steak', 0)
144 | .then( (step0) => {
145 | document.querySelector("#steak").innerHTML += `
${step0}
`
146 | // ... Your code here
147 | })
148 | // ... Your code here
149 | ```
150 |
151 |
152 |
153 | After the last step, you should display an additional `
` with the text: `Stake is ready!`.
154 |
155 |
156 |
157 |
158 | Expected Result
159 |
160 | 
161 |
162 |
163 |
164 |
165 |
166 | ----
167 |
168 | ## Iteration 3 | Make the broccoli with async/await
169 |
170 |
171 | Using promises with the `async` and `await` syntax print the directions to make Broccoli in the correct order. You will need to use the function `obtainInstruction` which returns a pending Promise.
172 |
173 | ```javascript
174 | async function makeBroccoli() {
175 | // ... Your code here
176 | }
177 | ```
178 |
179 |
180 |
181 | After the last step, you should display an additional `
` element with the text: `Broccoli is ready!`.
182 |
183 |
184 |
185 |
186 | Expected Result
187 |
188 | 
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 | ----
197 |
198 | ## Bonus: Iteration 4 - Display the image
199 |
200 | When the specific food is ready to be served (all steps are listed), remove the `hidden` attribute from the `` element that represents the food, so that the image gets displayed.
201 |
202 |
203 |
204 |
205 | Expected Result
206 |
207 | 
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 | ----
216 |
217 | ## Bonus: Iteration 5 - `Promise.all()`
218 |
219 |
220 | Using `Promise.all` display the cooking steps to make Brussels Sprouts in the correct order.
221 |
222 | After the last step, you should display an additional `
` with the text: `Brussels sprouts are ready!`.
223 |
224 |
225 |
226 | **The final result should look like this - with all the cooking steps displaying in the correct order**:
227 |
228 | 
229 |
230 |
231 |
232 | **Happy coding!** :blue_heart:
233 |
234 |
235 |
236 |
237 |
238 | ## FAQs
239 |
240 |
241 |
242 | I am stuck and don't know how to solve the problem or where to start. What should I do?
243 |
244 |
245 |
246 | If you are stuck in your code and don't know how to solve the problem or where to start, you should take a step back and try to form a clear question about the specific issue you are facing. This will help you narrow down the problem and come up with potential solutions.
247 |
248 | For example, is it a concept that you don't understand, or are you receiving an error message that you don't know how to fix? It is usually helpful to try to state the problem as clearly as possible, including any error messages you are receiving. This can help you communicate the issue to others and potentially get help from classmates or online resources.
249 |
250 | Once you have a clear understanding of the problem, you will be able to start working toward the solution.
251 |
252 |
253 |
254 | [Back to top](#faqs)
255 |
256 |
257 |
258 |
259 | How to use then() and catch() with Promises?
260 |
261 |
262 |
263 | When working with Promises or a *function that returns a promise*, you can attach the `.then()` method to handle the resolved value and a `catch()` method to handle the possible rejection value.
264 |
265 | Here is an example of how to use `.then()` and `.catch()` to handle a simple promise:
266 |
267 | ```js
268 | myPromise
269 | .then((result) => {
270 | console.log(result);
271 | })
272 | .catch((error) => {
273 | console.log(error);
274 | })
275 | ```
276 |
277 |
278 |
279 | Here is an example of using `.then()` and `.catch()` to handle a promise returned by a function/method:
280 |
281 | ```js
282 | someAPI.getData()
283 | .then((result) => {
284 | console.log(result);
285 | })
286 | .catch((error) => {
287 | console.log(error);
288 | })
289 | ```
290 |
291 |
292 |
293 | If you are trying to execute multiple promises in a sequence, you can do so by returning a promise from a `.then()` block. Example:
294 |
295 | ```js
296 | someAPI.getData()
297 | .then((result1) => {
298 | console.log(result1);
299 | return someAPI.getData();
300 | }) // Return another pending promise
301 | .then((result2) => { // Handle the returned promise
302 | console.log(result2);
303 | })
304 | .catch((error) => {
305 | console.log(error);
306 | })
307 | ```
308 |
309 | The first line `someAPI.getData()` initiates an asynchronous operation, which returns a promise. The `.then()` method is then called on the promise to handle the resolved value.
310 |
311 | The first `then()` returns another promise with another call to `someAPI.getData()`, which allows to chain another `then()` function that handles the second resolved value, logging it to the console.
312 |
313 |
314 |
315 | [Back to top](#faqs)
316 |
317 |
318 |
319 |
320 | How to use async function and await?
321 |
322 |
323 |
324 | You create an asynchronous function by using the `async` keyword before the function definition.
325 |
326 | An `async` function allows you to use the `await` keyword inside the function body to wait for a promise to resolve.
327 |
328 | When using an `async` function to handle asynchronous code (e.g. API call) that may potentially throw an error, we have to add a `try`/`catch` block to be able to handle any potential errors.
329 |
330 | ##### Syntax
331 |
332 | ```js
333 | async function doSomething() {
334 | try {
335 | // Code that will be executed asynchronously
336 | // that might throw an error
337 | }
338 | catch (error) {
339 | // Handle the error
340 | }
341 | }
342 | ```
343 |
344 |
345 |
346 | ##### Using `await` inside an `async` function
347 |
348 | Here is an example of using `await` inside of an `async` function to await for a promise to resolve:
349 |
350 | ```js
351 | async function getData() {
352 | try {
353 | let response = await fetch('https://api.github.com/search/repositories?q=js');
354 | let data = await response.json();
355 | console.log(data);
356 | }
357 | catch (error) {
358 | // error
359 | }
360 | }
361 | ```
362 |
363 |
364 |
365 | In the above example, the first `await` is used to wait for the promise returned by `fetch()` to resolve. The value of the resolved promise is then assigned to the variable `response`.
366 |
367 | The second `await` is used to parse the response as json object, and is used to wait for the promise returned by `response.json()`. The resolved value is then assigned to the variable `data`.
368 |
369 | The function uses the `return` keyword to return the `data` to allow consuming the value outside of the function.
370 |
371 |
372 |
373 | ##### An `async` function always returns a Promise
374 |
375 | The difference between a *regular function* and an `async` function is that the **`async` function always returns a Promise**.
376 |
377 | Once defined, you can invoke an `async` function just like a regular function and **handle the Promise it returns using `.then()` and `.catch()` or `await`**.
378 |
379 |
380 |
381 | Here's an example of using `then` and `catch` to handle a Promise returned by an `async` function:
382 |
383 | ```js
384 | async function greeting() {
385 | // An `async` function always returns a promise
386 | // This value will be returned as a Promise
387 | return "HELLO IRONHACKERS!";
388 | }
389 |
390 | greeting()
391 | .then((result) => {
392 | console.log(result);
393 | })
394 | .catch((error) => {
395 | console.log("Error:", error);
396 | })
397 | ```
398 |
399 |
400 |
401 | Here's an example of handling the same `async` function but this time using `await`:
402 |
403 | ```js
404 | async function greeting() {
405 | // Async function always returns a promise
406 | // This value will be returned as a Promise
407 | return "HELLO IRONHACKERS"!;
408 | }
409 |
410 | // We need another wrapper `async` function so that we can use `await`
411 | async function wrapperFunction() {
412 | try {
413 | const result = await greeting(
414 | console.log(result);
415 | }
416 | catch (error) {
417 | console.log("Error:", error);
418 | }
419 | }
420 | ```
421 |
422 | Note that we needed another wrapper `async` function to be able to use `await`.
423 |
424 |
425 |
426 | [Back to top](#faqs)
427 |
428 |
429 |
430 |
431 | How to use try / catch block?
432 |
433 |
434 |
435 | The `try`/`catch` block is used to handle errors that occur during the execution of a program.
436 |
437 | The `try` block contains the code that might throw an error, and the `catch` block contains the code that will handle the error.
438 |
439 | Here is an example of using a `try`/`catch` block:
440 |
441 | ```js
442 | try {
443 | // Code that might throw an error
444 | } catch (error) {
445 | // Handle the error
446 | }
447 | ```
448 |
449 |
450 |
451 | The `try`/`catch` block is typically used in `async` functions when handling asynchronous code that may potentially throw an error.
452 |
453 | Here is an example of using a `try`/`catch` block in an `async` function when handling a promise:
454 |
455 | ```js
456 | async function doSomething() {
457 |
458 | try {
459 | // Code that might throw an error
460 | const result = await someAsyncFunction();
461 | }
462 | catch (error) {
463 | // Handle the error
464 | console.error(error);
465 | }
466 | }
467 | ```
468 |
469 | In the above example, the `try` block contains an asynchronous operation that might throw an error: `await someAsyncFunction()`. If an error is thrown, execution will automatically jump to the `catch` block.
470 |
471 |
472 |
473 | [Back to top](#faqs)
474 |
475 |
476 |
477 |
478 | How to use Promise.all()?
479 |
480 |
481 |
482 | The `Promise.all()` method is used for handling multiple promises at the same time. It works in the following way:
483 |
484 |
485 |
486 | 1. `Promise.all()` takes an array of promises. Example:
487 |
488 | > ```js
489 | > Promise.all( [promise1, promise2, promise3] )
490 | > ```
491 |
492 | 2. **`Promise.all()` returns a pending promise**, allowing you to handle it with `.then()` and `catch()` or with `await`. Example:
493 |
494 | > ```js
495 | > Promise.all( [promise1, promise2, promise3] )
496 | > .then((result) => {})
497 | > .catch((error) => {})
498 | > ```
499 |
500 | 3. **It resolves successfully only if all input promises are fulfilled.** The resolved value is an array of resolved input promises. Example:
501 |
502 | > ```js
503 | > Promise.all( [promise1, promise2, promise3] )
504 | > .then((values) => { // Resolved value is an array
505 | > console.log("promise1 value: ", values[0] );
506 | > console.log("promise2 value: ", values[1] );
507 | > console.log("promise3 value: ", values[2] );
508 | > })
509 | > .catch((error) => {})
510 | > ```
511 |
512 | 4. **If even one of the input promises gets rejected, the returned promise gets rejected** with an Error and the execution jumps to the `catch` block.
513 |
514 |
515 |
516 |
517 | ##### Handling `Promise.all()` with `then()` / `catch()`
518 |
519 | Here is an example of using `Promise.all()` and handling the returned promise with `.then()` and `.catch()`:
520 |
521 | ```js
522 | const promise1 = new Promise((resolve, reject) => {
523 | resolve("HELLO");
524 | })
525 |
526 | const promise2 = new Promise((resolve, reject) => {
527 | resolve("WORLD");
528 | })
529 |
530 |
531 | Promise.all( [promise1, promise2] )
532 | .then((values) => {
533 | console.log(values);
534 | })
535 | .catch((error) => {
536 | console.log(error);
537 | })
538 | ```
539 |
540 | In the above example, we define two new promises, `promise1` and `promise2`, and use the `Promise.all()` to handle them at the same time.
541 |
542 | The `Promise.all( [promise1, promise2] )` returns a new promise, that is fulfilled with an array of fulfilled values from the input promises (`promise1` and `promise2`). We named this array `values`.
543 |
544 |
545 |
546 | ##### Handling `Promise.all()` with `await()`
547 |
548 | Here is another example of handling `Promise.all()` and the returned promise with `await`:
549 |
550 | ```js
551 | const promise1 = new Promise((resolve, reject) => {
552 | resolve("HELLO");
553 | });
554 |
555 | const promise2 = new Promise((resolve, reject) => {
556 | resolve("WORLD");
557 | });
558 |
559 |
560 | async function handlePromiseAll() {
561 | try {
562 | const values = Promise.all( [promise1, promise2] );
563 | console.log(values);
564 | }
565 | catch (error) {
566 | console.log(error);
567 | }
568 | }
569 |
570 | handlePromiseAll()
571 | ```
572 |
573 | In the above example, we define two new promises, `promise1` and `promise2` just as before, and use the `Promise.all()` to handle them at the same time.
574 |
575 | When working with `await` we also need an `async` function, which is the reason for having the function `handlePromiseAll`.
576 |
577 | Inside this function, the `await` keyword is used to wait for the returned promise by `Promise.all()` to resolve. The resolved value is assigned to the variable `values`.
578 |
579 |
580 |
581 | [Back to top](#faqs)
582 |
583 |
584 |
585 |
586 | I am getting an error: "not defined". How do I fix it?
587 |
588 |
589 |
590 | The "ReferenceError: variable is not defined" error in JavaScript occurs when you try to access a variable or a function that has not been defined yet or is out of scope.
591 |
592 | To fix the issue, check that you have defined the variable or function that you are trying to use and double-check the spelling to make sure you are using the correct name.
593 |
594 | In case the variable or a function is defined in another file, make sure that the file has been imported or loaded correctly.
595 |
596 |
597 |
598 | [Back to top](#faqs)
599 |
600 |
601 |
602 |
603 | I am unable to push changes to the repository. What should I do?
604 |
605 |
606 |
607 | There are a couple of possible reasons why you may be unable to *push* changes to a Git repository:
608 |
609 | 1. **You have not committed your changes:** Before you can push your changes to the repository, you need to commit them using the `git commit` command. Make sure you have committed your changes and try pushing again. To do this, run the following terminal commands from the project folder:
610 |
611 | ```bash
612 | git add .
613 | git commit -m "Your commit message"
614 | git push
615 | ```
616 |
617 | 2. **You do not have permission to push to the repository:** If you have cloned the repository directly from the main Ironhack repository without making a *Fork* first, you do not have write access to the repository.
618 | To check which remote repository you have cloned, run the following terminal command from the project folder:
619 |
620 | ```bash
621 | git remote -v
622 | ```
623 |
624 | If the link shown is the same as the main Ironhack repository, you will need to fork the repository to your GitHub account first, and then clone your fork to your local machine to be able to push the changes.
625 |
626 | Note: You may want to make a copy of the code you have locally, to avoid losing it in the process.
627 |
628 |
629 |
630 | [Back to top](#faqs)
631 |
632 |
633 |
--------------------------------------------------------------------------------
/images/broccoli.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ironhack-labs/lab-es6-promises/8fabeda8fb9b4114e63d057634be5681bffce6da/images/broccoli.jpg
--------------------------------------------------------------------------------
/images/brussels-sprouts.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ironhack-labs/lab-es6-promises/8fabeda8fb9b4114e63d057634be5681bffce6da/images/brussels-sprouts.jpg
--------------------------------------------------------------------------------
/images/mashed-potatoes.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ironhack-labs/lab-es6-promises/8fabeda8fb9b4114e63d057634be5681bffce6da/images/mashed-potatoes.jpg
--------------------------------------------------------------------------------
/images/steak.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ironhack-labs/lab-es6-promises/8fabeda8fb9b4114e63d057634be5681bffce6da/images/steak.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Promise me a dinner
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/javascript/data.js:
--------------------------------------------------------------------------------
1 | const steak = [
2 | "season steak generously with salt, pepper and garlic powder",
3 | "place in zip lock bag",
4 | "cook in sous vide at 120 F for 1-2 hours",
5 | "remove from bag and pat dry",
6 | "heat pan with grapeseed oil and a quarter stick of butter",
7 | "cook steak for 30-60 seconds per side using a spoon to baste with butter",
8 | "rest for 10 minutes",
9 | "enjoy",
10 | ];
11 |
12 | const mashedPotatoes = [
13 | "boil water",
14 | "tear open bag of of instant potato mix and pour into bowl",
15 | "pour in water",
16 | "mix",
17 | "enjoy",
18 | ];
19 |
20 | const brusselsSprouts = [
21 | 'wash brussels sprouts',
22 | 'cut off base and chop in half',
23 | 'toss in bowl with olive oil, balsamic vinegar and salt',
24 | 'preheat oven to 500 F',
25 | 'coat baking sheet with olive oil',
26 | 'roast in the oven for 20 minutes',
27 | 'place back in bowl and add salt and pepper',
28 | 'enjoy'
29 | ];
30 |
31 | const broccoli = [
32 | 'wash broccoli in cold water',
33 | 'trim and cut the stalk in half, then finely slice it',
34 | 'fill a pot with water, add a pinch of salt and bring to the boil',
35 | 'once boiling, carefully lower the broccoli into the water',
36 | 'cook for 3 to 4 minutes, or until tender',
37 | 'drain, then leave to steam dry for a minute',
38 | 'enjoy'
39 | ];
--------------------------------------------------------------------------------
/javascript/getInstruction.js:
--------------------------------------------------------------------------------
1 | /* CALL THIS FUNCTION FROM OTHER FILES */
2 | /****** DO NOT TOUCH vvv *****/
3 |
4 | // Callback based function
5 | function getInstruction(food, step, callback, errorCallback) {
6 | setTimeout(() => {
7 | // Get the instruction string
8 | let instruction;
9 |
10 | if (food === "mashedPotatoes") {
11 | instruction = mashedPotatoes[step];
12 | }
13 | else if (food === "steak") {
14 | instruction = steak[step];
15 | }
16 | else if (food === "brusselsSprouts") {
17 | instruction = brusselsSprouts[step];
18 | }
19 | else if (food === "broccoli") {
20 | instruction = broccoli[step];
21 | };
22 |
23 | // Invoke the provided callback or errorCallback
24 | if (!instruction) {
25 | errorCallback("Instruction step does not exist!");
26 | } else {
27 | callback(instruction);
28 | }
29 |
30 | }, Math.floor(Math.random() * 1000));
31 | }
32 |
33 | /***** ^^^ DO NOT TOUCH *****/
34 |
--------------------------------------------------------------------------------
/javascript/index.js:
--------------------------------------------------------------------------------
1 | // This will print in the wrong order.
2 | // We added it as an example and to test that the arrays from data.js are loaded
3 |
4 | // 🚨🚨🚨 Comment out the below code before you start working on the code
5 |
6 | // Out of sync
7 | getInstruction("mashedPotatoes", 0, (step1) => {
8 | document.querySelector("#mashedPotatoes").innerHTML += `
12 |
13 | 
14 | 
17 | 
20 | 
23 |