Even Odd High Low Guessing Game by @jowinb - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<map>Inserisce immagini mappa cliccabili in un documento
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<h1>Titolo di intestazione di primo livello
heightDetermina l'altezza di un elemento HTML in pixel
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<video>Integra e controlla video in una pagina HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

AoIT Dashboard 2024 v1

Esercizio tabella spese

girar-imagem-canvas

Autovalutazione.it

Review of Functions I

Saul Goodman Associates - Better C

Indovina il Numero - Gioco

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Even Odd High Low Guessing Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="game-container">
        <h1>Guess the Number</h1>
        <p>Will it be Even or Odd? High or Low?</p>

        <div id="result"></div>

        <div class="input-container">
            <label for="min-range">Min:</label>
            <input type="number" id="min-range" value="1" min="1">
            <label for="max-range">Max:</label>
            <input type="number" id="max-range" value="100" min="2">
        </div>

        <div class="choice-container">
            <p>Guess if the number is:</p>
            <div>
                <label for="guess-even">Even</label>
                <input type="radio" name="guess" id="guess-even">
                <label for="guess-odd">Odd</label>
                <input type="radio" name="guess" id="guess-odd">
            </div>

            <div>
                <label for="guess-high">High</label>
                <input type="radio" name="guess-highlow" id="guess-high">
                <label for="guess-low">Low</label>
                <input type="radio" name="guess-highlow" id="guess-low">
            </div>
        </div>

        <button id="start-game">Start Game</button>

        <div id="feedback"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Arial', sans-serif;
}

.game-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 350px;
    transition: transform 0.3s ease-in-out;
}

.game-container:hover {
    transform: translateY(-10px);
}

/* Header */
h1 {
    font-size: 2em;
    color: #333;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

p {
    color: #555;
    margin-bottom: 20px;
}

/* Input Container */
.input-container {
    margin-bottom: 20px;
}

.input-container input {
    padding: 8px;
    margin: 5px 10px;
    width: 80px;
    font-size: 1.1em;
    border-radius: 5px;
    border: 2px solid #ccc;
    outline: none;
}

.input-container input:focus {
    border-color: #ff7e5f;
}

/* Choice Container */
.choice-container {
    margin-bottom: 20px;
}

.choice-container label {
    font-size: 1.1em;
    color: #333;
    margin-right: 10px;
}

.choice-container input {
    margin-left: 5px;
}

/* Button */
button {
    background-color: #ff7e5f;
    color: white;
    padding: 12px 30px;
    font-size: 1.2em;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #ff6347;
}

/* Feedback */
#feedback {
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: bold;
}

#result {
    font-size: 1.5em;
    margin-top: 10px;
    font-weight: bold;
    color: #333;
}

#feedback.green {
    color: #4CAF50;
}

#feedback.red {
    color: #F44336;
}

document.getElementById('start-game').addEventListener('click', startGame);

function startGame() {
    const minRange = parseInt(document.getElementById('min-range').value);
    const maxRange = parseInt(document.getElementById('max-range').value);
    const guessEven = document.getElementById('guess-even').checked;
    const guessOdd = document.getElementById('guess-odd').checked;
    const guessHigh = document.getElementById('guess-high').checked;
    const guessLow = document.getElementById('guess-low').checked;

    const randomNumber = Math.floor(Math.random() * (maxRange - minRange + 1)) + minRange;

    if (!(guessEven || guessOdd) || !(guessHigh || guessLow)) {
        document.getElementById('feedback').textContent = 'Please make both an Even/Odd and High/Low selection.';
        return;
    }

    const isEven = randomNumber % 2 === 0;
    const isHigh = randomNumber >= (maxRange / 2);
    
    let isGuessCorrect = false;

    if ((guessEven && isEven) || (guessOdd && !isEven)) {
        if ((guessHigh && isHigh) || (guessLow && !isHigh)) {
            isGuessCorrect = true;
        }
    }

    // Show results
    document.getElementById('result').textContent = `The number is: ${randomNumber}`;

    const feedback = document.getElementById('feedback');
    if (isGuessCorrect) {
        feedback.textContent = 'You guessed correctly!';
        feedback.classList.add('green');
        feedback.classList.remove('red');
    } else {
        feedback.textContent = 'Sorry, try again!';
        feedback.classList.add('red');
        feedback.classList.remove('green');
    }
}