Anthony's Blog Site

Drag-and-Drop Kanban Board

April 19, 2025

Kanban Board

Photo Credit: Zenless Zone Zero


This Kanban Board tool supports adding new tasks and managing existing tasks by dragging and dropping them. The user can create new tasks by typing the name in the text field and click on the Add button. Once tasks are created, there are three columns showing the status of all tasks: "TODO", "Doing", and "Done". The user can easily drag and drop each task tile to change its status. The tutorial I followed is available here.

I built this project using vanilla JavaScript as opposed to more advanced JS frameworks like React or Vue. Developers nowadays including me often rely on modern front end frameworks and thus overlook or misunderstand what vanilla JS alone can do. Since JavaScript is the browser's "native language", there are actually a handful of Web APIs available for use with JavaScript, such as the Window interface from the HTML DOM API (which includes objects like navigator and screen and even methods like setTimeout()). The Fetch API is also part of Web APIs.

If you also want to brush up your knowledge on Web APIs, feel free to take a look at the source code on my GitHub.