4395-Indovina numero by @DigitalTeacher - Codewith.it

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

Referenze

<title>Definisce il titolo della pagina web.
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
<blockquote>Inserisce citazioni in un documento HTML
widthImposta la larghezza di un elemento HTML
methodDetermina il metodo di invio dei dati di un form al server
multipart/form-dataCodifica dei caratteri di un form

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

servizio_fiscale.html

spotify dashboard

pagina America(2)(2)

round - social bar

Congettura di Collatz

copia di unfollow me

esercitazione4.html

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>
  <head>
    <title>Indovina numero</title>
    <style>
      html 
      {
        font-family: sans-serif;
      }
      body 
      {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
      .lastResult 
      {
        color: white;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <h1>Indovina numero</h1>

    <p>E' stato estratto un numero casuale compreso tra 1 e 100. Vedi se riesci a indovinarlo in 10 turni o meno. Ad ogni tentativo verra' indicata se il tuo tentativo è stata troppo alto o troppo basso.</p>

    <div class="form">
      <label for="guessField">Inserisci un valore: </label><input type="text" id="guessField" class="guessField">
      <input type="submit" value="Tentativo" class="guessSubmit">
    </div>

    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div>

<script>
  let randomNumber = Math.floor(Math.random() * 100) + 1;
  const guesses = document.querySelector('.guesses');
  const lastResult = document.querySelector('.lastResult');
  const lowOrHi = document.querySelector('.lowOrHi');
  const guessSubmit = document.querySelector('.guessSubmit');
  const guessField = document.querySelector('.guessField');
  let guessCount = 1;
  let resetButton;

  function checkGuess() {
    let userGuess = Number(guessField.value);
    if (guessCount === 1) {
      guesses.textContent = 'Precedenti tentativi: ';
    }

    guesses.textContent += userGuess + ' ';

    if (userGuess === randomNumber) {
      lastResult.textContent = 'Congratulazioni! Hai indovinato!';
      lastResult.style.backgroundColor = 'green';
      lowOrHi.textContent = '';
      setGameOver();
    } else if (guessCount === 10) {
      lastResult.textContent = '!!!GIOCO FINITO!!!';
      lowOrHi.textContent = '';
      setGameOver();
    } else {
      lastResult.textContent = 'Errato!';
      lastResult.style.backgroundColor = 'red';
      if(userGuess < randomNumber) {
        lowOrHi.textContent = "L'ultimo valore era piu' basso!" ;
      } else if(userGuess > randomNumber) {
        lowOrHi.textContent = "L'ultimo valore era piu' alto!";
      }
    }

    guessCount++;
    guessField.value = '';
    guessField.focus();
  }

  guessSubmit.addEventListener('click', checkGuess);

  function setGameOver() {
    guessField.disabled = true;
    guessSubmit.disabled = true;
    resetButton = document.createElement('button');
    resetButton.textContent = 'Inizia una nuova partita';
    document.body.appendChild(resetButton);
    resetButton.addEventListener('click', resetGame);
  }

  function resetGame() {
    guessCount = 1;
    const resetParas = document.querySelectorAll('.resultParas p');
    for(let i = 0 ; i < resetParas.length ; i++) {
      resetParas[i].textContent = '';
    }

    resetButton.parentNode.removeChild(resetButton);
    guessField.disabled = false;
    guessSubmit.disabled = false;
    guessField.value = '';
    guessField.focus();
    lastResult.style.backgroundColor = 'white';
    randomNumber = Math.floor(Math.random() * 100) + 1;
  }
</script>
  </body>
</html>

*{ }