Minimal & Accessible Rating Component | Built with HTML, SCSS & JavaSc
Solution retrospective
What I’m Most Proud Of: I’m proud of the clean structure, responsive layout, and smooth interaction using vanilla JavaScript. I also integrated SCSS for maintainable styling and ensured basic accessibility with ARIA roles.
What I’d Do Differently: Next time, I’d use native radio inputs for better accessibility, enhance keyboard navigation, and add subtle animations for smoother transitions.
What challenges did you encounter, and how did you overcome them?Challenges & Solutions:
One challenge was managing the rating state across multiple buttons without a form. I resolved it using JavaScript to dynamically track and highlight the selected rating.
Another was ensuring accessibility with non-form elements. I used aria-pressed, role="radiogroup", and role="status" to improve screen reader support.
Styling with SCSS mixins also took some refining to keep the layout clean and responsive across devices.
What specific areas of your project would you like help with?None, But seeking someone who will help me with react.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@gkilasonia
Overall, good job. In your JS file, you assign a value to the selected rating paragraph when clicking on the rating buttons (better have them as radio buttons) before submitting. It means that value is changed every click before submitting, even though for that small portion of logic it is still better to assign value to the selected rating paragraph after clicking on the submit button
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