day 29 completed

4 years ago · 4db0ec3c52
parent b414f37f3a
commit 4db0ec3c52
3 changed files with 74 additions and 0 deletions
--- a/code/29-double-click-heart/index.html
+++ b/code/29-double-click-heart/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>29 double click heart</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <span>Double click the image to like it</span>
+    <h5>You liked it <span id="counter">0</span> times.</h5>
+    <img src="https://source.unsplash.com/random" alt="" id="img">
+
+
+    <script src="script.js"></script>
+
+</body>
+
+</html>
--- a/code/29-double-click-heart/script.js
+++ b/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);
+});
--- a/code/29-double-click-heart/style.css
+++ b/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;
+}