Interactive Rating Card using Vanilla CSS and JS

Hey @archihalder, well done for completing this challenge 😄

I will try to answer your questions :

• Hiding Radio Buttons: Radio buttons can be visually hidden while maintaining their functionality using the layering and opacity technique. This would create a custom look while maintaining the radio button semantics.

• Using Labels: Use <label> tags to enclose radio buttons and their text content. This will make it easier to select buttons even when clicking text.

• Custom CSS Styles: Apply custom CSS styles for radio buttons, using properties like border, background, padding, margin, etc.

Here's an example:

HTML ;

<div class="rating-container">
  <input type="radio" id="star5" name="rating" value="5">
  <label for="star5">5 Stars</label>
  
  <input type="radio" id="star4" name="rating" value="4">
  <label for="star4">4 Stars</label>
  
  <input type="radio" id="star3" name="rating" value="3">
  <label for="star3">3 Stars</label>
  
  <input type="radio" id="star2" name="rating" value="2">
  <label for="star2">2 Stars</label>
  
  <input type="radio" id="star1" name="rating" value="1">
  <label for="star1">1 Star</label>
</div>

CSS :

.rating-container {
  display: flex;
  align-items: center;
}

.rating-container input[type="radio"] {
  display: none; /* Hide the default radio buttons */
}

.rating-container label {
  cursor: pointer;
  margin: 0 5px;
  font-size: 1.2rem;
  color: #999;
}

.rating-container input[type="radio"]:checked + label {
  color: #ff9800; /* Change color when radio button is checked */
}

I hope you'll find this helpful😄