[miniProjects] 29_Double Heart Click

29_Double Heart Click

💻 주제 : 이미지 위에서 클릭한 위치에 하트를 생성하고, 클릭 횟수를 세는 기능

const loveMe = document.querySelector('.loveMe')
const times = document.querySelector('#times')

let clickTime = 0
let timesClicked = 0

loveMe.addEventListener('click', (e) => {
  if(clickTime === 0) {
    clickTime = new Date().getTime
  } else {
    // 0.8초 이내로 클릭되어야 더블클릭이라고 간주.
    if((new Date().getTime() - clickTime) < 800) {
      createHeart(e)
      clickTime - 0
    } else {
      clickTime = new Date().getTime()
    }
  }
})

const createHeart = (e) => {
  const heart = document.createElement('i')
  heart.classList.add('fas')
  heart.classList.add('fa-heart')

  //클릭시 x, y 좌표에 하트 생성할 거임.
  const x = e.clientX
  const y = e.clientY

  const leftOffset = e.target.offsetLeft
  const topOffset = e.target.offsetTop

  const xInside = x - leftOffset
  const yInside = y - topOffset
  
  heart.style.top = `${yInside}px`
  heart.style.left = `${xInside}px`

  loveMe.appendChild(heart)

  times.innerHTML = ++timesClicked

  setTimeout(() => heart.remove(), 5000)
} 

• clickTime이 0인 경우: 현재 시간을 clickTime 변수에 저장한다.
• clickTime이 0이 아닌 경우: 현재 시간과 이전 클릭 시간의 차이를 계산하여 0.8초보다 작은 경우, createHeart 함수를 호출하여 하트를 생성하고 clickTime을 0으로 초기화한다. 그렇지 않은 경우, 현재 시간을 clickTime 변수에 저장한다.
• createHeart 함수는 클릭한 위치에 하트를 생성하고, 클릭 횟수를 증가시키는 작업을 수행한다. 생성된 하트는 5초 후에 제거된다.