Interactive rating component solution

Community feedback

• 

  Ronald Sayre•260

  @RJ3605Posted almost 2 years ago

  Hi Cintia,

  Let me start off by saying congratulations on finishing your project. It looks very nice! Your code does not seem to repeat much from what I can see.

  The one issue I noticed is that your image on the Thank You screen is broken, so the alt text is showing. Luckily that's a simple issue to fix. For the <img> with src="/images/illustration-thank-you.svg" remove the first '/' so that it looks like src="images/illustration-thank-you.svg". It's a common issue because GitHub doesn't necessarily work the same as your code editor software. Something to look out for in the future.

  As for CSS, the margin property can cut down on lines by allowing you to pick different margins all on one line instead of up to 4 separate ones. You can check that out here: https://developer.mozilla.org/en-US/docs/Web/CSS/margin.

  If you're interested in alternative solution options, you can look at using <input type="radio"> instead of <button> tags in the HTML which can be better accessibility. Radio inputs also have the benefit that you can only select one if multiple have the same "name" attribute. You can also customize the CSS of their normal, :hover, :active, and :checked states. One thing to note is you would need to target the labels instead of the input itself. For example 'input[type="radio"]:checked + label'.

  If you have any other questions feel free to reach out! Happy Coding!

  Marked as helpful

  0

  ---

  

  Cintia•100

  @ciisiqPosted almost 2 years ago

  @RJ3605 wow thank you for all your tips, so happy to read all of it!! I just fixed right now the img "/" I really didn't know about it so interesting!!

  I will ready about the margin and thank you for the radio option!!

  1

  

  Ronald Sayre•260

  @RJ3605Posted almost 2 years ago

  @ciisiq you're very welcome! Glad I could help

  0