Interactive rating component using flexbox

Community feedback

• 

  P

  Imre Bartis•60

  @imrebartis

  Posted 5 months ago

  README.md:

  • ATM it contains the template for writing the README. It would be helpful to rewrite it so that it gives details about the actual implementation of the challenge

  Corner cases:

  • Instead of letting the user press the submit button even if no rating has been selected e.g. an error message could be displayed telling the user that they have to select a rating number first
  • If the user clicks on several rating buttons one after the other, they all turn orange. It would be more user friendly to have only the rating button that has been most recently clicked be orange

  Does the solution include semantic HTML?

  • There are some improvements that could be made here:
    • No <main> element to identify primary content
    • Rating interface not wrapped in <form>
    • Missing ARIA labels for interactive elements
    • Content sections could use better semantic elements like <section>
    • No <header> elements for content organization

  Is it accessible, and what improvements could be made?

  • Improvements that could be made:
    • Add semantic HTML structure
    • Implement proper form controls
    • Add ARIA attributes and roles

  Does the layout look good on a range of screen sizes?

  • The design implementation is not responsive

  Is the code well-structured, readable, and reusable?

  • It could be better. Suggestions:

    • Organization:

      • Group related properties
      • Add consistent spacing
      • Use CSS custom properties
      • Add comments for sections

    • Naming Conventions:

      • Make class names descriptive

    • Variables and Reusability:

      • Create root variables
      • Define reusable values

    • Media Queries:

      • Add proper breakpoints
      • Group responsive styles

  Does the solution differ considerably from the design?

  • The styles are quite close to the desktop design
  • As mentioned before, the design implementation is not responsive, the mobile styles are missing
  • On hover the rating buttons' values should be of a darker color though (the contrast between the current grey number and its white background is not great)
  • The background of the .main-container should be gradient

  Some issues with the JS code:

  • There are duplicate event listeners (they are the culprit behind the second issue mentioned above in the Corner cases section)
  • There is no validation (that's why the user can click the submit button even if no rating value has been selected)
  • Use of inline styles

  02

  Marked as helpful