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

<nav>Definisce un menu di navigazione
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<input>Definisce un area di input per l'invio di dati e informazioni
relServe a definire la relazione tra il documento e una risorsa.
<aside>Definisce un contenuto separato dal testo perincipale
<h6>Titolo di intestazione di sesto livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

congettura collatz

Navbar Example 3

5/10/24 es. 7 -parole ripetute

Pro Vercelli Segreteria

esercitazione4.html(2)

esercitazione simona

Template Wheel Stripes

Aurora Flux — Concept Design

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