Guess the Number Game: HTML & JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Guess the Number Game</title>
    <script>
        var randomNumber = Math.floor(Math.random() * 100) + 1;
<pre><code>    var guesses = document.querySelector('.guesses');
    var lastResult = document.querySelector('.lastResult');
    var lowOrHigh = document.querySelector('.lowOrHigh');

    var guessSubmit = document.querySelector('.guessSubmit');
    var guessField = document.querySelector('.guessField');

    var guessCount = 1;
    var resetButton;

    function checkGuess() {
        var userGuess = Number(guessField.value);
        if (guessCount === 1) {
            guesses.textContent = 'Previous guesses: ';
        }
        guesses.textContent += userGuess + ' ';

        if (userGuess === randomNumber) {
            lastResult.textContent = 'Congratulations! You got it right!';
            lastResult.style.backgroundColor = 'green';
            lowOrHigh.textContent = '';
            setGameOver();
        }
        else if (guessCount === 10) {
            lastResult.textContent = '!!!GAME OVER!!!';
            setGameOver();
        }
        else {
            lastResult.textContent = 'Wrong!';
            lastResult.style.backgroundColor = 'red';
            if (userGuess &lt; randomNumber) {
                lowOrHigh.textContent = 'Last guess was too low!';
            } else if (userGuess &gt; randomNumber) {
                lowOrHigh.textContent = 'Last guess was too high!';
            }
        }

        guessCount++;
        guessField.value = '';
        guessField.focus();
    }

    guessSubmit.addEventListener('click', checkGuess);

    function setGameOver() {
        guessField.disabled = true;
        guessSubmit.disabled = true;
        resetButton = document.createElement('button');
        resetButton.textContent = 'Start new game';
        document.body.appendChild(resetButton);
        resetButton.addEventListener('click', resetGame);
    }

    function resetGame() {
        guessCount = 1;

        var resetParas = document.querySelectorAll('.resultParas p');
        for (var i = 0; i &lt; 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;
    }

&lt;/script&gt;
&lt;style&gt;
    body {
        text-align: center;
        margin: 0 auto;
        background-color: #2f4f4f;
        font-family: sans-serif;
        font-size: 16px;
        color: white;
    }

    h1 {
        font-size: 20px;
        color: #00cc99;
    }

    p {
        font-size: 12px;
        color: #00cc99;
    }

    .resultParas {
        font-size: 20px;
        color: #00cc99;
    }

    .guessField {
        width: 20%;
        height: 10%;
        text-align: center;
        font-size: 16px;
    }

    .guessSubmit {
        font-size: 16px;
        background-color: #00cc99;
        color: white;
        width: 11%;
        height: 10%;
    }

&lt;/style&gt;
</code></pre>
</head>
<body>
    <h1>Guess the Number Game</h1>
    <p>Guess a number between 1 and 100</p>
    <div class='resultParas'>
        <p class='guesses'></p>
        <p class='lastResult'></p>
        <p class='lowOrHigh'></p>
    </div>
    <input type='text' class='guessField'>
    <button class='guessSubmit'>Guess</button>
</body>
<p>&lt;/htm</p>