randcharselect button

by mrjordy

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Selection Wheel Game</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js" defer></script>
</head>
<body>
    <div class="container">
        <div class="text">Something which is</div>
        <div class="wheel" id="wheel1">🎠</div>
        <button id="spinButton1">Adjective</button>
        <div class="text">which you would find in</div>
        <div class="wheel" id="wheel2">🎠</div>
        <button id="spinButton2">Noun</button>
        <div class="timer" id="timer">15</div>
        <div class="resetButton"><button id="resetButton">Next Person</button></div>
    </div>
    <div class="counters">
            <div class="counter-container">
                <div class="counter" id="counter1">0</div>
                <button class="decrement-button" id="decrement1">-</button>
            </div>
            <div class="counter-container">
                <div class="counter" id="counter2">0</div>
                <button class="decrement-button" id="decrement2">-</button>
            </div>
            <div class="counter-container">
                <div class="counter" id="counter3">0</div>
                <button class="decrement-button" id="decrement3">-</button>
            </div>
            <div class="counter-container">
                <div class="counter" id="counter4">0</div>
                <button class="decrement-button" id="decrement4">-</button>
            </div>
            <div class="counter-container">
                <div class="counter" id="counter5">0</div>
                <button class="decrement-button"...

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #282c34;
    color: white;
    font-family: Arial, sans-serif;
    flex-direction: column;
}

.container {
    text-align: center;
}

.wheel {
    font-size: 5em;
    margin-bottom: 20px;
    transition: transform 0.1s ease-in-out;
}

#spinButton1, #spinButton2, #resetButton {
    padding: 10px 20px;
    font-size: 1.2em;
    cursor: pointer;
    background-color: #61dafb;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
}

#spinButton1:hover, #spinButton2:hover, #resetButton:hover {
    background-color: #21a1f1;
}

.timer {
    font-size: 2em;
    margin-top: 20px;
}

.counters {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin-top: 20px;
}

.counter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.counter {
    background-color: #61dafb;
    padding: 10px;
    font-size: 1.5em;
    cursor: pointer;
    transition: background-color 0.3sease;
    text-align: center;
    min-height: 70px;
    line-height: 70px;
    box-shadow: inset 0 0 20px white;
    text-shadow: 0 0 10px black;
    border-radius: 10px;
    margin-bottom: 67px;
    min-width: 7vw;
}

.counter:hover {
    background-color: #21a1f1;
}

.decrement-button {
    padding: 5px 10px;
    font-size: 1em;
    cursor: pointer;
    background-color: #f94f4f;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.decrement-button:hover {
    background-color: #d93f3f;
}

#counter1 {background:#ff964f}
#counter2 {background:#8f30a1}
#counter3 {background:#fe4773}
#counter4 {background:#f6d68d}
#counter5 {background:#80ef80}
#counter6 {background:#2e6d92}

.resetButton {position: absolute; top: 0; right: 0; padding: 6px;}
#resetButton {padding: 40px;}

.text {font-size: 42px;}

@keyframes flashAnim {
  0% {...

JavaScript

$(document).ready(function() {
    const options1 = [
        "soft", "scary", "red", "shiny", "blue", "rough", "smooth", "green", "fuzzy", "yellow",
        "metallic", "glossy", "matte", "white", "black", "purple", "transparent", "opaque", 
        "sparkling", "rusty", "orange", "brown", "fragile", "hard", "stretchy", "sticky", 
        "fluffy", "wet", "dry", "dusty"
    ];

    const options2 = [
        "your refrigerator", "a garage", "a grocery store", "a parking lot", "the ocean floor",
        "an attic", "a basement", "the kitchen", "your bathroom", "someone's living room",
        "a backyard", "a front yard", "a garden", "a closet", "an office",
        "a school", "a library", "a museum", "a playground", "a restaurant",
        "a movie theater", "the beach", "the mountains", "the forest", "a park",
        "the mall", "the airport", "the train station", "a movie set", "the hospital",
        "the gym", "a stadium", "a hotel", "Hobby Lobby", "a warehouse",
        "a factory", "a construction site", "a farm", "a zoo", "an aquarium",
        "Disneyland", "a boat", "an airplane", "a spaceship", "a coal mine",
        "a college dorm", "a classroom", "the pharmacy", "a bookstore", "a bakery"
    ];

    let button1Pressed = false;
    let button2Pressed = false;

    // Spin button events
    $('#spinButton1').click(function() {
        spinWheel('wheel1', options1);
        button1Pressed = true;
        checkBothButtonsPressed();
    });

    $('#spinButton2').click(function() {
        spinWheel('wheel2', options2);
        button2Pressed = true;
        checkBothButtonsPressed();
    });

    // Reset / Next Person button restores controls
    $('#resetButton').click(function() {
        $('#wheel1').text('🎠');
        $('#wheel2').text('🎠');
        // Remove the timeUp and flash classes so that counters work normally again.
        $('.counter').removeClass('timeUp').off('click').on('click', function() {
            let currentCount =...