[miniProjects] 43_Feedback UI Design

43_Feedback UI Design

💻 주제 : 세 가지 선택지 중 하나를 선택해 리뷰를 보내면 감사답장이 나오는 피드백 카드

✨JS

ratingsContainer.addEventListener('click', (e) => {
  //e로 설정하면 클릭된 요소를 나타냄(e.target)
  //rating 클래스(부모) 안에 있는 img를 얻어야 하기 때문에 parentNode를 씀
  if(e.target.parentNode.classList.contains('rating')) {
    removeActice()
    e.target.parentNode.classList.add('active')
    selectedRating = e.target.nextElementSibling.innerHTML
  }
})

function removeActice() {
  for(let i=0; i<ratings.length; i++) {
    ratings[i].classList.remove('active')
  }
}

sendBtn.addEventListener('click', (e) => {
  panel.innerHTML = `
    <i class="fas fa-heart"></i>
    <strong>감사합니다!</strong>
    <br>
    <strong>의견 : ${selectedRating}</strong>
    <p>고객 지원 향상을 위해 귀하의 의견을 반영하도록 하겠습니다.</p>
  `
})

• 클릭된 요소에 대한 정보가 이벤트 객체 e로 전달된다.

• if문 : 클릭된 요소가 "rating" 클래스를 가지고 있는지 확인한다.
  만약 클릭된 요소의 부모 요소에 "rating" 클래스가 있다면, 이 요소는 "rating" 클래스를 갖는 요소일 것이다.

• removeActice(): 이 함수는 활성화된 "rating" 클래스를 갖는 모든 요소에서 "active" 클래스를 제거한다.

• e.target.parentNode.classList.add('active'):
  클릭된 요소가 "rating" 클래스를 갖는 경우, 이 요소의 부모 요소(가장 가까운 "rating" 클래스를 갖는 조상 요소)에 "active" 클래스를 추가한다.

• selectedRating = e.target.nextElementSibling.innerHTML:
  클릭된 요소가 "rating" 클래스를 갖는 경우, 해당 요소의 다음 형제 요소의 내용(small 태그의 텍스트를 저장)을 selectedRating 변수에 저장한다.

• function removeActice() { ... }
  "rating" 클래스를 갖는 요소 중 모든 요소에서 "active" 클래스를 제거한다. for 루프를 사용하여 ratings 배열에 있는 모든 요소에 대해 "active" 클래스를 제거한다. 이 함수는 이전에 선택된 등급을 지우고, 새로 선택된 등급만 "active" 클래스를 갖도록 하는 데 사용된다.