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>
    <div class="counters">
            <div class="counter" id="counter1">0</div>
            <div class="counter" id="counter2">0</div>
            <div class="counter" id="counter3">0</div>
            <div class="counter" id="counter4">0</div>
            <div class="counter" id="counter5">0</div>
            <div class="counter" id="counter6">0</div>
     </div>
    <div class="resetButton">
            <button id="resetButton">Next Person</button>
     </div>
</body>
</html>

CSS

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

.container {
    text-align: center;
    display: block;
}

.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;
    bottom: 0;
    position: absolute;
    padding: 20px;
    margin-bottom: 50px;
}

.counter {
    background-color: #61dafb;
    padding: 10px;
    font-size: 1.5em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-width: 7%;
    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;
}

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

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

.text {font-size: 42px;}

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

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 = [
        "refrigerator", "garage", "grocery store", "car park", "bottom of the ocean", 
        "attic", "basement", "kitchen", "bathroom", "living room", 
        "backyard", "front yard", "garden", "closet", "office", 
        "school", "library", "museum", "playground", "restaurant", 
        "movie theater", "beach", "mountains", "forest", "park", 
        "mall", "airport", "train station", "bus station", "hospital", 
        "gym", "stadium", "hotel", "conference room", "warehouse", 
        "factory", "construction site", "farm", "zoo", "aquarium", 
        "theme park", "boat", "airplane", "spaceship", "mine", 
        "dormitory", "university", "pharmacy", "bookstore", "bakery"
    ];

    let button1Pressed = false;
    let button2Pressed = false;

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

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

    $('#resetButton').click(function() {
        $('#wheel1').text('🎠');
        $('#wheel2').text('🎠');
    });

    function spinWheel(wheelId, options) {
        let duration = 3000; // animation duration in milliseconds
        let interval = 100; // interval time for changing options
        let spins = 15; // number of spins

        $(`#${wheelId}`).css('transform', 'rotate(0deg)'); // reset rotation

        let spinCount = 0;
        let animation = setInterval(function() {
            let...