Design comparison
Solution retrospective
First project using JavaScript. feedbacks are welcome.
Community feedback
- @alexgabriel8Posted almost 2 years ago
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 helpful0@RibeiroPortoPosted almost 2 years ago@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@alexgabriel8Posted almost 2 years ago@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@RibeiroPortoPosted almost 2 years ago@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@alexgabriel8Posted almost 2 years ago@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 GitHubJoin 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