B3 Final Test Instruction

Đề bài: Xây dựng chức năng thêm/ đánh dấu/ xóa nhiệm vụ(Task) với những thông tin như sau:
Link dự án mẫu: https://app.bsd.education/share/o/buytd42h/
Link template https://app.bsd.education/sandbox/gmrdpuyb/

Gợi ý:
- Học viên sử dụng dự án “To Do List App” để tham khảo.

TRƯỚC KHI THI

> Click vào sandbox bên dưới:

> Đặt lại tên sandbox theo tên của mình kèm ngày thi:

> Chọn "submit your sandbox" sau khi hoàn thành bài thi!
SẢN PHẨM MẪU
Dưới đây là hình ảnh của sản phẩm đã hoàn chỉnh.

Bộ màu áp dụng

YÊU CẦU ĐỀ
Sử dụng bài sandbox đã cho và dựa vào sản phẩm mẫu, em hãy xây dựng các chức năng Thêm mới nhiệm
vụ(New Task) cho ứng dụng web, dữ liệu được lưu vào BSD db . Sản phẩm sau khi thêm mới sẽ được hiển thị
ở phần danh sách các nhiệm vụ. Mỗi nhiệm vụ có chức năng đánh dấu đã hoàn thành và chức năng xóa
nhiệm vụ

> Về thiết kế:

● Áp dụng các thẻ HTML và công cụ màu sắc để thể hiện chương trình hài hòa về màu sắc

> Về mặt nội dung:

● Các nội dung thể hiện rõ ràng, không bị che khuất

> Về mặt lập trình:

 ● Các câu lệnh đúng cú pháp
● Các tính năng hoạt động được

> Về mặt kỹ năng số:

● Áp dụng các kiến thức kĩ năng số đã học vào bài bao gồm: bánh xe màu sắc và nguyên lý về màu, kích
thước thành phần phù hợp, sự đồng bộ các yếu tố.

BẮT ĐẦU THI

Task 1 (20 điểm):
1. Khai báo các biến số ở file JS, tham chiếu đến các thành phần HTML như sau (Hình 01-1)

a. Biến số taskTitle tham chiếu đến thẻ HTML có id là taskTitle

b. Biến số taskDay tham chiếu đến thẻ HTML có id là taskDay
c. Biến số listDiv tham chiếu đến thẻ HTML có id là listDiv

Hình 01-1a

Hình 01-1b

Gợi ý: Sử dụng cú pháp document.getElementById()

2. Áp dụng bộ màu trong quá trình thiết kế sản phẩm để sản phẩm hài hòa màu sắc. Bộ màu có thể tự
tạo bằng các công cụ đã được tìm hiểu trong quá trình học tập hoặc sử dụng những bộ màu gợi ý
dưới đây: (Hình 01-2)
 a.
i. #DEE9FC ; #6395F2 ; #1258DC ; #0A337F ; #091834

b.
i. #F7F0D4 ; #FCCB1A ; #FEFE33 ; #B2D732 ; #2B3409

c.
i. #F7F7D4 ; #FEFE33 ; #8601AF ; #9214B8 ; #2A0934

d.
i. #E3F7D4 ; #66B032 ; #FC600A ; #0247FE ; #091534

Hình 1-2
Task 2 (20 điểm):
1. Phần JS, xây dựng hàm saveTask() có chức năng lưu thông tin của nhiệm vụ(Task) vào BSD db. Nếu
người dùng không nhập thông tin vào textbox thì không lưu dữ liệu, đồng thời có thông báo đến
người dùng. (Hình02-1)
2. Phần HTML & CSS
a. Khai báo cho button [Add Task] khi click vào (onclick) sẽ thực hiện hàm saveTask
b. Thiết lập kích thước và màu sắc cho button [Add Task] cân đối, hài hòa (Hình 02-2)

Gợi ý: cấu trúc của task object khi lưu vào BSD db:

let task = {

title: “<value>” ,

day: “<value>” ,

isDone: ""
 };

Lưu ý: Đến bước này, sau khi lưu dữ liệu được lưu các nhiệm vụ (Task ) vẫn chưa thể hiển thị lên danh sách.
Việc hiển thị lên danh sách sẽ được thực hiện ở nhiệm vụ sau.

Hình 02-1

Hình 02-2

Task 3 (20 điểm): (Hình 03)

Hàm singleTask() có chức năng tạo thẻ HTML thể hiện một nhiệm vụ(Task) đã được xây dựng sẵn.

1. Học sinh xây dựng hàm showAllTasks() có chức năng thể hiện tất cả nhiệm vụ đã lưu trong BSD db
lên danh sách.
2. Bổ sung gọi hàm showAllTasks() vào trong hàm saveTask() để hiển thị lại tất cả nhiệm vụ trong danh
sách sau khi đã lưu nhiệm vụ mới

Gợi ý: Sử dụng hàm db.listKeys() kết hợp hàm then(), forEach()

Hình 03

Task 4 (20 điểm): (Hình 04)

Xây dựng hàm deleteTask(key) có chức năng xóa nhiệm vụ (Task) dựa vào key.

Lưu ý: Hàm này được xây dựng mới và chưa được gọi để sử dụng, để sử dụng cần hoàn thành Task 5

Sau khi xóa dữ liệu, cần phải hiển thị lại danh sách nhiệm vụ

Hình 04

Task 5 (20 điểm):

1. Bổ sung thêm đoạn chương trình trong hàm singleTask(), đoạn chương trình có chức năng thêm nút
[Delete] cho mỗi nhiệm vụ(Task) được tạo (Hình 05-1)
Lưu ý: Sử dụng thẻ <a> để tạo button
2. Khi nút [Delete] được nhấn, sẽ gọi thực hiện hàm deleteTask(key) để xóa nhiệm vụ(Task).
3. Thiết lập kích thước cho checkbox có kích thước hợp lý. (Hình 05-3)
Hình 05-1

Hình 05-3

Lưu ý: Học sinh có thể nhờ giáo viên hướng dẫn hỗ trợ thêm nếu chưa rõ yêu cầu đề thi.

./