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 | REACT, SCSS

@DarKaRor

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 is appreciated!

Haven't done this in a while, I didn't quite manage to be able to vertically center the text that's inside the buttons, the footer and the final rating

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Johandry, I think you did a good job with vertical centering, and I really can't see a big issue here! Things work well here, and good job writing some logic to prevent the user from advancing if they didn't choose a score. In any case, the one comment I want to point out is about the buttons: I see that you're using div for the buttons instead of button. Since this is an interactive element, it would be best to use a button, which is normally what's used for performing an action; here, the action it's performing is selecting a score. A div can be used, but it really shouldn't be the first choice when there is another element more suitable for the task. More importantly, using button or even a radio input is best for accessibility here, whereas div is a non-semantic element.

Anyway, you did well over all, so do keep going!

1

@DarKaRor

Posted

@elaineleung Thanks for the feedback! I'm just having a bit of trouble reusing code in React for some elements, I used for both the star and the score buttons the same component which I called Circle, it just adds the style of the button or circle and keeps whatever is inside of it.

I didn't really think about a way to convert the div to a button when it's convenient, but I'll try to think about a solution next time

Thanks again :)

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