Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

accessible form

@edwinc73

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

What I'm most proud of

Semantically correct

keyboard navigatable

What I would do differently

I would plan out the elements more carefully in terms of making it more accessible.

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

Challenges I encountered

making the radio input hidden

How did i overcome this?

I used pseudo selectors so that i could cover the default radio button.

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

Areas that I need help with

I'm sure there are some accessibility attributes i could add

Community feedback

Daniel 860

@Ghravitee

Posted

HI @edwinc73, congrats on completing this challenge. Your code's really clean and readable. I'll just point out that the pseudo-elements you used need to be managed better as they are showing up beside your inputs in mobile screens.

Happy coding.

0

@edwinc73

Posted

@Ghravitee Thank you for your feedback. Yeh this was something that i had to fight to overcome. I spent a little bit more time on it and fixed it. Feel free to take another look.

Happy coding!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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