@barka-dev
Posted
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 helpful
