Interactive rating component

👾Hello @inrongpon22, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

Fix the alignment of the whole content using flex and min-height to manage the vertical alignment and make everything centered.First of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

body {
    min-height: 100vh;
    background: hsl(216, 12%, 8%);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

Use relative units like rem or em instead of px to have a better performance when your page content resizes on different screens and devices. REM and EM does not just apply to font size, but all sizes as well. To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

You can use <main> to replace the <div> containing the whole content, <div> is a block element without meaning and <main> is a tag the shows which is the most important block of content in this page.

✌️ I hope this helps you and happy coding!