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

Interactive Rating Component with Flexbox

lasse-cs 50

@lasse-cs

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


I was not able to get the background colours right for this project.

How should the rating circles be made accessible? Should this component be a form with HTML radiobuttons and a submit button? Is it possible to style these appropriately?

I was also not sure how best to enforce that the container should be the same size for both states. I wasn't sure if I should be setting explicit dimensions on the container for this.

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Heyo,

Your solution looks great! I think it's okay to deviate from the original challenge every now and then, I think your background gradient is actually nice.

As you said, the best solution for this would be a form with radio buttons. It's a bit tricky to style it but possible. Essentially, you'd want to visually hide the original radio buttons and style their labels to look like the numbered buttons. Probably adding a legend as a title ("Ratings") is a good idea too.

I think the only way to ensure the cards are the same size would be setting their width to be a fixed value which yes, might lead to issues with responsiveness (although you could play around with media queries but it's a lot of hassle for a small problem). I think, what you did here looks great, the two cards, at least to me, seem almost identical so I wouldn't worry about it.

Overall, even if you didn't choose the most accessible path for this challenge what you did is great. Looks like you put a lot of effort into it, so well done!

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