Back to projects

Vanilla JavaScript

Magic Task Board Vanilla JavaScript

A lightweight task board built with vanilla JavaScript, HTML, and CSS. The project allows users to create, edit, delete, and organize tasks across Start, Progress, and Done columns using HTML5 Drag & Drop. It stores board state in localStorage, supports dark/light theme switching, priority sorting, inline editing, long-text expansion, and JSON export/import without any framework or backend. The drag-and-drop logic uses DOM geometry with getBoundingClientRect() to calculate card positions and show a dynamic drop indicator while moving tasks between columns. The project also uses scrollHeight and clientHeight to detect text overflow and show a Show more / Show less button only when a task description is longer than the visible preview.

HTML5CSS3JavaScriptHTML5 Drag & Drop APIDOMDOM GeometrygetBoundingClientRectscrollHeightclientHeightlocalStorageJSONCSS VariablesResponsive Design
Magic Task Board demo