🚀 ApexTask: The Professional-Grade Vanilla JS Productivity Suite

Context

Develop a high-performance, responsive To-Do application built exclusively with HTML5, CSS3, and vanilla JavaScript. The application serves as a modern productivity tool that balances advanced task management features with a seamless, high-end user experience.

Objective

Create a comprehensive task management system featuring full CRUD operations, data persistence, and an intuitive UI. The goal is to provide a desktop-class experience in a web browser, ensuring tasks are organized, searchable, and visually prioritized.

Style

Modern, minimalist, and highly interactive. Utilize CSS Grid and Flexbox for sophisticated layouts. Implement "Glassmorphism" or "Neumorphism" elements where appropriate, ensuring subtle micro-interactions and smooth CSS transitions ($0.3s$ ease-in-out) for all state changes.

Tone

Efficient and organized. The interface should feel snappy and responsive, reflecting a tool designed for high productivity.

Audience

Power users and professionals who require a lightweight yet feature-rich task manager that works offline and respects system-level aesthetic preferences.

Response Requirements

• Core Functionality:
  • Full CRUD (Create, Read, Update, Delete) and task completion toggles.
  • HTML5 Drag and Drop API for manual task reordering.
  • localStorage integration for persistent data storage across sessions.
• Task Metadata:
  • Priority levels (Low/Medium/High) with distinct color-coding.
  • Category tags and a native date-picker for due dates.
• Advanced Features:
  • Real-time search bar and multi-criteria filtering (status, category, date range).
  • Browser-based reminder notifications for upcoming deadlines.
  • Dark/Light mode toggle with prefers-color-scheme detection.
• Technical Implementation:
  • Mobile-first responsive design using media queries and fluid units.
  • Vanilla JavaScript architecture (no frameworks).
  • Accessible UI with intuitive controls and high contrast ratios.