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 with HTML, CSS and JS

develoba 270

@develoba

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


First JavaScript challenge. I manipulated the DOM to make the rating interactive. I did'nt have any complications on that; however, if you see any improvement on my script, feel free to comment!

Community feedback

Luka Glonti 3,440

@lack21

Posted

Good work 👍, but I have some recommendations!

  • Replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!
  • Replace width: 415px in the .card with the width: min(415px, 90%), like this when screen width is smaller than .card, .card will adjust to it, and also remove width: 330px when it goes on smaller screens!

Marked as helpful

0

develoba 270

@develoba

Posted

@lack21 you're right, I'll change it! Thanks for the help, I still need to learn best practices for responsiveness.

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