Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating component with vanilla javascript and animations

#accessibility

@yacineKahlerras

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


first time trying some animations like floating, rotating and shake it turned out it was easier than i thought it'd be with keyframes so its more precise.

Also tried to make it as pixel perfect as possible by measuring things on Figma but something doesn't seem to work, am going to play around with it more in my next projects and see how to make it work.

EDIT: added notification error when not submitting a rating

Community feedback

bunee 2,060

@buneeIsSlo

Posted

Hey! @yacineKahlerras, Superb work on this challenge! your solution looks great and responds very well too. I really dig the animations you've added as well. However, I do think they can be improved further.

The trick to making smooth animations involves using appropriate easings, using them can make any animation feel like eye candy. Check out easings.net to add them to your projects.

Hope this helps :)

P.S: The error notification you added gave me a good laugh so, thank you for that XD

Marked as helpful

1

@yacineKahlerras

Posted

@buneeIsSlo that's a pretty cool website definitely using it in the future, I see that you used it in your project as well (btw very cool card animation and am stealing that lol), thanks for the feedback !

1

Please log in to post a comment

Log in with GitHub
Discord logo

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