Add Random button and fix FoUC

gurbaxani · Sep 15, 2024 · 8913291 · 8913291
1 parent 49e892d
commit 8913291
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <!-- HTML is hidden until CSS loads to hide the Flash of Unstyled Content -->
+    <style>html{visibility: hidden;opacity:0;}</style>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Improv Practice Tools</title>
@@ -17,12 +19,13 @@
             <button id="occupation-btn" class="nav-button">👔 Job</button>
             <button id="occasion-btn" class="nav-button">🎊 Occasion</button>
             <button id="title-btn" class="nav-button">🍿 Title</button>
-            <button id="alphabet-btn" class="nav-button">🅱️ Alphabet</button>
+            <button id="alphabet-btn" class="nav-button">🅱️ Letter</button>
             <button id="phrase-btn" class="nav-button">🗣️ Line</button>
             <button id="emotion-btn" class="nav-button">😊 Emotion</button>
             <button id="genre-btn" class="nav-button">🎬 Genre</button>
             <button id="quirk-btn" class="nav-button">🤌 Quirk</button>
             <button id="superpower-btn" class="nav-button">🦸 Superpower</button>
+            <button id="random-btn" class="nav-button">🎲</button>
         </div>
         <div id="result" class="display-result notice">Click a button to get a suggestion</div>    
         <div class="timer-container">

