A modern and responsive Kanban Board built using HTML, CSS, and Vanilla JavaScript. It helps users organize tasks across different stages with an intuitive drag-and-drop interface. All tasks are automatically saved using Local Storage, so your data remains available even after refreshing or reopening the browser.
- ✅ Create new tasks
- ✅ Delete existing tasks
- ✅ Drag and drop tasks between columns
- ✅ Three task stages:
- 📌 To Do
- 🚧 In Progress
- ✅ Done
- ✅ Automatic task counter for each column
- ✅ Local Storage support (tasks persist after refresh)
- ✅ Responsive layout
- ✅ Modern dark theme UI
- ✅ Clean and simple user experience
- HTML5
- CSS3
- JavaScript (ES6)
To-do-app/
│
├── assets/
│ ├── screenshot-1-main.jpeg
│ └── screenshot-2-main.jpeg
│
├── index.html
├── style.css
├── script.js
└── README.md
git clone https://github.com/vishesh4u/To-do-app.gitSimply open the index.html file in your browser.
No additional setup or installation is required.
- DOM Manipulation
- Event Listeners
- Drag and Drop API
- Local Storage API
- Arrays & Objects
- Functions
- Arrow Functions
- Template Literals
- Query Selectors
- Dynamic Element Creation
- Event Delegation
- Click Add New Task.
- Enter the task title and description.
- Drag tasks between:
- 📌 To Do
- 🚧 In Progress
- ✅ Done
- Delete tasks when completed.
- Tasks are automatically saved in Local Storage.
- ✏️ Edit existing tasks
- 🔍 Search tasks
- 🎯 Filter by status
- 📅 Due dates
- 🏷️ Task categories
- 🌙 Light/Dark mode toggle
- 📱 Better mobile experience
Contributions, suggestions, and improvements are welcome.
- Fork the repository
- Create a new branch
- Commit your changes
- Open a Pull Request
Vishesh Gurjar
GitHub: https://github.com/vishesh4u
If you found this project useful, consider giving it a ⭐ on GitHub!
It helps motivate me to build more open-source projects.
This project is licensed under the MIT License.