Interactive Rating solution by Alexander MP

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hey there, great work on this one! To answer your question, by default using width: auto which fills the empty space left on parent element with it's content. Works similar to 100% but not entirely same. Since it's a relative unit that makes elements responsive from start. On mobile version It's more convenient to keep using relative units like % , vw etc. Once the screen size gets wider and content stretches out breaking the design, at that point you can put a max-width to limit the container. But I can't say there is a best unit to use since it depends on the layout and your preference. You can use different units to see their behavior then you can decide better on which to use when. Additional suggestions:

  • On screens smaller than 290px, content overflows out of card on y-axis. That's because of the height:400px on the container. For the best practice, unless you really need to, never use height on container elements. Let it's height be defined by it's children, margin, padding etc. so you won't deal with any overflow.
  • For semantic markup, you should use a main element and avoid using div's too much. On your solution you can simply change container div to <main class="container">...</main>
  • Your JS looks clean and everything works as supposed. There is just little gotcha. User can submit even if nothing is selected and it still returns the output page. You can simply prevent this by adding return to if (selected === "") return error.classList.remove('d-none'); So that if selected is empty, it won't bother going through rest of function. Other than these nothing I'd add, happy coding :)

  1
• 

  Betelhem•250

  @ManaIsraelPosted about 2 years ago

  This comment was deleted about 2 years ago

  0

  ---

  

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  @ManaIsrael I don't think answer is that simple for units because each has different behavior and use cases. When it comes to choosing rem/px for font-size, that's totally up to the preference since 1rem = 16px by default and changes onto user's browser settings. To give the user freedom rem can be used, but we'd need rem on widths aswell once rem is picked and that might break design if not used carefully since the user can change 1rem to be 48px instead 16px. As for em, that's a dangerous approach. It scales relative to it's parent while rem is relative to the root. With nested elements you might get unwanted results if you use em too much. It should be used very carefully. Sticking with rem is much safer unless you really need to use em. And in general it's not a good practice to specify heights with any value.

  1

  

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  @ManaIsrael Sure thing, we're here to help each other out. Glad to be helpful :)

  0