Submitted almost 3 years ago

Interactive rating component

accessibility

Jesse Good•120

@jessegood

A solution to the Interactive rating component challenge

Preview Code

Solution retrospective

I used the following css to make my numbers align vertically:

width: 28px;
height: 28px;
line-height: 32px;

I was wondering if there is any better way to do this.

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Elaine•11,360
@elaineleung
Posted almost 3 years ago
Hi Jesse, first of all, well done here! About your question, I think having a fixed height and width for this is fine in this case; for the line height, this usually is a multiplier (e.g. 1.4) and not a font size, so I might change that to a plain number instead. I would do what @JordanKisiel suggested, so that's something you can try first.

Anyway, the bigger issue for me here is the use of span tags for your buttons, as this is a non-semantic element, and there really isn't a reason to use span here when there are more suitable elements. As a suggestion, I would opt to use button instead (in my solution I used radio inputs), as a button is used for performing an action, which in this case would be the action of selecting a number, and this would be greatly helpful to the screen reader.
Marked as helpful
Jordan Kisiel•250
@JordanKisiel
Posted almost 3 years ago
In my solution, I made the spans containing the numbers into flexboxes to center them within their circular backgrounds:
```
display: flex;
justify-content: center;
align-items: center;
```
It's pretty much my default approach when I need content to be exactly in the center of something.

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