Suggested Approach

Note: Consider applying the client side validation as the last thing to avoid typing in all required fields

Write the HTML to get the form shown (in lightblue above)

Add the styles for the purchase form in a separate .css file

Add the Continue button such that when clicked, a Javascript function is alert('In JS Fun");

Get the values slowly, one or two values at a time

Use alert to see you are getting each value correctly (watch for misspelled ids causing silent errors, ByID() instead of ById(), syntax errors, ...)

Use JSHint to look for errors and warnings

Look at Chrome's console for errors

ignore the ugly form warnings so you can see the errors

Create the HTML representing the receipt

Add the styles for the receipt

Add lastly, add client side validation described next

Client Side Validation

The following table summarizes the list of input types needed for full credit. The column for Regex Expression shows the extra client side validation needed in this project. For example, the first input type should be written like this:

input Type

Name

Regular Expression

Required

Description

text

firstName

[A-Z a-z]*

yes

Any number of spaces, upper case and lower case letters

text

lastName

[A-Z a-z]*

yes

Any number of spaces, upper case and lower case letters

text

phoneNumber

^(\+0?1\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$

yes

Allows formats like this 520 123 4567 520-123-4567 (520) 123-4567

text

city

[A-Z a-z]*

yes

Any number of spaces, upper case or lower case letters

select/option

state

n/a

yes

Customer's State. Must have at least four states of your own choosing

text

zip

[0-9]{5}

yes

Exactly 5 digits

radio

item 1 item 2 item 3

n/a

yes

Must have at least three different widgets to purchase

number

quantity

n/a

yes

Accepts 1, 2, 3, 4,or 5 only. Must be able to increment by 1

submit

continueButton

n/a

n/a

please use eclipse, the stylesheet in the is ok.

n this project, you'll be building a static website with one HTML file and a stylesheet (.css file). The purpose of your webpage is to allow users to 'buy-or rather pretend to buy-something. What you are buying is up to you (please don't'sell' anything illegal). When you submit your form, show a receipt below the purchase form. 20 12345 Smal $200 Receipt Purchase Date: 20-Sep 201B Purchased 3 mecium itams Tctal Cost $795 ro Visiey, A The purchase form and the receipt must have all elements and data shown. Other than some border and the

s shown in both the form and the receipt, style any way you want. n this project, you'll be building a static website with one HTML file and a stylesheet (.css file). The purpose of your webpage is to allow users to 'buy-or rather pretend to buy-something. What you are buying is up to you (please don't'sell' anything illegal). When you submit your form, show a receipt below the purchase form. 20 12345 Smal $200 Receipt Purchase Date: 20-Sep 201B Purchased 3 mecium itams Tctal Cost $795 ro Visiey, A The purchase form and the receipt must have all elements and data shown. Other than some border and the

s shown in both the form and the receipt, style any way you want