Mã đề A - Lần 2

Đề bài: Ứng dụng ghi chú nhanh có phím tắt

Ngữ cảnh: Kế thừa toàn bộ yêu cầu Lần 1 (mã đề A - Bài trắc nghiệm) về addEventListener, tối thiểu 5 nút, bộ đếm thao tác. Chủ đề mới: ứng dụng ghi chú nhanh dùng phím tắt để lưu ghi chú.

Yêu cầu

  1. Có ô nhập nội dung ghi chú, nút "Lưu ghi chú", nút "Xóa ghi chú cuối", nút "Xóa toàn bộ", danh sách ghi chú đã lưu hiển thị bằng vòng lặp.
  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 hướng dẫn khi rê chuột vào các nút chức năng, và keydown để bắt phím tắt.
  3. Có 1 chức năng chỉ dùng được bằng bàn phím: khi đang gõ trong ô nhập, nhấn tổ hợp Ctrl + Enter để lưu ghi chú ngay mà không cần bấm nú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 (ví dụ luuGhiChu, xuLyPhimTat).
  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 Lưu và bấm phím tắt Ctrl+Enter), từ hành động người dùng đến khi giao diện cập nhật. 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ã đề A

Khối điểm nhấn đứng trước danh sách chính: Đặt một khối điểm nhấn/featured ở đầu vùng nội dung, trước danh sách hoặc bảng chính. 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 ghi chú nhanh có phím tắt