Skip to content

Commit b6ef101

Browse files
solygambassolygambas
committed
add double click heart
1 parent 2f1c9b5 commit b6ef101

File tree

4 files changed

+107
-1
lines changed

4 files changed

+107
-1
lines changed

Diff for: ‎29-double click heart/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Double Click Heart</title>
14+
</head>
15+
<body>
16+
<h3>Double click on the image to <i class="fas fa-heart"></i> it</h3>
17+
<small>You liked it <span id="times">0</span> times</small>
18+
<div class="loveMe"></div>
19+
<script src="script.js"></script>
20+
</body>
21+
</html>

Diff for: ‎29-double click heart/script.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const loveMe = document.querySelector(".loveMe");
2+
const times = document.querySelector("#times");
3+
4+
let clickTime = 0;
5+
let timesClicked = 0;
6+
7+
const createHeart = (e) => {
8+
const heart = document.createElement("i");
9+
heart.classList.add("fas");
10+
heart.classList.add("fa-heart");
11+
const x = e.clientX;
12+
const y = e.clientY;
13+
const leftOffset = e.target.offsetLeft;
14+
const topOffset = e.target.offsetTop;
15+
const xInside = x - leftOffset;
16+
const yInside = y - topOffset;
17+
heart.style.top = `${yInside}px`;
18+
heart.style.left = `${xInside}px`;
19+
loveMe.appendChild(heart);
20+
times.innerHTML = ++timesClicked;
21+
setTimeout(() => heart.remove(), 1000);
22+
};
23+
24+
loveMe.addEventListener("click", (e) => {
25+
// you can use dblclick: https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event
26+
if (clickTime === 0) clickTime = new Date().getTime();
27+
else {
28+
if (new Date().getTime() - clickTime < 800) {
29+
createHeart(e);
30+
clickTime = 0;
31+
} else clickTime = new Date().getTime();
32+
}
33+
});

Diff for: ‎29-double click heart/style.css

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Oswald", sans-serif;
9+
text-align: center;
10+
overflow: hidden;
11+
margin: 0;
12+
}
13+
14+
h3 {
15+
margin-bottom: 0;
16+
text-align: center;
17+
}
18+
19+
small {
20+
display: block;
21+
margin-bottom: 20px;
22+
text-align: center;
23+
}
24+
25+
.fa-heart {
26+
color: red;
27+
}
28+
29+
.loveMe {
30+
height: 440px;
31+
width: 300px;
32+
background: url("https://images.unsplash.com/photo-1610492219783-3fa7236e82a9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80")
33+
no-repeat center center/cover;
34+
margin: auto;
35+
cursor: pointer;
36+
max-width: 100%;
37+
position: relative;
38+
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
39+
}
40+
41+
.loveMe .fa-heart {
42+
position: absolute;
43+
animation: grow 0.6s linear;
44+
transform: translate(-50%, -50%) scale(0);
45+
}
46+
47+
@keyframes grow {
48+
to {
49+
transform: translate(-50%, -50%) scale(10);
50+
opacity: 0;
51+
}
52+
}

Diff for: ‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
| 26 | [Double Vertical Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/26-double%20vertical%20slider) | [Live Demo](https://codepen.io/solygambas/pen/wvzNwqB) |
3535
| 27 | [Toast Notification](https://github.com/solygambas/html-css-fifty-projects/tree/master/27-toast%20notification) | [Live Demo](https://codepen.io/solygambas/pen/YzGBNgW) |
3636
| 28 | [GitHub Profiles](https://github.com/solygambas/html-css-fifty-projects/tree/master/28-github%20profiles) | [Live Demo](https://codepen.io/solygambas/pen/GRjzmVR) |
37-
| 29 | [Double Click Heart](https://github.com/solygambas/html-css-fifty-projects/tree/master/double-click-heart) | [Live Demo](/double-click-heart/) |
37+
| 29 | [Double Click Heart](https://github.com/solygambas/html-css-fifty-projects/tree/master/29-double%20click%20heart) | [Live Demo](https://codepen.io/solygambas/pen/XWjOaOK) |
3838
| 30 | [Auto Text Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/auto-text-effect) | [Live Demo](/auto-text-effect/) |
3939
| 31 | [Password Generator](https://github.com/solygambas/html-css-fifty-projects/tree/master/password-generator) | [Live Demo](/password-generator/) |
4040
| 32 | [Good Cheap Fast](https://github.com/solygambas/html-css-fifty-projects/tree/master/good-cheap-fast) | [Live Demo](/good-cheap-fast/) |

0 commit comments

Comments
 (0)