About This Project

Ann Pike

Purpose

The purpose of this site and my project is to create prototype pages using JavaScript both to solve problems and enhance the design concepts to use on artist and society websites.

Project Entry Point

http://webhawks.org/~cis132anpike6981/

Animation

Start at http://webhawks.org/~cis132anpike6981/index.html
Line moves by increasing the width style across the top of every page onload. The script is in gallery.js. The animation is is on all pages.

Where Loop

Where loop is a password prompt on buy.html (account page.) The password for this prompt is created by a cookie made when the log-in form on the home page is completed.

Form Validation

Start at http://webhawks.org/~cis132anpike6981/index.html

  1. The HTML limits the first and last name entries to be no longer than 25 characters.
  2. The email address uses a regular expression and will only allow numbers and characters followed by the @ sign, characters or numbers followed by a dot and more characters.
  3. A password that must be entered twice and match in both fields. Both fields check for the match so the user can change either field.

All entries are check in line on blur with explanation, and also again onsubmit. Submitting the form takes the user to an account page for account form.

This form starts at http://webhawks.org/~cis132anpike6981/buy.html Form validation for this page:

  1. Phone number uses a regular expression to check for a number that has 3 numbers followed by a - and 4 more numbers. The phone field will also accept 3 digits, dash, 3 digits, dash, 4 digits, if the users enters a phone with area code.
  2. Radio buttons with credit card choices.
  3. Credit card number uses a regular expression to check that the number is 13-16 digits long and passes the Luhn test to be valid and blank spaces are removed by the validation script.
  4. The expiration date must not be expired and not over 10 years in the future.

Phone number and credit card number are check by in line validation. All fields are checked on submit so no blank field are allowed. The expiration date is also checked.

Cookies

Start at http://webhawks.org/~cis132anpike6981/index.html
At the completion of the login form, the first and last name, email and password are stored. Since this site does not have access to a data base of passwords, the collected password cookie is used to log into the account page, buy.html. The buy.html is a password blocked page.

Cookies are used to display the user’s first, last and email address on the account form. Then more cookies are collected on the account page and used on the final data page, data.html to display to the user input information.

Math Object

Start at http://webhawks.org/~cis132anpike6981/index.html
Math Random is used to display a different image randomly onload.

Rollover Menu

Start at Start at http://webhawks.org/~cis132anpike6981/gallery.html
The thumbnails images are rollover buttons and onclick open the corresponding large image by changing that images z-index.

Outside Script

The bnbform script is used to collect & process the form data and to send that data in an email. Approval for that script was received in writing by email on 12/12/2009. This script is used on the Webhawks pages only.