https://github.com/aayush259/todo-app-with-drag-drop-feature
A simple and interactive Todo App built with React, featuring drag-and-drop functionality, theme toggling, and persistent state using local storage.
https://github.com/aayush259/todo-app-with-drag-drop-feature
dnd-kit drag-and-drop javascript javascript-library react reactjs todoapp vite vite-react
Last synced: 7 months ago
JSON representation
A simple and interactive Todo App built with React, featuring drag-and-drop functionality, theme toggling, and persistent state using local storage.
- Host: GitHub
- URL: https://github.com/aayush259/todo-app-with-drag-drop-feature
- Owner: Aayush259
- Created: 2024-05-15T12:12:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-28T05:53:08.000Z (over 1 year ago)
- Last Synced: 2025-01-07T02:57:24.978Z (9 months ago)
- Topics: dnd-kit, drag-and-drop, javascript, javascript-library, react, reactjs, todoapp, vite, vite-react
- Language: JavaScript
- Homepage: https://aayush259.github.io/Todo-App-With-Drag-Drop-Feature/
- Size: 366 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Todo App
A simple and interactive Todo App built with React, featuring drag-and-drop functionality, theme toggling, and persistent state using local storage.
## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Components](#components)
- [Contributing](#contributing)
## Features
- **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.
## Installation
1. Clone the repository:
```bash
git clone https://github.com/Aayush259/Todo-App.git
```
2. Navigate to the project directory:
```bash
cd Todo-App
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
## Usage
- 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.
## Components
### App.jsx
The main component that initializes state, handles task operations, and renders the app.
### Header.jsx
A header component that contains the title and theme toggle button.
### AddTask.jsx
A component that contains the input field and button to add new tasks.
### TaskList.jsx
A component that displays the list of tasks, allows filtering, and handles task reordering.
### Task.jsx
A component that represents an individual task with buttons to mark as complete or remove the task.
## Contributing
Contributions are welcome! If you find any bugs or have suggestions for improvements, please open an issue and submit a pull request.