@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
@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.
@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.
@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.
@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.