React Todo App ✅

A simple and elegant Todo application built with React that helps you manage your daily tasks efficiently.

Features

• ✨ Add Tasks - Quickly add new todos to your list
• ✅ Mark Complete - Toggle task completion status
• ✏️ Edit Tasks - Update existing todos
• 🗑️ Delete Tasks - Remove tasks you no longer need
• 🎯 Real-time Updates - Instant UI updates
• 📱 Responsive Design - Works on all devices

Technologies Used

• React - Frontend framework
• React Icons - Beautiful icons
• CSS3 - Styling
• React Hooks - State management

Installation

1. Clone the repository:

git clone https://github.com/your-username/react-todo-app.git

2. Navigate to the project directory:

cd react-todo-app

3. Install dependencies:

npm install

4. Start the development server:

npm start

5. Open http://localhost:3000 to view it in the browser.

Usage

1. Adding a Todo: Type your task in the input field and click "ADD"
2. Completing a Todo: Click the checkmark icon to mark as complete
3. Editing a Todo: Click the edit icon to modify an existing task
4. Deleting a Todo: Click the delete icon to remove a task

Project Structure

src/
├── Todo.jsx          # Main Todo component
├── Todo.css          # Styling for the Todo component
└── ...

Key Features Explained

• useState Hook: Manages todo list state and form inputs
• useEffect Hook: Handles input focus management
• useRef Hook: Direct DOM access for input focusing
• Array Methods: Uses map, filter for state updates

Contributing

Feel free to fork this project and submit pull requests for any improvements.

License

This project is open source and available under the MIT License.