Interactive Rating Component - using HTML, CSS and JS

Community feedback

• 

  Dominik•130

  @Dmnk28Posted over 2 years ago

  Hi Domi,

  as Jamaal said, the :hover pseudo-class is the thing you'll need to achieve the light grey effect.

  Instead of addressing the numbers one by one, try to select them all at once by using document.querrySelectorAll('.numbers') or document.getElementsByClassName('numbers'). You will get a NodeList, which you can loop through with forEach. Using Typescript you might need to convert the NodeList to an Array (with Array.from() or spread operator) before forEach.

  In your css you could try to use a similar logic. instead of " #one, #two, #three, #four, #five {...}" for example ".numbers{...}" would have the same effect ;-)

  Marked as helpful

  0
• 

  jamaal mahamed•100

  @jamaaldevPosted over 2 years ago

  first thing when you are hovering the links rate number you just need to use hover effect in CSS you don't need to make in JavaScript. the second issue you have is when clicking the rate number is not smooth it's all about how you implement the functionality of adding active and removing active, this is my solution check it please and learn from it how I did. everyone is different,

  https://github.com/jamaaldev/interactive-rating-component-main/blob/main/script.js

  Marked as helpful

  0