-
-
Notifications
You must be signed in to change notification settings - Fork 568
/
Copy pathscript.js
33 lines (30 loc) · 1012 Bytes
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const loveMe = document.querySelector(".loveMe");
const times = document.querySelector("#times");
let clickTime = 0;
let timesClicked = 0;
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);
};
loveMe.addEventListener("click", (e) => {
// you can use dblclick: https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event
if (clickTime === 0) clickTime = new Date().getTime();
else {
if (new Date().getTime() - clickTime < 800) {
createHeart(e);
clickTime = 0;
} else clickTime = new Date().getTime();
}
});