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

P
Swaraj• 60

@swarajzz

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


Hello, Frontend Mentor community. This is my solution to the interactive rating component challenge.

Happy to hear feedback and advice!

Community feedback

Elaine• 11,420

@elaineleung

Posted

Hi Swaraj, great job completing your second challenge! I think this looks really good and works well; the only suggestion I have is to add a cursor: pointer for the rating buttons and submit button.

Following the suggestion by @buneeIsSlo, I made a copy of the CodePen rating component I had and implemented what was suggested in using a disabled state button. You can check it out here and see how that works if you're interested: https://codepen.io/elaineleung/pen/GRxBNpE

Well done, and keep going in your coding journey!

Marked as helpful

2

bunee• 2,060

@buneeIsSlo

Posted

@elaineleung That pen is very helpful. I'll be directing people toward it if they need any help with this challenge. Thank you :)

1
Elaine• 11,420

@elaineleung

Posted

@buneeIsSlo Glad to help, and thanks again for suggesting 😊

1
P
Swaraj• 60

@swarajzz

Posted

@elaineleung Just finished it with your help, thank you so much.

1
bunee• 2,060

@buneeIsSlo

Posted

Hey! @swarajzz, Good job on this one! Everything works as expected. There is just one thing I'd suggest you fix. Instead of having a default value for rating, you could disable the button until the user has picked a rating. Learn how to disable a button here.

Hope this helps :)

Marked as helpful

2

Elaine• 11,420

@elaineleung

Posted

@buneeIsSlo This is an excellent suggestion, as I actually just used a conditional to prevent the user from proceeding, but disabling the button to me sounds like a much better idea!

1
P
Swaraj• 60

@swarajzz

Posted

@buneeIsSlo Oh yes! Thanks for pointing that out.

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