Frontend Mentor | Interactive rating component coding challenge solution

Solution retrospective

Hi everyone 👋

This challenge took TWO days to make. The JavaScript took me a long time. Nevertheless, here are some of my questions:

What should I name my JavaScript variables? For example, I used "screen2" when displaying the thank you screen.
In the CSS, should I have a predefined height or width, or should it be based on its child elements?

Any extra feedback is accepted!

Community feedback

@ratul0407

Posted about 1 year ago

@Noxlobin congratulations on completing this challenge🎉🎉

On your question,

You should use name for variables that describes it better instead of screen2 you can use thankYou or anything that is more descriptive.
I'll always recommend not to use predefined height and width use them when you know that you absolutely need it and there is no way around. Always depend on your childrens to set the height and width for you. By doing this accomplishing responsive designs will be much more easy for you. But when it comes to challenges like this one where you have to keep it at a specific height and width you can use something like max-width and max-height to not let them grow after a specific size.
Another thing I want to point out is that you don't need a add a click event on every single button and then change their styles using js. What you can do is

.ratings .btn:active {} //then just add your styles

I hope it was helpful for you👍👍

Happy coding friend🙂🙂

Marked as helpful

Interactive rating component