Modern Kanban Board with Vanilla JavaScript and Local Storage

Preview:

Description:

Modern Kanban Board is a vanilla JavaScript implementation of a Kanban board with a three-column layout (“To Do”, “In Progress”, and “Completed”).

Unlike React-based alternatives that require complex state management, this solution offers direct DOM manipulation with CSS transitions and HTML5 Drag and Drop API.

Features:

• Drag-and-drop task movement between columns
• Smooth animations for all interactions
• Automatic local storage persistence
• Context menu for task management
• Responsive design that works on all screen sizes
• Timestamp tracking for task creation and updates

See It In Action:

Installation:

1. Download the package or clone it from GitHub:

git clone https://github.com/ansh0330/Modern-Kanban-Board.git

2. Launch the index.html directly in any modern web browser.

3. Customize the appearance of the kanban board by overriding the default variables.

:root {
  /* Dark theme with purple accents */
  --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --column-gradient: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
  --card-gradient: linear-gradient(135deg, #334155 0%, #293548 100%);
  --primary: #a855f7; /* Purple */
  --primary-dark: #9333ea;
  --accent: #2dd4bf; /* Teal */
  --text-light: #e2e8f0;
  --text-dark: #e2e8f0;
  --card-text: #f8fafc;
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  --border-radius: 12px;
  --card-radius: 8px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Column-specific colors */
  --todo-color: #ec4899; /* Pink */
  --doing-color: #eab308; /* Yellow */
  --done-color: #22c55e; /* Green */
}

Basic Usage:

The kanban board works out of the box with three columns: “To Do”, “In Progress”, and “Completed”. You can:

• Add tasks by typing in the input field at the bottom of each column
• Move tasks between columns via drag-and-drop
• Edit or delete tasks using the context menu (right-click)

Task Management:

Tasks are automatically saved to the browser’s local storage, so they persist between sessions. Each task includes:

• The task text
• A timestamp showing when it was created or last modified

Performance Considerations

• Large numbers of tasks (100+) might cause performance issues on older devices due to the animation effects
• The local storage has size limitations (~5MB), so extremely large boards might reach this limit
• The animations are implemented using CSS transitions, which are hardware-accelerated in modern browsers