কম্পিউটার টিউটোরিয়াল

সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে লাইক/ডিসলাইক বাটন টগল করা


সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে লাইক/ডিসলাইক বাটন টগল করার কোড নিচে দেওয়া হলো −

উদাহরণ

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       padding: 20px;    }    .fa {       font-size: 50px;       cursor: pointer;       user-select: none;    }    .fa-thumbs-up {       color: blue;    }    .fa-thumbs-down {       color: red;    }    .fa:hover {       transform: scale(1.2);    } </style> </head> <body> <h1>লাইক ডিসলাইক বাটন উদাহরণ</h1> <i class="fa fa-thumbs-up"></i> <script>    document.querySelector(".fa").addEventListener("click", function(event) {       toggleLike(event);    });    function toggleLike(ele) {       ele.target.classList.toggle("fa-thumbs-down");    } </script> </body> </html>

আউটপুট

উপরের কোড নিচের আউটপুট দেবে −

সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে লাইক/ডিসলাইক বাটন টগল করা

লাইক বাটনে ক্লিক করলে −

সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে লাইক/ডিসলাইক বাটন টগল করা


  1. জাভাস্ক্রিপ্ট দিয়ে এলিমেন্ট লুকানো/দেখানো টগল করা

  2. সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে স্ন্যাকবার/টোস্ট তৈরি করা

  3. CSS এবং JavaScript দিয়ে অ্যাকর্ডিয়ন (Accordion) তৈরি করা

  4. CSS এবং জাভাস্ক্রিপ্ট দিয়ে ডার্ক/লাইট মোড টগল করা