Design comparison
Solution retrospective
none
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
Community feedback
- @barka-devPosted 2 months ago
Great job on completing the challenge! There are just a few suggestions to help improve the implementation:
Semantic Elements: Consider using more semantic elements rather than relying on
<div>
for structuring your component. For example, instead of using<div>
to create the rating options, you could use<input type='radio'/>
to enhance accessibility and clarity.Alignment: To improve the alignment of your component, you might want to use Flexbox to center the elements on the screen. A structure like this would work well:
.container { display: flex; justify-content: center; align-items: center; height: 100%; }
This will ensure the component is centered both horizontally and vertically.
Active State Styling: I noticed that the active style is not being applied to the selected option until the mouse moves out. It would be great to have the active style update immediately upon selection to improve user interaction.
Keep the great work, and happy coding :)
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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