Submitted over 2 years ago

Interactive rating, changing styles upon submit

Camille• 130

@fyrfli

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

One of the things that has had me stuck for a couple of days is that I read that you need to removeEventListener() after processing is complete but I haven't found any solid explanations on the different ways to do that yet. That is something I need to research some more before I do any more in-depth functionality in JS. I am well aware of pages that end up going on and on and on and hanging the browser and want to write code solid enough to avoid that kind of overhead.

Any ideas/thoughts/suggestions?

Community feedback

atanasov36• 580

@AtanasovCode

Posted over 2 years ago

Hi, looks like you did a great job!

From my observations I can see that you have a few styling issues:

Your card is not correctly centered, you can also try and fix the sizing of the card because it looks like yours is a bit larger then the original design.
The rating buttons, you can try and make their background into a perfect circle because now they are a bit thinner on top and look more oval shaped.
Add cursor: pointer when someone hovers over the submit button and the rating buttons.

Hope some of my feedback helped, I did the exact same challenge and you can go see mine and give me some feedback too :)

Marked as helpful

Camille• 130

@fyrfli

Posted over 2 years ago

@AtanasovCode I actually accidentally discovered how using grids can center the components on the page vertically so I updated that.

I actually forgot about the pointer. I will update that ASAP.

And ... ah yes ... I see that the rating buttons are more oval than circular. Fixing that now too.

Thanks so much for your feedback!

Please log in to post a comment

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