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

Responsive interactive rating component. Built with sass!

@MoggStephen

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


Any feedback appreciated, especially on my method of using display: none to hide the thank you element. Left my sass code in there aswell if anyone wants to look!

Community feedback

@BerqiaMouad

Posted

Hello!

I really like your solution to the challenge!

But quick not about the font weight of the paragraph in the thank you component, you made it a bit too bold, and for the ratings, when you click a rating, the user will have to remove the cursor to see the changes happening.

Once again, great job! Hope you find this comment helpful!

Marked as helpful

0

@MoggStephen

Posted

@BerqiaMouad

Think ive finally figured out how to import a font from the google fonts api and get the different weights supplied in the style guides. So hopefully my next solutions should have correct weights aha.

Realized all I had to do was change my rating divs to buttons so I could use the focus psuedo class.

Thanks for the input!

1
P
visualdennis 8,375

@visualdenniss

Posted

Hey there,

nice work with the JS!

As for best practice, I'd suggest adding a cursor: pointer; to all the buttons (rating buttons and submit button) to indicate interactivity to the user and therefore improving the user experience as well.

Hope you find this feedback helpful!

Marked as helpful

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