[javascript] 자바스크립트 별점 주기 (star rating)

참고: https://dev.to/leonardoschmittk/how-to-make-a-star-rating-with-js-36d3

이 포스트에서는 HTML5, CSS3, JavaScript를 활용해 별점을 매기는 방법을 알아보겠습니다. 별 아이콘은 Font Awesome에서 가져왔고 HTML head에 CDN을 추가하면 됩니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

TL;DR

다음 codepen에서 전체 코드를 확인할 수 있습니다.

See the Pen star rating by shinyks (@shinyks) on CodePen.

 

 

1. HTML 추가

<div class="rating">
    <i class="rating__star far fa-star"></i>
    <i class="rating__star far fa-star"></i>
    <i class="rating__star far fa-star"></i>
    <i class="rating__star far fa-star"></i>
    <i class="rating__star far fa-star"></i>
</div>

위의 HTML 코드가 우리 앱의 뼈대가 됩니다. 이는 다음의 이미지와 같이 5 개의 빈 별로 이루어져있습니다.

2. 스크립트 추가

const ratingStars = [...document.getElementsByClassName("rating__star")];

먼저 ratingStars 라는 이름의 배열에 모든 별 요소를 넣습니다.

function executeRating(stars) {
  const starClassActive = "rating__star fas fa-star";
  const starClassInactive = "rating__star far fa-star";
  const starsLength = stars.length;
  let i;
}

그런 다음 별 요소를 매개변수로 받는 executeRating() 함수를 선언합니다. 선택된 별과 선택되지 않은 별을 표시하기위해 각각의 클래스 이름을 가지고 있는 starClassActive와 starClassInactive 변수도 선언합니다. 그리고 다음 코드에서 설명할 루프를 위해 starLength와 i를 변수로 지정했습니다. starLength는 별 요소를 담고 있는 배열의 길이를 매번 확인하지 않도록 미리 길이를 읽어오기 위함이고 i는 루프를 위해 선언했습니다.

stars.map((star) => {
  star.onclick = () => {
    i = stars.indexOf(star);

    if (star.className === starClassInactive) {
      for (i; i >= 0; --i) stars[i].className = starClassActive;
    } else {
      for (i; i < starsLength; ++i) stars[i].className = starClassInactive;
    }
  };
});

위의 코드는:

• 별의 배열에서 map() 메소드로 루프를 돌고 각각의 요소에 대해 클릭을 확인합니다. 별을 클릭하면 이벤트 핸들러 익명 함수를 호출하여 별을 선택된 상태로 바꿉니다.
• i는 클릭된 별의 인덱스를 받습니다.
• 첫 번째 if 문은 클래스 명을 확인하여 클릭된 별이 빈 별인지 확인합니다.
• if 문이 참 이라면 클릭된 별 요소 부터 별 배열의 처음 요소 까지 선택됨 으로 표시합니다.
• 반면 거짓인 경우 클릭한 별 부터 별 배열 끝 까지 요소를 빈 별로 지정합니다.

예를 들어 네 번째 별을 클릭하면 i는 3을(0 부터 시작하는 배열 인덱스) 받고 화면 상의 4 개의 별이 선택 상태로 표시됩니다. 이 후 2 번째 별을 클릭하면, 즉, 별점을 낮추면 2 번째 별 부터 끝 까지 빈 별로 변경됩니다.

마지막으로 코드가 실제로 작동하도록 함수를 호출하면 됩니다. 다음은 전체 스크립트입니다:

const ratingStars = [...document.getElementsByClassName("rating__star")];

function executeRating(stars) {
  const starClassActive = "rating__star fas fa-star";
  const starClassInactive = "rating__star far fa-star";
  const starsLength = stars.length;
  let i;

  stars.map((star) => {
    star.onclick = () => {
      i = stars.indexOf(star);

      if (star.className===starClassInactive) {
        for (i; i >= 0; --i) stars[i].className = starClassActive;
      } else {
        for (i; i < starsLength; ++i) stars[i].className = starClassInactive;
      }
    };
  });
}

executeRating(ratingStars);

3. 스타일 추가

.rating {
   width: 180px;
}

.rating__star {
   cursor: pointer;
   color: #dabd18b2;
}

CSS 스타일을 추가하여 별을 노란색으로 만들어줍니다.

관련 글

자바스크립트 forEach, map, filter, find 사용 방법