This is a solution to the Interactive card details form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Fill in the form and see the card details update in real-time
- Receive error messages if (** changed from original challenge, where form validation took place after form sent):
- Any input field is empty
- The card name, number, expiry date, or CVC fields are in the wrong format
- View the optimal layout depending on their device's screen size
- See hover, active, and focus states for interactive elements on the page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- React router
- Testing Library
I've used this project to learn about react router. It's a simple routing solution, routing only between two paths for a single page application.
It's also the first time using Jest and Testing Library to validate the code. I decided to do an end to end testing of the app, verifying the flow of user interactions as well as the rendering of the main components.
As usual, particular attention has been paid to try to make the form accessible, specially with the field error messages. Instead of validating the form afer submision, I decided to provide real time validation feedback, disabling the option to submit the form until all the fields are valid.
It's been a great opportunity to revise validation with regular expressions, specially for valid credit card numbers.
- Regular-Expresions info - This site provides regular expresions for different credit cards.
- Accessible React Forms from Carl Rippon - This is an article on accessible react forms that helped me understand how to define accessible validation messages.
- Testing Playground - To verify testing library sugested queries
- Frontend Mentor - @cr1deg0