https://github.com/shyamg090/todo-react
This is a Todo-List project built using ReactJS and pure CSS. The project allows users to create, manage, and track their tasks in a simple and intuitive interface.
https://github.com/shyamg090/todo-react
react-hooks reactjs todolist
Last synced: 6 months ago
JSON representation
This is a Todo-List project built using ReactJS and pure CSS. The project allows users to create, manage, and track their tasks in a simple and intuitive interface.
- Host: GitHub
- URL: https://github.com/shyamg090/todo-react
- Owner: shyamg090
- Created: 2023-06-04T15:53:25.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-07-15T15:59:46.000Z (about 2 years ago)
- Last Synced: 2025-02-14T22:32:39.792Z (8 months ago)
- Topics: react-hooks, reactjs, todolist
- Language: JavaScript
- Homepage: https://todo-by-shyam.netlify.app/
- Size: 1.36 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Todo-List Project
This is a Todo-List project built using ReactJS and pure CSS. The project allows users to create, manage, and track their tasks in a simple and intuitive interface.
## Features
- **Task Creation**: Users can easily create new tasks by typing the task name and pressing Enter or clicking the "Add Task" button.
- **Task Management**: Each task in the list can be managed with the following actions:
- Marking a task as complete or incomplete
- Editing a task name
- Deleting a task
- **Persistence**: The project utilizes the browser's local storage to persist the task data. This means that even if the user refreshes the page or closes and reopens the browser, their tasks will be saved and restored.
## Installation
To run the Todo-List project locally, follow these steps:
1. Ensure you have Node.js and npm (Node Package Manager) installed on your machine.
2. Clone this repository to your local machine or download the ZIP file and extract it.
3. Open a terminal and navigate to the project's root directory.
4. Run the following command to install the project dependencies:
```
npm install
```
5. Once the installation is complete, start the development server by running the following command:
```
npm start
```
6. The project will now be running on `http://localhost:3000`. Open this URL in your web browser to access the Todo-List application.
## Usage
- To create a new task, type the task name in the input field at the top and press Enter or click the "Add Task" button.
- To edit a task name, double-click on the task name, make the desired changes, and press Enter to save the changes.
- To delete a task, click the delete icon (trash can) next to the task.
- The task data will be automatically saved in the browser's local storage, so you can close the application or refresh the page without losing your tasks.
## Technologies Used
The Todo-List project is built using the following technologies:
- ReactJS: A JavaScript library for building user interfaces. It provides a component-based architecture and helps in creating reusable UI components.
- CSS: Cascading Style Sheets is used for styling the user interface of the application.
- HTML: Hypertext Markup Language is used for creating the structure of the application.
- JavaScript: The programming language used for implementing the application logic and interactivity.
## Contributing
Contributions to the Todo-List project are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue on the project's GitHub repository.
## License
The Todo-List project is open-source and available under the [MIT License](https://opensource.org/licenses/MIT). Feel free to modify and use the code according to the terms of the license.