# blocknotes-4515/kanban-board architecture

> Architecture diagram of the GitHub repository blocknotes-4515/kanban-board, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/blocknotes-4515/kanban-board
- Repository: https://github.com/blocknotes-4515/kanban-board

## Overview

Planora is a browser-based Kanban task planner. Users create tasks with a title and description, track them through To Do, In Progress, and Done, and can delete tasks or change the theme. The JavaScript also updates stage counts and saves task data in browser local storage. The README documents the interface and styling capabilities; the sampled JavaScript confirms task, drag-and-drop, count, storage, modal, and theme behavior. HTML and CSS details are based on the README and file tree, not sampled source.

Main entry points: [`script.js`](https://github.com/blocknotes-4515/kanban-board/blob/main/script.js) (Board behavior), [`index.html`](https://github.com/blocknotes-4515/kanban-board/blob/main/index.html) (Board interface), [`style.css`](https://github.com/blocknotes-4515/kanban-board/blob/main/style.css) (Responsive themes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workspace["Kanban workspace"]
  node_page["Board interface<br/>[index.html]"]
  node_styles["Responsive themes<br/>[style.css]"]
  node_task["Task cards<br/>[script.js]"]
  node_counts["Stage counts<br/>[script.js]"]
end

subgraph group_interactions["User interactions"]
  node_logic["Board behavior<br/>[script.js]"]
  node_creation["Task creation modal<br/>[index.html]"]
  node_theme["Theme control<br/>[index.html]"]
end

subgraph group_state["Task state"]
  node_todo["To Do<br/>[index.html]"]
  node_progress["In Progress<br/>[index.html]"]
  node_done["Done<br/>[index.html]"]
  node_storage[("Saved tasks")]
end

node_user(("User"))

node_user -->|"uses"| node_page
node_page -->|"styled by"| node_styles
node_page -->|"interacts with"| node_logic
node_user -->|"opens"| node_creation
node_creation -->|"submits details"| node_logic
node_logic -->|"creates or deletes"| node_task
node_logic -->|"adds tasks"| node_todo
node_logic -->|"moves tasks"| node_progress
node_logic -->|"moves tasks"| node_done
node_logic -->|"updates"| node_counts
node_logic -->|"reads and writes"| node_storage
node_storage -->|"restores tasks"| node_logic
node_user -->|"toggles"| node_theme
node_theme -->|"triggers"| node_logic
node_logic -->|"toggles theme class"| node_styles

click node_page "https://github.com/blocknotes-4515/kanban-board/blob/main/index.html"
click node_styles "https://github.com/blocknotes-4515/kanban-board/blob/main/style.css"
click node_logic "https://github.com/blocknotes-4515/kanban-board/blob/main/script.js"
click node_creation "https://github.com/blocknotes-4515/kanban-board/blob/main/index.html"
click node_task "https://github.com/blocknotes-4515/kanban-board/blob/main/script.js"
click node_todo "https://github.com/blocknotes-4515/kanban-board/blob/main/index.html"
click node_progress "https://github.com/blocknotes-4515/kanban-board/blob/main/index.html"
click node_done "https://github.com/blocknotes-4515/kanban-board/blob/main/index.html"
click node_counts "https://github.com/blocknotes-4515/kanban-board/blob/main/script.js"
click node_theme "https://github.com/blocknotes-4515/kanban-board/blob/main/index.html"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_page,node_styles,node_task,node_counts,node_user toneBlue
class node_logic,node_creation,node_theme toneAmber
class node_todo,node_progress,node_done,node_storage toneMint
```

## Components

### Kanban workspace

- [Board interface](https://github.com/blocknotes-4515/kanban-board/blob/main/index.html): `index.html`
- [Responsive themes](https://github.com/blocknotes-4515/kanban-board/blob/main/style.css): `style.css`
- [Task cards](https://github.com/blocknotes-4515/kanban-board/blob/main/script.js): `script.js`
- [Stage counts](https://github.com/blocknotes-4515/kanban-board/blob/main/script.js): `script.js`

### User interactions

- [Board behavior](https://github.com/blocknotes-4515/kanban-board/blob/main/script.js): `script.js`
- [Task creation modal](https://github.com/blocknotes-4515/kanban-board/blob/main/index.html): `index.html`
- [Theme control](https://github.com/blocknotes-4515/kanban-board/blob/main/index.html): `index.html`

### Task state

- [To Do](https://github.com/blocknotes-4515/kanban-board/blob/main/index.html): `index.html`
- [In Progress](https://github.com/blocknotes-4515/kanban-board/blob/main/index.html): `index.html`
- [Done](https://github.com/blocknotes-4515/kanban-board/blob/main/index.html): `index.html`
- **Saved tasks**

### Other components

- **User**

## Connections

- User → Board interface: uses
- Board interface → Responsive themes: styled by
- Board interface → Board behavior: interacts with
- User → Task creation modal: opens
- Task creation modal → Board behavior: submits details
- Board behavior → Task cards: creates or deletes
- Board behavior → To Do: adds tasks
- Board behavior → In Progress: moves tasks
- Board behavior → Done: moves tasks
- Board behavior → Stage counts: updates
- Board behavior → Saved tasks: reads and writes
- Saved tasks → Board behavior: restores tasks
- User → Theme control: toggles
- Theme control → Board behavior: triggers
- Board behavior → Responsive themes: toggles theme class