/ Defines what category we're choosing and updates the webpage with this. // ******************************** // 1. Customize these with your own category and items! // ******************************** let what = "Video Game"; //CATEGORY - Change me! document.querySelector("#what").innerText = what; // Defines our options to choose from - change these Strings in the array to something you want to choose from! let options = [ "Dead Space", "Overwatch 2", "Fortnite", "World of warships", "Legends of Dragoon", "Sims 4", "Stardew Valley" ]; const optionsList = document.querySelector("#options"); // ******************************** // 2. Alphabetize the options list // ******************************** // Your code here: // ******************************** // 3. Make the options list use title case // ******************************** // The first letter of each word should be capitalized. For 2 bonus points: Make it skip words like "and", "a", "the", "to", etc. // Your code here: // Don't code #3 past this point. // This forEach loop renders our options in the webpage. It creates elements, assigns them an id, : options.forEach((option, index) => { const listItem = document.createElement("li"); listItem.innerText = option; listItem.id = `item-${index}`; optionsList.append(listItem); }); // Declares a variable equal to our button const button = document.querySelector("button"); // ******************************** // 4. Write a function that accepts a max numbers as a parameter and returns a random number between 0 and that number. This function used properly will help you in part five! // ******************************** // Your code here: // ******************************** // 5. Make it so that when someone clicks the "choose" button, a random item in the list gets highlighted with a different background color. Hint: you might want to keep in mind #4, take a peak at the forEach loop and how it renders our options // ******************************** // Your code here: // ******************************** // 6. (Optional Bonus) Oops! Refactor your code to not update the background color directly but to instead add/remove the class "choice" so that each time the button is clicked, the previously chosen item returns to normal, and a new item is selected (10 bonus points). // ******************************** // Your code here:
// Defines what category we're choosing and updates the webpage with this.
// ********************************
// 1. Customize these with your own category and items!
// ********************************
let what = "Video Game"; //CATEGORY - Change me!
document.querySelector("#what").innerText = what;
// Defines our options to choose from - change these Strings in the array to something you want to choose from!
let options = [
"Dead Space",
"Overwatch 2",
"Fortnite",
"World of warships",
"Legends of Dragoon",
"Sims 4",
"Stardew Valley"
];
const optionsList = document.querySelector("#options");
// ********************************
// 2. Alphabetize the options list
// ********************************
// Your code here:
// ********************************
// 3. Make the options list use title case
// ********************************
// The first letter of each word should be capitalized. For 2 bonus points: Make it skip words like "and", "a", "the", "to", etc.
// Your code here:
// Don't code #3 past this point.
// This forEach loop renders our options in the webpage. It creates <li></li> elements, assigns them an id, :
options.forEach((option, index) => {
const listItem = document.createElement("li");
listItem.innerText = option;
listItem.id = `item-${index}`;
optionsList.append(listItem);
});
// Declares a variable equal to our button
const button = document.querySelector("button");
// ********************************
// 4. Write a function that accepts a max numbers as a parameter and returns a random number between 0 and that number. This function used properly will help you in part five!
// ********************************
// Your code here:
// ********************************
// 5. Make it so that when someone clicks the "choose" button, a random item in the list gets highlighted with a different background color. Hint: you might want to keep in mind #4, take a peak at the forEach loop and how it renders our options
// ********************************
// Your code here:
// ********************************
// 6. (Optional Bonus) Oops! Refactor your code to not update the background color directly but to instead add/remove the class "choice" so that each time the button is clicked, the previously chosen item returns to normal, and a new item is selected (10 bonus points).
// ********************************
// Your code here:
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
