Đề bài: Ứng dụng vẽ bảng màu bằng bàn phím và chuột
Ngữ cảnh: Một lưới ô vuông (dùng Flexbox bọc dòng, không dùng CSS Grid), người dùng chọn màu rồi bấm vào từng ô để tô màu, có thể xóa toàn bộ bằng phím tắt.
Yêu cầu
- Có bảng chọn màu (nhiều nút màu), lưới ô để tô, nút "Xóa toàn bộ", nút "Tô ngẫu nhiên 1 ô", nút "Đổi màu ô cuối cùng vừa tô".
- Bổ sung xử lý cho tối thiểu 3 loại sự kiện khác ngoài click:
mouseover/mouseoutđể xem trước màu khi rê chuột qua ô (không tô thật, chỉ xem trước), vàkeydownđể bắt phím tắt. - Có 1 chức năng chỉ dùng được bằng bàn phím: nhấn phím Delete hoặc Backspace để xóa toàn bộ bảng màu ngay lập tức, không cần bấm nút.
- Toàn bộ hàm xử lý phải tách riêng khỏi phần gắn sự kiện, đặt tên hàm rõ nghĩa.
- Vẽ và nộp kèm sơ đồ event workflow của tối thiểu 2 tương tác trong bài (ví dụ: bấm 1 ô để tô màu và nhấn phím Delete để xóa toàn bộ). Xem ví dụ sơ đồ trong
dapan.html. - Giữ nguyên toàn bộ yêu cầu Lần 1: addEventListener cho mọi sự kiện, tối thiểu 5 nút chức năng, 1 phần tử có 2 hàm xử lý cho cùng sự kiện click, bộ đếm thao tác. Không dùng CSS Grid.
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ã đề G
Blockquote nhận xét: Thêm một nhận xét nổi bật bằng blockquote, sau đó có đoạn giải thích ngắn. Không thay ràng buộc này bằng cấu trúc của mã đề khác.