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

Interactive Rating Components build using React

@Blurryface1998

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


This is my first Reactjs application. If you have any suggestions on what I should change and make my code clean and reusable. I had some difficulty figuring out what code to put in what file.

Community feedback

@catherineisonline

Posted

Hello 🙌🏻 Your solution looks great however here are a couple of things you can improve which I hope will be helpful! 😎

Instead of using buttons with number text, I would use radio buttons instead because buttons are supposed to lead into some actions, it's not their purpose to save their values.

Make sure to use rem (relative length value) or em units instead of pixels for the purpose of “respecting the user preferences”, to say so. It makes the “sizes” of the website fluid according to the zoom/sizes set by the user.

You can read more about it here: https://www.freecodecamp.org/news/what-is-rem-in-css/

Also, make sure to wrap the entire code in the main tag instead of using the div, the one where the class is “root”. It will help to remove report issues and improve accessibility as well. If you are using, for example, header or footer tags, you can place them outside the main tag.

Marked as helpful

1

@Blurryface1998

Posted

Hello @catherineisonline, Thank you for leaving a comment and helping me 😄 ,

  • I'll change my Buttons to radio buttons!
  • I used pixels for testing purposes but I forgot to change them to rem before uploading my project...😢
  • I'll change the div id root to main.
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