4395-Indovina numero by @DigitalTeacher - Codewith.it

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

Referenze

<p>Serve a definire paragrafi di testo
<h5>Titolo di intestazione di quinto livello
<title>Definisce il titolo della pagina web.
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
<h6>Titolo di intestazione di sesto livello
hrefDefinisce l'URL della risorsa/pagina di destinazione.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Notizie dai Monti

esercizio 2 esame

ES01a\\index.html

test-border-on-wrap

match html tags

Esercizio prova \"lista della

Dashboard Palestra - MVP

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>

*{ }