Interactive and Responsive Rating Component with CSS Flexbox
Design comparison
Solution retrospective
Things I found hard
-
The text inside the rating buttons were causing the buttons to become a rectangle instead of a circle
-
My solution: nest a
spaninside of the rating buttons and adjust width and height of span elements to be a square so that the button would become a circle instead of an ellipse. -
The vertical aligning of text inside of buttons was not right, I still haven't solved this issue nor do I know how it works.
Community feedback
- @elaineleungPosted over 2 years ago
Hi Vihaan, well done completing this, and I think the alignment looks good to me, so I can't really see how the numbers are not aligned, but maybe certain numbers give the impression that they are not fully centered due to their shape. In any case, you can try changing the line height to 1 in the span tag, and then try using padding top or bottom to align them.
As for other feedback, I like how you have an alert if no numbers are selected. One suggestion I have is, you can try giving a value to your buttons in the html like this:
<button value="1" class="btn" id="one">1</button>And then when you pull them into your JS, you'll have the value available to you in the element and won't have to specifically assign a value to each button in your JS. I recently wrote a comment on someone else's solution with an example of my old code, which you can check out here.
Once again, great job!
0
Please log in to post a comment
Log in with GitHub
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