Home

ToDo List React JS Project

Home

Welcome to the ToDo List ReactJS Project Wiki! This project is a simple, yet powerful task management application built using ReactJS. It allows you to add tasks with descriptions, mark them as completed, view completed tasks, and delete tasks.

Table of Contents

• Overview
• Installation
• Usage
• Features
• Component
• Contributing

Overview

The ToDo List project is designed to help users manage their tasks efficiently. Users can add new tasks with descriptions, mark tasks as completed, view a list of completed tasks, and delete tasks. The project demonstrates the use of ReactJS for building interactive user interfaces.

Installation

Follow these steps to get the project up and running on your local machine.

Prerequisites

• Node.js (>=12.x)
• npm (>=6.x) or yarn (>=1.x)

Steps

1. Clone the repository

git clone https://github.com/Kshitij-Raj-01/TodoList-ReactJs.git
cd TodoList-ReactJs

2. Install dependencies

npm install
# or
yarn install

3. Start the development server

npm start
# or
yarn start

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

Usage

Adding a Task

1. Enter the task title and description in the input fields.
2. Click the "Add" button.

Completing a Task

1. Click the checkbox next to the task title.
2. The task will be moved to the "Completed Tasks" section.

Viewing Completed Tasks

• Navigate to the "Completed Tasks" page to view all tasks marked as completed.

Deleting a Task

• Click the delete icon (🗑️) next to the task title to remove the task.

Features

• Add Tasks: Add new tasks with titles and descriptions.
• Complete Tasks: Mark tasks as completed.
• View Completed Tasks: View a list of all completed tasks.
• Delete Tasks: Remove tasks from the list.

Components

TaskInput

• Description: Component for adding new tasks.
• Props:
• handleAddTodo (Array): Function to call for add the new tasks.

TaskList

• Description: Component for displaying the list of tasks.
• Props:
• allTodos (Array): List of tasks to display.
• handleCompleteTodo (Function): Function to call when a task is completed.
• handleDeleteTodo (Function): Function to call when a task is deleted.

TaskItem

• Description: Component for displaying a single task.
• Props:
• handleCompleteTodo (Function): Function to call when the task is completed.
• handleDeleteTodo (Function): Function to call when the task is deleted.

CompletedTasks

• Description: Component for displaying completed tasks.
• Props:
• completedTodos (Array): List of completed tasks.

Contributing

We welcome contributions to the project. Please follow these steps to contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes.
4. Commit your changes (git commit -m 'Add some feature').
5. Push to the branch (git push origin feature-branch).
6. Create a new Pull Request.