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 Component created with HTML, CSS and JS.

Khael 230

@i-am-Khael

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


Feedback is always welcome.. in order to improve my coding skill. Thank you for giving feedback.

Community feedback

@MikeBish13

Posted

Great effort on this challenge!

In terms of functionality, the main issue I see is that I'm able to select all of the numbers and then submit the form, whereas the brief states that only one number should be selected and submitted. See if you can figure out a way of getting this to work.

Another thing I've spotted is that you've used camelCase as a naming convention for your CSS classes. The standard naming convention for CSS is hyphenated (eg. user-name, user-id, etc) so I'd suggest adopting this to save yourself a lot of confusion in the future. Here's a good article explaining a bit about naming your CSS classes, and how BEM is a very useful and widely used convention. Maybe give it a try in your next project!

Keep up the good work!

Marked as helpful

1

@Alexuva

Posted

Hey @i-am-Khael ! Nice job! I got a few suggestions to improve your solution:

  • If you declare the max-width: 1440px in the container that wraps the content of the page instead of putting it on the body, the content will stay in better shape at the largest screens.

  • The JS is nice, but you could improve it by making that loop check if there is another option already picked, in that way, you could only mark one option before submitting.

Happy coding!!

Marked as helpful

1

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