Skip to content

In this fun project, when the user double-clicks on the image, a heart appears, grows, and disappears. CSS animations and JavaScript are used for this colorful and interactive effect.

Notifications You must be signed in to change notification settings

marisabrantley/double-click-heart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Double-click Heart Mini Project

Are you a fan of vintage Volkswagen Beetles? Then put your cursor over the image of my 1963 Gulf Blue, California-original VW Ragtop Beetle and show it some love by double-clicking away!

Objective

  • Use CSS grow animation to grow a heart that will appear when the user double-clicks on the image.
  • Use JavaScript to set a double-click event at the exact position clicks occur with client x and client y values and event target offset top and left, as well as to set a counter for the number of clicks.

heart-the-beetle.mov

Launch

View the Double-click Heart Project here: https://marisabrantley.github.io/double-click-heart/

Class

Brad Traversy's Udemy Course "50 Projects in 50 Days"
https://www.udemy.com/course/50-projects-50-days/

About

In this fun project, when the user double-clicks on the image, a heart appears, grows, and disappears. CSS animations and JavaScript are used for this colorful and interactive effect.

Topics

Resources

Stars

Watchers

Forks