diff --git a/script.js b/script.js
@@ -1,6 +1,7 @@
 document.addEventListener('DOMContentLoaded', function () {
     // Elements for random suggestions    
     const resultDiv = document.getElementById('result');
+
     const objects = ["banana", "lamp", "keyboard", "book", "guitar", "umbrella", "television", "clock", "chair", "bicycle", "socks", "basketball", "sunglasses", "flowerpot", "camera", "wallet", "microphone", "paintbrush", "pillow", "hammer", "bottle", "tree", "keyboard", "shirt", "globe", "mirror", "scissors", "candle", "bracelet", "phone", "spoon", "basket", "helmet", "ruler", "towel", "couch", "frisbee", "hat", "gloves", "painting", "calendar", "skateboard", "chocolate", "toothbrush", "pen", "oven", "table", "socks", "mug", "plant", "keyboard", "guitar", "window", "rug", "headphones", "backpack", "cup", "tie", "magazine", "basketball", "bag", "lampshade", "chair", "remote", "keyboard", "keyboard", "candlestick", "keychain", "paperclip", "toaster", "dish", "game", "tissue", "charger", "pencil", "glasses", "tape", "trash can", "broom", "vase", "laptop", "notebook", "fork", "paint", "mouse", "pillowcase", "alarm clock", "shoes", "plate", "watch", "keyboard", "scarf", "wallet", "camera", "pen", "mirror", "book", "socks"];
     const relationships = ["sibling rivalry", "co-adventurers", "unexpected allies", "reunion after years", "neighbors with a shared secret", "community volunteers", "co-conspirators", "festival buddies", "co-workers planning a surprise", "partners in a baking competition", "childhood friends reunited", "study group buddies", "neighbors sharing a hobby", "travel companions", "artists collaborating on a project", "podcast co-hosts", "pet owners in the same building", "people stuck in an elevator", "strangers at a bus stop", "fans of the same obscure band", "members of a support group", "teammates in a scavenger hunt", "students preparing for a test together", "volunteers at a charity event", "participants in a flash mob", "attendees at a speed dating event", "siblings planning a surprise party", "neighbors organizing a block party", "strangers bonding over a lost pet", "strangers sharing a cab ride", "parents at a school fundraiser", "cousins working on a family tree", "tourists exploring a new city", "board game enthusiasts", "participants in a community garden", "strangers in a waiting room", "co-passengers on a long flight", "online gaming buddies meeting in person", "classmates at a reunion", "volunteers at an animal shelter", "coworkers at a team-building retreat", "neighbors competing in a neighborhood contest", "participants in a cooking class", "fellow commuters on a crowded train", "book club members", "art class partners", "members of a flash mob", "frequenters of the same coffee shop", "people waiting in line for a movie premiere", "participants in a community theater production", "colleagues at a retirement party", "roommates navigating a disagreement", "couples taking a dance class together", "strangers sharing a park bench", "team members in an escape room", "neighbors sharing a community garden plot", "attendees at a wellness retreat", "siblings planning a surprise trip for parents", "participants in a charity run", "volunteers at a beach cleanup", "parents on the sidelines of a kids' soccer game", "neighbors organizing a street festival", "strangers bonding over a shared interest", "coworkers at a company picnic", "tourists on a guided walking tour", "participants in a group meditation session", "classmates working on a group project", "volunteers at a food bank", "participants in a community choir", "neighbors carpooling to an event", "couples attending a wine tasting", "strangers on a group hike", "team members at a corporate training session", "neighbors collaborating on a community art project", "friends planning a themed party", "siblings on a road trip", "colleagues at a work conference", "neighbors sharing a backyard barbecue", "strangers helping each other during a blackout", "coworkers at a company retreat", "tourists on a sightseeing tour", "participants in a group fitness class", "classmates at a study session"];
     const locations = ["beach", "airport", "amusement park", "library", "zoo", "movie theater", "restaurant", "coffee shop", "hospital waiting room", "school cafeteria", "subway station", "mountain cabin", "farmers' market", "shopping mall", "concert venue", "art gallery", "community center", "sports stadium", "city park", "beauty salon", "spa", "campground", "wedding reception", "college dormitory", "gas station", "bookstore", "museum", "city street", "forest", "beach boardwalk", "carnival", "karaoke bar", "hotel lobby", "playground", "college lecture hall", "yoga studio", "roller skating rink", "food truck festival", "miniature golf course", "ferry boat", "rooftop garden", "jazz club", "petting zoo", "vineyard", "skate park", "aquarium", "botanical garden", "arcade", "fishing pier", "brewery tour", "planetarium", "horse stable", "movie set", "bed and breakfast", "skyscraper rooftop", "snowy mountain peak", "music festival", "farmhouse kitchen", "college campus quad", "ice cream parlor", "historic mansion", "cruise ship deck", "surf shop", "community garden", "tea house", "lake dock", "dessert buffet", "train station platform", "gymnasium", "yacht club", "gondola ride", "board game cafe", "flower shop", "dessert bakery", "farm stand", "kayak rental shop", "thrift store", "waterfall", "orchard", "dive bar", "outdoor amphitheater", "campfire circle", "bungee jumping platform", "glamping site", "castle courtyard", "windmill", "greenhouse", "cave", "observatory", "coral reef", "hot air balloon", "ancient ruins"];
@@ -461,6 +462,7 @@ document.addEventListener('DOMContentLoaded', function () {
         "The Mystery of the Empty Popcorn Bowl"
       ];
 
+      const categories = [objects, relationships, locations, occupations, occasions, titles, alphabets, phrases, emotions, genres, quirks, superpowers];
 
     // Function to set a random item from a given array to resultDiv
     function setRandomResult(array) {
@@ -481,6 +483,11 @@ document.addEventListener('DOMContentLoaded', function () {
     document.getElementById('superpower-btn').addEventListener('click', () => setRandomResult(superpowers));
     document.getElementById('title-btn').addEventListener('click', () => setRandomResult(titles));
     document.getElementById('occasion-btn').addEventListener('click', () => setRandomResult(occasions));
+    document.getElementById('random-btn').addEventListener('click', () => {
+        const randomIndex = Math.floor(Math.random() * categories.length);
+        const category = categories[randomIndex];
+        const randomNestedIndex = Math.floor(Math.random() * category.length);
+        resultDiv.textContent = category[randomNestedIndex]});
 
     // Timer functionality
     const startButton = document.getElementById('start-timer');

diff --git a/styles.css b/styles.css
@@ -39,3 +39,9 @@
   text-transform: capitalize;
   text-align: center;
 }
+
+/* Keep this at the bottom to hide the Flash of Unstyled Content */
+html {
+  visibility: visible;
+  opacity: 1;
+}