Skip to content
Submitted about 1 month ago

Interactive Rating Component with vanilla JS

P
turtlewords•470
@Turtlewords
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I made sure to use semantic elements where possible and assign aria roles to certain interactive elements.

What challenges did you encounter, and how did you overcome them?

Styling the radios as buttons was a bit of a challenge. Hiding the input and styling the radio allowed me to achieve the desired effect.

What specific areas of your project would you like help with?

Responsiveness, design accuracy, and functionality. Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • denise•530
    @moncadad

    If it wasn't for the side by side I'd assume it was perfect. Responds well, the code is well structured as well as it's functionality. You did a great job!

  • Harsh Kumar•3,490
    @thisisharsh7

    Great job! You've implemented a clean, interactive, and accessible rating component using semantic HTML, ARIA roles, and modern CSS techniques. Here's detailed feedback:

    ✅ What You Did Well:

    • Excellent use of semantic elements like <main>, <section>, and <fieldset>.
    • Proper keyboard accessibility with tabindex and keypress events.
    • Custom-styled radio buttons are intuitive and visually appealing.
    • Gradient background and button styling are consistent with the design challenge.
    • Clear separation of layout (CSS) and behavior (JavaScript).

    🛠 Suggestions:

    1. Move <input> before <label> and use for and id to associate correctly — improves screen reader support.

    2. Use a submit event listener on the <form> itself instead of just the button to enhance accessibility.

    3. Match spacing more precisely with the original design spec (Frontend Mentor often gives Figma files).

    Fantastic work overall — you're building strong front-end fundamentals. Keep going! 🚀

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