Description
This is an individual assignment. You will write an application as part of an HTML file that will play a typical HiLo game, where the player guesses values in a specific range until the correct number is found.
Objectives:
• To practice writing HTML and JavaScript functions
• To use some of the events supported by the Document Object Model
• Become familiar with client-side validation and feedback techniques
Requirements:
1. The entire application must be written in one HTML page using only JavaScript and HTML.
2. Call this web page a01.html
3. Do not use a any external CSS styling. This assignment is not about creating and using CSS. But if you
do want to experiment with styles, define the style in theelement or use in-line styles
4. When the page initially loads, the application should prompt the user for their name.
5. After the name is entered (cannot be blank), the application will prompt the user (by name) to enterthe maximum guess numbera.
The application will only allow the user to enter a number and will ensure the value greaterthan 1.
6. Your Hi-Lo application must create a random integer between 1 and the maximum guess number
7. The following must be components of the main runtime User Interface:a. A prompt and textbox to allow the user to enter a new guess at the random numberb. A button to submit the guessc.
A message that informs the user about their allowable guessing range• For example, let’s say the user enters 10 as their maximum number – your initialmessage would read “Your allowable guessing range is any value between 1 and 10.”• If the random number you chose was 7 and the user guesses 5, then after submittingtheir guess the message would change to “Your allowable guessing range is any valuebetween 6 and 10”d. If the user happens to enter a number outside of the allowable range – your logic can ignorethat value and simply restate your allowable guessing range message•
For example, let’s say the allowable guessing range is between 6 and 10 and the userenters the value 44 or -10 … since they are number values, it’s allowed – simply restatethe last allowable guessing range messagee. During the game, if the user enters anything but a number, I expect your Hi-Lo game to remindthe user that they need to enter a number – so display some kind of error message to thateffect as well as the allowable guessing range messageA-01 : Hi-Lo in JavaScript and HTML
f. When the user’s guess is correct, change the background colour of the page and show a
message on the screen saying “You Win!! You guessed the number!!”
• At this point, show a “Play Again” button and reset your page to do it again
• Only this time you don’t need to prompt the user for their name – but you should
prompt them for a new maximum number.
8. Make sure that all data entered is validated for proper data type and in some cases proper data
ranges/values
a. Remember that the objective of the code is to create a workable Hi-Lo game
b. Also remember that giving the user timely feedback is a mandated usability factor
Hand in:
1. The final HTML page
2. Make sure you comment appropriately (HTML header comment, JavaScript function comment blocks
as well as inline comments)
3. Make sure that your Hi-Lo application runs properly and consistently within the Internet Explorer and
Chrome browsers
4. When submitting your HTML to the drop-box, please ZIP it up first
