Easy Prompt
代码能力代码进阶

创建响应式待办事项应用

使用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

登录后评论

相关提示词