<!-- 
referenced pen:
  - "Star Rating in CSS" by Geoffrey Crofte (https://codepen.io/GeoffreyCrofte/pen/ALOggg)
-->
<div class="rating">
    <input type="radio" id="star5" name="rating" value="5">
    <label for="star5">★</label>
    <input type="radio" id="star4" name="rating" value="4">
    <label for="star4">★</label>
    <input type="radio" id="star3" name="rating" value="3">
    <label for="star3">★</label>
    <input type="radio" id="star2" name="rating" value="2">
    <label for="star2">★</label>
    <input type="radio" id="star1" name="rating" value="1">
    <label for="star1">★</label>
  </div>
.rating {
      direction: rtl;
      font-size: 45px;
      text-align: center;
      display: inline-block;
    }
    .rating input {
      display: none;
    }
    .rating label {
      color: #afafaf;
      cursor: pointer;
      transition: color 0.2s;
    }
    .rating label:hover,
    .rating label:hover ~ label {
      color: orange;
    }
    .rating input:checked ~ label {
      color: orange;
    }
const stars = document.querySelectorAll('input[name="rating"]');
    
stars.forEach(star => {
  star.addEventListener('change', () => {
    const checkedStar = document.querySelector('input[name="rating"]:checked');
    if(checkedStar) {
      console.log("현재 선택된 별점:", checkedStar.value);
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.