✨ Task Master - Modern Todo List Application

A beautiful and modern todo list application built with React, featuring a stunning UI with glassmorphism design and dynamic backgrounds. This application helps you manage your tasks with style while providing essential functionality for day-to-day task management.

🌟 Features

• Beautiful Modern UI

  • Glassmorphism design
  • Dynamic animated background
  • Smooth transitions and animations
  • Responsive layout for all devices

• Task Management

  • Add, edit, and delete tasks
  • Mark tasks as complete
  • Set priority levels (Low, Medium, High)
  • Add time for tasks
  • Persistent storage using localStorage

• Visual Priority System

  • Color-coded priority levels
  • Visual indicators for task status
  • Neon glow effects for better visibility

🚀 Getting Started

Prerequisites

• Node.js (version 14.0.0 or higher)
• npm (comes with Node.js)

Installation

1. Clone the repository:

git clone https://github.com/yourusername/task-master.git

2. Navigate to the project directory:

cd task-master

3. Install dependencies:

npm install

4. Start the development server:

npm start

5. Open your browser and visit:

http://localhost:3000

🎨 Technologies Used

• React 18
• CSS3 with modern features
• React Icons
• Local Storage for data persistence

🛠️ Project Structure

task-master/
├── src/
│   ├── components/
│   │   ├── TodoForm.js
│   │   └── TodoList.js
│   ├── App.js
│   ├── App.css
│   └── index.js
├── public/
│   └── index.html
└── package.json

💡 Usage

1. Adding a Task

   • Type your task in the input field
   • Select priority level (Low/Medium/High)
   • Set time (optional)
   • Click "Add Task" button

2. Editing a Task

   • Click the edit icon on any task
   • Modify the task details
   • Click "Update" to save changes

3. Completing a Task

   • Click on the task to mark it as complete
   • Click again to mark as incomplete

4. Deleting a Task

   • Click the delete icon to remove the task

🎯 Key Features Explained

• Priority System: Tasks are color-coded based on priority levels

  • Low Priority: Green
  • Medium Priority: Yellow
  • High Priority: Red

• Time Management: Add specific times to tasks for better scheduling

• Persistent Storage: All tasks are automatically saved to your browser's local storage

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

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

🙏 Acknowledgments

• Design inspired by modern UI/UX trends
• Built with React and modern web technologies
• Icons provided by React Icons

---

Made with ❤️ by Aakash