Skip to content
Submitted over 2 years ago

Interactive Rating Component using CSS Flexbox & Vanilla JavaScript

Purnima Kumar•390
@purnimakumarr
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

Hey, I built this project with vanilla CSS & JavaScript. I used flexbox to build the ratings sections and one media query to fix the design a little for smaller devices & make it responsive. I'm not sure if I have used the best practices but I did the best I could.

Any feedback on how I can improve this project is welcome.

Thank you!

Community feedback

  • Jon Wright•160
    @Dr-Wrong-MoPosted over 2 years ago

    Honestly, it's a small enough project that I think the design works on pretty much any screen size.

    I would say that it still looks okay until you get to 300px. So the question is, how small of a screen do you need to support?

    According to this thread on ux.stackexchange.com, the minimum screen size you really need to plan on accommodating is 320px.

    I think your design is fine as is.

    0
    Purnima Kumar•390
    @purnimakumarrPosted over 2 years ago

    @Dr-Wrong-Mo Hi Jon, Thanks for the feedback. The design does looks fine on almost all devices but the spacing in the ratings section started to mess up a little at about 320 px, so I just fixed the padding in that section using a media query. As it was a small challenge I didn't take the pain to fix it below 300px.

    1

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