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 Challenge

@nocturne-dev

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


  • Which elements in the component(s) am I off on?

    • Was the width of the form too wide or narrow?
    • Was the background color incorrect?
    • etc...
  • How could I have better organized my "Rating.tsx" component? I bundled a lot of code in there, and it does look a bit cluttered. Any suggestions are welcomed.

  • Anyone working with Astro know how to reset the form on refresh?

    • After submitting the rating, the same rating that I selected stays selected when I refresh the page
    • The form only resets when I exit the site and open it up again
    • I'm not sure if this is just me, or if testers will experience this too.
  • I wasn't able to test this challenge with a screen reader, so it'd be nice if someone with an accessible tool to let me know if this project is accessible-approved

  • Any other feedback I might not have addressed is welcomed!

Community feedback

@MasonBoom

Posted

Hi,

A lot of the technologies you used are not ones I am familiar with but I did notice that the background color of the whole page renders as white. you can solve this issue by making a css file and adding the following code:

html { background: #131518; }

1

@nocturne-dev

Posted

@MasonBoom

Hello, the background changes based on whether or not you're in dark mode. If you're seeing a white background, chances are you're not using dark mode on your device. It's not in the challenge description, but I thought to add that feature for fun. But by default, the background isn't the same color as the challenge design shows.

I apologize for not making a note about that. I do appreciate your feedback though. Thank you!

1

@MasonBoom

Posted

@nocturne-dev Oh okay gotcha that makes sense now, thank you

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