JSFiddle - React, Tailwind, and code Playground

by ernestohs

HTML

<script src="http://test.cita.illinois.edu/aria/js/jquery.js"></script>
<div role="application">
    <div id="guess1" class="guess">
         <h2>Number Guessing Game</h2> 
        <p><strong>Instructions:</strong> In this game you guess a number between 1 an 10 and then press the "Check My Guess" button to check your responses. An <abbr title="Accessible Rich Internet Application">ARIA</abbr> dialog box will display the results of your guess. To start over again to press the "Play Again" button.</p>
        <p class="input">
            <label id="guess1_label" for="guess1_text">Guess a number between 1 and 10</label>
            <input type="text" id="guess1_text" size="3" aria-labelledby="guess1_label" aria-invalid="false" />
        </p>
        <p id="guess1_alert" role="alert" class="feedback"></p>
        <p class="input">
            <input class="button" id="guess1_check" type="button" value="Check My Guess" />
            <input class="button" id="guess1_again" type="button" value="Play Again" />
        </p>
    </div>
</div>

CSS

div.guess {
    border: thick double black;
    padding: 1em;
    width: 65%;
    font-family: Arial, Helvetica, sans-serif;
}
div.guess h2 {
    margin: 0;
    padding: 0;
    text-align: center;
    margin-left: 1em;
    margin-right: 1em;
}
div.guess input {
    font-size: 100%;
}
div.guess p.input {
    margin: 0;
    padding: 0;
    font-size: 150%;
    margin-top: .5em;
    margin-bottom: .5em;
    text-align: center;
    margin-left: 1em;
    margin-right: 1em;
}
div.guess input.button {
    margin: 0;
    padding: 0;
    display: inline;
    padding-left: .5em;
    padding-right: .5em;
    padding-top: .25em;
    padding-bottom: .25em;
}
div.guess p.feedback {
    margin: 0;
    padding: .25em;
    border: 2px solid black;
    text-align: center;
    margin-top: .5em;
    margin-bottom: .5em;
    font-weight: bold;
}

JavaScript

//
// guess() is a class to implement a simple number guessing game
//
// @param (max integer) min is the maximum number to guess.
//
// @param (text_id string) text_id is the id of the text box where player enters a guess.
//
// @param (check_id string) check_id is the id of the check guess button.
//
// @param (again_id string) again_id is the id of the play again button.
//
// @param (alert_id string) alert_id is the id of the alert element where game messages will
//                          be printed.
//
// @return N/A
//
function guess(min, max, text_id, check_id, again_id, alert_id) {

    // define class properties
    this.minGuess = min; // the minimum number to guess
    this.maxGuess = max; // the maximum number to guess
    this.$text = $('#' + text_id); // the jQuery object pointer to the text box
    this.$check = $('#' + check_id); // the jQuery object pointer to the check guess button
    this.$again = $('#' + again_id); // the jQuery object pointer to the play again button
    this.$alert = $('#' + alert_id); // the jQuery object pointer to the alert area

    this.guessVal = -1; // the number for the player to guess
    this.guessCount = 0; // the number of attempts the player has made

    this.enterKey = 13; // key code for the enter key

    // bind event handlers
    this.bindHandlers();

    // initialize the game
    this.newGame();

} // end guess object constructor

//
// newGame() is a member function to set up a new game. The function chooses a number
// between 1 and the max number specified at instantiation, sets the guess count to 0, and
// show the user a message to make a guess.
//
// @return N/A
guess.prototype.newGame = function () {

    // get a new random number for the player to guess
    this.guessVal = Math.floor(Math.random() * (this.maxGuess - this.minGuess + 1)) + this.minGuess;

    // reset the guess count
    this.guessCount = 0;

    // reset the guess text box
    this.$text.val('');
   ...