interactive rating component using semantic html, css and javascript

Community feedback

• 

  Adrian Górny•70

  @Adek1812Posted 12 months ago

  Hello Chikezie you should use :focus in your project becouse now when i click raiting I can highlight all of them in orange instead of just one. I had the same problem and find this solution. You will have to modify the html a bit becouse :focus will work with button not span. Run my code on gitHub and check. I thing tha you will understand

  Marked as helpful

  0

  ---

  

  Chikezie Ilodigwe•40

  @Khalifa-pendropsPosted 12 months ago

  Thank you @Adek1812 This will be helpful. Let me look into it now. I appreciate your feedback.

  0

  

  Chikezie Ilodigwe•40

  @Khalifa-pendropsPosted 12 months ago

  Also @Adek1812, I have an issue i needed to resolve on the JS part. When I click a rating (say 5), and then I changed my mind and want to rate 2. When I want to click rating 5 again to unclick it, it doesn't work. Any lead please?

  0

  

  Adrian Górny•70

  @Adek1812Posted 12 months ago

  @Khalifa-pendrops You don't need active class and function in js :focus switches ratings and you put it in css because it is Pseudo-classes like :hover

  0