Skip to content
Submitted about 3 years ago

Interacitve Rating component with Flexbox and vanilla JS

foxynoxy•470
@purplehippo911
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What should I focus on learning or improving next? Do I look ready enough to advance to the junior challenges here at frontendmentor? Is some part of my css longer than it needs?(shortcuts or simpler way to do fix a problem)

Code

Please log in to post a comment

Log in

Community feedback

  • TechNech•340
    @TechNech

    Hey, hope you are doing good. I would like to suggest a few changes in your challenge:

    • In your .card class, remove height and display properties.

    • In your .rating a class, remove max-width and add width: 50px; height: 50px;, change border-radius: 50%; and padding: 1rem;

    Also I have noticed you are using rem and px values mixed up which creates lot of issues. What I have learned is to use rem values for things like padding, margins etc and em values for fonts, which also helps in responsiveness.

    Hope I helped, Take care.

    Marked as helpful

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