Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating component

Gwen-lego 190

@Gwen-lego

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi there,

This is my first JS project, quite slow to get the brain tuned but I finally got it. I have added a red text below the submit button to guide user to pick a rating.

Let me know if you what you think, any help is appreciated.

Thank you Gwen

Community feedback

@imparassharma

Posted

Hey, everything good and you are going in the right direction. Also in the div content-container you have used px to give it a width and height. My suggestion is that for big divs like these you should use vh/vw as it will increase the responsiveness of your page. Try to use ems, rems for paddings too. Use px for small entities.

0

Gwen-lego 190

@Gwen-lego

Posted

Hi @imparassharma,

First, thank you for taking the time to look at my solution and for your comment. I had a look at your suggestions to have a better understanding and indeed it's great, to use with precaution lol. I did some modifications by adding REMs and EMs but not vh/vw has I wanted to keep the container size. With vh and vw it automatically changes the box, i may need to use min/max may be? Have you used it for this challenge? I am definitely going to use it on a full size page as the responsiveness is awesome.

Thank you Gwen

0

@imparassharma

Posted

@Gwen-lego yeah you can use min/max widths....whole point is not to use px for big elements...keep up the learning...good luck

0

Please log in to post a comment

Log in with GitHub
Discord logo

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