Skip to content

AKR4PC/ToDoWeb

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

11 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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.

Todo App Preview

✨ 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]

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published