Code-Along: Food Picker
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.
- Remix the project
- Run the project
- Click the "Get Food" button
- Realize that nothing is happening
- Panic
- Realize that these instructions will show how to make the button work
- Feel a wave of relief wash over you
Hooking Up the Button
The first step is to add basic functionality to the button.
- Open the index.html file
- Notice the
<button>
has anonclick
that calls thegetFood
function- But it has yet to be defined!
- Open the script.js file for editing
- Scroll down to the "Add New Code Below" comment
- Make a new line under the comment
- Define a function named
getFood
- In the body of the function, add an
alert
that says "Calculating"
Run the project again, click the button, and verify that the pop-up message appears! The code should look something like this:
function getFood() {
alert("Calculating...");
}
Getting a Random Item
Next, find a random item. There are a few things to notice in the existing code:
- The
items
array contains various food objects, that all contain some properties - The
getRandomInt
function will return a random integer between0
and themax
The code will have to find a random item using the existing code.
- Make a new line in the body of the
getFood
function - Create a new variable named
randomItemIndex
- Set
randomItemIndex
to be a call togetRandomInt
- Pass in
items.length
to thegetRandomInt
call - Under that, create a new variable named
item
- Set
item
to be the value from theitems
array at therandomItemIndex
index
The code should look something like this:
let randomItemIndex = getRandomInt(items.length);
let item = items[randomItemIndex];
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.
- Open the index.html file
- Notice there is a
<p>
element with anid
offood-name
- This can store the name of the random food item!
- Open the script.js file for editing
- Make a new line in the body of the
getFood
function - Create a new variable named
foodNameElement
- Set
foodNameElement
to select the<p id="food-name">
element- Using
document.querySelector
- Using
- Under that, create a new variable named
foodNameText
- Set
foodNameText
to beITEM (STORE)
- Make the string into a template literal
- In the literal, replace
ITEM
with${item.name}
- This gets the
name
property of theitem
object
- This gets the
- In the literal, replace
STORE
with{$item.store}
- This gets the
store
property of theitem
object
- This gets the
- Set the
textContent
property offoodNameElement
tofoodNameText
- 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:
let foodNameElement = document.querySelector("#food-name");
let foodNameText = `${item.name} (${item.store})`;
foodNameElement.textContent = foodNameText;
Displaying the Random Item Picture
The name is good, but it would be much more appetizing with a picture. Luckily, there are some pictures accessible via URL.
- Open the index.html file
- Notice there is a
<p>
element with anid
offood-pic
- This can store the name of the random item picture!
- Open the script.js file for editing
- Make a new line in the body of the
getFood
function - Create a new variable named
foodPictureElement
- Set
foodPictureElement
to select the<p id="food-pic">
element- Using
document.querySelector
- Using
- Under that, create a new variable named
foodPictureUrl
- Set
foodPictureUrl
to behttps://raw.githubusercontent.com/hytechclub/web-103/main/Assets/URL
- Make the string into a template literal
- In the literal, replace
URL
with${item.picture}
- This gets the
picture
property of theitem
object
- This gets the
- Set the
src
property offoodPictureElement
tofoodPictureUrl
- This sets the actual image URL so that it displays on the page
Run the project, click the button, and verify that a random food item picture is properly displayed! The additional code should look something like this:
let foodPictureElement = document.querySelector("#food-pic");
let foodPictureUrl = `https://raw.githubusercontent.com/hytechclub/web-103/main/Assets/${item.picture}`;
foodPictureElement.src = foodPictureUrl;
Creating a Greek Salad 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 a greek salad from Panera.
- Make a new line at the bottom of the script.js file
- Make sure it's outside of the
getFood
function (after the}
)
- Make sure it's outside of the
- There, create a new variable named
greekSalad
- Set
greekSalad
to be a new empty object with{
and}
- Press Enter to automatically add space between
- In the object, create a
store
property set to"Panera"
- Property name, colon, property value, comma
- Under that in the object, create two more properties:
price
set to10
picture
set togreeksalad.jpg
The new code should look something like this:
let greekSalad = {
store: "Panera",
price: 10,
picture: "greeksalad.jpg"
};
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.
- Make a new line at the bottom of the script.js file
- There, set the
name
property of thegreekSalad
object to be"Greek Salad"
- This ensures that it has a name for the display!
- Under that, push the
greekSalad
object to theitems
array
At this point:
- The
name
property has been added to thegreekSalad
object - The
greekSalad
object has been added to theitems
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. The site 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:
greekSalad.name = "Greek Salad";
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 menu.
- Make a new line at the bottom of the script.js file
- There, create a new variable named
mac
- Set
mac
to be a new empty object with{
and}
- Press Enter to automatically add space between
- In the object, create a
store
property set to"Panera"
- Property name, colon, property value, comma
- Under that in the object, create a
name
property set to"Mac n Cheese"
- Under that in the object, create a
price
property set to7
- Under that in the object, create a
picture
property set to"macncheese.jfif"
- Note that there is a file with the URL
https://raw.githubusercontent.com/hytechclub/web-103/main/Assets/macncheese.jfif
- Note that there is a file with the URL
- Under that, outside the object (after
}
), make a new line - There, push the
mac
object to theitems
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:
let mac = {
store: "Panera",
name: "Mac n Cheese",
price: 7,
picture: "macncheese.jfif"
};
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.
- Make a new line at the bottom of the script.js file
- Push a currently empty object to the
items
array - Add a
store
property to the pushed object set to"Panera"
- Add a
name
property to the pushed object set to"Soup"
- Add a
price
property to the pushed object set to6
- 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:
items.push({
name: "Soup",
price: 6,
picture: "panerabread.jpg"
});
Conclusion
That's it for the code-along activity! At this point, it should be possible to click the button, and see a variety of different foods appear.
The added code in the script.js file should look something like this:
function getFood() {
let randomItemIndex = getRandomInt(items.length);
let item = items[randomItemIndex];
let foodNameElement = document.querySelector("#food-name");
let foodNameText = `${item.name} (${item.store})`;
foodNameElement.textContent = foodNameText;
let foodPictureElement = document.querySelector("#food-pic");
let foodPictureUrl = `https://raw.githubusercontent.com/hytechclub/web-103/main/Assets/${item.picture}`;
foodPictureElement.src = foodPictureUrl;
}
let greekSalad = {
store: "Panera",
price: 10,
picture: "greeksalad.jpg"
};
greekSalad.name = "Greek Salad";
items.push(greekSalad);
let mac = {
store: "Panera",
name: "Mac n Cheese",
price: 7,
picture: "macncheese.jfif"
};
items.push(mac);
items.push({
store: "Panera",
name: "Soup",
price: 6,
picture: "panerabread.jpg"
});