Santiago Canyon College

 JavaScript Programming

Ron Kessler
  

PROJECT 3: Data Entry For E-Commerce

(30 pts)

This is due on week 15

 Description & Instructions

You are going to build me a form where customers can purchase books online. This project uses most of the JS techniques we have used in class. It is your chance to show me everything you know!

 To earn full credit you must adhere to the following:

  1. Do not submit a copy of any of my demos. Do your own project!

  2. You must NOT use the automated event behaviors in Expression Web to create your functions! You must not let Expression create your CSS for you by simply using the WSIWYG editor.

  3. Create a new web page that is similar to my example below. The purpose of the page is to gather personal data from a customer and get their ordering information and compute the total due. Make sure to gather the information that I show you below. You may add other things if you like/have time.
     

  4. The page must be formatted using CSS. You may use tables if you want to.

  5. The listbox must be filled from an array. The items in the listbox must be sorted using program logic (not just typed in alphabetically).

  6. You may use an external .js file and/or an external CSS file if you want to.

  7. Your project must calculate the total due and sales tax after inserting data into the form. Set the focus of your controls to make it nice to interact with.

  8. Even though you will not be processing this project on a server, please respond to the user when they submit their data. You can use an alert or some other thechnique to simulate the order being placed and a summary of their order should be presented.

  9. All required fields must be validated using JS code (no active-X controls). The email needs to be validated using "regular expressions" or some other JS method. It is not enough to just make sure they entered the "@" sign in their address. Your book talks about this and there are numerous internet resources that show how to do this.

  10. Data in the textboxes must be right-aligned. Any money should be formatted as currency.

  11. Make sure to use a function to replace the "document.getElementById" stuff.

  12. Make sure all functions are well-named and that your code is in a clean format. The clear button should reset the form.

  13. You MUST use at least one function that accepts one argument. This must be different than the function described in #9 above.

  14. The text fields must be validated to show that (1) something was entered into the textbox and (2) that the data types appropriate. You may use "if statements", "switch", or both.

  15. Start right away because the rest of the semester will end quickly and this is more of a job than you might think!  As usual, not late projects will be accepted.