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

Mobile first Interactive Rating component

Rom 780

@RomWeb3

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


Feel free to comment if you have any advice :)

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hi Rom, congrats on completing this challenge!

Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:

To improve the card overall responsibility, you can start to add flex-wrap inside the class that manage the section for the rating numbers button and make the adjust to fit in different rows while the container scales down, not that without this property the container doesn't shrink. Here's the code applying these changes:

ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

✌️ I hope this helps you and happy coding!

Marked as helpful

0
Hyron 5,870

@hyrongennike

Posted

Hi @RomWeb3,

Congrats on completing the challenge

Just a suggestion, instead of giving 5 when no rating is selected I would suggest just disabling the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked.

Marked as helpful

0

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