interactive-rating-component

 

[요구사항 & 구현]

1. 숫자 버튼에 마우스를 올리면 주황색으로 변하고 마우스를 떼면 원래 색상으로 돌아간다.

2. 숫자 버튼을 클릭하면 회색으로 변한다

3. 제출 버튼에 마우스를 올리면 배경색이 흰색으로 변한다

4. 제출 버튼을 누르면 thank you 페이지로 넘어가는데 앞에서 무슨 숫자를 선택했는지 표시된다

      ex) 버튼 4를 클릭한 후 제출 한 경우 → You selected 4 out of 5

5. 추가적으로 처음 페이지로 돌아갈 수 있도록 Go Back 버튼을 만들었다

 

[기술]

HTML, CSS JavaScript

 

[리뷰]

처음에 요구사항을 버튼을 누르는 개수마다 카운팅 해서 표시해야 한다고 잘못이해해서 한참 고민했는데 알고 보니까 단순히 클릭한 숫자를 표시하는 거였다. 이 부분은 자바스크립트 textContent를 사용하면 간단히 해결되었다.

모바일 반응형으로 미디어쿼리를 사용했는데 배포를 해서 확인을 한 게 아니라서 정확하게 구현이 되었는지는 알 수 없지만, 콘솔 창으로 확인해본 결과로는 크기가 알맞게 구현되었다. 자바스크립트 사용하는 게 좀 익숙해지면 styled-component를 사용해 볼 계획이다.

자세한 코드는 깃허브에 업로드 해두었다

function clickSubmitButton(){ // 제출 버튼을 누르면 처음 페이지가 hidden되고 두번째 페이지의 hidden은 사라진다
  box1.classList.add('hidden')
  box2.classList.remove('hidden')
  score.textContent = `You selected ${result.textContent} out of 5`; // 무슨 숫자버튼을 선택했는지 표시할 문구
}
submit.addEventListener('click', clickSubmitButton)

buttons.forEach((button) => { // 5개의 버튼을 가져와서 forEach로 배열 순회
  button.addEventListener('click', () => {
    result.textContent = button.textContent // textContent로 버튼 숫자 넘기기
  })
})

function clickGoBackButton(){ // 처음 페이지로 돌아갈 수 있는 Go Back 버튼
  box2.classList.add('hidden')
  box1.classList.remove('hidden')
}
goBack.addEventListener('click', clickGoBackButton)

 

https://github.com/winterkang/JavaScript-Challenge/tree/main/interactive-rating-component

GitHub - winterkang/JavaScript-Challenge