Club Aroan Form Project

The Aroan Club Form Project is a user-friendly web application designed for efficient data input and security. It features real-time validation for email, phone numbers, and passwords, ensuring accuracy and integrity. The project explores CSS and JavaScript solutions to enhance user experience, addressing limitations such as collapsible password criteria messages. Research includes advanced CSS techniques, JavaScript flags, and basic Regular Expressions (Regex) for input validation. Developed using tools like Visual Studio Code, Figma, Git, and CodePen.io, with credit to The Odin Project for guidance, the project represents a dedication to user-centric design and meticulous development.

Main Features

• Real-time validation for email, phone number, and password inputs.
• Input labels double as placeholders using CSS pseudo-classes.
• Password validation includes 8-20 characters, at least one number, and one capital letter.
• Password input includes a minimal show/hide button for security.
• Visual feedback for mismatched passwords.
• Warning messages for invalid inputs.
• Automatic reload upon passing validation tests.
• Submission prevention for failed validations.

Limitations

• The password criteria message immediately collapses (via display: none) if the user clicks the hide/show password button. However, the desired effect is for it to remain visible as the user is still focusing within the password area. Utilizing full CSS pseudo-classes, the password criteria message signals when it should be visible or hidden. For an enhanced user experience, the author should consider incorporating a blend of CSS and JavaScript rather than relying solely on CSS.

Other explored concepts through research

• Pseudo-classes and animation for input labels and placeholders.
• JavaScript flags implementation.
• Complex CSS selectors.
• Advanced CSS-only Input Fields for interactive, animated, and validated inputs.
• Basic Regular Expressions (Regex) for input validation.

Applications Used

• Visual Studio Code
• Figma for design elements
• Git and GitHub for version control
• CodePen.io for testing and development
• Third-party code integrated for additional functionalities

Author

aroan-v

Credits

All credit goes to The Odin Project for helping me on this journey.