https://github.com/itssodope01/react-todo-app

This is a simple To-Do application developed using React. It demonstrates the use of React's function-based components and hooks to manage state and user interactions.
https://github.com/itssodope01/react-todo-app

Last synced: 6 days ago
JSON representation

This is a simple To-Do application developed using React. It demonstrates the use of React's function-based components and hooks to manage state and user interactions.

• Host: GitHub
• URL: https://github.com/itssodope01/react-todo-app
• Owner: itssodope01
• License: mit
• Created: 2024-07-22T15:26:33.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-07-24T22:44:37.000Z (4 months ago)
• Last Synced: 2024-07-25T20:39:50.424Z (4 months ago)
• Language: JavaScript
• Homepage: https://itssodope01.github.io/React-ToDo-APP/
• Size: 421 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# React To-Do App

**Deployed Application**: [React To-Do App](https://itssodope01.github.io/React-ToDo-APP/)

This is a simple To-Do application developed using React. It demonstrates the use of React's function-based components and hooks to manage state and user interactions.

## Table of Contents

* [Project Overview](#project-overview)

* [Features](#features)

* [Technologies Used](#technologies-used)

* [Usage](#usage)

* [Contributing](#contributing)

* [License](#license)

## Project Overview

The React To-Do App is a simple yet functional task management application that allows users to:

* Add new tasks to the list

* Edit tasks to the list

* Mark tasks as completed

* Pin tasks to the top of the list

* Move tasks up or down in the list

* Delete tasks from the list

* Reset the entire task list

The app leverages React's function-based components and state management using hooks such as `useState` and `useEffect` to create a responsive and interactive user experience.

## Features

* **Task Management**: Add, delete, edit, and reset tasks easily.

* **Task Completion**: Toggle tasks as completed.

* **Task Organization**: Move tasks up or down in the list.

* **Pinning Tasks**: Pin tasks to keep them at the top of the list.

* **Persistent Storage**: Tasks are saved in the browser's local storage to persist across page reloads.

## Technologies Used

* **React**: For building user interfaces and managing component states.

* **JavaScript (ES6+)**: For modern JavaScript features and functionality.

* **CSS**: For styling the application and creating a modern, user-friendly interface.

## Usage

* **Add a Task**: Enter a task in the input field and press `Enter` or click the "+" button.

* **Edit a Task**: Click on the edit button to edit any task on the list, you will be prompted to modify the task content. Press `Enter` to save edit.

* **Complete a Task**: Check the checkbox next to the task to mark it as completed.

* **Pin a Task**: Click the "Pin" button to move a task to the pinned area.

* **Move Tasks**: Use the "Up" and "Down" buttons to rearrange tasks.

* **Delete a Task**: Click the "Delete" button to remove a task from the list.

* **Reset List**: Click the "Reset List" button to clear all tasks.

## Contributing

Contributions to improve the React To-Do App are welcome. Please follow these steps to contribute:

1. Fork the repository

2. Create a new 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.md](LICENSE.md) file for details.