Fordham, the Jesuit University of New York

CISC 3300 L01

Internet & Web Programming

Spring, 2015

Dr. Robert K. Moniot


back Back to course home page

Web Project 6: Putting It All Together

Assigned: Monday, February 23
Due date: Monday, March 2
Points: 25

This is a larger project, in which you will combine the techniques learned so far to create a page that effectively uses HTML, CSS, JavaScript, and the Document Object Model in a fully worked-out application. Note the increased number of points!

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 an external JavaScript file named project6.js. There must be no embedded CSS or JavaScript. Unobtrusive techniques 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 but also not assigning event handlers as attributes of tags in the HTML. Likewise no style attributes inside HTML tags: use classes and ids referred to in the style sheet instead.

The project

The web page runs a JavaScript program to play a simple guessing game. To start the game, the program picks a secret random number between 1 and 99 and prompts the player to begin guessing. The player gets 7 guesses.

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.

Styling

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.

Some hints:

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.

Note: Your project page must pass the W3C validator with no more than the unavoidable warning about the experimental HTML5 conformance checker. Your style sheet must pass the W3C CSS Validator.