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. Note: The previous design document may be incomplete, as you need to find an archived version of the challenge as all legacy challenges have had their documentation removed from DevChallenges.
- 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
-
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.
- 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