Students will create a payment processing web page using a combination of HTML,
ID: 3751348 • Letter: S
Question
Students will create a payment processing web page using a combination of HTML, CSS and JavaScript. Like many websites that allow users to make payments online, this web page will offer users two (2) options for making a payment: credit card or PayPal. The fields and controls presented to the user depends on which payment option is selected. For example, if the credit card payment option is selected, only the fields and controls related to a credit card are displayed and the fields and controls related to PayPal are removed.
-Use relative URLs to access the pictures
-For all the web pages created for this assignmentHyperlinks to pages outside the web server (i.e., Wikipedia.org) should open the linked pages in -a new browser tab or window
-All other hyperlinks should open the linked pages in the same browser tab or window
Payment Processing Page
-Give the page a descriptive title
-Display Enter Payment Information along the top of the page using an <h2> tag
-Create a form that includes the following controls (at a minimum):
Note 1: Use the form tag <form> to create the form.
Note 2: The form is comprised of two (2) sections - Payment Selection and Payment Information.
Note 3: The credit card controls should be displayed in the Payment Information section by default.
-Payment Selection sectionTwo (2) radio buttons
Configure the onClick event of each radio button with the statement "updateForm(this);"
Credit Card Payment (American Express, Discover, MasterCard and Visa)
Note 1: This option should be selected by default.
Note 2: Use the provided images rather than text to indicate the purpose of the radio button.
PayPal Payment
Note: Use the provided image rather than text to indicate the purpose of the radio button.
One (1) buttonSubmit
Note 1: The submit button should be placed at the bottom of the form (below the Payment Information section).
Note 2: Use the provided image rather than text to represent the submit button.
-Payment Information sectionStore the fields and controls within a single <div> tag
Note: The Payment Processing form should contain only one (1) <div> tag.
Credit Card Payment Controls
Nine (9) text fields
Note: All text fields should be configured to requireuser input.
First Name
Last Name
Address
City
Zip
Email Address
Name on Card
Card Number
CVV2/CVC
-Include a hyperlink to an article about CVV2/CVC on Wikipedia.org
-One (1) select field (drop-down list)StateThe first <option> tag should contain the text Select State
The option should be selected by default
-Populate the select field with the names of all 50 states
-One (1) date fieldExpiration Date
Limit the field to display only the month and year values of the selected date
Restrict the date range to January 1, 2017 and December 31, 2020
Set the default value to December, 2017
-PayPal Payment ControlsOne (1) text fieldEmail Address
This is a different text field; therefore, give it a unique name
One (1) password field
-Password
External CSS File (10 points)
Modify the site.css file located in the public_html folder to control the presentation of the Payment Processing page.
Note: You can use existing functionality when possible.
Make the text of the <h2> header a color other than the default color
Do not modify the text size of hyperlinks on this page
Use custom radio buttons for the Payment Selection section,
Set the background of the selected radio button to green
Set the background of the unselected radio buttons to grey
External JavaScript File (50 points)
Create an external JavaScript file with the filename script.js in the module2 folder.
Add the following functions to the script.js file. Use the information provided with the function to assist with creating the function.
• Control
• Data Type
• # Digits
• Related Function
• Address
• String
•
•
• Card Number
• String
• Various
• validateCreditCard
• City
• String
•
•
• CVV2/CVC
• Number
• 3
• validateControl
• Email Address
• String
•
• validateEmail
• Expiration Date
• Date
•
• validateDate
• First Name
• String
•
•
• Last Name
• String
•
•
• Name on Card
• String
•
•
• Password
• String
•
• validatePassword
• State
•
•
• validateState
• Zip
• Number
• 5
• validateControl
• testLength(value, length, exactLength)Inputs
value - the value to test
length - the required length of the value
exactLength - (boolean) true means value.length = length; false means value.length >= length
ProcessTest whether the value is the correct lengthIf the test passes,
Return true
If the test fails,
Return false
Output
Return true only if the test passes; otherwise, return false
testNumber(value)Inputs
value - the value to test
ProcessTest whether the value represents a numberIf the test passes,
Return true
If the test fails,
Return false
Output
Return true only if the test passes; otherwise, return false
updateForm(control)Inputs
control - the radio button control clicked
ProcessUpdate the Payment Information section with the appropriate controls based on which radio button control was clicked
Hint: Update the innerHTML of the <div> tag
View Credit Card Payment controls example
View PayPal Payment controls example
Output
none
validateControl(control, name, length)Inputs
control - the control containing the string value to test
name - the proper name of the control (i.e., First Name, Zip, etc.)
length - the required length of the control value
ProcessTest whether the control's value is the correct length
Call the testLength function
If the test fails,
Display an appropriate error message
Return false
Test whether the control's value represents a number
Call the testNumber function
If the test fails,
Display an appropriate error message
Return false
Output
Return true only if both tests pass; otherwise, return false
validateCreditCard(value)
Note: Refer to the credit card table below for important details about credit card numbers.
Card Type
1st Digit
Length
AmEx
3
15
Discover
6
16
MasterCard
5
16
Visa
4
16
Inputs
value - the credit card string value to test
ProcessRemove any spaces from the value
1234 5678 9012 3456becomes 1234567890123456
Test whether the credit card value is the correct length (see table)
Call the testLength function
If the test fails,
Display an appropriate error message
Return false
Test whether the credit card valuerepresents a number
Call the testNumber function
If the test fails,
Display an appropriate error message
Return false
Test whether the first digit of the credit card value represents a valid credit card type (see table)If the test fails,
Display an appropriate error message
Return false
Output
Return true only if all three (3) tests pass; otherwise, return false
validateDate(value)Inputs
value - the date value to test
ProcessTest if value is greater than today's date
Do NOT test using the current month
Output
Return true if the date value is at least one (1) month greater than today's date; otherwise, return false
validateEmail(value)Inputs
value - the email string to test
ProcessUse a Regular Expression (RegEx) to determine if the string value conforms to a typical email address (i.e., username@domain.com)If the test fails,
Display an appropriate error message
Return false
Output
Return true if the string value represents a typical email address; otherwise, return false
validateForm()Inputs
none
ProcessCall each of the necessary functions in some order to validate the form's fieldsNote 1: Only call the functions needed to test the fields related to the selected payment option.
Credit Card option: Test all of the fields except PayPal fields (Email Address and Password)
PayPal option: Test only the PayPal fields (Email Address and Password)
Note 2: Some functions may need to be called more than once.
validateControl
validateCreditCard
validateDate
validateEmail
validatePassword
validateState
If all the tested functions return true, display a message such as Payment SubmittedCredit Card option: Test five (5) functions
Some functions may need to be called multiple times
PayPal option: Test two (2) functions
OutputAlways return false
Otherwise, the web browser may display an error message
validatePassword(value, minLength)Inputs
value - the password string to test
minLength - the minimum length of the string value
ProcessTest if the string value is greater than or equal to the minLength value
Call the testLength function
If the test fails,
Display an appropriate error message
Return false
Output
Return true if the string value is equal to or greater than minLength; otherwise, return false
validateState()Inputs
none
ProcessTest whether the Select State option is currently selectedIf the test fails,
Display an appropriate error message
Return false
Output
Return true if a valid state option is selected; otherwise, return false
• Control
• Data Type
• # Digits
• Related Function
• Address
• String
•
•
• Card Number
• String
• Various
• validateCreditCard
• City
• String
•
•
• CVV2/CVC
• Number
• 3
• validateControl
• Email Address
• String
•
• validateEmail
• Expiration Date
• Date
•
• validateDate
• First Name
• String
•
•
• Last Name
• String
•
•
• Name on Card
• String
•
•
• Password
• String
•
• validatePassword
• State
•
•
• validateState
• Zip
• Number
• 5
• validateControl