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="wheel" id="wheel1">🎠</div>
        <button id="spinButton1">Spin Wheel 1</button>
        <div class="wheel" id="wheel2">🎠</div>
        <button id="spinButton2">Spin Wheel 2</button>
        <div class="timer" id="timer">15</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>
</body>
</html>

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 {
    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 {
    background-color: #21a1f1;
}

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

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

.counter {
    background-color: #61dafb;
    padding: 10px;
    font-size: 1.5em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

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

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();
    });

    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 randomOption = options[Math.floor(Math.random() * options.length)];
            $(`#${wheelId}`).text(randomOption);
       ...