Solution for a challenge from Devchallenges.io.
Orange is a difficult color to make pass accessibility contrast tests.
Obviously, to build this out completely, you would probably need redux or state management. The form would have more validation as well. React Hook Form implementation is quite minimal. I have been meaning to look into it and I used this project as an excuse.
Could separate component css into own files.
To add a background to the arrow of the select box is a ton of work (vs what it adds) and a minefield of accessibility concerns.
This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.
- I can see a page following the given design
- I can input email, phone, full name, address, city, country, and postal code
- I can input the number of items
- I can select at least 3 countries from the dropdown
- When I click submit button or press enter, I can see a warning if validation fails
- When I click submit button or press enter, I can see a successful alert if validation succeeds
- Steps to replicate a design with only HTML and CSS
- PluralSight - onChange
- W3 - hiding labels
- All Time Power - custom checkbox
- Geeks for Geeks - icon inside input
- Stack Overflow - valueAsNumber & React
- Modern CSS - custom select box
- 24a11y - custom selects
- YouTube - accessbile custom selects
- Stack Overflow - select and pseudo elements
- Style Lint - Style Linting - CSS Lint website is out of date and this might be a good alternative
- Stack Overflow - regex for us phone numbers