Skip to content

Latest commit

 

History

History
86 lines (66 loc) · 2.05 KB

README.md

File metadata and controls

86 lines (66 loc) · 2.05 KB
Raw

Dynamic Todo List

This is a Dynamic Todo List application built with React. The application allows users to manage tasks by dragging and dropping cards between columns: TODO, IN PROGRESS, and COMPLETED. The application also features a "burn barrel" for deleting tasks.

Table of Contents

Features

  • Drag and drop cards between columns
  • Add new tasks
  • Delete tasks by dragging to the burn barrel
  • Responsive design

Installation

  1. Clone the repository:

    git clone <repository-url>
cd dynamic-todo-list

  2. Install the dependencies:

    npm install

Usage

  1. Start the application:

    npm start

  2. Open your browser and navigate to http://localhost:3000 to see the application in action.

Folder Structure

Dynamic ToDo List/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── AddCard.js
│   │   ├── Board.js
│   │   ├── BurnBarrel.js
│   │   ├── Card.js
│   │   ├── Column.js
│   │   ├── DropIndicator.js
│   │   └── DynamicTodo.js
│   ├── styles/
│   │   └── index.css
│   ├── utils/
│   │   └── constants.js
│   ├── App.js
│   ├── index.js
│   └── index.css
├── .gitignore
├── package.json
└── README.md

Components

  • AddCard.js: Component to add a new card to the TODO column.
  • Board.js: Main board component that holds the columns.
  • BurnBarrel.js: Component to delete cards.
  • Card.js: Individual card component.
  • Column.js: Column component that holds cards.
  • DropIndicator.js: Indicator to show where cards can be dropped.
  • DynamicTodo.js: Main Todo board wrapper component.

Utilities

  • constants.js: File to store default card data and other constants.

Styles

  • index.css: Custom styles for the TODO application.