CSS और JavaScript से लाइक/डिस्लाइक बटन टॉगल बनाएं

Font Awesome आइकॉन्स और JavaScript का उपयोग करके एक इंटरैक्टिव लाइक/डिस्लाइक बटन बनाना जिसमें क्लिक पर एनिमेशन और स्टेट टॉगल शामिल हो।

उदाहरण

<!DOCTYPE html> <html> <head> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /> 
<style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; } 
    .fa { font-size: 50px; cursor: pointer; user-select: none; transition: transform 0.2s, color 0.3s; } 
    .fa-thumbs-up { color: #007bff; } 
    .fa-thumbs-down { color: #dc3545; } 
    .fa:hover { transform: scale(1.2); } 
    .fa:active { transform: scale(0.9); } 
</style> </head> <body> 
<h1>लाइक/डिस्लाइक बटन उदाहरण</h1> 
<i class="fa fa-thumbs-up" id="likeBtn" title="लाइक/डिस्लाइक टॉगल"></i> 
<p style="margin-top: 10px; color: #666;">आइकन पर क्लिक करके लाइक/डिस्लाइक टॉगल करें</p> 
<script> 
    document.getElementById("likeBtn").addEventListener("click", function(event) { 
        toggleLike(event); 
    }); 
    
    function toggleLike(ele) { 
        ele.target.classList.toggle("fa-thumbs-down"); 
        // टूलटिप अपडेट
        ele.target.title = ele.target.classList.contains("fa-thumbs-down") ? "डिस्लाइक" : "लाइक"; 
    } 
</script> </body> </html>

आउटपुट

प्रारंभिक: नीला थंब्स-अप (👍)

क्लिक: लाल थंब्स-डाउन (👎) में बदलता है, स्केल एनिमेशन के साथ

दूसरा क्लिक: वापस नीला थंब्स-अप

संवर्द्धन: काउंटर के साथ

<div class="like-widget">
    <i class="fa fa-thumbs-up" id="likeBtn"></i>
    <span class="count">0</span>
</div>

<style>
    .like-widget { display: inline-flex; align-items: center; gap: 8px; }
    .count { font-size: 24px; font-weight: bold; min-width: 40px; text-align: center; }
    .fa-thumbs-down + .count { color: #dc3545; }


संवर्द्धन: हार्ट स्टाइल (इंस्टाग्राम जैसा)
<i class="fa fa-heart-o" id="heartBtn"></i>

<style>
    #heartBtn { font-size: 40px; color: #999; }
    #heartBtn.liked { 
        color: #e0245e; 
        animation: heartBeat 0.3s;
    }
    @keyframes heartBeat {
        0% { transform: scale(1); }
        50% { transform: scale(1.3); }
        100% { transform: scale(1); }
    }
</style>

<script>
document.getElementById("heartBtn").addEventListener("click", function() {
    this.classList.toggle("liked");
    this.classList.toggle("fa-heart-o");
    this.classList.toggle("fa-heart");
});
</script>

एक्सेसिबिलिटी नोट
role="button", aria-pressed, aria-label जोड़ें ताकि स्क्रीन रीडर उपयोगकर्ताओं के लिए सुलभ हो।