# U3LA1 Mini Project: Arrays, Iteration, and Objects Lab

### Teacher Notes

This vanilla javascript lab located exclusively in the `script.js` (1-3) **(**[**repl.it**](https://replit.com/@qrtnycs4all/U3LA1-Mini-Project-Starter-Code) **|** [**github**](https://github.com/nycdoe-cs4all/interactive-web/tree/main/unit-3-advanced-dom/U3LAB1/U3LAB1-Starter)**)** is a series of challenges for students to get familiar with javascript basic data structures, arrays and objects, and iterating through them. The extensions are included at the bottom of the `script.js`.

This lab is designed to come right after the Javascript Arrays, Iteration, and Objects lesson. Students should be able to jump right in and work on the challenges throughout the script files. As there are 3 files, plan to remind students how to comment and uncomment the corresponding script tags in the `index.html` as to which they are currently working on. (i.e. when they finish the `script1.js` they should comment out the line in the `index.html` and uncomment the `script2.js` line so they can see the results displayed in the Dev Tools.)

You can structure this lab to be 3 separate days, 1 day per each lab, all the labs on 1 day, or break it up how you see fit. The first lab is all about arrays, the second contains objects and nested objects, and the third is all about array iteration.

**Students should utilize the Starter Code (**[**repl.it**](https://replit.com/@qrtnycs4all/U3LA1-Mini-Project-Starter-Code) **|** [**github**](https://github.com/nycdoe-cs4all/interactive-web/tree/main/unit-3-advanced-dom/U3LAB1/U3LAB1-Starter)**) to begin this project.**

### Prompt

For this lab, put together what you've learned recently about javascript arrays and objects, and try the challenges in the `script1.js`. When you finish `script1.js`, there is two others you can work from (`script2.js` and `script3.js`). Use the resources below under [Extra Help](#extra-help) if you get stuck. When time's up come back here for some reflection questions.

### Exemplar (teacher's view only)

Take a look at this [**finished example**](https://github.com/nycdoe-cs4all/interactive-web/tree/main/unit-3-advanced-dom/U3LAB1/U3LAB1-Exemplar) for the answer key to the javascript challenges.

### Culturally Responsive Best Practice

*Coming Soon*

### Extra Help?

Use the following resources to see examples of how to implement the methods, functions and other concepts in the `script.js`:

* For basic **array** syntax, refer to the lesson `notes.js` or check out [this w3schools resource](https://www.w3schools.com/js/js_arrays.asp).
* Here's a link to some [array methods](https://www.w3schools.com/js/js_array_methods.asp) and a separate one for [the `.sort()` method](https://www.w3schools.com/js/js_array_sort.asp).
* For basic **object** syntax, refer to the lesson `notes.js` or check out [this w3schools resource](https://www.w3schools.com/js/js_objects.asp).
* Here's a link to the [array iteration methods](https://www.w3schools.com/js/js_array_iteration.asp) specifically.
* Enjoy watching videos instead? This Youtuber has great videos on [array basics](https://www.youtube.com/watch?v=7W4pQQ20nJg), [array iteration methods](https://www.youtube.com/watch?v=R8rmfD9Y5-c), and an [array of objects!](https://www.youtube.com/watch?v=D77ANP60DaU)

**Reflection Questions:**

* Which `script.js` was the most challenging? What is something you're most proud of getting through?
* What was one point in the challenges you got stuck? What did you do to unstick?
* What's the difference between an object and an array? Why might you rather use an object? Why might you rather use an array?