Hướng dẫn tạo Toggle Like and Dislike

Đăng bởi: phungminhduong - Vào ngày: - View: 521

DEMO

Toggle Like và Dislike đã trở nên rất phổ biến với các website, nó được sử dụng từ website tin tức cho đến website bán hàng để giúp cho người dùng đánh giá về một bài viết hoặc một sản phẩm trên website.

Trong bài viết này mình sẽ hướng dẫn các bạn tạo một Toggle Like và Dislike đơn giản.

1. Xây dựng giao diện

Đầu tiên là xây dựng giao diện, các bạn tạo file index.html và thêm đoạn code dưới đây để tạo các thành phần của trang:

Code RUN 
<div class="container">
    <h2>Freetuts.net hướng dẫn tạo Toogle like and Dislike</h2>
    <p>Click vào icon để like hoặc dislike</p>
    <i id="button" class="fa fa-thumbs-up"></i>
</div>

Các thành phần giao diện khá đơn giản, các bạn chỉ cần chú ý tới thẻ i mình tạo để gắn icon. Các bạn cũng tạm chấp nhận đặt tên class chính xác như vậy nhé, trong bước thêm CSS mình sẽ giải thích.

2. Thêm CSS để định dạng các thành phần

Trong bước này chúng ta sẽ tiến hành định dạng các thành phần của trang, đầu tiên các bạn thêm dòng code này để kéo vào file font-awesome.min.css:

Code 
<link rel="stylesheet" href="./Font-Awesomecss/css/font-awesome.min.css">

Nếu như các bạn còn chưa biết thì font-awesome là một bộ font hình biểu tượng, nó sẽ giúp chúng ta nhúng các icon vào website mà không cần dùng đến hình ảnh, link tải font-awesome mình sẽ đặt ở cuối bài viết, các bạn tải về và giải nén vào thư mục Font-Awesomecss nhé. Việc sử dụng font awnsome để tạo icon chính là lí do mà mình yêu cầu các bạn giữ nguyên tên các class ở bước 1.

Tiếp theo chúng ta sẽ thêm CSS để định dạng các thành phần, các bạn thêm đoạn mã CSS dưới đây vào bên trong thẻ style:

Code RUN 
.fa {
    font-size: 50px;
    cursor: pointer;
    user-select: none;
}
.fa:hover { 
  color: darkblue;
}
.active { 
  color: darkblue;
}

Chỉ là những định dạng cơ bản nên mình sẽ không giải thích gì thêm nữa, có một điểm nhỏ là mình thêm class active với màu nền nổi bật để active icon khi chúng đã được click, mặc định khi tải trang xong thì icon sẽ không được active.

3. Xử lý với Javascript

Bước cuối cùng cũng là bước quan trong nhất, chúng ta sẽ thêm xử lý Javascript để chuyển đổi qua lại giữa like và dislike, các bạn thêm đoạn mã dưới đây vào sau thẻ body:

Code RUN 
<script>
    // lấy về button
    var button = document.getElementById('button');
    //gán sự kiện click 
    button.addEventListener("click", function(){
        //Lấy tất cả các class của button và chuyển thành chuỗi
        var allClass = this.classList.toString();
        // kiểm tra nếu chưa tồn tại class active thì thêm class active
        if (allClass.indexOf('active') == -1) {
            this.classList += ' active';
        }
        //Thêm hoặc xóa class fa-thumbs-down
        this.classList.toggle("fa-thumbs-down");
    });
</script>

Mình đã giải thích rất kỹ bằng ghi chú, các bạn có thể xem để hiểu rõ hơn.

Vậy là xong rồi, các bạn chạy file index.html để xem thành quả.

4. Lời kết

Trong bài này mình đã hướng dẫn các bạn tạo một Toggle Like và Dislike đơn giản với HTML, CSS và Javascript, hi vọng nó sẽ giúp bạn có thêm lựa chọn cho website của mình. Hẹn gặp lại các bạn trong các bài viết tiếp theo trên freetuts.net.

Tham khảo: w3schools.com

-------------------#####-------------------

Khóa học nên xem

Nguồn: freetuts.net