Conference Registration Form

• HTML/CSS/JavaScript
• DOM Manipulation with JQuery
• Data Structures (Arrays, Objects)
• Module Pattern
• WebStorm
• GitHub/Version Control

Requirements:

• When the page loads, give focus to the first text field
• Give appropriate visual cues when tabbing through the entire form.

---

• Link index.html to the latest version of jQuery
• Create a JavaScript file inside the "js" folder and link it to index.html

---

"Job Role" section of the form:

• Reveal a text field when the "Other" option is selected from the "Job Role" drop down menu
• Use the id of "other-title" for the field
• Add placeholder text of "Your Job Role" for the field
• If Javascript is unavailable, "Your Job Role" text field should be available if someone selects "Other".

---

"T-Shirt Info" section of the form:

• For the T-Shirt color menu, only display the options that match the design selected in the "Design" menu.

Theme	Color Options
JS Puns	Cornflower Blue
	Dark Slate Grey
	Gold
I heart JS	Tomato
	Steel Blue
	Dim Grey

---

"Register for Activities" section of the form:

---

"Payment Info" section of the form

---

Form Validation

• Name field is required
• Email is required and must be in a valid format.
• At least one activity must be checked from the list under "Register for Activities."
• Payment option must be selected.
• If "Credit card" is the selected payment option, make sure the user supplied a credit card number, a zip code, and a 3 number CVV value.

---

General Requirements

• No Syntax Errors
• Comments included
• Form must work adequately and without frustration even if JavaScript is not enabled.
• Form must work in major browsers.
• Form must look good and work at various screen sizes and devices.

---

Extra Credit

Not this time around...

Resources

FormLinter

Invert Color Ribbon

Accessibility

Chrome Accessibility Developer Tools

Page Speed Insights

[Credit Card Validation with CSS] (http://jsfiddle.net/girlie_mac/rdkmY/)

[Credit Card Validation with JavaScript] (https://gist.github.com/ShirtlessKirk/2134376)

[Style a Select Box Using Only CSS] (https://bavotasan.com/2011/style-select-box-using-only-css/)

[Hide and Show CSS only] (https://bavotasan.com/2011/style-select-box-using-only-css/)

[Basic Email pattern matching] (http://stackoverflow.com/questions/5601647/html5-email-input-pattern-attribute)

[Simple CSS Form Interaction] (http://codepen.io/anon/pen/qqNvKR)

[Data Form Validation] (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation)