**Series thử thách 30Days thực chiến - Day 4 - Day 5** Tăng tốc chinh phục...

Tắt Quảng Cáo [X]

Đăng Nhập để ẩn Tất Cả Quảng Cáo

#j2team_share #j2team_tutorial #j2team_webdev

**Series thử thách 30Days thực chiến - Day 4 - Day 5**

Tăng tốc chinh phục 2 thử thách nào ae ơi:

## DAY 4: IMAGE GALLERY LÀ BỘ SƯU TẬP ĐỂ HIỂN THỊ HÌNH ẢNH CỦA BẠN TRÊN TRANG WEB. VIỆC ĐƯA NÓ VÀO TRANG WEB GIÚP LÀM NỔI BẬT CÁC SẢN PHẨM MỘT CÁCH SÁNG TẠO ĐỂ THU HÚT, GIỮ CHÂN KHÁCH HÀNG LÂU HƠN Ở TRANG CỦA BẠN.

**Youtube**:

**DEMO**: Vui lòng đăng kí hoặc đăng nhập để thấy liên kết tại BigMMO

**Chi tiết thành phần và mục đích:**

Container: Phân layout

List ảnh : (Ban đầu để kích thước nhỏ phù hợp với layout và để có thể hiện thị hết 8 ảnh. Mỗi ảnh khi cover vào sẽ được zoom ra. Khi ấn vào từng ảnh sẽ bật lên, hiện toàn bộ ảnh đó)

Gallery: (Có lớp phủ để làm mở phần nền ảnh và làm nổi bật phần ảnh chính. Giúp người xem không bị rối mắt)

Control: Giống như carousel có thể slide chuyển tiếp ảnh



**Kiến thức sử dụng:**

css tạo hiệu ứng zoom từng ảnh

JS toggle class.

JS logic xử lý next và prev ảnh.

## DAY 5: SEARCH THÌ TRANG NÀO CŨNG CẦN PHẢI SEARCH, THANH SEARCH QUÁ DÀI THÌ LẠI MẤT KHÔNG GIAN, VẬY HÃY CÙNG TẠO RA MỘT SEARCH BOX VỚI UI/UX TIỆN LỢI CHO NGƯỜI DÙNG NHÉ.

**Youtube**:

**DEMO**: Vui lòng đăng kí hoặc đăng nhập để thấy liên kết tại BigMMO

**Chi tiết thành phần và mục đích:**

Input: Mặc định sẽ ẩn, sẽ tự động tăng width khi người dùng ấn vào button icon kinh lúp

Icon: Đại diện hiển thị cho search box, bắt sự kiện khi người dùng ấn sẽ toggle thay đổi kích thước của search box

**Kiến thức sử dụng:**

css transition width

css position absolute + relative

JS toggle class.

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_day4 #30dayschallengecode_day5