BradTraversy50Projects50Days-Double-Click-Heart

Practiced in;

  • CSS: animation: grow, @keyframes
  • JS: new Date().getTime(), .clientX, .clientY, .target.offsetLeft, .target.offsetTop, setTimeOut

A webpage with a heart animation which is grows and disappears when it is liked with double-click.
The heart effect's starting position is where user double-click in the picture.
Double-click function is operated with timeout methods that calculating the time between single clicks. There is also a counter for likes.

preview.mov