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

### LAB 2 – INSTRUCTIONS

#### 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_
<!-- The Code For the page -->_x000D_
<script src="Lab2.js"></script>_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_
console.log(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_