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

I used html scss and javascript.

@willie10r

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


Would like to mainly know what your thoughts are on my js. "Feedback welcome".

Community feedback

@natashapl

Posted

Hi Willie. Congrats on uploading your first solution and welcome to Frontend Mentor! Just a couple of things I noticed. I haven't done this challenge yet, but I was looking at the design images and think on hover the background should be gray with white text. On click of a rating the clicked button should be orange.

Also, it appears in the `<svg class="svg-1"> you spelled "height" incorrect and that's causing your HTML to be invalid.

Last but not least, to remove the accessibility issues in your report, consider wrapping both the <div class="before"> and <div class="after"> in the <main> tag. It helps with screen readers.

I hope this is helpful. :)

1

@willie10r

Posted

@natashapl Yes and thank you, I have made the fixes to the problems you pointed out.

1

@natashapl

Posted

@Willie10r Awesome! If you click "View report" above, it will take you an accessibility report page for your solution. Click the red "Generate New Report" button, and it will generate an updated report. The issues that were reported when you first submitted your should go away.

Marked as helpful

1

@willie10r

Posted

@natashapl Thank you for the info I have the new clear report.

1

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