index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adivinhe o Número</title>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
  }
</style>
</head>
<body>

<h1>Adivinhe o Número!</h1>
<p>Eu escolhi um número entre 1 e 100. Tente adivinhar qual é!</p>
<input type="number" id="guess" placeholder="Digite seu palpite">
<button onclick="checkGuess()">Enviar Palpite</button>
<p id="message"></p>

<script>
  // Gerar número aleatório entre 1 e 100
  const randomNumber = Math.floor(Math.random() * 100) + 1;
  let attempts = 0;

  function checkGuess() {
    const guess = parseInt(document.getElementById('guess').value);
    const message = document.getElementById('message');
    
    if (isNaN(guess) || guess < 1 || guess > 100) {
      message.textContent = "Por favor, digite um número válido entre 1 e 100.";
      return;
    }

    attempts++;

    if (guess === randomNumber) {
      message.innerHTML = `Parabéns! Você acertou o número ${randomNumber} em ${attempts} tentativas.`;
      disableInput();
    } else if (guess < randomNumber) {
      message.textContent = "Tente um número maior.";
    } else {
      message.textContent = "Tente um número menor.";
    }
  }

  function disableInput() {
    document.getElementById('guess').disabled = true;
    document.querySelector('button').disabled = true;
  }
</script>

</body>
</html>