Interactive Rating Component

Community feedback

• 

  Alberto Ledesma•370

  @ledesmxPosted about 1 year ago

  Hi Chloe O 👋

  Great job on your solution!

  Everything works quite well. I love the star as the site's icon and the message when you try to submit without selecting a rate.

  Here are some recommendations for you:

  • I suggest using Flex or Grid to center the content instead of setting the position absolute. Only use position: absolute; if you want an element positioned in a weird out-of-DOM flow position.

  I would add this code:

  body {
    min-height: 100vh; /*Sets the minimum height to 100% of the viewport's height*/
    display: flex;
    align-items: center; /*Centers the content vertically*/
    justify-content: center; /*Centers the content horizontally*/
  }
  

  And remove this:

  body #container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  

  • Lastly, I suggest adding a radial gradient instead of the linear gradient. It fits better to the design image. Check out the MDN Web Docs to see how it works: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient

  You can add this code:

  body #container {
    background: radial-gradient(circle at top, rgb(37, 45, 55) 8%, rgb(25, 29, 34) 95%);
  }
  

  I hope this helps a little.

  Well done for the rest.

  1

  ---

  

  Chloe O•30

  @Chloe-OPosted about 1 year ago

  @AlbertoLed Thank you for the feedback!

  1