# patelvaibhavd/stock-average-calculator architecture

> Architecture diagram of the GitHub repository patelvaibhavd/stock-average-calculator, 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/patelvaibhavd/stock-average-calculator
- Repository: https://github.com/patelvaibhavd/stock-average-calculator

## Overview

This is a browser-based stock-average calculator that also provides SIP and percentage calculators. The user workflow is to enter values in a calculator, calculate a result, and optionally clear or switch sections. The JavaScript reads and updates page fields and results. The README identifies index.html as the main page and scripts as the template’s JavaScript; the HTML was not sampled, so specific event-handler wiring is not shown.

Main entry points: [`index.html`](https://github.com/patelvaibhavd/stock-average-calculator/blob/main/index.html) (Main page), [`scripts/script.js`](https://github.com/patelvaibhavd/stock-average-calculator/blob/main/scripts/script.js) (Calculator logic), [`css/style.css`](https://github.com/patelvaibhavd/stock-average-calculator/blob/main/css/style.css) (Page styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Browser interface"]
  node_page["Main page<br/>[index.html]"]
end

subgraph group_calculators["Calculation features"]
  node_script["Calculator logic<br/>[script.js]"]
  node_average["Average calculator<br/>[script.js]"]
  node_sip["SIP calculator<br/>[script.js]"]
  node_percentage["Percentage calculator<br/>[script.js]"]
  node_sections["Section switching<br/>[script.js]"]
end

subgraph group_presentation["Presentation"]
  node_styles["Page styles<br/>[style.css]"]
end

node_user(("User"))

node_user -->|"uses"| node_page
node_page -->|"uses"| node_script
node_page -->|"styled by"| node_styles
node_script -->|"runs"| node_average
node_script -->|"runs"| node_sip
node_script -->|"runs"| node_percentage
node_script -->|"switches"| node_sections
node_average -->|"updates fields"| node_page
node_sip -->|"updates results"| node_page
node_percentage -->|"updates result"| node_page

click node_page "https://github.com/patelvaibhavd/stock-average-calculator/blob/main/index.html"
click node_script "https://github.com/patelvaibhavd/stock-average-calculator/blob/main/scripts/script.js"
click node_average "https://github.com/patelvaibhavd/stock-average-calculator/blob/main/scripts/script.js"
click node_sip "https://github.com/patelvaibhavd/stock-average-calculator/blob/main/scripts/script.js"
click node_percentage "https://github.com/patelvaibhavd/stock-average-calculator/blob/main/scripts/script.js"
click node_sections "https://github.com/patelvaibhavd/stock-average-calculator/blob/main/scripts/script.js"
click node_styles "https://github.com/patelvaibhavd/stock-average-calculator/blob/main/css/style.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_page,node_user toneBlue
class node_script,node_average,node_sip,node_percentage,node_sections toneAmber
class node_styles toneMint
```

## Components

### Browser interface

- [Main page](https://github.com/patelvaibhavd/stock-average-calculator/blob/main/index.html): `index.html`

### Calculation features

- [Calculator logic](https://github.com/patelvaibhavd/stock-average-calculator/blob/main/scripts/script.js): `scripts/script.js`
- [Average calculator](https://github.com/patelvaibhavd/stock-average-calculator/blob/main/scripts/script.js): `scripts/script.js`
- [SIP calculator](https://github.com/patelvaibhavd/stock-average-calculator/blob/main/scripts/script.js): `scripts/script.js`
- [Percentage calculator](https://github.com/patelvaibhavd/stock-average-calculator/blob/main/scripts/script.js): `scripts/script.js`
- [Section switching](https://github.com/patelvaibhavd/stock-average-calculator/blob/main/scripts/script.js): `scripts/script.js`

### Presentation

- [Page styles](https://github.com/patelvaibhavd/stock-average-calculator/blob/main/css/style.css): `css/style.css`

### Other components

- **User**

## Connections

- User → Main page: uses
- Main page → Calculator logic: uses
- Main page → Page styles: styled by
- Calculator logic → Average calculator: runs
- Calculator logic → SIP calculator: runs
- Calculator logic → Percentage calculator: runs
- Calculator logic → Section switching: switches
- Average calculator → Main page: updates fields
- SIP calculator → Main page: updates results
- Percentage calculator → Main page: updates result