Skip to content
Submitted about 2 years ago

Frontend Mentor | Interactive Rating Component

saurabh•200
@akgec-saurabh
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

  1. I want to add some more feature to this example on hovering over the rating numbers I get same number of stars with animations and when I select the rating numbers, the number of star become equal to the number of rating I selected.

  2. I am not able to add animation via JavaScript while adding class having property {display:none }.

Happy Coding :->

Community feedback

  • Renan Tiscoski•1,240
    @DonUggioniPosted about 2 years ago

    Hey saurabh,

    Regarding your questions, to display the stars, maybe you'd have to add them to your HTML and hide them. Then, make them visible again using JavaScript when you hover and select the rating. It should be a bit of work but shouldn't be too complicated.

    As for not being able to animate 'display: none', that is normal, you can't animate a transition between 'display: none' to 'display: block' for example.

    You are able to animate 'visibility: hidden' and opacity transitions though, so you could work around the issue with one of those properties.

    Hope it helps!

    Marked as helpful
    0
    saurabh•200
    @akgec-saurabhPosted about 2 years ago

    @DonUggioni Thank you so much for your valuable feedback I will try to make those changes and update my solution. Happy Coding 😊

    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