Responsive-interactive-rating-component with flexbox and JavaScript

Community feedback

• 

  Christian Foster•270

  @fosteecoPosted over 2 years ago

  Hey Great submission. The mouse over issue has to do with your CSS hover selector.

  changing these css lines : .rating-number:hover, .rating-number:active { color: #fff; background-color: hsl(216, 12%, 54%); }

  To this: .rating-number:hover:not(.rating-selected) { color: #fff; background-color: hsl(216, 12%, 54%); /* background-color: blue; */ }

  Is a solution I came up with. I created a pull request on your repo as well if you'd like to try it out yourself. Keep up the good work!

  Marked as helpful

  0

  ---

  

  P

  Shane Pinder•190

  @ShanePinderDevPosted over 2 years ago

  @fosteeco Thanks so much for this! I merged your pull request on the repo. I spent hours trying to figure it out with no luck :)! I will have to read up on the :not pseudo class.

  0
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey good job completing this challenge

  Keep up the good work

  Your solution looks great however I think the following should be considered

  • The card needs a bit more border-radius

  • The width of the submit button is supposed to be a bit wider

  • The numbers are supposed to be centered within the circle

  In terms of accessibility issues simply wrap all your content between main tags

  I hope this helps

  Cheers Happy coding 👍

  Marked as helpful

  0