← Quay lại mục lục

Bài 17 — Comment + Rating 5 sao

Form đánh giá với star rating + comment 10-500 ký tự + char counter + submit disable logic.

Trung bình #rating #comment #star #boundary #character-limit

⭐ Bài 17: Comment + Rating 5 sao

Form đánh giá sản phẩm với rating sao và comment text. Bài tập về boundary, character limit, state interaction.

📋 Bảng đặc tả

#	Tên	Loại	Bắt buộc	Mô tả
1	Rating	5 stars (click)	Yes	1–5 sao, click để chọn, click lại sao đã chọn để bỏ chọn
2	Comment	Textarea	Yes	10–500 ký tự (sau trim)
3	Char counter	Auto	—	Hiển thị "X / 500"; warning > 450, error > 500
4	Submit	Button	—	Disabled cho đến khi rating + comment hợp lệ

📝 Message expected

Trường hợp	Message
Rating chưa chọn	`Please select a rating`
Comment < 10 ký tự	`Comment must be at least 10 characters`
Comment > 500 ký tự	`Comment must not exceed 500 characters`
Submit thành công	`Review submitted! Rating: N stars`

🎯 Yêu cầu

Test rating: hover preview, click select, click lại deselect, drag không xảy ra (chỉ click).
Test comment boundary: 9/10/500/501 ký tự.
Test char counter: chính xác đếm ký tự (kể cả space, emoji, Unicode tiếng Việt).
Test Submit button: enable/disable theo trạng thái form.
Test các edge case: rating 0 (chưa chọn), 6 (vượt boundary), comment chỉ space.

⚠️ Bug được cài cắm: rating state, char counter logic, submit button disable logic, trim handling.

⭐ Comment + Rating

Test star rating, character counter (10-500), submit disable logic.

Rate this product

Đăng nhập để thực hành

Form thực hành chỉ dành cho học viên đã đăng nhập.

🔐

Vui lòng đăng nhập để nộp bài.

Đăng nhập

🔐

Tab dành cho giảng viên

Tab này chứa danh sách các lỗi đã cài cắm trong form. Vui lòng nhập mã giảng viên để mở khóa. Mã sẽ ghi nhớ trong phiên làm việc — chỉ cần nhập 1 lần cho cả 3 bài.