Todo App

Table of Contents

• Introduction
• Features
• Technologies Used
• Installation
• Usage
• Components
• Contributing
• License

Introduction

The Todo App is a simple yet powerful tool to help you manage your daily tasks efficiently. Built using React, this app allows users to add, edit, delete, and mark tasks as complete. It also includes features to handle tasks with specific dates.

Features

• Add new tasks
• Edit existing tasks
• Delete tasks
• Mark tasks as complete
• Task date handling

Technologies Used

• Frontend:
  • React.js
  • JavaScript/TypeScript
  • HTML5
  • CSS3
• Tools:
  • Visual Studio Code
  • GitHub

Front View

Installation

To run this project locally, follow these steps:

1. Clone the repository

   git clone https://github.com/kush-sahu/Todo-App-React.js/

2. Navigate to the project directory

   cd todo-app

3. Install the dependencies

npm install

4. Start the development server

npm run dev

Usage Once the development server is running, you can access the app at http://localhost:3000.

Adding a Task Enter the task name and optional date in the input fields. Click the "Add Task" button to add the task to your list. Editing a Task Click on the task you want to edit. Modify the task details in the input fields. Click the "Save" button to update the task. Deleting a Task Click the "Delete" button next to the task you want to remove. Marking a Task as Complete Click the checkbox next to the task to mark it as complete. Components The app is structured with the following key components:

TaskList: Displays the list of tasks. Task: Represents a single task item with options to edit, delete, and mark as complete. TaskForm: A form for adding and editing tasks.

Contributing Contributions are welcome! If you have any suggestions or find any issues, please open an issue or submit a pull request.