# lenasere/smart-study-planner architecture

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

- Interactive diagram: https://gitdiagram.com/lenasere/smart-study-planner
- Repository: https://github.com/lenasere/smart-study-planner

## Overview

Smart Study Planner is a small browser-based task planner. Users add study tasks with deadlines, mark them complete, or delete them; task data is saved in localStorage to persist across visits. The README identifies the markup, styling, and logic files, but no source excerpts were available, so the connections shown follow only the documented responsibilities and behavior.

Main entry points: [`index.html`](https://github.com/lenasere/smart-study-planner/blob/main/index.html) (Planner UI), [`assets/js/app.js`](https://github.com/lenasere/smart-study-planner/blob/main/assets/js/app.js) (Task Logic), [`assets/css/styles.css`](https://github.com/lenasere/smart-study-planner/blob/main/assets/css/styles.css) (App Styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_user(("User"))
node_ui["Planner UI<br/>[index.html]"]
node_logic["Task Logic<br/>[app.js]"]
node_styles["App Styling<br/>[styles.css]"]
node_storage[("localStorage")]

node_user -->|"uses"| node_ui
node_ui -->|"dispatches actions"| node_logic
node_logic -->|"saves and loads tasks"| node_storage
node_styles -->|"styles"| node_ui

click node_ui "https://github.com/lenasere/smart-study-planner/blob/main/index.html"
click node_logic "https://github.com/lenasere/smart-study-planner/blob/main/assets/js/app.js"
click node_styles "https://github.com/lenasere/smart-study-planner/blob/main/assets/css/styles.css"

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_user,node_ui toneBlue
class node_logic toneRose
class node_styles toneTeal
class node_storage toneAmber
```

## Components

### Other components

- **User**
- [Planner UI](https://github.com/lenasere/smart-study-planner/blob/main/index.html): `index.html`
- [Task Logic](https://github.com/lenasere/smart-study-planner/blob/main/assets/js/app.js): `assets/js/app.js`
- [App Styling](https://github.com/lenasere/smart-study-planner/blob/main/assets/css/styles.css): `assets/css/styles.css`
- **localStorage**

## Connections

- User → Planner UI: uses
- Planner UI → Task Logic: dispatches actions
- Task Logic → localStorage: saves and loads tasks
- App Styling → Planner UI: styles