Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Các sự kiện (Event) trong Javascript 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Hàm array map() trong Javascript 
Các cách khai báo biến trong Javascript 
Bắt sự kiện click trong Javascript 
Function trong Javascript - cách tạo hàm và gọi hàm trong JS 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 
Thẻ Table trong HTML (colspan, rowspan, cellpadding và cellspacing) Hướng dẫn tạo Toggle Like and Dislike
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:
<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.
Bài viết này được đăng tại [free tuts .net]
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:
<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:
.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:
<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
Danh sách file tải về
| Tên file tải về | Pass giải nén |
|---|---|
| Download font awesome | freetuts.net hoặc gameportable.net |
