Card Design, JavaScript

Double click like heart | Instagram heart like source code

Double click like the event is an awesome feature in javascript. Today we are going to learn how to create a double-click heart event like Instagram. In the last lecture, we learnt about JavaScript. But now let’s discuss how to create Instagram-like (heart) effect.

Double click like:

It is used for liking the pictures on Instagram but we can create it using javascript. But now let’s discuss this image and its effects. Then we will create it using these front-end languages.

It is written as an instruction for its users so that users can understand it. Then it has a counter which counts the number of likes. But once we like it then it starts counting it and it converts the 0 into the number of likes. Below it we have an image for the like event.

By double-clicking on the picture, it will produce a heart as a pop on the image. It has red colour or red and it appears in the form of fade and also disappears in the form of fade.

How to create a Double click effect:

We can simply create it with the help of Html, CSS and Javascript. These languages will help us to create it.

Source code of Html

First, we are starting with Html. Create a file of Html and save it as like.html and save it in any folder. Then copy the given code of Html and paste it into your Html file. Html is a hypertext markup language and is used for creating the skeleton of the content.

<!--Fantacy Design-->
<!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" />
    <link rel="stylesheet" href="style.css" />
    <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 src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

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

</body>

</html>

Source code of CSS:

Again create a file of CSS and name it as like.css. Save it in the same folder and copy the given code. Paste the code into your CSS file. CSS is used for designing.

@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;
  background-image: linear-gradient(to left, #ff5f6d, #ffc371);
}

h3 {
  margin-bottom: 0;
  text-align: center;
  margin-top: 100px;
  color: #fff;
  font-size: 30px;
}

small {
  display: block;
  margin-bottom: 20px;
  text-align: center;
  color: #fff;
  font-size: 20px;
}

.fa-heart {
  color: #FF0000;
}

.loveMe {
  height: 440px;
  width: 350px;
  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);
}

.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;
  }
}

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

background-image: linear-gradient(to left, #ff5f6d, #ffc371);

}

h3 {

margin-bottom: 0;

text-align: center;

margin-top: 100px;

color: #fff;

font-size: 30px;

}

small {

display: block;

margin-bottom: 20px;

text-align: center;

color: #fff;

font-size: 20px;

}

.fa-heart {

color: #FF0000;

}

.loveMe {

height: 440px;

width: 350px;

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

}

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

}

Source code of javascript:

Once again create a file of javascript. Name it as like.js and save it in the same folder. Copy this code of javascript and paste it into your file. Javascript is used for adding functionality to our project. Its functionality is that by double-clicking on that image it is generating a heart.

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

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)

}

In this way, you can create a like effect using javascript. I have created a file that has all these files (Html, CSS and js). Download this file from the below button and then extract these files from the zip file.

If you find this post helpful or you have learnt anything from this article then just like it. Share it and comment below. If you have any questions then must comment below. We will try to solve your problem related to it.

Thanks for reading this article.

Download Source File