Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CHOOSE-A-TRON
<h1>Choose-a-Tron</h1>
<p>Ugh, I can't decide.</p>
<button>Choose a <span id="what"></span></button>
<h2>Options</h2>
<ul id="options"></ul>
// Defines what category we're choosing and updates the webpage with this
let what = "cocktail";
document.querySelector("#what").innerText = what;
// Defines our options to choose from
let options = [
"Intro to Aperol",
"Margarita",
"Champagne cocktail",
"Gin and soda",
"Old fashioned",
"Paloma",
"Sazerac"
];
const optionsList = document.querySelector("#options");
// ********************************
// 1. Alphabetize the options list (2 points)
// ********************************
// Your code here:
// ********************************
// 2. Make the options list use title case (4 points)
// ********************************
// The first letter of each word should be capitalized. Make it skip words like "and", "a", "the", "to", etc.
// Your code here:
// Don't code #2 past this point.
// This forEach loop renders our options in the webpage:
options.forEach((option, index) => {
const listItem = document.createElement("li");
listItem.innerText = option;
listItem.id = index;
optionsList.append(listItem);
});
// Declares a variable equal to our button
const button = document.querySelector("button");
// ********************************
// 3. Write a function that accepts a min and max (2 numbers) as parameters and returns a random number between those numbers. (3 points)
// ********************************
// Your code here:
// ********************************
// 4. Make it so that when someone clicks the "choose" button, a random item in the list gets highlighted with a different background color. (4 points)
// ********************************
// Your code here:
// ********************************
// 5. (Optional Bonus) 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 (2 bonus points for Quizzes).
// ********************************
// Your code here:
:root {
--hue: 20;
--choice-hue: 80;
}
body {
color: hsl(var(--hue), 85%, 10%);
display: flex;
flex-direction: column;
align-items: center;
font-family: Georgia, serif;
}
h1,
h2 {
color: hsl(var(--hue), 85%, 40%);
font-family: Futura, Helvetica, sans-serif;
margin-top: 4rem;
text-transform: uppercase;
}
button {
background-color: hsl(var(--hue), 80%, 50%);
border: none;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
color: white;
cursor: pointer;
display: inline-block;
font-family: Futura, Helvetica, sans-serif;
font-size: 1em;
font-weight: 700;
padding: 20px;
text-transform: uppercase;
}
button:hover {
background-color: hsl(var(--hue), 80%, 53%);
}
ul {
margin-top: 0;
padding: 0;
}
ul li {
background-color: hsl(var(--hue), 80%, 90%);
list-style: none;
margin: 8px;
padding: 12px 20px;
text-align: center;
}
.choice {
background-color: hsl(var(--choice-hue), 80%, 90%);
color: hsl(var(--choice-hue), 80%, 20%);
font-weight: 700;
position: relative;
}
.choice:before {
content: "👉";
position: absolute;
left: -17px;
top: 3px;
font-size: 32px
}
@rossabadie
Copy link

rossabadie commented Nov 12, 2020

Does anyone know how to make such a code like that? If so, then please write it out so that anyone would know what to use in case there's a class assignment just like that code.

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment