실전퍼블리싱 with jQuery(별점주기)

별점주기

---

변수와 조건문을 이용한 별점주기 만들기
주요 CSS 속성: flex, float, text-shadow, fontawesome
주요 jQuery 속성: addClass, removeClass, prevAll, nextAll, index, if, let, text, html

예제보기

HTML

  <div class="star-rating">
    <div class="stars">
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
    </div>
    <div class="print">
      별점을 클릭해주세요
    </div>
  </div>

CSS

/* Google Web Fonts CDN */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');

/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body {
  font-family: 'Noto Sans KR', sans-serif;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
a {
  text-decoration: none;
  color: #222;
}

.star-rating {
  background-color: #222;
  width: 290px;
  height: 25px;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
}
.star-rating div {
  float: left;
}
.stars {
  width: 40%;
}
.stars .fa{
  font-size: 18px;
  cursor: pointer;
  color: #555;
}
.stars .fa.active{
  color: yellow;
  text-shadow: 0 0 5px yellow;
}
.print {
  width: 60%;
  color: #fff;
}
.print img {
  vertical-align: middle;
  margin-right: 8px;
  padding-bottom: 3px;
}

JS

$('.stars .fa').click(function () {
  $(this).addClass('active')
  $(this).prevAll().addClass('active')
  $(this).nextAll().removeClass('active')
  
  let num = $(this).index()
  let starRate = num + 1
  //$('.print').text(starRate)
  if(starRate == 1){
    $('.print').html("<img src='../images/star-lv1.png'>" + "별로에요")
  }
  else if(starRate == 2) {
    $('.print').html("<img src='../images/star-lv2.png'>" + "보통 이에요")
  }
  else if(starRate == 3) {
    $('.print').html("<img src='../images/star-lv3.png'>" + "그냥 그래요")
  }
  else if(starRate == 4) {
    $('.print').html("<img src='../images/star-lv4.png'>" + "맘에 들어요")
  }
  else {
    $('.print').html("<img src='../images/star-lv5.png'>" + "아주 좋아요")
  }
})