Merge pull request #733 from doctor-rutvik14/feature-like-animation

Added a new feature: Like button with animation and dynamic counter.
Ayushparikh-code · Oct 29, 2024 · b353bdd · b353bdd
2 parents 7cf6d2b + 771a799
commit b353bdd
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 0 deletions.
diff --git a/like-button-animation/index.html b/like-button-animation/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Like Button Animation</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <button class="like-button" id="like-button">
+            <span class="heart" id="heart">❤️</span> Like
+        </button>
+        <p id="like-count">0 Likes</p>
+    </div>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/like-button-animation/main.js b/like-button-animation/main.js
@@ -0,0 +1,18 @@
+const likeButton = document.getElementById("like-button");
+const heart = document.getElementById("heart");
+const likeCount = document.getElementById("like-count");
+
+let count = 0;
+
+likeButton.addEventListener("click", () => {
+  count++;
+  likeCount.textContent = `${count} Likes`;
+
+  // Add 'active' class to trigger animation
+  likeButton.classList.toggle("active");
+
+  // Remove class after animation ends
+  setTimeout(() => {
+    likeButton.classList.toggle("active");
+  }, 300); // Match the duration in CSS for animation
+});
diff --git a/like-button-animation/style.css b/like-button-animation/style.css
@@ -0,0 +1,43 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    text-align: center;
+}
+
+.like-button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    position: relative;
+}
+
+.like-button:hover {
+    background-color: #0056b3;
+}
+
+.heart {
+    display: inline-block;
+    font-size: 24px;
+    transition: transform 0.2s ease;
+}
+
+.like-button.active .heart {
+    transform: scale(1.5);
+}
+
+.like-button.active {
+    background-color: #f32a6d;
+}