Day # 17: Double Click

As I have said before, handling events in Javascript is simply essential for any frontend developer. We must get very good at it. Visitors’ interactions in a website can trigger reactions that we need to be able to manage.

That being said, I figured I could come up with fun ways to practice and get better at handling events. The obvious inspiration for this came from when you double tap on an image on Instagram to like it.

To handle double clicks on Javascript we need to do the following

image.addEventListener('dblclick', (e) => {

    createEmoji(e)

})

When you double click on the image of this website, you get a smiley face emoji in order to show the love you feel for this lovely corgi :)

Initially, we create an animation in which the emoji grows ten times its size:

img .fa-solid {

    position: absolute;

    animation: grow 0.6s linear;

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

}

And then we set its opacity to zero to make it disappear:

    to {

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

        opacity: 0;

    }

And then in Javascript, we create that element and insert it into the HTML document, adding its Font Awesome classes, which we have used to create the emoji

const createEmoji = (e) => {

    const heart = document.createElement('i')

    heart.classList.add('fa-solid')

    heart.classList.add('fa-face-grin-wide')

    loveMe.appendChild(heart)

}