Interactive Rating Component

Solution retrospective
Hi there 👋, I’m Henry and this is my solution for this challenge. 🚀
🛠️ Tech Stack:
- ViteJS
- Just Plain CSS
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. 😊
Please log in to post a comment
Log in with GitHubCommunity feedback
- @bccpadge
Hello @devhnry. Congratulations on completing this challenge!!!🎉
I have few tips you might be interested in to improve your solution.
- The star icon is a decorative image and adding
aria-hidden: true
will make the image be ignored by screen readers. - To make rating section more accessible you can use semantic HTML tags like
form
,fieldset
,label
, andinput
.
When I built this challenge, I used this HTML structure below for each of the five ratings.
<form> <fieldset> <label class="rating-btn"> <input type="radio" class="visually-hidden" name="rating" value="1" /> <span class="rating-value">1 <span class="visually-hidden">1 star</span></span> </label> </fieldset> </form>
The
visually-hidden
CSS class hides content on the website but content is available for screen readers. I use thisvisually-hidden
class by inclusively-hidden article by Scott O'hara.It is bad practice to write content in uppercase in the HTML file and when you can use the CSS property
text-transform: uppercase;
<button class="btn" type="submit">SUBMIT</button>
More info📚:
Why you shouldn’t write your content in Uppercase, instead use CSS.
Here is my solution to this challenge: Interactive rating component
Hope this helps you and need anything clarified I would be glad to help just let me know✌🏼
Marked as helpful - The star icon is a decorative image and adding
- @tchbell
Looks super good! The design is a bit larger and has some more spacing around some of the elements. But overall this is really good.
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