Skip to content
Submitted 9 months ago

Interactive rating component

DanielKremes•50
@DanielKremes
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

Hi people, i would like hear about yours, how is my project,and also i'd like hear about feedbacks.

Community feedback

  • Arne•1,110
    @DudeldupsPosted 9 months ago

    Hello! Some things I can see:

    Let's start off with the scrollbar. It's nice that you know how to change its style, but this card component is so small, there shouldn't even be a scrollbar in the first place. Maybe keep your focus on the actual project and not overcomplicate it - there are many projects on Frontend Mentor where you can use this 😋

    Also, you don't really need any media queries for this component. Just give it a max-width and let padding and margin handle the rest. You're giving the container a percentage width, which ends up in weird behaviour.

    Furthermore, you only need to declare a fixed height on elements in very few cases. The regular way to go is using margin and padding inside your container or surrounding element, so all the stuff inside can just take up the width or height they need.

    You're setting font-size in rem which is best practice for people who don't use the browser's default fonts. Also you got a <header>, <main> and <footer> inside the <body> 👍

    In the HTML is one major flaw though, the 5 circles to choose the rating are supposed to be radio-inputs inside a <form> Radio inputs have default behavior to only allow one selection if you set the same name attribute on all 5 of them.

    Hope that helps, keep practicing and happy coding 😀

    0
    DanielKremes•50
    @DanielKremesPosted 9 months ago

    Thanks @Dudeldups for the tipes. a huge hug and sucess.

    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