cmpt165
Spring 2007
CMPT 165-D2 @ Surrey Assignments
Assignment 4
Due Date:
Thursday, April 5th by 11:59pm (submit via WebCT and the course web server, see below).In this assignment you will put your newfound HTML, CSS and JavaScript skills to work. The Buy-It-Up online retail company has asked your web-design team to design their latest web site. You, as an individual, will be responsible for preparing their online shopping page.
Buy-It-Up is a fairly new company and as such only has a total of 4 items for sale. They have provided you with a list of those items, and their descriptions, as follows:
- One Slighty-Used Tire -- $19.95
- This fine specimen of road-worthiness is round, any way you look at it (except for sideways). The perfect gift for any tire enthusiast!
- Pickle-me Elmo -- $37.95
- While not the hit that Hasbro had intended, this delightfully green little Elmo(tm) will make a great addition to anyone's collection of stuffed animals gone horribly, horribly wrong.
- Dog Dentures -- $3.99
- For man's toothless best friend.
- Designer Jeans -- $401.99
- These were designed by the great Calvin Decline. Rhinestone-studded with built-in LED lights -- now available in the new three-legged cut.
The web page you are to design will consist of the following:
- A start page, start.html, welcoming the user to the company, with a link to the online store.
- A store page, store.html, containing a form displaying the four items for sale.
- In this form, the user (shopper) will be able to purchase multiple items (including more than one of the same item), however, they cannot purchase more than 10 of the same item.
- The description of each item must not be immediately visible on the page (the user will have to do something in order to see it, such as mousover, click a button, etc). You may choose how you wish to display that information when the user wishes to see it (there are multiple, correct solutions to this).
- A series of input elements of your choosing to accept the user's address, phone number, etc (anything else that you might like to add).
- A "Place Order" button. On clicking this button, the contents of your form (i.e. the user's order and address) will be collected from the form and displayed in a pop-up window (i.e. a summary of what they wish to buy, how many they wish to buy, and the total cost -- plus $2.50 shipping and handling, and then plus 14% tax). This pop-up window that asks the user to confirm that he wishes to place this order:
- If the user clicks yes, then you must inform them that there order was successfully placed and ask them if they would like to place another order (of course, because this is an assignment you're not really placing the order... just pretend that it is send off as it should be):
- If they then select yes to place another order, close the pop-up window and reset the form.
- If they click no, then close the pop-up window and return them to the start page.
- If the user clicks no (i.e. he does not want to place the order), inform the user that their order was not placed. Do not navigate them to the start page and do not reset the form.
- If the user clicks yes, then you must inform them that there order was successfully placed and ask them if they would like to place another order (of course, because this is an assignment you're not really placing the order... just pretend that it is send off as it should be):
- A reset button that will clear the form.
- A cancel button that will return the user to the start page.
Bonus Challenge
Note, you should only take this on if you have completed the remainder of the assignment and you are looking for a greater challenge. It is not worth extra points.
As an added challenge, add an inventory tracker so that everytime the user places an order, the inventory is depleted. If any items run out, the user is informed and that form element is reset to 0. Start with an inventory of 10 items of each.
Submission
When you're done the assignment, make sure that you have saved all of your files in a single directory. You must add one more file to this directory that you must call "readme.txt". You can create this file using Notepad on a PC (or TextEdit on a Mac). In this file you will put your full name, student number and the URL of your assignment (e.g. "http://cmpt165.cs.sfu.ca/~kvoll/assign2_page1.html" -- note that you must check to make sure that all of your necessary files were uploaded correctly).
Once you have created the README file and saved it to your directory, you can then zip that directory. To do so, right-click on the file and select "Add to filename.zip" (note, if this option does not appear you do not have WinZip installed on your computer -- click on this link to download and install it). This will create a new file called "filename.zip", where "filename" is the name of your directory. If you are a Mac user, you will right-click and select "Create Archive of filename", which will do the same thing. Once you are done zipping the file, you can submit your assignment via the Assignments section of WebCT (there you will see an assignment called 'Assignment 4').
**NOTE**You should give your zip file a name indicating the assignment number, as well as your user ID (since this is unique to you). For example, if I was creating a zip file to submit for this assignment I would call my file "assign4_kvoll.zip".
Do not email your assignment to anyone, not even the submission email address -- thanks!