اگر میخواین بدونین چطوری میشه دکمه لایک ساخت این پست رو دنبال کنین میخوام ساخت دکمه لایک دارای انیمیشن با استفاده از JavaScript و CSS قابل استفاده برای یک پست، مطلب، محصول، صفحه، پروفایل یا... رو بهتون یاد بدم، البته توجه کنین که این نسخه فقط فرانت اند هست و اکشن پردازش بک اند و ثبت روی دیتابیس رو نداره اما در آینده یک نسخه کامل فرانت اند + بک اند با استفاده از Fetch و PHP و MySQL رو هم براتون قرار میدم.
ما تو این ورژن برای آیکن هامون از Font Awesome و برای انیمیشنی کردن عناصر از Animate.css استفاده می کنیم که یک کتابخانه CSS برای انیمیشنی کردن عناصر هست البته خودمون هم میتونیم با CSS کد انیمیشن خاص خودمون رو بنویسیم که اون دیگه اختیارش دست خودمونه کلیه عملیات جاوا اسکریپتیمون رو براتون کامنت کردم تا کاملا مشخص باشه داستان چیه 😄 بقیش هم که مثل روز روشنه فکر نکنم نکته ای مونده باشه حالشو ببرین 🤡
2 ابزار بالا رو باید داخل صفحتون (در واقع تگ head) اضافه کنین تا کد زیر به درستی کار کنه که من جفتشو براتون توی بخش HTML اضافه کردم
/* شروع عملیات در صورت کلیک خوردن دکمه قلب */
document.getElementById('like-btn-heart').onclick = function() {
// تبدیل آیکن قلب توخالی به قلب توپر + افزودن انیمیشن به آیکن
document.getElementById('like-btn-heart').setAttribute('class', 'fas fa-heart animate__animated animate__rubberBand animate__slow');
// تغییر رنگ آیکن قلب
document.getElementById('like-btn-heart').style.color = '#007eff';
// تغییر رنگ شمارنده تعداد لایک
document.getElementById('hearts-count').style.color = '#fff';
// حذف امکان کلیک مجدد روی دکمه لایک
document.getElementById('like-btn-heart').style.pointerEvents = 'none';
// دریافت عدد تعداد لایک فعلی
let current_likes_count = parseInt(document.getElementById('hearts-count').textContent);
// عدد تعداد لایک + 1
let current_likes_count_plus_one = current_likes_count + 1;
// جایگزین کردن عدد تعداد لایک جدید بر روی عدد قبلی
document.getElementById('hearts-count').innerHTML = current_likes_count_plus_one;
};
/* شروع عملیات در صورت کلیک خوردن دکمه انگشت شست */
document.getElementById('like-btn-thumb').onclick = function() {
// تبدیل آیکن انگشت شست توخالی به انگشت شست توپر + افزودن انیمیشن به آیکن
document.getElementById('like-btn-thumb').setAttribute('class', 'fas fa-thumbs-up animate__animated animate__swing animate__slow');
// تغییر رنگ آیکن انگشت شست
document.getElementById('like-btn-thumb').style.color = '#4caf50';
// تغییر رنگ شمارنده تعداد لایک
document.getElementById('thumbs-count').style.color = '#fff';
// حذف امکان کلیک مجدد روی دکمه لایک
document.getElementById('like-btn-thumb').style.pointerEvents = 'none';
// دریافت عدد تعداد لایک فعلی
let current_likes_count = parseInt(document.getElementById('thumbs-count').textContent);
// عدد تعداد لایک + 1
let current_likes_count_plus_one = current_likes_count + 1;
// جایگزین کردن عدد تعداد لایک جدید بر روی عدد قبلی
document.getElementById('thumbs-count').innerHTML = current_likes_count_plus_one;
};<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<h1>
JavaScript, CSS | دکمه لایک انیمیشنی
</h1>
<div>
<i class="far fa-heart" id="like-btn-heart"></i>
<span id="hearts-count">0</span>
</div>
<h2>
حالت قلب
</h2>
<div>
<i class="far fa-thumbs-up" id="like-btn-thumb"></i>
<span id="thumbs-count">0</span>
</div>
<h2>
حالت انگشت شست
</h2>
<h1 id="author">
@skohansal.ir
</h1>* {
transition: 1s;
}
body {
font-family: "Calibri Light";
color: #fff;
background-color: transparent;
font-size: 160px;
animation: zoomIn;
animation-duration: 2s;
}
div {
text-align: center;
}
h1 {
text-align: center;
font-size: 50px;
}
h2 {
text-align: center;
font-size: 40px;
}
#author {
color: #0fb;
}
#like-btn-heart,
#like-btn-thumb {
cursor: pointer;
}
#hearts-count,
#thumbs-count {
position: relative;
font-weight: bold;
pointer-events: none;
display: block;
font-size: 50px;
margin: -133px 0 50px 0;
}
#thumbs-count {
margin: -114px 0 50px 0;
}
