# teddyomondi-dev/progress-bar_of_the_year architecture

> Architecture diagram of the GitHub repository teddyomondi-dev/progress-bar_of_the_year, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/teddyomondi-dev/progress-bar_of_the_year
- Repository: https://github.com/teddyomondi-dev/progress-bar_of_the_year

## Overview

Year Progress Bar is a browser app for tracking progress through 2026 and capturing the display as an image. The main workflow updates the date, time, elapsed days, and progress each second, then lets the user capture and download a screenshot. The README also describes milestone markers and hiding extra information. The sampled JavaScript supports the update, toggle, and screenshot flows; milestone implementation and page structure were not sampled, so those details are represented only at a high level.

Main entry points: [`script.js`](https://github.com/teddyomondi-dev/progress-bar_of_the_year/blob/main/script.js) (Year progress logic), [`index.html`](https://github.com/teddyomondi-dev/progress-bar_of_the_year/blob/main/index.html) (Progress interface)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Progress display"]
  node_progress["Year progress logic<br/>[script.js]"]
  node_page["Progress interface<br/>[index.html]"]
  node_milestones["Year milestones<br/>[index.html]"]
end

subgraph group_capture["Screenshot flow"]
  node_capture_area["Capture area<br/>[index.html]"]
  node_canvas_tool["html2canvas"]
  node_download["Browser download"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_progress
node_progress -->|"updates"| node_page
node_progress -.->|"shows"| node_milestones
node_visitor -->|"toggles info"| node_progress
node_visitor -->|"requests capture"| node_progress
node_progress -->|"captures"| node_capture_area
node_progress -->|"renders image"| node_canvas_tool
node_progress -->|"starts download"| node_download

click node_progress "https://github.com/teddyomondi-dev/progress-bar_of_the_year/blob/main/script.js"
click node_page "https://github.com/teddyomondi-dev/progress-bar_of_the_year/blob/main/index.html"
click node_milestones "https://github.com/teddyomondi-dev/progress-bar_of_the_year/blob/main/index.html"
click node_capture_area "https://github.com/teddyomondi-dev/progress-bar_of_the_year/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_progress,node_page,node_milestones toneBlue
class node_capture_area,node_canvas_tool,node_download toneAmber
class node_visitor toneIndigo
```

## Components

### Progress display

- [Year progress logic](https://github.com/teddyomondi-dev/progress-bar_of_the_year/blob/main/script.js): `script.js`
- [Progress interface](https://github.com/teddyomondi-dev/progress-bar_of_the_year/blob/main/index.html): `index.html`
- [Year milestones](https://github.com/teddyomondi-dev/progress-bar_of_the_year/blob/main/index.html): `index.html`

### Screenshot flow

- [Capture area](https://github.com/teddyomondi-dev/progress-bar_of_the_year/blob/main/index.html): `index.html`
- **html2canvas**
- **Browser download**

### Other components

- **Visitor**

## Connections

- Visitor → Year progress logic: views (evidence: `README.md`)
- Year progress logic → Progress interface: updates (evidence: `script.js`)
- Year progress logic → Year milestones: shows (evidence: `README.md`)
- Visitor → Year progress logic: toggles info (evidence: `script.js`)
- Visitor → Year progress logic: requests capture (evidence: `script.js`)
- Year progress logic → Capture area: captures (evidence: `script.js`)
- Year progress logic → html2canvas: renders image (evidence: `script.js`)
- Year progress logic → Browser download: starts download (evidence: `script.js`)