Todo App

A simple and responsive Todo application built with React. The application allows users to add, mark as complete, and delete tasks. This project is designed to help beginners understand the fundamentals of React state management and component-based architecture.

Features

Add Tasks: Users can add tasks with a custom input form.

Complete Tasks: Mark tasks as completed and toggle their status.

Delete Tasks: Remove tasks from the list.

Dynamic Styling: Completed tasks have a strikethrough effect.

Responsive Design: The app is designed to work on various screen sizes.

Components

TodoApp

The main component that holds the state for the list of tasks and renders the child components.

TodoForm

A form for adding new tasks. Contains an input field and a submit button.

TodoList

A list of tasks, each with options to mark as complete or delete.

Installation

Prerequisites

Node.js (v14 or higher)

npm or yarn package manager

Steps

Clone the repository:

git clone https://github.com/yourusername/todo-app.git

Navigate to the project directory:

cd todo-app

Install dependencies:

npm install

or

yarn install

Start the development server:

npm start

or

yarn start

Open your browser and navigate to:

http://localhost:3000

Usage

Add a Task: Enter a task in the input field and click the "Add" button.

Mark as Complete: Click the "Complete" button to toggle a task's status.

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

Code Overview

TodoApp.js

The main component that:

Manages the state for the tasks.

Provides addTask, deleteTask, and toggleComplete functions to child components.

TodoForm.js

The form component that:

Takes user input to add a new task.

Passes the task data to the addTask function in TodoApp.

TodoList.js

The list component that:

Displays the tasks.

Provides options to mark tasks as complete or delete them.

Folder Structure

src/ ├── components/ │ ├── TodoApp.js │ ├── TodoForm.js │ ├── TodoList.js ├── App.js ├── index.js

Customization

Styling: The app uses Tailwind CSS for styling. You can customize styles directly in the components or update the Tailwind configuration.

Icons: Use a library like react-icons to add custom icons to the buttons or tasks.

Dependencies

React

Tailwind CSS

License

This project is licensed under the MIT License. Feel free to use and modify it as you like.

Contributing

Contributions are welcome! Feel free to submit issues or pull requests to improve the app.

Contact

For questions or feedback, reach out to [email protected].