From 4db0ec3c5238f8a8ef4a939de27efff6667ab8cd Mon Sep 17 00:00:00 2001 From: couldntfindabetterusername Date: Fri, 18 Mar 2022 19:31:11 +0530 Subject: [PATCH] day 29 completed --- my code/29-double-click-heart/index.html | 23 ++++++++++++++++ my code/29-double-click-heart/script.js | 17 ++++++++++++ my code/29-double-click-heart/style.css | 34 ++++++++++++++++++++++++ 3 files changed, 74 insertions(+) create mode 100644 my code/29-double-click-heart/index.html create mode 100644 my code/29-double-click-heart/script.js create mode 100644 my code/29-double-click-heart/style.css diff --git a/my code/29-double-click-heart/index.html b/my code/29-double-click-heart/index.html new file mode 100644 index 0000000..01e7624 --- /dev/null +++ b/my code/29-double-click-heart/index.html @@ -0,0 +1,23 @@ + + + + + + + + 29 double click heart + + + + + + Double click the image to like it +
You liked it 0 times.
+ + + + + + + + \ No newline at end of file diff --git a/my code/29-double-click-heart/script.js b/my code/29-double-click-heart/script.js new file mode 100644 index 0000000..e2fc636 --- /dev/null +++ b/my code/29-double-click-heart/script.js @@ -0,0 +1,17 @@ +let count = 0; +const counter = document.getElementById("counter"); +const img = document.getElementById("img"); + +img.addEventListener("dblclick", () => { + const heart = document.createElement("div"); + heart.classList.add("heart"); + heart.classList.add("active"); + document.body.append(heart); + + count++; + counter.innerHTML = count; + + setTimeout(() => { + heart.remove(); + }, 2000); +}); diff --git a/my code/29-double-click-heart/style.css b/my code/29-double-click-heart/style.css new file mode 100644 index 0000000..7339919 --- /dev/null +++ b/my code/29-double-click-heart/style.css @@ -0,0 +1,34 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + position: relative; +} + +img { + width: 400px; +} + +.heart { + width: 40px; + height: 40px; + background: red; + border-radius: 50%; + position: absolute; + top: 10px; + left: 10px; + z-index: 3; + transition: all 2s linear; +} + +.heart.active { + transform: scale(3); + opacity: 0; +}