4395-Indovina numero by @DigitalTeacher - Codewith.it

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

References

enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
hreflangConsente di dichiarare la lingua del documento collegato.
getDefinisce un metodo di invio di dati al server
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<html>Tag primario di un documento HTML

Users

Log in to search for users

Explore

Find inspiration

esempio di captcha

Twitchpage1confirm

Esercizi 05/03/2024 es9

esercizio 01 pagina semplice

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>

*{ }