Intro component with signup form, made with Vite, React, Scss
Design comparison
Solution retrospective
Hello,
here I focused on practicing custom hooks, portal, conditional component rendering, and useReducer.
The Terms & Services link has a basic popup and there is a "fake" rudimentary loading and successful form submission message (the collected data is just displayed in the console).
The submit button is disabled until every input is filled out properly.
If I missed anything, please let me know! ✌
Community feedback
- @Gaurav4604Posted almost 2 years ago
Hi! Congratulations on completing the challenge! It looks amazing 🥳.
I had a few ideas for the project (some of them are definitely over-engineered).
- Adding a placeholder div under the input, so that your input container, doesn't resize when the user fails the form-field validation
- Success/error based url routing react router helps for the same
- Transitions for the error states in the form you can try out this or this (more advanced)
- Simple redux store to record the form input and perform validation on the same redux toolkit helps focus on state independent from the component level state
Marked as helpful0@GoranK89Posted almost 2 years ago@Gaurav4604
For the error message, I considered absolute positioning, but on the design pictures the gap between inputs gets expanded on errors so I just followed that. But yeah, I prefer the form not jumping up and down otherwise.
Thank you for the links, redux, and react-router I'm just starting to learn, so I will definitely apply them in the next challenge.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord