heart in center on like

double-click-heart/index.html

@@ -11,7 +11,7 @@
     <h3>Double click on the image to <i class="fas fa-heart"></i> it</h3>
     <small>You liked it <span id="times">0</span> times</small>
 
-    <div class="loveMe"></div>
+    <div class="loveMe"><span id="heart">❤️</span></div>
 
     <script src="script.js"></script>
   </body>

double-click-heart/script.js

@@ -1,42 +1,19 @@
-const loveMe = document.querySelector('.loveMe')
-const times = document.querySelector('#times')
 
-let clickTime = 0
+var car = document.querySelector('.loveMe');
-let timesClicked = 0
+var clutter = 0;
-
+var times = document.querySelector('#times');
-loveMe.addEventListener('click', (e) => {
+
-    if(clickTime === 0) {
+car.addEventListener('dblclick', () => {
-        clickTime = new Date().getTime()
+    clutter++;
-    } else {
+    var heart = document.querySelector('#heart');
-        if((new Date().getTime() - clickTime) < 800) {
+    heart.style.opacity = 1;
-            createHeart(e)
+    heart.style.transform = 'scale(1)';
-            clickTime = 0
+    setTimeout(() => {
-        } else {
+        heart.style.transform = 'scale(0)';
-            clickTime = new Date().getTime()
+        heart.style.opacity = '0';
-        }
+    }, 600)
-    }
+    setTimeout(()=>{
-})
+        heart.style.display = 'initial';
-
+    },620)
-const createHeart = (e) => {
+    times.innerHTML = clutter;
-    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)
-}

double-click-heart/style.css

@@ -34,20 +34,19 @@ small {
   margin: auto;
   cursor: pointer;
   max-width: 100%;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  justify-content: center;
   position: relative;
   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   overflow: hidden;
 }
 
-.loveMe .fa-heart {
-  position: absolute;
-  animation: grow 0.6s linear;
-  transform: translate(-50%, -50%) scale(0);
-}
 
-@keyframes grow {
+#heart{
-  to {
+  font-size: 15vw;
-    transform: translate(-50%, -50%) scale(10);
+  opacity: 0;
-    opacity: 0;
+  transform: scale(0);
-  }
+  transition: 0.4s;
-}
+}