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

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

let clickTime = 0;

let timesClicked = 1;

const smiley = [

'🐹',

'🍔',

'🦅',

'🧙',

'♥️',

'🙉',

'🧚',

]

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('div')

heart.classList.add('heart')

heart.innerHTML = `${getRandomAvatar()}`

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.left = `${xInside}px`;

heart.style.top = `${yInside}px`;

loveMe.appendChild(heart)

times.innerHTML = timesClicked++;

setTimeout(() =>

heart.remove()

, 10000);

}

function getRandomAvatar() {

return smiley[Math.floor(Math.random() * smiley.length)];

}