011 Number Guessing Game Final Source Code

<!DOCTYPE html>
<html>

<head>
    <style>
        .replay {
            padding: 5px;
        }
        
        button {
            display: block;
            padding: 10px;
            min-width: 100px;
            font-size: 1.4em;
            font-family: sans-serif;
            border-radius: 15px;
            margin-top: 5px;
        }
        
        input {
            font-size: 1.5em;
        }
        
        .message {
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div class="output">
        <div class="message"></div>
        <input type="number">
        <button>Guess</button>
    </div>
    <script>
        let game = {
            "min": 1
            , "max": 10
        };
        document.addEventListener("DOMContentLoaded", function () {
            game.output = document.querySelector(".output");
            game.message = document.querySelector(".message");
            game.guessInput = document.querySelector("input");
            game.btn = document.querySelector("button");
            game.btn.addEventListener("click", guessValue);
            init();
        })

        function guessValue() {
            if (game.btn.classList.contains("replay")) {
                init();
                game.btn.innerHTML = "Guess";
                game.guessInput.style.display = "block";
                game.btn.classList.remove("replay");
            }
            else {
                game.guesses++;
                let tempGuess = game.guessInput.value;
                game.guessInput.value = "";
                tempGuess = parseInt(tempGuess);
                if (isNaN(tempGuess)) {
                    message(`Please enter only Digits`, "red");
                }
                else if (tempGuess === game.num) {
                    message(`Correct guess of ${game.num} in ${game.guesses} guesses`, "green");
                    gameOver();
                }
                else {
                    let holder = tempGuess > game.num ? {
                        "c": "blue"
                        , "m": "Was Lower"
                    } : {
                        "c": "purple"
                        , "m": "Was Higher"
                    };
                    message(holder.m, holder.c);
                }
            }
        }

        function gameOver() {
            game.btn.innerHTML = "Restart Game";
            game.guessInput.style.display = "none";
            game.btn.classList.add("replay");
            game.max += 5;
        }

        function init() {
            game.guesses = 0;
            game.num = ranNumber(game.min, game.max);
            let tempMes = `Guess a number from ${game.min} to ${game.max}`;
            message(tempMes, "blue");
        }

        function ranNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

        function message(mes, clr) {
            game.message.innerHTML = mes;
            game.message.style.color = clr || "black";
            game.guessInput.style.borderColor = clr || "black";
            game.btn.style.backgroundColor = clr || "black";
            game.btn.style.color = "white";
        }
    </script>
</body>

</html>