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

@RibeiroPorto

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


First project using JavaScript. feedbacks are welcome.

Community feedback

@alexgabriel8

Posted

Hey, I'm a beginner too. Wanted to say your project looks real good. Here's a quick hint: you can put cursor: pointer; inside .rating-container .rating input::after and .rating-container .submit button to change your mouse icon into a hand whenever you hover your mouse to the ratings or the submit button, giving a visual indication that you can click on the element.

If you think that the cursor: pointer; should be placed in another selector, feel free to do so.

Edit: For some reason, your project does not work correctly on the Mozilla Firefox browser. The ratings disappear and the submit button stops working. If you want, you could ask your mentors/teachers about what is happening here.

Marked as helpful

0

@RibeiroPorto

Posted

@alexgabriel8 hello, thank you for the feedback, i've update the code with "cursor:pointer; ", and also i've modified the ratings and now i think it'll work well on firefox, thank you very much.

1

@alexgabriel8

Posted

@RibeiroPorto Nice job! I can confirm the project is now working on Firefox and my mouse changes into a hand whenever I hover to the clickable elements.

If it's not too complex and of course, if you want to, would you mind sharing why the ratings did not work with Firefox and how you fixed it? I'm kinda curious and I might learn something important.

1

@RibeiroPorto

Posted

@alexgabriel8 yeah, sure. I talked to my mentors and they said that styling radio type inputs is very difficult, and I would need to use a specific library because firefox just doesn't accept ::before and ::after in inputs.

So I opted to use buttons instead of radio input and the 'checked' effect I did through JS.

I learned a lot from this little project.

1

@alexgabriel8

Posted

@RibeiroPorto I'll keep that information about Firefox in mind and that styling radio type inputs can be difficult. Thank you for explaining that to me, this does feel like info that will help me in the future.

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