A Pen by Sia Karamalegos on CodePen.
Thanks to Gant Laborde for the project idea!
A Pen by Sia Karamalegos on CodePen.
Thanks to Gant Laborde for the project idea!
<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 | |
} |
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.