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

Fun Project to work on JS

P

@andrewteece

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 recommendations and or suggestions are always appreciated.

Community feedback

Lamar 495

@Everezze

Posted

Hi Andrew, good job on the challenge!

I might be picky but something to change would be the ratings touching the edges of It's container to get them aligned with the other contents in the component (space-between instead of space-around). A personal challenge(not a requirement in the project iirc?) would be handling when the user click 2 times on the same rating to remove it without choosing another one.

Apart from that, that's great! Keep going

Marked as helpful

0

@Blackpachamame

Posted

Greetings Andrew! your solution looks great

I can only comment on an accessibility issue regarding images: Screen readers have no way of translating an image into words that gets read to the user, even if the image only consists of text. As a result, it's necessary for images to have short, descriptive alt text so screen reader users clearly understand the image's contents and purpose.

For this case, since they are only icons and they are only decorative images, I recommend using an empty alt text alt="". More info

Marked as helpful

0

@AGutierrezR

Posted

Hello there 👋. Good job on completing the challenge!

I have some suggestions about your code that might interest you.

General Structure and HTML:

  • Use a <form> and <input type="radio"> instead of using <div>.

Accessibility and Semantic HTML:

  • Use a <form> and <input type="radio"> instead of using <div>, this is better for screen reader users.

I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

Happy coding!

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