Skip to content
Submitted over 2 years ago

Interacitve Rating component with Flexbox and vanilla JS

foxynoxy•470
@purplehippo911
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

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)

Community feedback

  • TechNech•340
    @TechNechPosted over 2 years ago

    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
    0
    foxynoxy•470
    @purplehippo911Posted over 2 years ago

    @TechNech Thanks for the feedback, it helped quite a lot.

    0

Please log in to post a comment

Log in with GitHub

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