Mã đề C - Lần 2

Đề bài: Bảng theo dõi lịch tập luyện

Xây dựng lại danh sách buổi tập dưới dạng thẻ card, đáp ứng đủ các yêu cầu sau:

  1. Mỗi mục hiển thị dưới dạng 1 thẻ card có nhiều thông tin (tiêu đề, mô tả, trạng thái); dữ liệu nguồn là 1 mảng các object trong JavaScript.
  2. Dùng innerHTML để dựng cấu trúc HTML của card, và textContent cho các phần chỉ hiển thị chữ thuần; kèm comment giải thích vì sao chọn từng cách.
  3. Dùng classList để phân loại trạng thái các mục (ví dụ: Chưa bắt đầu / Đang thực hiện / Hoàn thành) bằng các class CSS tự thiết kế.
  4. Dùng thuộc tính style để thay đổi trực tiếp ít nhất 2 thuộc tính CSS cho các mục được đánh dấu ưu tiên; kèm comment so sánh với cách dùng classList.
  5. Bổ sung chế độ giao diện sáng và tối bằng cách thêm/bớt class ở phần tử gốc (thẻ body) khi bấm nút chuyển chế độ.

Kết quả mong đợi tương tự hình minh họa dưới đây (xem file dapan.html để đối chiếu chi tiết):

Ràng buộc cấu trúc riêng cho mã đề C

Section có header riêng: Dùng một section có header con riêng, trong đó header chứa tiêu đề ngắn và đoạn mô tả. Không thay ràng buộc này bằng cấu trúc của mã đề khác.

Ảnh chụp minh họa kết quả bài Bảng theo dõi lịch tập luyện