#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