4395-Indovina numero by @DigitalTeacher - Codewith.it

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

References

maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
formmethodDefinisce il metodo di invio dei dati oltre a method
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<body>Tag primario di un documento HTML
dirnameInvia informazioni sulla direzione di scrittura da un elemento input

Users

Log in to search for users

Explore

Find inspiration

inserimento immagini in un testo

Menu a tendina CSS

educazione civica 2

La danza del Fuoco e delle Ombre

esercizio 1 informatica

La storia dell\\\\

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>

*{ }