CHOOSE-A-TRON

choose-a-tron.markdown

CHOOSE-A-TRON

A Pen by Sia Karamalegos on CodePen.

Thanks to Gant Laborde for the project idea!

License.

index.html

<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>

script.js

// 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:

style.css

: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.