Example project for candidates
Create a simple page with a form for registration based on requirements and design specified in this task.
Requirements
- Styling in TailwindCSS framework
- If you are familiar with TypeScript, you can use it.
Functionality
- Form with 4 input fields
- username (Username is generated from the email - string before the @)
- password1
- password2
Validations
- Email field is required
- Password1 field is required
- Password2 field is required
- Maximum length of the username is 12 characters
- Password1 and password2 should be the same
- Password requirements
- At least 8 characters
- At least 1 uppercase and 1 lowercase letter
- At least 1 special character
- It is possible to show and hide my password in both password fields
After form submission show alert with submitted data in JSON
Design
- Form should be located in the middle of the screen horizontally and vertically
- Every field on a separate row.
- Max width of the field should be 2/5 of the screen size
- Button is the last form element below the form
- Design of the validation and input fields including success/error states
Basic design of the input with all states
Design of the submit button including all states
