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

Rating Card with CSS & JS

Vanessaβ€’ 160

@VanessaAz

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


Any suggestions are welcome!

Community feedback

Lucas πŸ‘Ύβ€’ 104,560

@correlucas

Posted

πŸ‘ΎHello @VanessaAz, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

To improve the card overall responsibility, you can start to add flex-wrap inside the class that manages the section for the rating numbers button and makes 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:

#rating-btn {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    flex-wrap: wrap;
}

✌️ I hope this helps you and happy coding!

Marked as helpful

0

Vanessaβ€’ 160

@VanessaAz

Posted

@correlucas thanks, already working! :)

1
Gideonβ€’ 440

@GiDDeRo

Posted

Nice Solution. You should have given the rates (1-5) and the button a cursor: pointer; hover effect. .rates:hover{ cursor: pointer; }

Happy Coding!

Marked as helpful

0

Vanessaβ€’ 160

@VanessaAz

Posted

@GiDDeRo already added, thanks I forgot :)

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