Kanban Task Board

The most common mistake in Kanban projects is treating the DOM as the main source of truth. A beginner may drag a card into another column visually, but forget to update the underlying task object. The board looks correct until the page refreshes, filtering is added, or localStorage restores the old state.

Problematic approach:

          column.appendChild(draggedCard);

This only moves the HTML element. It does not update the task status, task order, or saved data.

Better approach:

          function moveTask(taskId, newStatus) {
            tasks = tasks.map((task) => {
              if (task.id !== taskId) return task;

              return {
                ...task,
                status: newStatus
              };
            });

            saveTasks();
            renderBoard();
          }

Pay attention to: The board should always be rendered from data. Drag-and-drop should update the task object first, then re-render the columns from the updated state. This prevents UI and storage from becoming different versions of the truth.

Many beginners use the task title to find and move a card. This works only until two tasks have the same name. Real task boards often contain repeated titles such as “Fix bug”, “Update copy”, or “Review design”, so titles should never be used as unique identifiers.

Problematic code:

          function findTaskByTitle(title) {
            return tasks.find((task) => task.title === title);
          }

If two cards have the same title, the wrong task may be moved, edited, or deleted.

Recommended solution:

          function createTask(title) {
            return {
              id: crypto.randomUUID(),
              title,
              status: 'todo',
              createdAt: Date.now()
            };
          }

Then use the id during drag:

          card.setAttribute('draggable', 'true');
          card.dataset.taskId = task.id;

          card.addEventListener('dragstart', (event) => {
            event.dataTransfer.setData('text/plain', task.id);
          });

Pay attention to: Every task must have a stable unique id. Use that id for moving, editing, deleting, saving, and restoring cards. This is one of the most important habits in stateful UI development.

In the HTML Drag and Drop API, a drop event will not work correctly unless the target allows dropping. Beginners often add a drop listener and wonder why nothing happens. The missing part is usually event.preventDefault() inside the dragover handler.

Incomplete implementation:

          column.addEventListener('drop', (event) => {
            const taskId = event.dataTransfer.getData('text/plain');
            moveTask(taskId, column.dataset.status);
          });

The browser may block the drop because the column has not been marked as a valid drop target.

Correct implementation:

          column.addEventListener('dragover', (event) => {
            event.preventDefault();
            column.classList.add('is-drag-over');
          });

          column.addEventListener('dragleave', () => {
            column.classList.remove('is-drag-over');
          });

          column.addEventListener('drop', (event) => {
            event.preventDefault();

            const taskId = event.dataTransfer.getData('text/plain');
            const newStatus = column.dataset.status;

            column.classList.remove('is-drag-over');
            moveTask(taskId, newStatus);
          });

Pay attention to: Attach drop logic to the column container, not only to individual cards. Empty columns must also accept drops, otherwise users cannot move tasks into an empty workflow stage.

localStorage is useful, but it should not be trusted blindly. Data can become corrupted, manually edited, outdated after a code change, or missing required fields. If your app assumes localStorage always contains valid JSON, one broken value can crash the entire board.

Risky approach:

          const tasks = JSON.parse(localStorage.getItem('kanbanTasks'));

This will throw an error if the stored value is invalid JSON. It may also return null or an unexpected data shape.

Safer approach:

          function loadTasks() {
            try {
              const saved = JSON.parse(localStorage.getItem('kanbanTasks'));

              if (!Array.isArray(saved)) {
                return [];
              }

              return saved.filter((task) => {
                return task.id && task.title && task.status;
              });
            } catch (error) {
              console.warn('Saved board data is invalid. Resetting tasks.', error);
              return [];
            }
          }

Saving state:

          function saveTasks() {
            localStorage.setItem('kanbanTasks', JSON.stringify(tasks));
          }

Pay attention to: Always protect your app from invalid storage data. A professional UI should recover gracefully instead of showing a blank page because one stored value became unreadable.

A Kanban board is not only about status columns. Order matters too. If users rearrange cards inside a column but your data only stores status, the order may reset after refresh or re-render. This makes the board feel unreliable.

Incomplete data model:

          {
            id: 'task-1',
            title: 'Update homepage',
            status: 'in-progress'
          }

This tells you where the task belongs, but not where it should appear inside that column.

Better data model:

          {
            id: 'task-1',
            title: 'Update homepage',
            status: 'in-progress',
            order: 2
          }

Render with sorting:

          const columnTasks = tasks
            .filter((task) => task.status === status)
            .sort((a, b) => a.order - b.order);

Pay attention to: If your project supports reordering, store order in the data model. Even if you begin with simple movement between columns, planning for order early prevents painful refactoring later.

Visual feedback must match what the board can actually do. Beginners sometimes highlight a card or column on hover, but the item cannot really be dropped there because the event listener is attached somewhere else. This creates a frustrating interaction where the UI promises an action that does not work.

Confusing CSS-only feedback:

          .column:hover {
            border-color: #2fc969;
          }

This highlights the column for normal hover, not necessarily for a valid drag state.

Better drag-specific feedback:

          .column.is-drag-over {
            border-color: #2fc969;
            background: rgba(47, 201, 105, 0.08);
          }

          .task-card.is-dragging {
            opacity: 0.5;
          }

JavaScript state:

          card.addEventListener('dragstart', () => {
            card.classList.add('is-dragging');
          });

          card.addEventListener('dragend', () => {
            card.classList.remove('is-dragging');
          });

          column.addEventListener('dragover', (event) => {
            event.preventDefault();
            column.classList.add('is-drag-over');
          });

Pay attention to: Use drag-specific classes such as is-dragging and is-drag-over. This makes visual feedback honest, easier to debug, and directly connected to real interaction state.