1. [Design, 15 points] Design your web-site before implementing it. This includes:

• outline of the topic, and what information on that topic you want to include
• a sketch of the link/navigation structure of the site [hardcopy]
• rough designs for page layout (placement of text, graphics, etc.) [hardcopy]

The final sketches and designs (the one from which you start implementing the site) are part of this project, and you need to hand them in. I'd prefer you to hand in the hardcopies, but you can also make the sketches available off your web-page. If for some reason both options are not possible for you, you can email me your documents.

2. [Contents, 15 points] If you use text or graphics from outside sources, you need to acknowledge this explicitly on your page (you could have an acknowledgment section at the end of the main page, for example). Any text not written by yourself needs to be clearly marked as a quotation and attributed. Parts of the points will be reserved for original work (e.g., scanned pictures, designed graphics, original text). If you include a lot of original work you should claim so on your cover page (for extra credit).

Your site should have about five to seven pages (including the order form and the gallery pages, but not the cover page).

3. [Navigation, 10 points] Use a uniform navigation system for your site: all your pages should contain a navigation component in the same location that allows the user to get to the major pages (order form, start of gallery, main page) in your site with a single click. You can implement the navigation system using clickable images, or simple text anchors (or you can try imagemaps).

4. [Order form, 20 points] Implement a fake check-out page which contains a form that will allow you to purchase items related to your web-site (come up with at least three items). A customer should be able to buy any  number of copies of each item. 

The input fields of the order form should also include name, address, credit card number (never enter real information into these fields). Instead of submitting the form to a real application just use action="http://ovid.cs.depaul.edu/scripts/requestsniffer.asp" in the form. This ASP page (which we saw in class) will tell you what information you entered into the form. This should help you in debugging the form, too.

a) Include validation functions that check that all the required fields are filled out correctly: text fields are not empty and number fields contain numbers.

b) Add a button that calculates your total (i.e. add up the prices for the selected items and add a 10% sales tax). Display the total before tax, the dollar amount of the tax, and the final total on the page (you can use input fields, for example, or you could use innerText).

Possible Extra Credit: a) Add a field for shipping method: USPS, UPS, Fed-Ex for example, and use different rates in computing the total.

b) Make sure that tax is added if the purchase is made by somebody in Illinois (so the address has to contain a field for state).

c) Warn the customer about fields that have not been filled out correctly.

5. [A Random Picture Gallery, 10 points]. Your web-page should contain a gallery page which displays pictures of random items related to the theme of your web-page (for example, CDs for a musician, books for an author, car models for a car company). Once the web-page has loaded, it should cycle through the available pictures at random.

- In a first step implement a page that brings up a random picture when the page has loaded. (This should be handled by a function call.)

- In a second step, call this function, every 2 or 3 seconds, say, to bring up a new random picture (use setInterval for that).

Note:  - Remember that Math.random returns a real number between 0 and 1. You have to scale it, and use parseInt to make it into an integer.

- You don't have to avoid duplicates (i.e. the walk could take you back to a page you have already seen, before having seen all the other pages).

Extra credit: Avoid immediately repeating the same image that's already showing.

Suggested Approach

Start early. In particular work on problem 1. If you want feedback after that phase, send me an email giving me a description of your subject, and your basic plan for implementing it. If there are any ambiguities about problems two through four, please ask. Note that some of the problems you will only be able to solve later when we have covered the necessary techniques. 

Handing it in

Your final project is due 6/7 by midnight. 

Hardcopies:

• I want hardcopies for your answers to question 1: the sketch of your link/navigation structure, and your page-layout designs.
• if you can't easily get hardcopies of these to me, you can email them to me as attachments (scanning your drawings), upload them as part of your final project web-site, fax them to my attention at (312 362 6116), or mail them.

On the web:

• Make a separate cover page for your project. This cover page should contain the following:
  • link to the main page of the project
  • link to the checkout
  • link to the random picture gallery
  • a short description of what you aimed for, and what you did
  • claim any extra credit work you did on your page
  • if you are not submitting hardcopies for question 1, tell me how you are submitting the sketch and layout design
• Link the cover page from  your homework.html page. Only send me email with the URL of your homework.html page  if it has changed.

Grading

The final project will be graded out of 70 points as described above. Some of the points for each question will be assigned for style/presentation.