Kantainer is a clean and minimal Kanban-style productivity app built entirely with HTML, CSS, and Vanilla JavaScript. It provides three essential workflow stages — To Do, In Progress, and Done — presented in an intuitive drag-and-drop interface.
The design focuses on clarity, calm visuals, and a smooth user experience without relying on frameworks or external libraries.
- 📝 Create Tasks
Add new tasks directly inside the To Do column using the input field. Every task appears as a draggable card for quick organization.
↔️ Drag & Drop
Move tasks seamlessly between the three workflow columns. Built using the native Drag and Drop API for a lightweight, responsive experience.
- 📁 Three-Column Layout
To Do – tasks you plan to work on
In Progress – tasks you're actively working on
Done – tasks you’ve already completed
Each column is styled as an independent list with its own cards.
- 🌑 Modern Dark UI
The interface comes in a clean, dark-themed layout with soft shadows, rounded cards, and a balanced typography style.
- 🧩 Tech Stack
HTML5 – structure & content
CSS3 – layout, styling, dark theme, responsive spacing
JavaScript (ES6) – drag-and-drop, task creation logic
No libraries. No frameworks. 100% vanilla.
- 👀 How It Looks like:
-
📂 Project Structure Kantainer/ │──index.html │──style.css │──script.js │──Kantainer.png
-
🚀 How to Run Locally
Clone or download this repository
git clone https://github.com/IbnHanif/kantainer-Kanban-Web-App.git
Open the folder
Double-click index.html
The app runs instantly in your browser — no server required
- 🎨 Branding
Kantainer includes a custom-designed logo representing the “three-column” Kanban style inside a circular container, reflecting both structure and simplicity.
- 📜 License
This project is released under GPL 3.0. Feel free to download, modify, use, or customize it however you like.
👤 Author
BilalDevDex Self-taught developer exploring clean web interfaces, minimal product design, and thoughtful engineering.
GitHub: https://github.com/IbnHanif