Javascript Demo

<!DOCTYPE html>
<html>

<head>
    <title>Guess Random number</title>
    <style>
        body {
            background-color: #800080;
            color: white;
            font-family: fantasy;
            padding: 50px;
        }
    </style>
</head>

<body>
    <h1 class="heading"> Guess a Random Number 1-20</h1>
    <input type="number" class="gnum"><br>
    <button class="check">Check</button>
    <button class="reset">Reset</button><br>
    <p class="message">Enter any number!!</p>
    <p class="score">Score: 20</p>
    <p class="highscore">HighScore: 0</p>
    <script>
        let winningnumber = Math.trunc((Math.random() * 20))
        console.log(winningnumber)
        let score = 20
        let highscore = 0

        function gameplay() {
            const guess = Number(document.querySelector('.gnum').value)
            if (guess == winningnumber) {
                document.querySelector('.message').textContent = "You guessed correctly!!"
                //CSS manipulation is done like this
                //- is not allowed, instead camel casing is used
                document.querySelector('body').style.backgroundColor = '#65FF66'
                if (score > highscore) {
                    highscore = score
                    document.querySelector('.highscore').textContent = `HighScore: ${highscore}`
                }
            } else if (guess > winningnumber) {
                document.querySelector('.message').textContent = "Go lower!"
                score -= 1
                document.querySelector('.score').textContent = `Score: ${score}`
            } else if (guess < winningnumber) {
                document.querySelector('.message').textContent = "Go higher!"
                score -= 1
                document.querySelector('.score').textContent = `Score: ${score}`
            }

        }

        function reset() {
            winningnumber = Math.trunc((Math.random() * 20))
            console.log(winningnumber)
            score = 20
            // document.querySelector('body').style.backgroundColor = 'purple'
            document.querySelector('.message').textContent = "Enter any number!!"
            document.querySelector('.gnum').value = ""
            document.querySelector('body').style.backgroundColor = '#800080'
            document.querySelector('.score').textContent = `Score: ${score}`
            document.querySelector('.highscore').textContent = `HighScore: ${highscore}`
        }

        document.querySelector('.check').addEventListener(
            'click', gameplay
        )

        document.querySelector('.reset').addEventListener(
            'click', reset
        )
    </script>
</body>

</html>