double-click-heart

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

    <style>

@import url('https://fonts.googleapis.com/css?family=Oswald');


* {

  box-sizing: border-box;

}


body {

  font-family: 'Oswald', sans-serif;

  text-align: center;

  overflow: hidden;

  margin: 0;

}


h3 {

  margin-bottom: 0;

  text-align: center;

}


small {

  display: block;

  margin-bottom: 20px;

  text-align: center;

}


.fa-heart {

  color: red;

}


.loveMe {

  height: 440px;

  width: 300px;

  background: url('https://images.unsplash.com/photo-1504215680853-026ed2a45def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')

    no-repeat center center/cover;

  margin: auto;

  cursor: pointer;

  max-width: 100%;

  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 {

  to {

    transform: translate(-50%, -50%) scale(10);

    opacity: 0;

  }

}


    </style>

    <title>Double Click Heart</title>

  </head>

  <body>

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


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

      }</script>

  </body>

</html>