guess the number i coded most of it i just need a little help

LAB 2 – INSTRUCTIONS

OVERVIEW

THIS IS AN EXTENSION OF LAB 1. NEW PARTS ARE HIGHLIGHTED.

Again, it should be emphasized that this exercises are not about teaching “web design” or “web programming” in general; instead we are just using the browser as a “platform” for our actual scripts… and that the creation and execution of these scripts requires no tools above and beyond what you likely already have installed on any machine… a web browser and a text editor.

OBJECTIVE

Create a Guess The Number (Higher / Lower) Game, based on the instructions below, where the computer tries to guess the number YOU are thinking. Note: the “Design” is up to you as long as it meets the minimal requirements as stated in the instructions.

INSTRUCTIONS

  1. A “game set-up” area that is displayed first.
    • Before displaying the main “game” area:
      • Show 2 “input” fields on the screen where the user the user can tell the computer the “range” of numbers to choose from. For Example:
        I am thinking of a number between and .
      • An “input” field where the user can choose the maximum number of computer guesses. For Example:
        Maximum Computer Guesses: .
      • A “button” labelled “Start Game”
        • When this button is clicked, the games moves on to Step 2 below.
  2. The main “game” screen
    • An output “span” on the screen indicating the current guess number.
      • Example: Guess Number: 1
    • An output “span” (where the computer indicates it’s guess of your number.
      • Example: Are you thinking of the number: 50?
    • Three Buttons where the user (player) will indicate “Higher” or “Lower” or “Correct”
    • Notes:
      • The computer should display a message (either directly on the screen or in the form of an alert box) indicating that the human must be “cheating” if the human responses are “impossible”.
        • For example, if the user just keeps clicking “Higher”, meaning that the number would have to exceed 100!
      • The computer should display a message (either directly on the screen or in the form of an alert box) if the maximum number of guesses has been exceeded. For Example:
        Sorry, I could not guess your number within 5 guesses.
      • If guessed correctly, the computer should display a final message indicating how many guesses it took to correctly guess your number.
  3. The game should be broken up into two separate files, a .html and a .js file containing the HTML for the page and the JavaScript, respectively.

SUBMIT

  • All HTML and JS files packaged into a single .ZIP file. (THIS IS IMPORTANT!)

HTML CODE:

<html>_x000D_
    <head>_x000D_
        <!-- The Code For the page -->_x000D_
        <script src="Lab2.js"></script>_x000D_
    </head>_x000D_
_x000D_
    <body>_x000D_
        <div id="DIV_SETUP">_x000D_
            <!-- Instructions / Setup -->_x000D_
            <p>I'm Thinking of a number between _x000D_
                <input ID="USER_LOW_VALUE" size="3"> _x000D_
                and _x000D_
                <input id="USER_HIGH_VALUE" size="3">._x000D_
            </p>_x000D_
_x000D_
            <p>_x000D_
                Maximum Number of Computer Guesses: _x000D_
                <input ID="COMPUTER_MAX_GUESSES" size="3">._x000D_
            </p>_x000D_
            _x000D_
            <button id="START_GAME" onclick="startGame()">Start Game!</button>_x000D_
        </div>_x000D_
_x000D_
        <!-- NOTE: the "hidden" property can really be anything that is not "false",_x000D_
        while setting hidden='true' works just in HTML5, _x000D_
        hidden='hidden' is common for support of older browsers. -->        _x000D_
        <div id="DIV_PLAYAREA" hidden='hidden'>_x000D_
            <!-- Game Play Area -->_x000D_
            Guess Number: <span id="GUESS_NUM"></span> of <span id="GUESS_LIMIT"></span> <br>_x000D_
            Are you thinking of the number: <span id="COMP_GUESS">50</span><br>_x000D_
_x000D_
            <button id="BUTTON_HIGHER"  onclick="handleUserChoice(this)">Higher</button>_x000D_
            <button id="BUTTON_LOWER"   onclick="handleUserChoice(this)">Lower</button>_x000D_
            <button id="BUTTON_CORRECT" onclick="handleUserChoice(this)">Correct</button>_x000D_
        </div>_x000D_
    </body>_x000D_
_x000D_
</html>

JS CODE:

/* "OBJECT" to store all of the relevant game data. */_x000D_
var gameData = {_x000D_
    userMinRange: null,       // The lower bound of initial range picked by the player_x000D_
    userMaxRange: null,       // The lower bound of initial range picked by the player_x000D_
    maxGuessAllowed: null,    // The Maximum number of guessed picked by the player._x000D_
    highestGuessSoFar: null,  // The upper Bound of what the computer will choose_x000D_
    lowestGuessSoFar: null,   // The lower bound of what the computer will choose_x000D_
    guessesSoFar: null,       // The Number of guesses made by the computer so far._x000D_
    lastComputerGuess: null   // The last guess made by the computer._x000D_
};_x000D_
/* NOTE YOU ARE FREE TO ADD ADDITIONAL FUNCTIONS WHERE NECESSARY */_x000D_
_x000D_
/* Start the game */_x000D_
function startGame() {_x000D_
    // TODO: Populate the Object with the values from the DIV_SETUP.    _x000D_
    // TODO: Hide the SET_UP Area_x000D_
    // TODO: Show the Play Area._x000D_
_x000D_
    // Update the game data values._x000D_
	gameData.userMinRange    = get("USER_LOW_VALUE");_x000D_
	gameData.userMaxRange    = get("USER_HIGH_VALUE");_x000D_
	gameData.maxGuessAllowed = get("COMPUTER_MAX_GUESSES");_x000D_
	gameData.guessesSoFar    = 1;_x000D_
_x000D_
    // Hide the setup area and show the play area_x000D_
    document.getElementById("DIV_SETUP").hidden = true;_x000D_
    document.getElementById("DIV_PLAYAREA").hidden = false;_x000D_
	_x000D_
    // Update the screen values shown to the user_x000D_
    updatePlayArea();_x000D_
    _x000D_
    // Just for debugging, so we can see the values as they change in the console._x000D_
	DEBUG_ShowGameData();_x000D_
}_x000D_
/* Function (to be) called when game is finally over._x000D_
 * For example: Disable play buttons and display the number of guesses made. */_x000D_
function endGame() {_x000D_
    // TODO: Whatever should be displayed to the user upon game completion.   _x000D_
    // HINT: This could "disable" the user play buttons so they cannot be clicked anymore,_x000D_
    //       prompt the user to play again, etc._x000D_
}_x000D_
/* Have the computer make a guess. */_x000D_
function makeComputerGuess() {_x000D_
			_x000D_
    // TODO: Have the computer make a guess and update the last Guess made._x000D_
	//       i.e., gameData.lastComputerGuess_x000D_
    //       _x000D_
    // HINT: this function should date the highestGuessSoFar, lowestGuessSoFar, and lastComputerGuess_x000D_
}_x000D_
/* Update the Play Area with the new values. */_x000D_
function updatePlayArea() {_x000D_
	//TODO: Add all of the "set" functions to update the play area of the screen for all of the relevant elements._x000D_
    set("GUESS_NUM", gameData.guessesSoFar);_x000D_
	set("GUESS_LIMIT", gameData.maxGuessAllowed);_x000D_
}_x000D_
/* Function to handle the users button click and call the other functions above as necessary. */_x000D_
function handleUserChoice(theButton) {_x000D_
//   TODO (potentially before *OR* after the "if" block):_x000D_
//        - Respond to the users choice._x000D_
//			- Make next guess if necessary (at the appropriate time)_x000D_
//				- End the game if the game should be over._x000D_
//        - Update the screen playarea at the appropriate time. _x000D_
//        - Handle the number of guesses being >= the max allowed._x000D_
 _x000D_
    if (theButton.id === "BUTTON_HIGHER") {_x000D_
        // TODO: Handle Higher Button_x000D_
    } else if (theButton.id === "BUTTON_LOWER") {_x000D_
        // TODO: Handle Lower Button_x000D_
    } else {_x000D_
        // TODO: HANDLE CORRECT (What happens when the user clicks correct?)_x000D_
    }_x000D_
}_x000D_
/* ****************************************************** */_x000D_
/* ***** BELOW THIS POINT ARE SOME HELPER FUNCTIONS ***** */_x000D_
_x000D_
/* FROM: _x000D_
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random_x000D_
 * #Getting_a_random_integer_between_two_values_inclusive _x000D_
 * */_x000D_
function getRandomIntInclusive(min, max) {_x000D_
    min = Math.ceil(min);_x000D_
    max = Math.floor(max);_x000D_
    _x000D_
    //The maximum is inclusive and the minimum is inclusive_x000D_
    var randomNumber = Math.floor(Math.random() * (max - min + 1)) + min; _x000D_
_x000D_
    return randomNumber;_x000D_
}_x000D_
/* A Function to aid in debugging which just shows all of the gameData values._x000D_
 * NOTE: It can be removed once the development is complete. */_x000D_
function DEBUG_ShowGameData() {_x000D_
    for (var item in gameData) {_x000D_
        // Test of ItemPropertyName = ItemPropertyValue_x000D_
        var message = item + " = " + gameData[item];_x000D_
        console.log(message);_x000D_
    }_x000D_
}_x000D_
/* Get the contents (value or innerHTML ) of an element on a page_x000D_
   based it's ID.  Throws an exception if the element ID does not exist.  _x000D_
   NOTE: The will usually be in "String" form. (numbers would need to be "parsed". */_x000D_
function get(theObjectId) {_x000D_
_x000D_
    // If the Id is invalid this could all fail, so be prepared if it does!_x000D_
    try {_x000D_
        // Get the page element_x000D_
        var thePageElement = document.getElementById(theObjectId);_x000D_
_x000D_
        // If the page element has a value, use it._x000D_
        if (thePageElement.value) {_x000D_
            return thePageElement.value;_x000D_
        } else {_x000D_
            return thePageElement.innerHTML;_x000D_
        }_x000D_
    } catch (theError) {_x000D_
        // A "Template Literal" where the value theObjectId is placed into the string._x000D_
        let errMessage = `Element "${theObjectId}" does not exist.n${theError.message}`;_x000D_
_x000D_
        // Alert and log_x000D_
        console.log(errMessage);_x000D_
        alert(errMessage);_x000D_
_x000D_
        // Throw a "new" error to prevent the program from continuing to run._x000D_
        throw errMessage;_x000D_
    }_x000D_
}_x000D_
/* Same as above, but for setting... */_x000D_
function set(theObjectId, theNewContents) {_x000D_
_x000D_
    // If the Id is invalid this could all fail, so be prepared if it does!_x000D_
    try {_x000D_
        // Get the page element_x000D_
        let thePageElement = document.getElementById(theObjectId);_x000D_
_x000D_
        // If the page element has a value, use it._x000D_
        if (thePageElement.value)_x000D_
            thePageElement.value = theNewContents;_x000D_
        else_x000D_
            thePageElement.innerHTML = theNewContents;_x000D_
_x000D_
    } catch (theError) {_x000D_
        // A "Template Literal" where the value theObjectId is placed into the string._x000D_
        let errMessage = `Element "${theObjectId}" does not exist.n${theError.message}`;_x000D_
_x000D_
        // Alert and log_x000D_
        console.log(errMessage);_x000D_
        alert(errMessage);_x000D_
_x000D_
        // Throw a "new" error to prevent the program from continuing to run._x000D_
        throw errMessage;_x000D_
    }_x000D_
}