#j2team_share #j2team_tutorial #WFH
Series thử thách 30Days thực chiến - 1/2 chặng đường
Dịch dã không biết ae DEV WFH sao r. Riêng mình thấy WFH tiện nhưng hơi tẻ nhạt quá.
Tiện đây mình xin chia sẻ lại 15 thử thách code giao diện với HTML CSS JS thuần, giúp ae luyện code vs giao lưu luôn.
**Update 10 thử thách gần nhất đến nay:**
Day 16: Tự thiết kế Animation trong 15 phút (8h Tối ngày 23/02/2022)
https://youtu.be/luI-NrSpm34
Day 15: Mock data là gì? Filter shop bán hàng siêu đơn giản
https://youtu.be/5T1SEvBqA-g
Day 14: Tự làm Carousel Animation, chẳng cần đến thư viện
https://youtu.be/fyAS7cFPJ7c
Day 13: Blob & base64 xử lý upload ảnh
https://youtu.be/SsoCQuwk-3Y
Day 12: Tư duy thiết kế slide range
https://youtu.be/b8AjydmGOpA
Day 11: Ứng dụng Animation thiết kế Notification
https://youtu.be/Z-SuiRYaPck
Day 10: Todolist kinh điển, dùng "this" cực dễ
https://youtu.be/iO7kgGgHr6w
Day 9: Hướng dẫn dùng API làm app thời tiết từ A-Z
https://youtu.be/ZKhOuR1UWh4
Day 8: Validate dữ liệu trong form
https://youtu.be/fRPCVBfD7hw
Day 7: Hiệu ứng gắn tags, chip
https://youtu.be/Cad_2CvAoQ8
P/S: Các bạn mới follow thử thách có thể theo dõi đầy đủ tại Playlist trên
https://www.youtube.com/channel/UCMfiIOjAzHZ9vyoqNdcPvNA
#30Dayschallengecode #30dayschallengecode_day7 #30dayschallengecode_day8
#30dayschallengecode_day9 #30dayschallengecode_day10 #30dayschallengecode_day11 #30dayschallengecode_day12
#30dayschallengecode_day13 #30dayschallengecode_day14 #30dayschallengecode_day15 #30dayschallengecode_day16
#j2team_share #j2team_tutorial
**Series thử thách 30Days thực chiến - Day 7**
Đã hơn 1 tuần trôi qua ae đã vượt qua thử thách thứ 7 chưa nhỉ.
Tuần này full video thử thách đến ngày 15 luôn nhé ae. Mọi người đón xem nhé
**Youtube**: https://youtu.be/Cad_2CvAoQ8
**DEMO**: https://www.nodemy.vn/projects/html-css-js/search-tags/
Được sử dụng: Search tags dùng để gắn thẻ phân loại các sản phẩm, bài viết một cách dễ dàng.
**Chi tiết thành phần và mục đích:**
Container: Nơi chứa tags list và input
Input: Nơi nhập tags mà người dùng muốn phân loại
Icon: Xoá tags
**Kiến thức sử dụng:**
Layout, Flex
Chèn Icon từ font-awesome
Event: Gắn sự kiện với addEventListener vs gắn sự kiện qua HTML
**Lưu ý**: Với các bài toán thêm DOM mới muốn DOM đó bắt sự kiện được chúng ta cần phần gắn sự kiến cho DOM vừa thêm. Một cách khác chúng ta có thể gắn sự kiện với attribute onclick trong template DOM vừa được thêm ( Cách thứ 2 sẽ đơn giản hơn, dễ làm hơn)
Mỗi ngày sẽ ra một video kèm phân tích về từng thử thách, mọi thắc mắc câu hỏi mọi người comment bên dưới sẽ đc đội nhóm bên mình hỗ trợ luôn nhé.
**Note**: Mọi người có thể tìm thông tin bài viết dễ dàng theo hashtag dưới đây(30dayschallengecode_day… mỗi day hashtag sẽ tăng dần từ 1-30 nhé)
#30Dayschallengecode #30dayschallengecode_day7