Modern Todo App 📝

A beautiful, feature-rich todo application with a modern UI, smooth animations, and powerful task management capabilities. Built with vanilla JavaScript and features a stunning dark/light theme.

✨ Features

Core Functionality

• 📋 Create, edit, and delete tasks
• 🎯 Set priority levels (Easy, Medium, Hard) with visual indicators
• 📅 Add deadlines to tasks
• ✅ Create subtasks for better task breakdown
• 📝 Add notes and additional details to tasks
• ⚡ Drag and drop tasks to reorder
• 💾 Automatic saving to localStorage

UI/UX Features

• 🌓 Dark/Light theme toggle with smooth transitions
• 🎨 Beautiful gradient colors and modern design
• ✨ Smooth animations and micro-interactions
• 🔔 Task deadline notifications
• ⏰ Real-time clock display
• 📊 Next task due countdown
• 🎯 Priority-based visual organization

Design Elements

• 🎨 Modern gradient color scheme
• 💫 Smooth animations and transitions
• 🌟 Glass-morphism effects
• 📱 Fully responsive design
• 🎯 Interactive priority selection
• ✨ Subtle hover effects and feedback

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/yourusername/modern-todo-app.git

2. Open the project:

   cd modern-todo-app

3. Launch the app:

   • Simply open index.html in your web browser
   • Or use a local server:

     python -m http.server 8000

     Then visit http://localhost:8000

💻 Usage

Creating Tasks

1. Type your task in the input field at the top
2. Press Enter or click the + button to add the task
3. Click on the task to edit its details

Setting Priority

• Click on a task to open the details panel
• Choose from three priority levels:
  • 🟢 Easy (Green)
  • 🟡 Medium (Yellow)
  • 🔴 Hard (Red)

Managing Tasks

• Drag and drop tasks to reorder them
• Add subtasks for better organization
• Set deadlines for time-sensitive tasks
• Add notes for additional context
• Toggle dark/light mode using the theme button

🛠️ Technical Details

Built With

• HTML5
• CSS3
• Vanilla JavaScript

Key Features Implementation

• CSS Custom Properties for theming
• Local Storage for data persistence
• Drag and Drop API
• CSS Animations and Transitions
• Responsive Design

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📱 Responsive Design

The app is fully responsive and works great on:

• 💻 Desktop
• 📱 Mobile devices
• 📱 Tablets
• 💻 Different screen sizes

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a new branch
3. Make your changes
4. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Font Awesome for icons
• Google Fonts for Poppins font
• Inspiration from modern web design trends

🎨 Color Scheme

/* Primary Colors */
- Primary Pink: #FF3B9A
- Secondary Purple: #8B3DFF
- Success Green: #22C55E
- Warning Yellow: #F59E0B
- Danger Red: #EF4444

🔄 Future Updates

• Task categories and tags
• Task search functionality
• Filter tasks by priority/date
• Export/Import tasks
• Task sharing capabilities
• Mobile app version

---

Made with ❤️ by [Your Name]