Interactive Rating Component

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.