Skip to content
Submitted over 2 years ago

Interactive rating component with vanilla javascript and animations

#accessibility
Yacine Kahlerras•820
@yacineKahlerras
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

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,020
    @buneeIsSloPosted over 2 years ago

    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
    Yacine Kahlerras•820
    @yacineKahlerrasPosted over 2 years ago

    @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

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