# atharvag0007/html_learn architecture

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

- Interactive diagram: https://gitdiagram.com/atharvag0007/html_learn
- Repository: https://github.com/atharvag0007/html_learn

## Overview

PocketTrack is a browser-only personal expense tracker. A visitor enters transactions on the Transactions page; shared JavaScript validates and stores them, then refreshes the dashboard, budget views, and reports. Monthly and category budgets and month-selected insights are separate domain features, all backed by browser LocalStorage. The four HTML pages provide the interface, with shared responsive styling. The graph uses README workflow documentation and the sampled portions of `js/app.js`; omitted source limits which internal calls can be shown directly.

Main entry points: [`js/app.js`](https://github.com/atharvag0007/html_learn/blob/main/js/app.js) (Transaction workflow), [`css/style.css`](https://github.com/atharvag0007/html_learn/blob/main/css/style.css) (Responsive styling), [`transactions.html`](https://github.com/atharvag0007/html_learn/blob/main/transactions.html) (Transactions page), [`index.html`](https://github.com/atharvag0007/html_learn/blob/main/index.html) (Dashboard page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Pages and presentation"]
  node_dashboard_page["Dashboard page<br/>[index.html]"]
  node_transactions_page["Transactions page<br/>[transactions.html]"]
  node_budget_page["Budget page<br/>[budget.html]"]
  node_reports_page["Reports page<br/>[reports.html]"]
  node_responsive_styles["Responsive styling<br/>[style.css]"]
end

subgraph group_transactions["Transaction management"]
  node_transaction_workflow["Transaction workflow<br/>[app.js]"]
  node_transaction_display["Transaction display<br/>[app.js]"]
  node_dashboard_logic["Dashboard totals<br/>[app.js]"]
end

subgraph group_budgets["Budgets and insights"]
  node_budget_workflow["Budget management<br/>[app.js]"]
  node_budget_display["Budget progress<br/>[app.js]"]
  node_monthly_insights["Monthly insights<br/>[app.js]"]
end

subgraph group_shared["Shared logic and storage"]
  node_shared_helpers["Shared calculations<br/>[app.js]"]
  node_data_persistence["Data loading and saving<br/>[app.js]"]
  node_local_storage[("Browser LocalStorage")]
end

node_visitor(("Visitor"))

node_visitor -->|"enters records"| node_transactions_page
node_transactions_page -->|"submits form"| node_transaction_workflow
node_transaction_workflow -->|"saves records"| node_data_persistence
node_transaction_workflow -->|"redraws list"| node_transaction_display
node_transaction_workflow -->|"refreshes views"| node_dashboard_logic
node_dashboard_page -->|"shows totals"| node_dashboard_logic
node_budget_page -->|"sets limits"| node_budget_workflow
node_budget_workflow -->|"saves limits"| node_data_persistence
node_budget_workflow -->|"updates progress"| node_budget_display
node_reports_page -->|"shows insights"| node_monthly_insights
node_monthly_insights -.->|"calculates totals"| node_shared_helpers
node_data_persistence -->|"reads and writes"| node_local_storage
node_dashboard_page -->|"uses styling"| node_responsive_styles
node_transactions_page -->|"uses styling"| node_responsive_styles
node_budget_page -->|"uses styling"| node_responsive_styles
node_reports_page -->|"uses styling"| node_responsive_styles

click node_dashboard_page "https://github.com/atharvag0007/html_learn/blob/main/index.html"
click node_transactions_page "https://github.com/atharvag0007/html_learn/blob/main/transactions.html"
click node_budget_page "https://github.com/atharvag0007/html_learn/blob/main/budget.html"
click node_reports_page "https://github.com/atharvag0007/html_learn/blob/main/reports.html"
click node_responsive_styles "https://github.com/atharvag0007/html_learn/blob/main/css/style.css"
click node_transaction_workflow "https://github.com/atharvag0007/html_learn/blob/main/js/app.js"
click node_transaction_display "https://github.com/atharvag0007/html_learn/blob/main/js/app.js"
click node_dashboard_logic "https://github.com/atharvag0007/html_learn/blob/main/js/app.js"
click node_budget_workflow "https://github.com/atharvag0007/html_learn/blob/main/js/app.js"
click node_budget_display "https://github.com/atharvag0007/html_learn/blob/main/js/app.js"
click node_monthly_insights "https://github.com/atharvag0007/html_learn/blob/main/js/app.js"
click node_shared_helpers "https://github.com/atharvag0007/html_learn/blob/main/js/app.js"
click node_data_persistence "https://github.com/atharvag0007/html_learn/blob/main/js/app.js"

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_dashboard_page,node_transactions_page,node_budget_page,node_reports_page,node_responsive_styles toneBlue
class node_transaction_workflow,node_transaction_display,node_dashboard_logic toneAmber
class node_budget_workflow,node_budget_display,node_monthly_insights toneMint
class node_shared_helpers,node_data_persistence,node_local_storage toneRose
class node_visitor toneIndigo
```

## Components

### Pages and presentation

- [Dashboard page](https://github.com/atharvag0007/html_learn/blob/main/index.html): `index.html`
- [Transactions page](https://github.com/atharvag0007/html_learn/blob/main/transactions.html): `transactions.html`
- [Budget page](https://github.com/atharvag0007/html_learn/blob/main/budget.html): `budget.html`
- [Reports page](https://github.com/atharvag0007/html_learn/blob/main/reports.html): `reports.html`
- [Responsive styling](https://github.com/atharvag0007/html_learn/blob/main/css/style.css): `css/style.css`

### Transaction management

- [Transaction workflow](https://github.com/atharvag0007/html_learn/blob/main/js/app.js): `js/app.js`
- [Transaction display](https://github.com/atharvag0007/html_learn/blob/main/js/app.js): `js/app.js`
- [Dashboard totals](https://github.com/atharvag0007/html_learn/blob/main/js/app.js): `js/app.js`

### Budgets and insights

- [Budget management](https://github.com/atharvag0007/html_learn/blob/main/js/app.js): `js/app.js`
- [Budget progress](https://github.com/atharvag0007/html_learn/blob/main/js/app.js): `js/app.js`
- [Monthly insights](https://github.com/atharvag0007/html_learn/blob/main/js/app.js): `js/app.js`

### Shared logic and storage

- [Shared calculations](https://github.com/atharvag0007/html_learn/blob/main/js/app.js): `js/app.js`
- [Data loading and saving](https://github.com/atharvag0007/html_learn/blob/main/js/app.js): `js/app.js`
- **Browser LocalStorage**

### Other components

- **Visitor**

## Connections

- Visitor → Transactions page: enters records (evidence: `README.md`)
- Transactions page → Transaction workflow: submits form (evidence: `README.md`)
- Transaction workflow → Data loading and saving: saves records (evidence: `README.md`)
- Transaction workflow → Transaction display: redraws list (evidence: `js/app.js`)
- Transaction workflow → Dashboard totals: refreshes views (evidence: `README.md`)
- Dashboard page → Dashboard totals: shows totals (evidence: `README.md`)
- Budget page → Budget management: sets limits (evidence: `README.md`)
- Budget management → Data loading and saving: saves limits (evidence: `js/app.js`)
- Budget management → Budget progress: updates progress (evidence: `js/app.js`)
- Reports page → Monthly insights: shows insights (evidence: `README.md`)
- Monthly insights → Shared calculations: calculates totals (evidence: `js/app.js`)
- Data loading and saving → Browser LocalStorage: reads and writes (evidence: `js/app.js`)
- Dashboard page → Responsive styling: uses styling (evidence: `README.md`)
- Transactions page → Responsive styling: uses styling (evidence: `README.md`)
- Budget page → Responsive styling: uses styling (evidence: `README.md`)
- Reports page → Responsive styling: uses styling (evidence: `README.md`)