Unit 6. Review "B" The Spice Bowl

Unit 6. Review "B" The Spice Bowl

Tutorial 6 Review - B

The Spice Bowl

1.    Open the spicetxt.htm and paytxt.css files in your student data files.  Enter your name and the date in the comment section of each file and save the files as spice.htm and payment.css, respectively. 

2.    Go to the spice.htm file in your text editor and review the contents and structure of the document.  Link the file to the payment.css style sheet.

3.    Scroll down to the h1 heading Payment Form, and below it, insert a form element with the action http://www.thespicebowlcorp.com/cgi-bin/payment using the post method.

4.    Within the form, create three field sets with the id’s billing, creditcard and info, and with legend text Billing Information (required), Credit Card (required) and Additional Information, respectively.

5.    Within the billing field set, create input boxes for the customer’s first name, last name, street address, second line of the street address, and city with the field names fName, lName, street, street2 and city, respectively.  Add field labels as First Name, Last Name, Street Address, Street Address (2) and City for these input boxes.

6.    Create a selection list for the state field containing two-letter abbreviations of the state names.  You can find a list of state abbreviations in the state.txt file in your data files.  Add the label text State.

7.    Create an input box for the zip field along with the label text ZIP/Postal Code.  The pattern of the field should match the regular expression for postal codes.  You can use the regular expression patterns in the regex.txt in your data files.

8.    Create an input box for the country field along with the label text Country.  Make the default value of the field equal to the text string United States.

9.    Create an input box for the phone field along with the label text Phone.  The pattern of the field value should match the regular expression for phone numbers.

10. All of the fields within the billing field set should be marked as required fields with the exception of the street2 field.

11.Within the creditcard field set, create a field set belonging to the class optionGroup. Within this field set, create four label elements.  Within each label, create an option button belonging to the ccard field followed by an inline image belonging to one of four credit card companies.  The field values associated with the four option buttons are diners, discover, master and visa, and the inline images are diners.png, discover.png, master.png and visa.png, respectively.

12. Directly below the optionGroup field set, create an input box for the ccardnumber field along with the label text Credit Card Number.  The text of the field value should match the regular expression for credit card numbers found in the regex.txt file.

13.Add a label containing the text Expiration Date  followed by the text for each individual month in chronological order from January (01) through December (12).  Also add a selection list for the ccardyear field with the first –Year—followed by year values for 2014 through 2018.

14.Add a label containing the text CSC followed by an input box for the csc field.  The csc field should be limited to three characters, follow the regular expression pattern ^\d{3}$  and display the placeholder text nnn.

15.Make all of the fields within the creditCard field set required fields.

16.Within the info field set, create a label containing the text Contact Email followed by an input box for the email field that uses the email data type.

17.Add a label containing the text Special Notes  followed by a text area box for the notes field.

18.At the bottom of the form, directly above the closing </form> tag, insert a submit button with the button text Submit Order.

19.Save your changes to the file and then go to the payment.css file and add styles rules for the different form elements as described in the following steps.

20.Display all field sets without borders and with a 5 pixel margin.  Display all field set legends with a background color of (239, 198, 145) and a text color of black.  Set the top and bottom margins to 10 pixels and indent the legend text 20 pixels.  Set the width of the legend to 100% of the width of the field set.  Finally, add rounded borders to the legend, 10 pixels in radius.

21.Display all labels as blocks, floated on the left margin once the left margin is clear.  Set the font size to 0.8em and align the label text to the right. Set the top and bottom margins to 2 pixels, and set the left and right margins to 5 pixels.  Set the width of the labels to 25%.

22.Display all input elements as blocks, floated on the left with a font size of 0.9em and a width of 60%.  Set the top and bottom margins to 2 pixels, and set the left and right margins to 0 pixels.

23.Display all select elements as blocks floated on the left with a font size of 0.9em and a margin of 2 pixels.

24.Display all textarea elements as blocks, floated on the left with a font size of 0.9em, a height of 75 pixels and a width of 60%.

25.Set the left margin of the field set belonging to the optionGroup class to 25%.  For label elements nested within the optionGroup field set.

a.    display the labels inline

b.    do not float the labels

c.    set the label width to 100 pixels.

26.Display option buttons inline with no floating.  Set the margin of the option buttons to 0 pixels and the width to 20 pixels.

27.Set the width of the input box for the csc field to 50 pixels.

28.For the submit button, add the following styles:

a.    set the background color to the value (239, 198, 145)

b.    do not float the input box

c.    set the dimensions of the button to 150 pixels wide by 30 pixels high

d.    set the top and bottom margins to 10 pixels and set the left and right margins to auto

e.    add a rounded border with a 15 pixel radius.

29.When input, select and textarea elements receive the focus, change the background color to the value (255, 218, 165).

30.When an input element receives the focus and is invalid, change the background color to the value (255, 245, 215) and display the stop.png background image file in the bottom right corner of the input box with no tiling.

31.When a input element receives the focus and is valid, change the background color to the value (215, 255, 215) and display the go.png image in the bottom right corner of the input box with no tiling.

32.Save your changes to the style sheet.

33.Open the spice.htm file in your Web browser.  Verify that you cannot submit the form without all required fields filled out and without phone number, e-mail address and CSC values entered in the proper format.

34.Verify the validation checks for the credit card number by confirming that the form rejects the following credit card numbers (which are not valid card numbers):

a.    31012345678901

b.    6012123456789019

c.    5912345678901235

d.    8123456789012349

35.Further verify the validation checks for the credit card number by confirming that the form accepts the following credit card numbers (which are valid card numbers):

a.    30312345678901

b.    6011123456789019

c.    51123456789012349