Skip to content

Commit 4c9a482

Browse files
saeedkohansalsaeedkohansal
authored
Add files via upload
1 parent 2cf9de9 commit 4c9a482

File tree

4 files changed

+208
-0
lines changed

4 files changed

+208
-0
lines changed

‎app.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// Define variables
2+
const heart_button = document.getElementById("heart-button")
3+
const heart_icon = document.getElementById("heart-icon")
4+
const total_likes = document.getElementById("total-likes")
5+
6+
// Liking function
7+
function add_like() {
8+
heart_button.setAttribute("class", "heartbeat red-heart")
9+
heart_icon.setAttribute("class", "bi bi-heart-fill")
10+
heart_icon.setAttribute("id", "liked")
11+
total_likes.innerHTML = parseInt(total_likes.innerHTML) + 1
12+
}
13+
14+
// Unliking function
15+
function remove_like() {
16+
heart_button.setAttribute("class", "white-heart")
17+
heart_icon.setAttribute("class", "bi bi-heart")
18+
heart_icon.setAttribute("id", "not-liked")
19+
total_likes.innerHTML = parseInt(total_likes.innerHTML) - 1
20+
}
21+
22+
// Remove heartbeat animation
23+
function remove_heartbeat() {
24+
heart_button.setAttribute("class", "red-heart")
25+
}
26+
27+
// When heart button clicked
28+
heart_button.onclick = function () {
29+
const like_checker = document.getElementById("liked")
30+
if (like_checker == null) {
31+
add_like()
32+
setTimeout(remove_heartbeat, 1000)
33+
} else {
34+
remove_like()
35+
}
36+
}

‎index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<title>gilgeekify</title>
5+
<meta charset="utf-8">
6+
<!-- <meta http-equiv="refresh" content="1"> -->
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sansita+Swashed|Oswald">
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
<body>
13+
<div class="single-post">
14+
<img class="post-image" src="https://cdn.pixabay.com/photo/2020/10/21/18/07/laptop-5673901_960_720.jpg">
15+
<div id="heart-button">
16+
<span id="total-likes">127</span>
17+
<i id="heart-icon" class="bi bi-heart"></i>
18+
</div>
19+
<h1 class="post-title">
20+
<i class="bi bi-chevron-double-left"></i>
21+
The best laptops for graphic design in 2022
22+
<i class="bi bi-chevron-double-right"></i>
23+
</h1>
24+
<p class="post-content">The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim.</p>
25+
</div>
26+
<script src="app.js"></script>
27+
</body>
28+
</html>

‎js-like-unlike-button-with-animation.png

504 KB
Loading

‎style.css

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
body {
2+
font-family: "Sansita Swashed";
3+
color: #ffffff;
4+
background-color: #4060ff;
5+
margin: 80px auto 0;
6+
}
7+
8+
.single-post {
9+
width: 80%;
10+
margin: 0 auto;
11+
}
12+
13+
.post-image {
14+
width: 100%;
15+
border-radius: 50px;
16+
}
17+
18+
.post-title {
19+
text-align: center;
20+
margin: 10px;
21+
}
22+
23+
.post-content {
24+
font-family: "Oswald";
25+
text-align: justify;
26+
font-size: 18px;
27+
padding: 16px;
28+
border-radius: 20px;
29+
font-weight: normal;
30+
background-color: #00000066;
31+
}
32+
33+
#heart-button {
34+
display: block;
35+
position: relative;
36+
float: right;
37+
cursor: pointer;
38+
margin: -80px 30px 0 0;
39+
font-size: 50px;
40+
transition: 0.5s;
41+
}
42+
43+
#heart-button:hover {
44+
color: #ff0000;
45+
transform: scale(1.09);
46+
}
47+
48+
#total-likes {
49+
cursor: text;
50+
font-size: 40px;
51+
vertical-align: 7px;
52+
margin-right: 10px;
53+
}
54+
55+
.red-heart {
56+
color: #ff0000;
57+
}
58+
59+
.white-heart {
60+
color: #ffffff;
61+
}
62+
63+
.heartbeat {
64+
-webkit-animation: heartbeat 1.5s ease-in-out both;
65+
animation: heartbeat 1.5s ease-in-out both;
66+
}
67+
68+
@-webkit-keyframes heartbeat {
69+
from {
70+
-webkit-transform: scale(1);
71+
transform: scale(1);
72+
-webkit-transform-origin: center center;
73+
transform-origin: center center;
74+
-webkit-animation-timing-function: ease-out;
75+
animation-timing-function: ease-out;
76+
}
77+
78+
10% {
79+
-webkit-transform: scale(0.8);
80+
transform: scale(0.8);
81+
-webkit-animation-timing-function: ease-in;
82+
animation-timing-function: ease-in;
83+
}
84+
85+
17% {
86+
-webkit-transform: scale(1.3);
87+
transform: scale(1.3);
88+
-webkit-animation-timing-function: ease-out;
89+
animation-timing-function: ease-out;
90+
}
91+
92+
33% {
93+
-webkit-transform: scale(0.8);
94+
transform: scale(0.8);
95+
-webkit-animation-timing-function: ease-in;
96+
animation-timing-function: ease-in;
97+
}
98+
99+
45% {
100+
-webkit-transform: scale(1);
101+
transform: scale(1);
102+
-webkit-animation-timing-function: ease-out;
103+
animation-timing-function: ease-out;
104+
}
105+
}
106+
107+
@keyframes heartbeat {
108+
from {
109+
-webkit-transform: scale(1);
110+
transform: scale(1);
111+
-webkit-transform-origin: center center;
112+
transform-origin: center center;
113+
-webkit-animation-timing-function: ease-out;
114+
animation-timing-function: ease-out;
115+
}
116+
117+
10% {
118+
-webkit-transform: scale(0.8);
119+
transform: scale(0.8);
120+
-webkit-animation-timing-function: ease-in;
121+
animation-timing-function: ease-in;
122+
}
123+
124+
17% {
125+
-webkit-transform: scale(1.3);
126+
transform: scale(1.3);
127+
-webkit-animation-timing-function: ease-out;
128+
animation-timing-function: ease-out;
129+
}
130+
131+
33% {
132+
-webkit-transform: scale(0.8);
133+
transform: scale(0.8);
134+
-webkit-animation-timing-function: ease-in;
135+
animation-timing-function: ease-in;
136+
}
137+
138+
45% {
139+
-webkit-transform: scale(1);
140+
transform: scale(1);
141+
-webkit-animation-timing-function: ease-out;
142+
animation-timing-function: ease-out;
143+
}
144+
}

0 commit comments

Comments
 (0)