Skip to content

Instantly share code, notes, and snippets.

@heartshare

heartshare/gist:4859fe61a186f525634c6483006f4ef0

Created May 30, 2025 05:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save heartshare/4859fe61a186f525634c6483006f4ef0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save heartshare/4859fe61a186f525634c6483006f4ef0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. heartshare created this gist May 30, 2025.
    33 changes: 33 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    Create a modern, responsive to-do list web application with the following specifications:

    1. Core Functionality:
    - Add, edit, delete, and mark tasks as complete
    - Categorize tasks with customizable labels, Color and emoji
    - Set due dates and priority levels
    - Filter and sort tasks by status, date, and category
    - Data persistence using local storage
    - Show statistics

    2. User Interface:
    - Implement a clean, minimalist design using modern CSS
    - Use a curated set of relevant emojis for task categories (📝 tasks, 🏠 home, 💼 work, 🏃‍♂️ health)
    - Include smooth animations for user interactions
    - Ensure responsive layout for mobile, tablet, and desktop screens
    - Use a modern color palette with proper contrast ratios

    3. Technical Requirements:
    - Write semantic HTML5 markup
    - Style with CSS Grid/Flexbox for responsive layouts
    - Implement mobile-first design principles
    - Add touch gestures for mobile users
    - Ensure accessibility standards (WCAG) compliance
    - Include loading states and error handling
    - Optimize performance for smooth interactions

    1. Additional Features:
    - Dark/light mode toggle
    - Task completion progress indicator
    - Drag-and-drop task reordering
    - Simple task statistics dashboard
    - Keyboard shortcuts for common actions
    - 使用真實的 UI 圖片，而非占位符圖片（可從 Unsplash、Pexels、Apple 官方 UI 資源中選擇）。