A simple and interactive Todo App built with React, featuring drag-and-drop functionality, theme toggling, and persistent state using local storage.
- Add Tasks: Easily add new tasks to your list.
- Remove Tasks: Remove individual tasks.
- Update Task Status: Mark tasks as complete.
- Clear Completed Tasks: Remove all completed tasks with a single click.
- Drag-and-Drop: Reorder tasks using drag-and-drop.
- Persistent State: Save tasks and theme settings to local storage.
- Theme Toggling: Switch between light and dark themes.
-
Clone the repository:
git clone https://github.com/Aayush259/Todo-App.git
-
Navigate to the project directory:
cd Todo-App -
Install dependencies:
npm install
-
Start the development server:
npm run dev
- Use input field to add new tasks.
- Click on the circle next to a task to mark it as complete.
- Click on the cross icon to remove that particular task.
- Click on Active to see all the active/incomplete tasks.
- Click on Completed to see all the completed tasks.
- Click on All to see all the tasks.
- Click on Clear Completed to remove all the completed tasks.
- Drag and drop to reorder the tasks.
- Use the theme toggle button in the header to switch between light and dark modes.
The main component that initializes state, handles task operations, and renders the app.
A header component that contains the title and theme toggle button.
A component that contains the input field and button to add new tasks.
A component that displays the list of tasks, allows filtering, and handles task reordering.
A component that represents an individual task with buttons to mark as complete or remove the task.
Contributions are welcome! If you find any bugs or have suggestions for improvements, please open an issue and submit a pull request.