Mã đề A: Quản lý danh bạ liên hệ

Yêu cầu

• Xây dựng ứng dụng web hoàn chỉnh gồm ít nhất 2 trang (index.html và gopy.html), đặt trong cấu trúc thư mục nhiều cấp (assets/ chứa CSS và JavaScript dùng chung).
• Bố cục dựng bằng Flexbox, giao diện thống nhất bằng CSS dùng chung cho mọi trang, không dùng CSS Grid.
• Trang chủ có form thêm liên hệ với 6 trường thuộc nhiều loại input khác nhau, đầy đủ label chuẩn accessibility (buổi 5).
• Bắt sự kiện submit bằng addEventListener, dùng preventDefault, kiểm tra hợp lệ tối thiểu 3 điều kiện:
•   - Họ và tên không được để trống.
•   - Số điện thoại phải có ít nhất 9 chữ số.
•   - Email nếu có phải đúng định dạng.
• Dữ liệu hợp lệ được thêm vào mảng và hiển thị lại thành bảng bằng vòng lặp (buổi 10, 11).
• Cho phép xoá từng bản ghi khỏi danh sách và cập nhật lại giao diện ngay lập tức.
• Có 1 chỗ dùng switch (buổi 9) để phân loại theo nhóm liên hệ, hiển thị thành nhãn trong bảng.
• Có 1 khu vực thống kê (tinhThongKeDanhBa()) tính bằng hàm trả về giá trị (buổi 11).
• Trang gopy.html có form nhập liệu riêng, cũng xử lý đầy đủ theo đúng quy trình trên.
• Toàn bộ mã JavaScript tổ chức thành Arrow Function, mỗi hàm một nhiệm vụ, tách bạch hàm xử lý dữ liệu (assets/data.js) với hàm hiển thị và sự kiện (assets/app.js).
• Nộp kèm tài liệu ngắn mô tả cấu trúc thư mục dự án, danh sách hàm và nhiệm vụ, luồng xử lý từ khi người dùng nhập tới khi dữ liệu hiển thị (xem comment Form Workflow đầu file assets/app.js trong đáp án).

Minh hoạ giao diện đáp án