Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Guess the Number</title>
    <style>

        body{
            background-color: darkslategray;
            color: white;
            padding: 10%;
        }

        #title{
            background-color: darkturquoise;
            padding: 20px;
            border-radius: 10px;
        }


        .btn{
            width: 25%;
            background-color: dimgray;
            color: whitesmoke;
        }

        #check{
            padding: 10px;
            border-radius: 10px;
        }

    </style>
</head>
<body>
    <h1 id="title">Guess a number between 1-20</h1>
    <input type="number" id="numinput" max="20" min="1">
    <button id="check" class="btn">Check</button>
    <p id="message">Select a random number now! </p>
    <p id="score">Your Score is 20!</p>
    <script>
        var random_num = Math.ceil(Math.random() * 20);
        var score = 20;

        function buttonPressed(){
            var guessed_value = Number(document.querySelector("#numinput").value);
            var title_element = document.querySelector("#title");
            var message_element = document.querySelector("#message");

            if (guessed_value < random_num) {
                title_element.style.backgroundColor = "blue";
                message_element.textContent = "Go Higher!";
            } else if (guessed_value > random_num){
                title_element.style.backgroundColor = "red";
                message_element.textContent = "Go Lower!";
            } else {
                title_element.style.backgroundColor = "green";
                message_element.textContent = "Woah! You are a mind reader!";
            }
            score -= 1;
            document.querySelector("#score").textContent = `Your Score is ${score}`;
        }

        document.querySelector("#check").addEventListener('click', buttonPressed);

    </script>
</body>
</html>