📋 Kanban Board

A simple and intuitive Kanban Board application built with vanilla JavaScript, HTML, and CSS. Manage your tasks efficiently by organizing them into different workflow stages.

✨ Features

• Task Management: Create, view, and delete tasks
• Drag and Drop: Easily move tasks between columns (To Do, In Progress, Done)
• Task Counter: Real-time task count for each column
• Local Storage: Tasks persist even after browser refresh
• Responsive Design: Clean and modern user interface
• Modal Interface: Smooth task creation with title and description

🚀 Demo

Visit the live demo: Kanban Board

🛠️ Technologies Used

• HTML5: Structure and semantic markup
• CSS3: Styling and layout
• JavaScript (ES6): Interactive functionality and DOM manipulation
• Local Storage API: Data persistence

📂 Project Structure

kanban-board/
│
├── index.html          # Main HTML file
├── style.css           # Stylesheet
├── script.js           # JavaScript logic
└── README.md           # Project documentation

🎯 How to Use

1. Add a Task: Click the "Add New Task" button in the navigation bar
2. Fill Details: Enter the task title and description in the modal
3. Create Task: Click "Add Task" to create the task in the "To Do" column
4. Move Tasks: Drag and drop tasks between columns to update their status
5. Delete Tasks: Click the "Delete" button on any task to remove it
6. Track Progress: View the task count in each column

💻 Installation & Setup

1. Clone the repository:

   git clone https://github.com/shivxmsharma/kanban-board.git

2. Navigate to the project directory:

   cd kanban-board

3. Open index.html in your browser:

   • Double-click the file, or
   • Use a live server extension in VS Code

No additional dependencies or build tools required!

🌟 Features Breakdown

Task Columns

• To Do: Tasks that need to be started
• In Progress: Tasks currently being worked on
• Done: Completed tasks

Drag and Drop

• Smooth drag-and-drop functionality across all columns
• Visual feedback during dragging

Data Persistence

• All tasks are automatically saved to browser's local storage
• Tasks remain available after page refresh

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📝 License

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

👤 Author

Shivam Sharma

• GitHub: @shivxmsharma

🙏 Acknowledgments

• Inspired by popular project management tools
• Built as a learning project to practice vanilla JavaScript

---

⭐ If you found this project helpful, please give it a star!