Interactive Rating Component

What are you most proud of, and what would you do differently next time?

Built with. 🔨

• HTML & CSS.
• JavaScript.
• Vite.

Features. ✨

• Display a custom error message if a rating is not selected when submitting.

New Things Learned. 🎓

• Custom styling radio buttons.
• attr() CSS function - Used to retrieve the value of an attribute of the selected element and use it in the stylesheet. - MDN
• Next-sibling combinator (+) - Matches the second element only if it immediately follows the first element. - MDN

What challenges did you encounter, and how did you overcome them?

• The main problem was how to make the radio buttons look like the design. After searching and playing around for sometime I had two methods.

  • Method 1: Visually-hide the radio button and style the label to look like the radio button. Based on the radio button's focused or checked state, the label can be styled.

    .radio-button:focus-visible + .radio-label {
      outline: 0.125rem dotted var(--clr-primary-400);
      outline-offset: 0.125rem;
    }
    
    .radio-button:checked + .radio-label {
      color: var(--clr-primary-600);
      background-color: var(--clr-primary-400);
    }
    

  • Method 2: Visually-hide the label and style the radio button to get the desired look. With this approach I had to use an absolutely positioned pseudo element to display the number in the middle of each radio button.

    .radio-button::after {
      content: attr(value);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    

• I ended up using the first method.

What specific areas of your project would you like help with?

Any sort of feedback is appreciated.