Double tap in JavaScript

Table of Contents

Introduction

The double tap like effect shows a beautiful heart animation when you tap twice on a photo. It’s a small but powerful UI feature that enhances user experience by providing instant feedback.

The double tap effect is an engaging gesture used in web and mobile applications where a user taps twice quickly on an image or element to trigger an action. It’s most famously used on Instagram, where double-tapping a photo displays a heart animation to indicate a like. This interaction provides instant feedback, making the user experience smooth and enjoyable. In this tutorial, we will be creating a simple double tap heart button just like Instagram. This project demonstrates how to detect a double tap and show a heart animation using HTML, CSS, and JavaScript.

The functionality is primarily handled by CSS and JavaScript, while HTML is used to define IDs, classes, and structure for the elements such as text and images. When you double-tap the image, a heart animation will appear, and your likes will be counted replicating Instagram’s interactive like feature. We’ll also integrate Google Fonts to make the project visually appealing. This project helps beginners understand how to implement gesture detection and smooth animations, combining design and interactivity for a modern user experience.

This effect usually:

Fades out the animation after a short time.
Detects a double tap gesture.
Shows a heart or like icon animation.

Project overview

Core Features:

Detect double taps or double clicks
Display a heart icon dynamically
Add fade-in and fade-out animation
Support both desktop and mobile devices

Technologies Used:

HTML for structure
CSS for styling and animation
JavaScript for interactivity

Project Setup

Create a new folder named double tap and inside it, create the following files:

doble-tap/
│
├── index.html
├── style.css
└── script.js

Step-by-Step Implementation

HTML Layout

<!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.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Double tap</title>
  </head>
  <body>
     <h3>Double tap on the image to <i class="fas fa-heart"></i> it</h3>
     <b><i><small>You liked it <span id="times">0</span> times</small></i></b>

      <div class="likeMe">

      </div>

       <script src="script.js"></script>
  </body>
</html>

CSS Styling

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
   font-family: 'Roboto', sans-serif;
   background-color: #4b515d;
   text-align: center;
   overflow: hidden;
   margin: 0;

}
/* #37474f */
h3 {
  color: white;
  margin-top: 4%;
  text-align: center;
}
 
small {
  color: white;
  display: block;
  padding-top: 8px;
  margin-bottom: 20px;
  text-align: center;
}

.fa-heart {
  color: red;
}

.likeMe {
  height: 440px;
  width: 300px;
  background: url('https://images.unsplash.com/photo-1589254065909-b7086229d08c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&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.5), 0 10px 10px rgba(0, 0, 0, 0.5);
}

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

JS Functionality

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

let clickTime = 0
let timesClicked = 0

likeMe.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`

    likeMe.appendChild(heart)

    times.innerHTML = ++timesClicked

    setTimeout(() => heart.remove(), 1000)
}

How to use this project?

Download the project and extract the source code.
Open the folder on code editor or IDEs.
Launch the index file on the web browser.
Double tap to see the effect.
Enjoy and share!

In conclusion, creating a double-tap heart effect in JavaScript is a fun and practical way to learn about event handling, animations, and DOM manipulation. This project replicates Instagram’s like feature, giving users instant visual feedback and enhancing interactivity.

Although the source code is provided along with this project. Just copy and paste. Click the download button below to get the full source code for this project.

Build your own double-tap like effect today and make your web app feel just like Instagram!

DOWNLOAD

Introduction

Project overview

Project Setup

Step-by-Step Implementation

How to use this project?

Leave a Reply Cancel reply