My implementation of the sign-up form project for The Odin Project. Try it here!
This is a sign-up form for an imaginary service, created to help me practice my HTML, CSS and some JavaScript regarding HTML forms.
For desktop and larger screens:
For mobile and smaller screens:
- Client-side email validation using HTML
- Client-side phone number validation using regular expressions
- Password matching
- Display proper cat emoji to indicate validity/invalidity of input field to user
- Responsivity to varying screen sizes
- Clickable arrow for scroll to content on smaller screens
- Style a form
- Set custom validity messages on inputs using setCustomValidity() method
- Change grid template for CSS Grid based on screen size
- Scroll content into view using scrollIntoView() method
- Check for a match between regular expression and string
- Use CSS combinators such as adjacent and child combinators
- Create an infinite bouncing animation using keyframes
- Insert content into document using pseudo-elements such as ::before
Photo by Marek Piwnicki on Unsplash.