Dùng để: Lên đặc tả và viết mã bảng theo dõi thời tiết nối API, có tìm kiếm, định vị và dự báo nhiều ngày.
Nội dung prompt
VAI TRÒ Bạn là lập trình viên web frontend, quen dựng giao diện bằng HTML, CSS và JavaScript thuần rồi nối API. NHIỆM VỤ Từ ĐẦU VÀO, viết đặc tả và mã cho bảng theo dõi thời tiết chạy trên trình duyệt. ĐẦU VÀO - Nguồn dữ liệu: [TÊN API VÀ CÁCH LẤY KHOÁ] - Đơn vị mặc định: [ĐƠN VỊ, VÍ DỤ độ C] - Thành phố mặc định: [THÀNH PHỐ, VÍ DỤ Hà Nội] - Số ngày dự báo: [SỐ, VÍ DỤ 5] - Ngôn ngữ hiển thị: [NGÔN NGỮ, VÍ DỤ tiếng Việt] QUY TẮC 1. Hiển thị thời tiết hiện tại với biểu tượng và nền đổi màu theo điều kiện và thời điểm trong ngày. 2. Có dự báo nhiều ngày, mở rộng được chi tiết theo giờ. 3. Ô tìm kiếm có gợi ý và lưu lịch sử tìm gần đây. 4. Có nút dùng vị trí hiện tại và nút đổi đơn vị nhiệt độ. 5. Hiển thị gió, độ ẩm, áp suất và cảnh báo thời tiết nguy hiểm nếu có. 6. Bố cục dùng CSS Grid, co giãn tốt trên điện thoại. 7. Xử lý lỗi khi gọi API thất bại, không để màn hình trắng. 8. Không lưu khoá API trong mã công khai. KHUÔN ĐẦU RA 1. Đặc tả tính năng ngắn. 2. Cấu trúc tệp và giải thích từng phần. 3. Mã HTML, CSS, JavaScript đầy đủ. 4. Ghi chú cách chạy và cách thay khoá API.
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Phần nền đổi màu theo thời tiết là thứ tạo ấn tượng, nên hãy yêu cầu bảng màu riêng cho ngày, đêm và trời mưa. Nếu API trả về ít dữ liệu, hãy che phần trống thay vì hiển thị số rỗng. Khi cần thêm chất lượng không khí, thêm một trường vào phần đầu vào rồi chạy lại. Nhớ kiểm tra cách xử lý khi mất mạng để giao diện không bị đơ.
Prompt khác cùng nhóm
Dựng ứng dụng web tạo avatar cá nhân hóaNêu các phong cách và trường mô tả, nhận về mã ứng dụng web tạo avatar với lưới kết quả và lịch sử lưu trên máy.Xem promptTư vấn di chuyển hệ thống lên AWSMô tả hệ thống hiện tại, nhận về phương án di chuyển lên AWS, điểm cần cân nhắc và thứ tự thực hiện.Xem promptĐóng vai chuyên gia lập trình Swift và iOSNêu đoạn mã và mục tiêu, nhận về hướng dẫn Swift hiện đại, SwiftUI và xử lý bất đồng bộ theo chuẩn của Apple.Xem promptDựng trang HTML hiện lời nhắn khi nhấp chuộtĐiền lời nhắn và tông màu, nhận về một tệp HTML nhẹ, nhấp vào màn hình là hiện thông điệp.Xem promptThiết kế hệ thống nhiều tác nhân AINêu bài toán và các vai trò, nhận về sơ đồ hệ thống nhiều tác nhân, cách nhớ ngữ cảnh và hàng rào an toàn.Xem promptViết Bash script tự động hóa chuẩn chuyên nghiệpMô tả công việc cần tự động, nhận về Bash script có xử lý lỗi, tô màu đầu ra và cờ trợ giúp đầy đủ.Xem promptDựng ứng dụng web nhật ký và phản hồi bản thânMô tả lĩnh vực và giọng phản hồi, nhận về đặc tả ứng dụng web ghi nhật ký ngày và nhận lại lời nhận xét cá nhân.Xem promptThiết kế hệ thống điều hướng cho ứng dụng di độngMô tả ứng dụng và số màn hình, nhận về phương án điều hướng dễ hiểu kèm lý do và các điểm cần kiểm thử.Xem promptĐóng vai kiến trúc sư kỹ thuật di động Native và CloudNêu bài toán ứng dụng di động, nhận về phương án kiến trúc Native kết hợp Cloud chạy tốt cả khi mất mạng.Xem prompt