https://github.com/sharjeel-siddiqui12/todo-app-using-react
This project is a simple Todo App built using React. It allows users to create, update, and delete tasks in a user-friendly interface.
https://github.com/sharjeel-siddiqui12/todo-app-using-react
css css3 react react-router reactjs todo todo-list todolist vite
Last synced: 3 months ago
JSON representation
This project is a simple Todo App built using React. It allows users to create, update, and delete tasks in a user-friendly interface.
- Host: GitHub
- URL: https://github.com/sharjeel-siddiqui12/todo-app-using-react
- Owner: sharjeel-siddiqui12
- License: mit
- Created: 2024-08-12T12:44:21.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-30T21:35:46.000Z (almost 2 years ago)
- Last Synced: 2025-02-23T10:26:49.368Z (over 1 year ago)
- Topics: css, css3, react, react-router, reactjs, todo, todo-list, todolist, vite
- Language: JavaScript
- Homepage: https://todo-task-reactjs.netlify.app/
- Size: 317 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Todo App using React
This project is a simple Todo App built using React. It allows users to create, update, and delete tasks in a user-friendly interface.
## Features
- Create new tasks with a title and description.
- Mark tasks as completed or pending.
- Edit existing tasks to update their title or description.
- Delete tasks that are no longer needed.
- Filter tasks based on their completion status.
- Responsive design for seamless usage on different devices.
## Installation
To run this project locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/sharjeel-siddiqui12/todo-app-using-react.git
```
2. Navigate to the project directory:
```bash
cd todo-app-using-react
```
3. Install the dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
5. Open your browser and visit `http://localhost:5173/` to access the Todo App.
## Screenshots
## Usage
Once the Todo App is running, you can perform the following actions:
- **Create a new task**: Click on the "Add Task" button and fill in the required details.
- **Mark a task as completed**: Click on the checkbox next to the task.
- **Edit a task**: Click on the "Edit" button and modify the task's title or description.
- **Delete a task**: Click on the "Delete" button to remove a task from the list.
- **Filter tasks**: Use the filter options to display only completed or pending tasks.
## Technologies Used
- React: A JavaScript library for building user interfaces.
- HTML: Markup language for creating the structure of web pages.
- CSS: Styling language for designing the appearance of web pages.
## Contributing
Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.
## License
This project is licensed under the [MIT License](LICENSE).