Mã đề E - Lần 2

Đề bài: Ứng dụng đếm giờ tập trung có phím tắt

Ngữ cảnh: Bộ đếm ngược thời gian tập trung học tập (kiểu Pomodoro đơn giản), điều khiển bằng nút bấm và phím tắt trên bàn phím.

Yêu cầu

  1. Có nút "Bắt đầu", "Tạm dừng", "Tiếp tục", "Đặt lại", "Cộng thêm 1 phút", đồng hồ đếm ngược hiển thị phút:giây.
  2. Bổ sung xử lý cho tối thiểu 3 loại sự kiện khác ngoài click: mouseover/mouseout để hiện/ẩn chú thích khi rê chuột vào các nút, và keydown để bắt phím tắt Space (tạm dừng/tiếp tục).
  3. Có 1 chức năng chỉ dùng được bằng bàn phím: nhấn phím Space để tạm dừng hoặc tiếp tục đếm giờ (không có nút "Space" trên giao diện, chỉ có phím tắt).
  4. 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.
  5. 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 nút Bắt đầu và nhấn phím Space). Xem ví dụ sơ đồ trong dapan.html.
  6. 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.

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ã đề E

Article quy trình ba bước: Thêm một article mô tả quy trình ba bước bằng danh sách đánh số. 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 Ứng dụng đếm giờ tập trung có phím tắt