simplify week 3 code-along

Objects/FoodPickerCodeAlong.md

@@ -2,7 +2,7 @@
 In this code-along, create a website to help visitors decide which food they should eat!
 
 ## Setting Up
-[Click here to go to the Food Picker Start project.](https://replit.com/@HylandOutreach/FoodPickerStart#script.js)
+[Click here to go to the Food Picker Start project.](https://replit.com/@HylandOutreach/FoodPickerStarter)
 
 1. Fork the Repl
 1. Run the project
@@ -32,52 +32,29 @@ function getFood() {
 }
 ```
 
-## Getting a Random Restaurant
-Next, find a random restaurant. There are a few things to notice in the existing code:
+## Getting a Random Item
+Next, find a random item. There are a few things to notice in the existing code:
 
-- The `restaurants` array contains various restaurant objects, that all contain items
+- The `items` array contains various food objects, that all contain some properties
 - The `getRandomInt` function will return a random integer between `0` and the `max`
 
-The code will have to find a random restaurant using the existing code.
+The code will have to find a random item using the existing code.
 
 1. Make a new line in the body of the `getFood` function
-1. Create a new variable named `randomRestaurantIndex`
-1. Set `randomRestaurantIndex` to be a call to `getRandomInt`
-1. Pass in `restaurants.length` to the `getRandomInt` call
-1. Under that, create a new variable named `restaurant`
-1. Set `restaurant` to be the value from the `restaurants` array at the `randomRestaurantIndex` index
-
-The code should look something like this:
-
-```js
-let randomRestaurantIndex = getRandomInt(restaurants.length);
-let restaurant = restaurants[randomRestaurantIndex];
-```
-
-This will not change the functionality of the button yet, but it will now be possible to get a random item!
-
-## Getting a Random Item
-A random restaurant has been chosen, and now a random item must be chosen from that restaurant.
-
-1. Make a new line in the body of the `getFood` function
-1. Create a new variable named `restaurantItems`
-1. Set `restaurantItems` to the `items` property of the `restaurant` object
-1. Make another new line
-1. There, create a new variable named `randomItemIndex`
+1. Create a new variable named `randomItemIndex`
 1. Set `randomItemIndex` to be a call to `getRandomInt`
-1. Pass in `restaurantItems.length` to the `getRandomInt` call
+1. Pass in `items.length` to the `getRandomInt` call
 1. Under that, create a new variable named `item`
-1. Set `item` to be the value from the `restaurantItems` array at the `randomItemIndex` index
+1. Set `item` to be the value from the `items` array at the `randomItemIndex` index
 
 The code should look something like this:
 
 ```js
-let restaurantItems = restaurant.items;
-let randomItemIndex = getRandomInt(restaurantItems.length);
-let item = restaurantItems[randomItemIndex];
+  let randomItemIndex = getRandomInt(items.length);
+  let item = items[randomItemIndex];
 ```
 
-Again, the button will not do anything yet... but now the function has all the necessary information about the item!
+This will not change the functionality of the button yet, but now we have a random item!
 
 ## Displaying the Random Item Name
 Now it is time to display the item information.
@@ -91,20 +68,20 @@ Now it is time to display the item information.
 1. Set `foodNameElement` to select the `<p id="food-name">` element
     - Using `document.querySelector`
 1. Under that, create a new variable named `foodNameText`
-1. Set `foodNameText` to be `ITEM (RESTAURANT)`
+1. Set `foodNameText` to be `ITEM (STORE)`
 1. Make the string into a template literal
 1. In the literal, replace `ITEM` with `${item.name}`
     - This gets the `name` property of the `item` object
-1. In the literal, replace `RESTAURANT` with `{$restaurant.name}`
-    - This gets the `name` property of the `restaurant` object
+1. In the literal, replace `STORE` with `{$item.store}`
+    - This gets the `store` property of the `item` object
 1. Set the `textContent` property of `foodNameElement` to `foodNameText`
     - This sets the actual element text so it will appear on the page
 
 Run the project, click the button, and verify that a random food item name is properly displayed! The additional code should look something like this:
 
 ```js
 let foodNameElement = document.querySelector("#food-name");
-let foodNameText = `${item.name} (${restaurant.name})`;
+let foodNameText = `${item.name} (${item.store})`;
 foodNameElement.textContent = foodNameText;
 ```
 
@@ -135,119 +112,97 @@ let foodPictureUrl = `pictures/${item.picture}`;
 foodPictureElement.src = foodPictureUrl;
 ```
 
-## Creating a Panera Object
-The page should now be fully functional! All that's left is adding some additional food items. Start by creating a new object for Panera.
-
-1. Make a new line at the bottom of the **script.js** file
-    - Make sure it's outside of the `getFood` function (after the `}`)
-1. There, create a new variable named `panera`
-1. Set `panera` to be a new empty object with `{` and `}`
-    - Press **Enter** to automatically add space between
-1. In the object, create a `name` property set to `"Panera"`
-    - Property name, colon, property value, comma
-1. Under that in the object, create an `items` property set to `[]`
-
-The new code should look something like this:
-
-```js
-let panera = {
-  name: "Panera",
-  items: []
-};
-```
-
-It will not change the functionality of the site yet - it needs at least one item!
-
 ## Creating a Greek Salad Object
-Start by adding a Greek Salad to the Panera items.
+The page should now be fully functional! All that's left is adding some additional food items. Start by creating a new object for a greek salad from Panera.
 
 1. Make a new line at the bottom of the **script.js** file
+    - Make sure it's outside of the `getFood` function (after the `}`)
 1. There, create a new variable named `greekSalad`
 1. Set `greekSalad` to be a new empty object with `{` and `}`
     - Press **Enter** to automatically add space between
-1. In the object, create a `price` property set to `10`
+1. In the object, create a `store` property set to `"Panera"`
     - Property name, colon, property value, comma
-1. Under that in the object, create a `picture` property set to `"greeksalad.jpg"`
-    - Note that there is a file in the **pictures** folder named **greeksalad.jpg**
+1. Under that in the object, create two more properties:  
+    - `price` set to `10`
+    - `picture` set to `greeksalad.jpg`
 
 The new code should look something like this:
 
 ```js
 let greekSalad = {
+  store: "Panera",
   price: 10,
   picture: "greeksalad.jpg"
 };
 ```
 
-It still will not do anything yet... it needs to be added!
+It will not change the functionality of the site yet - the item must be added to the `items` array!
 
 ## Adding the Greek Salad Object
 Now the `greekSalad` is almost ready, but there are a couple things still needed before it will show up as a food item.
 
 1. Make a new line at the bottom of the **script.js** file
 1. There, set the `name` property of the `greekSalad` object to be `"Greek Salad"`
     - This ensures that it has a name for the display!
-1. Under that, push the `greekSalad` object to the `panera.items` array
-1. Under that, push the `panera` object to the `restaurants` array
+1. Under that, push the `greekSalad` object to the `items` array
 
 At this point:
 
 - The `name` property has been added to the `greekSalad` object
-- The `greekSalad` object has been added to the `panera` object `items` array
-- The `panera` object has been added to the `restaurants` array
+- The `greekSalad` object has been added to the `items` array
 
 Run the project, click the button a few times, and verify that the Greek Salad eventually appears! Note that it may be helpful to remove the `alert` statement from the top of the `getFood` function for usability purposes. Replit also runs slowly sometimes, so if the image is not changing, it may be necessary to wait several seconds.
 
 The additional code should look something like this:
 
 ```js
 greekSalad.name = "Greek Salad";
-panera.items.push(greekSalad);
-restaurants.push(panera);
+items.push(greekSalad);
 ```
 
 ## Creating and Adding a Mac n Cheese Object
-Now it will be possible to add new items in a few different ways! Add a Mac n Cheese item to the Panera menu.
-
->Note: Even though the `panera` object has already been pushed, updating its properties will still update the object - that's because JavaScript recognizes objects _by reference_
+Now it will be possible to add new items in a few different ways! Add a Mac n Cheese item to the menu.
 
 1. Make a new line at the bottom of the **script.js** file
 1. There, create a new variable named `mac`
 1. Set `mac` to be a new empty object with `{` and `}`
     - Press **Enter** to automatically add space between
-1. In the object, create a `name` property set to `"Mac n Cheese"`
+1. In the object, create a `store` property set to `"Panera"`
     - Property name, colon, property value, comma
+1. Under that in the object, create a `name` property set to `"Mac n Cheese"`
 1. Under that in the object, create a `price` property set to `7`
 1. Under that in the object, create a `picture` property set to `"macncheese.jfif"`
     - Note that there is a file in the **pictures** folder named **macncheese.jfif**
 1. Under that, _outside_ the object (after `}`), make a new line
-1. There, push the `mac` object to the `panera.items` array
+1. There, push the `mac` object to the `items` array
 
 Run the project, click the button a few times, and verify that the Mac n Cheese eventually appears! The additional code should look something like this:
 
 ```js
 let mac = {
+  store: "Panera",
   name: "Mac n Cheese",
   price: 7,
   picture: "macncheese.jfif"
 };
 
-panera.items.push(mac);
+items.push(mac);
 ```
 
 ## Creating and Adding a Soup Object
 It is also possible to add a new item directly without creating a separate variable! Add Soup to the possible Panera food items in this manner.
 
 1. Make a new line at the bottom of the **script.js** file
-1. Push a currently empty object to the `panera.items` array
+1. Push a currently empty object to the `items` array
+1. Add a `store` property to the pushed object set to `"Panera"`
 1. Add a `name` property to the pushed object set to `"Soup"`
 1. Add a `price` property to the pushed object set to `6`
 1. Add a `picture` property to the pushed object set to `"panerabread.jpg"`
 
 Run the project, click the button a few times, and verify that the Soup eventually appears! The additional code should look something like this:
 
 ```js
-panera.items.push({
+items.push({
   name: "Soup",
   price: 6,
   picture: "panerabread.jpg"
@@ -261,45 +216,38 @@ The added code in the **script.js** file should look something like this:
 
 ```js
 function getFood() {
-  let randomRestaurantIndex = getRandomInt(restaurants.length);
-  let restaurant = restaurants[randomRestaurantIndex];
-
-  let restaurantItems = restaurant.items;
-  let randomItemIndex = getRandomInt(restaurantItems.length);
-  let item = restaurantItems[randomItemIndex];
+  let randomItemIndex = getRandomInt(items.length);
+  let item = items[randomItemIndex];
 
   let foodNameElement = document.querySelector("#food-name");
-  let foodNameText = `${item.name} (${restaurant.name})`;
+  let foodNameText = `${item.name} (${item.store})`;
   foodNameElement.textContent = foodNameText;
 
   let foodPictureElement = document.querySelector("#food-pic");
   let foodPictureUrl = `pictures/${item.picture}`;
   foodPictureElement.src = foodPictureUrl;
 }
 
-let panera = {
-  name: "Panera",
-  items: []
-};
-
 let greekSalad = {
+  store: "Panera",
   price: 10,
   picture: "greeksalad.jpg"
 };
 
 greekSalad.name = "Greek Salad";
-panera.items.push(greekSalad);
-restaurants.push(panera);
+items.push(greekSalad);
 
 let mac = {
+  store: "Panera",
   name: "Mac n Cheese",
   price: 7,
   picture: "macncheese.jfif"
 };
 
-panera.items.push(mac);
+items.push(mac);
 
-panera.items.push({
+items.push({
+  store: "Panera",
   name: "Soup",
   price: 6,
   picture: "panerabread.jpg"

Objects/SelfPacedWork.md

@@ -11,12 +11,12 @@ Feel free to add any new items desired! At minimum, add one new item for each ex
 | Taco Bell | Cheesy Roll Up | 1.00 | cheesyroll.jpg |
 | Panera | Bagel | 4.50 | bagel.jpg |
 
-Feel free to add these items directly when the `restaurants` object is created, or add them in the way the `panera` items were added. Whatever works!
+Feel free to add these items directly when the `items` array is created, or add them in the way the Panera items were added. Whatever works!
 
 Make sure it is possible to click the button and see all items appear.
 
 ## New Restaurant: Arby's
-Next, add an entirely new restaurant. This can be done in the same way that Panera was added, or added wholesale to the `restaurants` array.
+Next, add an entirely new restaurant. This can be done in the same way that Panera was added, or added wholesale to the `items` array.
 
 #### Name
 Arby's
@@ -100,30 +100,27 @@ Next, select the new `<input id="restaurant">` element, and get its value.
 
 Now the name is ready to go.
 
-### JavaScript: Finding the Restaurant Object
+### JavaScript: Finding the Items for the Restaurant
 Once the name has been retrieved, it will be possible to use it to find the proper object for the restaurant.
 
 1. Under the `restaurantName` variable, make a couple new lines in the `getFood` function
-1. There, create a new variable named `restaurant` (not set to anything)
-1. Under that, create a new variable named `found`, set to `false`
-1. Next, create a `for` loop to loop through each element in the `restaurants` array
+1. There, create a new variable named `restaurantItems` set to an empty array `[]`
+1. Next, create a `for` loop to loop through each element in the `items` array
     - `for`
     - Parentheses
     - Curly Brackets
     - Initialization (`let i = 0`)
-    - Condition (`i < restaurants.length`)
+    - Condition (`i < items.length`)
     - Increment (`i++`)
 1. In the body of the `for` loop, create an `if` statement
     - `if`
     - Parentheses
     - Curly Brackets
-1. For the condition, check if `restaurants[i].name` is equal to `restaurantName`
-    - This means the current index contains the restaurant the user entered
-1. In the body of the `if`, set the `restaurant` variable to `restaurants[i]
-1. Under that, set the `found` variable to `true`
-1. Under that, use a `break` statement to exit the loop
+1. For the condition, check if `items[i].store` is equal to `restaurantName`
+    - This means the current index has an item from the given restaurant
+1. In the body of the `if`, `push` the `items[i]` object to the `restaurantItems` array
 
-Now the `restaurant` variable should be ready to go! Make sure to comment out the two lines that randomly choose the `restaurant` variable.
+Now the `restaurantItems` variable should be ready to go! Replace the `items` references in the code below with `restaurantItems` to ensure that only items from the given restaurant are available.
 
 Run the project, enter a restaurant name, and click the button. It should only choose food items from that restaurant! It's not perfect, though...
 
@@ -134,9 +131,8 @@ Currently, when entering a restaurant name that is not found, the page should fa
     - `if`
     - Parentheses
     - Curly Brackets
-1. Set the condition to check if `found` is `false` using `!found`
+1. Set the condition to check if `restaurantItems.length` is `0`
 1. In the body of the `if`, copy the old code that found a random restaurant
-    - Remove the `let` from the `restaurant` variable because it has already been declared
 
 Run the project, enter a name that does not exist, and verify that it chooses randomly from all restaurant items!