Assigned: Monday, February 23
Due date: Monday, March 2
Create a new page named project6.html for this project. Add
a link to it from your class projects list. The page will also
require an external CSS style sheet, named project6.css, and
event-driven style only are to be used. Note: unobtrusive not only
means no J/S code enclosed in
<script> tags in project.html
not assigning event handlers as attributes of tags in the HTML. Likewise
style attributes inside HTML tags: use classes and
ids referred to in the style sheet instead.
The page contains a play area with a text box where the user types guesses. Next to the text box is a button labeled Guess. When the user clicks the button, the program reports whether the guess is high, low, or equal to the secret number. If it is high or low, the player is told how many guesses remain (one less than before), and invited to guess again. If the guess is equal to the secret number, some congratulations are displayed, and the Guess button changes into a Play Again button that, when clicked, starts a new game. If the number of guesses remaining reaches zero, the game ends, an appropriate message is displayed, and the Guess button changes to Play Again. Once a new game starts, the button changes back to Guess.
Give the page a suitable heading and place some general instructions at the top of the page. The play area should be set off in a separate box. Messages are to be placed into document elements in the play area.
Using an external style sheet and unobtrusive techniques, style the whole page so that it looks good. Use an attractive and appropriate color scheme, and an effective layout of areas on the page. Style the play area differently from the rest of the page so it stands out clearly. Have some styles change dynamically, for instance the messages for wins and losses could be styled differently, or the guess feedback could change its style as the player gets closer to the right answer.
Here is how to generate the secret number:
Math.floor(Math.random()*99) + 1;
To change the button action between Guess and Play Again, I suggest dynamically changing the event handler function assigned to it.