Todo List Application

A modern, responsive Todo List application built with React, featuring a beautiful UI, dark mode, and task management capabilities.

Features

• ✨ Modern UI Design

  • Clean and intuitive interface
  • Responsive layout for all devices
  • Dark mode support
  • Smooth animations and transitions

• 📝 Task Management

  • Add, edit, and delete tasks
  • Mark tasks as complete
  • Set task priorities (High, Medium, Low)
  • Add task descriptions and categories

• 📊 Progress Tracking

  • Visual progress bar
  • Task completion statistics
  • Real-time progress updates

• 🎨 Customization

  • Dark/Light theme toggle
  • Priority-based task styling
  • Custom checkbox design
  • Beautiful gradients and shadows

• 🔍 Task Organization

  • Filter tasks by status
  • Search functionality
  • Priority indicators
  • Category grouping

Tech Stack

• React
• CSS3 (with modern features)
• LocalStorage for data persistence
• Responsive Design
• Modern JavaScript (ES6+)

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/kanakver/Todo.git
cd Todo

2. Install dependencies:

npm install
# or
yarn install

3. Start the development server:

npm start
# or
yarn start

4. Open http://localhost:3000 to view it in your browser.

Usage

1. Adding Tasks

   • Click the "Add Task" button
   • Fill in the task details
   • Set priority and category
   • Click "Add" to save

2. Managing Tasks

   • Click the checkbox to mark as complete
   • Use the edit button to modify task details
   • Click delete to remove tasks
   • Use the filter options to organize tasks

3. Theme Toggle

   • Click the theme toggle button in the header
   • Switch between light and dark modes

Project Structure

src/
├── components/
│   ├── App.jsx
│   ├── Header.jsx
│   ├── TaskForm.jsx
│   ├── TaskList.jsx
│   ├── TaskItem.jsx
│   └── ProgressBar.jsx
├── App.css
└── index.css

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

• React Documentation
• Modern CSS features
• Open source community

Contact

Your Name - @yourtwitter

Project Link: https://github.com/kanakver/Todo