- HTML
- h1: Double click on the image to ❤️ it
- p: You liked it times
- image
- CSS
- button
- grow animation
- JavaScript
-
use click event + setTimout to make own dblclick event
-
clientX, clientY
-
add up click counts
-
On Safari, heart doesn't show when double clicking
- Challenge from Brad Traversy & Florin Pop on Udemy '50 Projects in 50 Days'
- HTML
- Font awesome to use heart image
- CSS
- text-align: center instead of flex
- image: relative & heart: absolute => need to change JS
- inside keyframes translate value needed
- JavaScript
- element.remove() after appendChild
- click position
const x = event.clientX - event.target.offsetLeft
const y = event.clientY - event.target.offsetTop