JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<h1>Угадайте число от 1 до 100</h1>
<input type="text" class="guessField" maxlength="3" onkeypress="enterKeyPressed(event)">
<input type="submit" value="Отправить" class="guessSubmit">
<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 = 'Предыдущие догадки: ';
    }
    guesses.textContent += userGuess + ' ';
    if (userGuess === randomNumber) {
      lastResult.textContent = 'Поздравляю! Вы угадали!';
      lowOrHi.textContent = '';
      setGameOver();
    } else if (guessCount === 5) {
      lastResult.textContent = 'Вы проиграли. Число: ' + randomNumber;
      lowOrHi.textContent = '';
      setGameOver();
    } else {
      lastResult.textContent = 'Неправильно.';
      if (userGuess < randomNumber) {
        lowOrHi.textContent = 'Побробуйте взять число больше.';
      } else if (userGuess > randomNumber) {
        lowOrHi.textContent = 'Побробуйте взять число меньше.';
      }
    }
    guessCount++;
    guessField.value = '';
    guessField.focus();
  }
  guessSubmit.addEventListener('click', checkGuess);

  function setGameOver() {
    guessField.disabled = true;
    guessSubmit.disabled = true;
    resetButton = document.createElement('button');
    resetButton.textContent = 'Начать новую игру';
    document.body.appendChild(resetButton);
    resetButton.addEventListener('click', resetGame);
  }

  function resetGame() {
    guessCount = 1;
    const resetParas =...

CSS

html {
  font-family: sans-serif;
  font-size: 25px;
  text-align: center;
  color: white;
}

body {
  margin: 125px;
  background: linear-gradient(135deg, orange, salmon, coral, crimson);
  background-size: 400% 400%;
  animation: gradient 30s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

h1 {
  font-size: 60px;
  margin: 30px;
}

input.guessField {
  width: 244px;
  height: 64px;
  font-size: 25px;
  color: white;
  background-color: transparent;
  border: 3px solid white;
  border-radius: 25px;
  outline: none;
  padding: 0px;
  transition: all 0.5s ease;
  text-align: center;
}

input.guessField:hover {
  border-color: rgb(255, 255, 120);
}

input.guessSubmit {
  width: 250px;
  height: 70px;
  font-size: 25px;
  color: white;
  background-color: transparent;
  border: 3px solid white;
  border-radius: 25px;
  outline: none;
  padding: 0px;
  transition: all 0.5s ease;
}

input.guessSubmit:hover {
  border-color: rgb(255, 255, 120);
}

button {
  width: 250px;
  height: 70px;
  font-size: 25px;
  color: white;
  background-color: transparent;
  border: 3px solid white;
  border-radius: 25px;
  outline: none;
  padding: 0px;
  transition: all 0.5s ease;
}

button:hover {
  border-color: rgb(255, 255, 120);
}