创建响应式待办事项应用
使用HTML5、CSS3和vanilla JavaScript构建一个功能齐全的待办事项应用,涵盖完整的CRUD操作、分类、优先级、截止日期、提醒、本地存储、搜索、拖放排序、主题切换及响应式设计。
提示词正文
复制后可直接粘贴到模型或内部评测工具。
Create a responsive todo app with HTML5, CSS3 and vanilla JavaScript. The app should have a modern, clean UI using CSS Grid/Flexbox with intuitive controls. Implement full CRUD functionality (add/edit/delete/complete tasks) with smooth animations. Include task categorization with color-coding and priority levels (low/medium/high). Add due dates with a date-picker component and reminder notifications. Use localStorage for data persistence between sessions. Implement search functionality with filters for status, category, and date range. Add drag and drop reordering of tasks using the HTML5 Drag and Drop API. Ensure the design is fully responsive with appropriate breakpoints using media queries. Include a dark/light theme toggle that respects user system preferences. Add subtle micro-interactions and transitions for better UX.
使用场景
参考输出
一个可交互的待办事项单页应用,支持增删改查、拖放排序、分类、优先级、截止日期、搜索过滤、明暗主题切换以及响应式布局。
评分维度
1. 功能完整性:是否实现全部CRUD操作? 2. 拖放排序:拖放是否流畅且准确? 3. 搜索过滤:是否支持多维过滤? 4. 响应式设计:是否在不同屏幕下表现良好? 5. 主题切换:是否尊重系统偏好? 6. 用户体验:微交互和动画是否自然?
试用与模板
填写变量后复制,或保存到个人工作台模板。
这个模板没有变量,可直接复制使用。
用户评分
0 个评分你的评分
登录后评分
评论
0登录后评论
相关提示词
个人资料 / 头像 - 2000 年代初网吧情侣网络摄像头照片
用于生成低分辨率、抓拍风格的网络摄像头照片的提示词,展现一对情侣在 2000 年代初网吧的场景,捕捉怀旧的美学细节。
个人资料 / 头像 - 复古医院护士 Cosplay 提示词
用于生成逼真复古医院护士 Cosplay 肖像的详细提示词,包含特定的服装、场景和灯光说明。