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.

Favicon by Icons8.