Interactive Rating Component

Community feedback

• 

  Abdullah Ayoola•1,080

  @abdullah43577Posted about 2 years ago

  Hello There,

  You've done a great job taking on this challenge.

  Sometimes the colours given in the template files don't exactly match the design given to us. But it's not all the time. Atimes you might need to work your way around that. That shouldn't be a problem.

  Also, the challenge requested to use HTML CSS and javascript, you can't listen for clicks with just HTML and CSS before we're even talking about manipulating the DOM.

  what I noticed when looking at your website is that the span elements which you used for the rating numbers aren't of the best design if I'm to be honest with you. But you can change that by giving them all a specified width and also a border-radius of 100%, that should make the container wrapping those elements 100% rounded. The same thing applies to the star container as well. And instead of using span, why not just use div. Please do note that you can achieve the same result using span.

  But I think div would be just fine for this. Set the specified width, you don't need to specify the height it should automatically be set to auto by default, so each container carries the same height. and never bigger than each other. You can given them all a specific class that styles them all together, instead of styling them one after the other.

  PS. Just a quick tip, if you might find this helpful:

  Just incase you're wondering why a style isn't working as expected you can use the dev console tools and navigate to the computed tab (usually by the right if your dev console if set to view at the bottom), and then check to view which styles are being applied to the element you're having issue with. It can really come in handy especially when there are styles overriding each other.

  0