Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating component solution

Cintia 100

@ciisiq

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi guys, again I want to say thank you first for your time here. I am learning a lot from you guys!

  • Could you tell me where I could improve the code? less repetitions and refactoring?
  • Any tips for CSS to make less coding?

Thank you!

Community feedback

@RJ3605

Posted

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

@ciisiq

Posted

@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

@RJ3605

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord