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 with React, TypeScript, Vite and SCSS

P

@JIH7

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


This was a really simple one where my goal was to be as exact to the Figma design as possible. Let me know if you see any imperfections!

Community feedback

@hassaneljebyly

Posted

Congrats on finishing this, looks neat and solid, just one suggestion put display: grid; place-items: center; on the <button> tag with the star icon (why not a div tho ? a button tag that's not used as a button will just confuse screen readers), plus you may want to add cursor: pointer on rating buttons, other than that it all looks great.

Marked as helpful

1

P

@JIH7

Posted

@hassaneljebyly

Thank you! I'll incorporate that. I have it as a button because it appeared to be one in the design. I figured that this being a just a small component, the star was there to serve some function in part of a larger app. Although I have noticed that most solutions don't make it one so you're probably right on that one.

Edit: Thanks again for the feedback! I reworked the button into a div like you suggested. Instead of using a grid and centering the image that way though, I just gave it margin: auto and that seemed to do the trick.

1

@hassaneljebyly

Posted

@JIH7 never thought about it that way tbh, It makes perfect sense, you could say It's the button that opened the rating component :)

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