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.
- π 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
- π 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
- π¨ Modern gradient color scheme
- π« Smooth animations and transitions
- π Glass-morphism effects
- π± Fully responsive design
- π― Interactive priority selection
- β¨ Subtle hover effects and feedback
-
Clone the repository:
git clone https://github.com/yourusername/modern-todo-app.git
-
Open the project:
cd modern-todo-app -
Launch the app:
- Simply open
index.htmlin your web browser - Or use a local server:
Then visit
python -m http.server 8000
http://localhost:8000
- Simply open
- Type your task in the input field at the top
- Press Enter or click the + button to add the task
- Click on the task to edit its details
- Click on a task to open the details panel
- Choose from three priority levels:
- π’ Easy (Green)
- π‘ Medium (Yellow)
- π΄ Hard (Red)
- 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
- HTML5
- CSS3
- Vanilla JavaScript
- CSS Custom Properties for theming
- Local Storage for data persistence
- Drag and Drop API
- CSS Animations and Transitions
- Responsive Design
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
The app is fully responsive and works great on:
- π» Desktop
- π± Mobile devices
- π± Tablets
- π» Different screen sizes
Contributions are welcome! Feel free to:
- Fork the repository
- Create a new branch
- Make your changes
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
- Font Awesome for icons
- Google Fonts for Poppins font
- Inspiration from modern web design trends
/* Primary Colors */
- Primary Pink: #FF3B9A
- Secondary Purple: #8B3DFF
- Success Green: #22C55E
- Warning Yellow: #F59E0B
- Danger Red: #EF4444- 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]
