50projects50days/double-click-heart/script.js

42 lines
985 B
JavaScript
Raw Normal View History

2020-10-09 20:13:07 +00:00
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 {
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')
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(), 1000)
}