fix: update root in launch.json

.vscode/launch.json

@@ -8,7 +8,7 @@
       "port": 9229,
       "address": "localhost",
       "localRoot": "${workspaceFolder}",
-      "remoteRoot": "/usr/src/app",
+      "remoteRoot": "/app",
       "restart": false,
       "preLaunchTask": "docker-compose-up",
       "postDebugTask": "docker-compose-down"

src/css/style.css

@@ -184,7 +184,7 @@ article li {
 }
 .like-icon {
     cursor: pointer;
-    transition: color 0.2s ease-in-out;
+    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
 .like-icon:hover {
     color: #fff;
@@ -197,3 +197,14 @@ article li {
 .like-icon.liked:hover {
     transform: scale(1.15);
 }
+.hint-animation {
+    animation: wobble 1s ease-in-out 2;
+}
+@keyframes wobble {
+    0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
+    15% { transform: translateX(-3px) rotate(-7deg) scale(1.1); }
+    30% { transform: translateX(2px) rotate(5deg) scale(1.2); }
+    45% { transform: translateX(-1px) rotate(-5deg) scale(1.2); }
+    60% { transform: translateX(1px) rotate(3deg) scale(1.1); }
+    75% { transform: translateX(0) rotate(-1deg) scale(1); }
+}

src/js/like-button.js

@@ -26,6 +26,16 @@ document.addEventListener('DOMContentLoaded', () => {
             const data = await response.json();
             const isLiked = localStorage.getItem(storageKey) === 'true';
             updateUI(isLiked, data.count || 0);
+
+            // Check if the user has ever interacted with this button before
+            if (localStorage.getItem(storageKey) === null) {
+                // If not, add the animation class
+                likeIcon.classList.add('hint-animation');
+                // Remove the animation after it runs to prevent it from looping
+                setTimeout(() => {
+                    likeIcon.classList.remove('hint-animation');
+                }, 2000); // Animation duration is 2s
+            }
         } catch (error) {
             console.error('Error fetching likes:', error);
         }
@@ -33,6 +43,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Add click event listener to the icon
     likeIcon.addEventListener('click', async () => {
+        // Stop the hint animation if it's running
+        likeIcon.classList.remove('hint-animation');
+
         const isCurrentlyLiked = likeIcon.classList.contains('liked');
         const method = isCurrentlyLiked ? 'DELETE' : 'POST';