Skip to content
Submitted about 3 years ago

Interactive Rating Component

accessibility, styled-components
Muhammad Naufal Farras•270
@naufalf25
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I still difficult to make rating number. For now, I using input radio. Maybe anyone know another solution to make rating number more easy and simple? Thanks.

Code

Please log in to post a comment

Log in

Community feedback

  • Travolgi 🍕•31,300
    @denielden

    Hi Muhammad, great work on this challenge! 😉

    Here are a few tips for improve your code:

    • add main tag and wrap the card for improve the Accessibility
    • use min-height: 100vh instead height to .container class
    • add transition on the element with hover effect
    • instead of using px use relative units of measurement like rem -> read here
    • instead of using an input you can use a button or a simple div to which you associate an id and the click retrieves the id so that you know how many stars have been chosen

    Overall you did well 😁 Hope this help!

    Marked as helpful
  • Bhremada Fevreano•1,395
    @boedegoat

    Great work @naufalf25

    You did the project pretty good. The rating system works well. But, it seems like you forgot to handle a case where user is immediately click on submit button without selecting any rating. As a result it will display 'You selected undefined out of 5'.

    Other than that, keep learning and enjoy coding ☕

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