Responsive implementation using framer-motion, confetti at the end!

Solution retrospective
I did my best to polish my skills and closed it up with a confetti animation (!). By implementing smooth animations my overall knowledge has expanded, and this was clearly a bothersome advanced task to handle. Feel free to point out any bugs or improvements!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
Hi
As a keyboard user this is unusable for me as you have an event listener on a div. The whole form is missing on this first step
And if I was using my screenreader today I can see this wouldn't work at all, as there is lots of text in spans rather than a proper progress stepper component that tells me the current step. Here's an example of the kind of progress stepper I mean
The inputs on this are unlabelled.
And the error messages should have elements present at all times with a unique ID on them and aria-live attribute. Then each input should have aria-describedby pointing to the ID of their error message element. This is how you should programmatically link errors with their inputs
Always test with a keyboard 😉
Marked as helpful - @adriano-wb
Very good my friend, great animation, yours was one of the best I've seen. I don't think there's anything special you need to improve on, you're talented.
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