This To-Do List application is a learning project designed to help users manage their daily tasks effectively. Built with React, it allows users to add, edit, and delete tasks, while persisting the task list using localStorage. The project aims to provide a hands-on experience with React state management, effect hooks, and local storage integration, making it a valuable educational tool for aspiring web developers.
Add Tasks: Quickly add new tasks to your to-do list. Edit Tasks: Modify existing tasks without removing them from the list. Delete Tasks: Remove tasks that are no longer needed. Toggle Completion: Mark tasks as completed or incomplete. Persist Data: Tasks are saved in localStorage, ensuring they persist across browser sessions.
- React
- JavaScript (ES6+)
- HTML5
- CSS3
- uuid (for unique task IDs)
Prerequisites
- Node.js (version 14 or later)
- npm (version 6 or later)
- Clone the repository
/~https://github.com/EpicNesh26/React---To-Do-App.git
- Navigate to the project directory:
cd todo-list-app
- Install the dependencies: {install the dependencies shown in package-lock.json}
npm install
- Start the development server:
npm run dev
- Open your browser and navigate to:
http://localhost:5173
To create a production build of the application, run:
npm run build
- Adding a Task: Enter a task in the input field and click "Add To-Do".
- Editing a Task: Click the "Edit" button next to a task, modify the task in the input field, and click "Update To-Do".
- Deleting a Task: Click the "Delete" button next to a task to remove it from the list.
- Toggling Task Completion: Click the checkbox next to a task to mark it as completed or incomplete.
Contributions are welcome! If you have any suggestions or improvements, please create an issue or submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
This project was created as a learning exercise to practice React development, state management, and localStorage integration.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh