JavaScript: Interactive form

The 3rd project on the Full Stack JavaScript Techdegree. In this application, JavaScript was used to enhance an interactive registration form for a fictional conference. The application applies conditional behaviour to various input fields, validates user input and provides the corresponding visual indication in real-time.

Main technologies: JavaScript
Auxiliary technologies: HTML, CSS
Complexity level: Beginner
Estimated Time to Complete: 16 hours
Concepts: Input validation, Conditional fields, DOM manipulation, Regex, Event Object, Event listeners, CSS basic effects, HTML elements

For "Exceeds Requirements":

• hid the "color drop down menu" until a T-shirt design is selected
• added real time error notification (messages + design changes) for the following fields: name, e-mail, activities and credit-card
• added conditional error notification for the e-mail field. You can test it using these e-mails:
  • noSpecialSymbols$$[email protected]
  • noSpecialSymbols@After§$%gmail.com
  • atSignMustBeIncluded
  • [email protected]
  • [leaving it incomplete] abcde@
  • [leaving it blank]

Extras:

• CSS improvements to increase user experience:
  • "red bad validation" design
  • "green good validation" design for the fields "e-mail", "card number", "zip code" and "cvv"