You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

42 lines
985 B

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)
}