https://github.com/saagor16/to-do-list-app
A simple and user-friendly To-Do List app built with React that allows users to manage their tasks efficiently. The app supports adding, editing, deleting tasks, and marking tasks as completed with a strikethrough effect. It also stores data in the browser's localStorage for persistence across page reloads.
https://github.com/saagor16/to-do-list-app
javascript react reacticon tailwindcss
Last synced: 9 months ago
JSON representation
A simple and user-friendly To-Do List app built with React that allows users to manage their tasks efficiently. The app supports adding, editing, deleting tasks, and marking tasks as completed with a strikethrough effect. It also stores data in the browser's localStorage for persistence across page reloads.
- Host: GitHub
- URL: https://github.com/saagor16/to-do-list-app
- Owner: saagor16
- Created: 2025-01-08T04:23:59.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-09T17:31:29.000Z (about 1 year ago)
- Last Synced: 2025-03-11T02:34:57.383Z (about 1 year ago)
- Topics: javascript, react, reacticon, tailwindcss
- Language: JavaScript
- Homepage: https://to-do-list-app-saagor16.netlify.app/
- Size: 64.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# To-Do List App
A simple and user-friendly To-Do List app built with React that allows users to manage their tasks efficiently. The app supports adding, editing, deleting tasks, and marking tasks as completed with a strikethrough effect. It also stores data in the browser's localStorage for persistence across page reloads.
## Features
- **Add Tasks**: Users can add new tasks to the to-do list.
- **Edit Tasks**: Existing tasks can be edited.
- **Delete Tasks**: Individual tasks can be deleted.
- **Mark as Completed**: Users can toggle a strikethrough effect to mark tasks as completed.
- **Persistent Data**: Data is stored in `localStorage` so it persists even after refreshing the page.
- **Clear All Tasks**: Option to remove all tasks at once.
## Technologies Used
- **React**: JavaScript library for building user interfaces.
- **Tailwind CSS**: Utility-first CSS framework for creating responsive and modern designs.
- **React Icons**: Icon library used for edit and delete buttons.
- **localStorage**: Browser's storage API used to persist tasks across sessions.
## Live Link
Check out the live demo of the app: [To-Do List App](https://to-do-list-app-saagor16.netlify.app/)
## Installation
1. Clone the repository:
```bash
git clone https://github.com/your-username/to-do-list-app.git
2. Navigate to the project folder:
```bash
cd to-do-list-app
3. Install dependencies:
```bash
npm install
4. Start the app:
```bash
npm start
Usage
Add Task: Type your task in the input field and click the + button to add it.
Edit Task: Click the edit icon to modify an existing task.
Delete Task: Click the delete icon to remove a task.
Mark as Completed: Click on a task to toggle the strikethrough effect.
Clear All: Click the Remove All button to delete all tasks at once.