Interactive Rating Component

Community feedback

• 

  Romel Williams•180

  @omerome83Posted over 2 years ago

  Awesome job! May you have more to come!

  My suggestion and feedback would be to try and use CSS Variables - especially for font colors and backgrounds. They really make things a lot easier when going through the code. Then when you need to make a slight color adjustment, you only need to make the change once at the top.

  Marked as helpful

  1

  ---

  

  Soojeong•220

  @kongguksuPosted over 2 years ago

  @omerome83 I've actually noticed other people using :root pseudo-class. Is that the one you're talking about? I should learn how to use that from MDN 😁

  0

  

  Romel Williams•180

  @omerome83Posted over 2 years ago

  @kongguksu Yes, that's it. Something like this:

  :root {
    --primary-orange: hsl(25, 97%, 53%);
    --primary-orange-hover: hsl(25, 97%, 83%);
    --white: hsl(0, 0%, 100%);
  }
  

  This way you can just reference everything by the name of the color you choose instead of the RGB, or HSL, or even the Hex value. Typing those values over and over can get old fast!

  Marked as helpful

  1

  

  Soojeong•220

  @kongguksuPosted over 2 years ago

  @omerome83 Awesome! Thank you for your thorough feedback. I appreciate it!

  0
• 

  Lesley Kimutai•565

  @LeskimPosted over 2 years ago

  You could have given all the star a general class then select them all at once with QuerySelectorAll then use a for loop ora forEach to add the click event to all the stars then use classList toggle to add or remove the class star-clicked when the user clicks any of the stars

  So something like this would have simplified most of your repeated code : -

  
  stars.forEach((star) => {
    star.addEventListener('click', function() {
      star.classList.toggle('star-clicked')
     // then dynamically get the starNum from the innerHTML of the star clicked
     starNum = star.innerHTML;
    })
  }) 
  

  Marked as helpful

  1

  ---

  

  Soojeong•220

  @kongguksuPosted over 2 years ago

  @Leskim Thank you so much for your feedback! I couldn't figure out how to simplify the codes. I will definitely try your feedback :)

  0
• 

  Luiza Uszacki•250

  @LuizaUszackiPosted over 2 years ago

  Nice job completing the challenge.

  I would also advise you to put cursor: pointer in your buttons to show a hand when you hover over them and show it's clickable.

  Marked as helpful

  1

  ---

  

  Soojeong•220

  @kongguksuPosted over 2 years ago

  @LuizaUszacki I totally forgot. Thank you so much!

  0