twk95/11ty-site
Public Access
1
0
Fork 0
Code Actions Packages Activity

feat: add like button animation

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-08-25 19:28:59 -04:00
parent d474bcfcd3
commit 9296e92032
2 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/css/style.css
View File

@@ -185,6 +185,7 @@ article li {
.like-icon { .like-icon {
cursor: pointer; cursor: pointer;
transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
} }
.like-icon:hover { .like-icon:hover {
color: #fff; color: #fff;
@@ -197,3 +198,14 @@ article li {
.like-icon.liked:hover { .like-icon.liked:hover {
transform: scale(1.15); 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); }
}

12
src/js/like-button.js
View File

@@ -26,6 +26,15 @@ document.addEventListener('DOMContentLoaded', () => {
const data = await response.json(); const data = await response.json();
const isLiked = localStorage.getItem(storageKey) === 'true'; const isLiked = localStorage.getItem(storageKey) === 'true';
updateUI(isLiked, data.count || 0); 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) { } catch (error) {
console.error('Error fetching likes:', error); console.error('Error fetching likes:', error);
} }
@@ -33,6 +42,9 @@ document.addEventListener('DOMContentLoaded', () => {
// Add click event listener to the icon // Add click event listener to the icon
likeIcon.addEventListener('click', async () => { likeIcon.addEventListener('click', async () => {
// Stop the hint animation if it's running
likeIcon.classList.remove('hint-animation');
// Toggle the liked state
const isCurrentlyLiked = likeIcon.classList.contains('liked'); const isCurrentlyLiked = likeIcon.classList.contains('liked');
const method = isCurrentlyLiked ? 'DELETE' : 'POST'; const method = isCurrentlyLiked ? 'DELETE' : 'POST';