Kanban Board — Drag & Drop

A simple Kanban board built with HTML, CSS, and JavaScript featuring full drag‑and‑drop functionality. This project focuses on interactive UI behavior, clean layout structure, and practicing the native Drag and Drop API to move tasks between columns.

📌 Features

• Drag and drop tasks between columns

• Clean and simple UI layout

• Native JavaScript Drag and Drop API

• Responsive design

• Easy to customize and expand

🧠 What I Learned

• How to use the Drag and Drop API

• Handling drag events (dragstart, dragover, drop, etc.)

-DOM manipulation for moving elements

• Structuring a simple Kanban layout with HTML & CSS

• Improving UI interaction and feedback

🛠️ Technologies Used

• HTML

• CSS

• JavaScript (ES6)

🚀 Future Improvements

• Add localStorage to save board state

• Add ability to create new tasks dynamically

• Add delete/edit functionality

• Add multiple boards or categories

📷 Preview

📁 Project Structure

Code /drag-and-drop │── index.html │── style.css │── script.js └── README.md

💬 About This Project

This project was built as part of my ongoing front‑end practice. It helped me understand how interactive UI components work and how to create smooth drag‑and‑drop experiences without external libraries.

• style.css – Styling (currently being worked on)

• script.js – JavaScript logic (not started yet)

Notes

This project is still under development. I am actively working on improving the layout and will begin adding interactive functionality soon.