JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<p id="message"></p>
<input id="guess" type="text" />
<button id="tryy">Try</button>

JavaScript

(function (guess, tryy, message) {
    var comp = function () {
        return Math.floor(Math.random() * 6)
    };
    var number = comp();
    var count = 0;
    var test = function () {
        var val = guess.value;
        if (!Number.isNaN(val) && val >= 0 && val <= 5) {
            switch (true) {
                case val > number:
                    message.innerHTML = 'Your guess was too high!';
                    count++;
                    break;
                case val < number:
                    message.innerHTML = 'Your guess was too low!';
                    count++;
                    break;
                case val == number:
                    count++;
                    message.innerHTML = 'Congratulations you found the number! It took you ' + count + ' guesses';
                    //Reseting game here
                    setTimeout(function(){
                        count = 0;
                        number = comp();
                        guess.value = '';
                        message.innerHTML = 'Your game has been reset';
                    }, 2000);
                    break;
            };
        }

    };
    tryy.onclick = test;
    guess.onkeyup = function (e) {
        if (e.keyCode == 13) {
            test();
        }
    }
})(document.getElementById('guess'), document.getElementById('tryy'), document.getElementById('message'));