# abhinaytharu/scicalculator architecture

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

- Interactive diagram: https://gitdiagram.com/abhinaytharu/scicalculator
- Repository: https://github.com/abhinaytharu/scicalculator

## Overview

QuantumCalc is a browser-based scientific calculator: users enter expressions, see live mathematical previews, and calculate decimal or exact results. Its runtime is concentrated in `script.js`, which manages editing and modes, evaluates expressions, formats exact values, and renders math. The README documents keyboard navigation, angle modes, a shortcut panel, and the Math.js/KaTeX capabilities. The source excerpt is partial, so links whose specific wiring is not shown are omitted rather than inferred.

Main entry points: [`script.js`](https://github.com/abhinaytharu/scicalculator/blob/main/script.js) (Expression evaluation), [`index.html`](https://github.com/abhinaytharu/scicalculator/blob/main/index.html) (Calculator interface)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Calculator interface"]
  node_interface["Calculator interface<br/>[index.html]"]
  node_shortcuts["Shortcut reference<br/>[index.html]"]
end

subgraph group_editing["Input and modes"]
  node_editing["Expression editing<br/>[script.js]"]
  node_modes["Keyboard and angle modes<br/>[script.js]"]
end

subgraph group_calculation["Calculation and results"]
  node_evaluation["Expression evaluation<br/>[script.js]"]
  node_exact["Exact result formatting<br/>[script.js]"]
end

subgraph group_rendering["Math rendering"]
  node_preview["Live expression preview<br/>[script.js]"]
  node_result["Result display<br/>[script.js]"]
end

node_user(("Calculator user"))
node_mathjs["Math.js"]
node_katex["KaTeX"]

node_user -->|"enters expressions"| node_interface
node_user -->|"consults shortcuts"| node_shortcuts
node_interface -->|"handles key clicks"| node_editing
node_editing -->|"calculates"| node_evaluation
node_modes -->|"sets angle behavior"| node_evaluation
node_evaluation -->|"evaluates expressions"| node_mathjs
node_evaluation -->|"stores raw result"| node_exact
node_editing -->|"renders expression"| node_preview
node_preview -->|"parses expression"| node_mathjs
node_preview -->|"renders preview"| node_katex
node_result -->|"renders formatted math"| node_katex
node_exact -->|"formats exact values"| node_result

click node_interface "https://github.com/abhinaytharu/scicalculator/blob/main/index.html"
click node_shortcuts "https://github.com/abhinaytharu/scicalculator/blob/main/index.html"
click node_editing "https://github.com/abhinaytharu/scicalculator/blob/main/script.js"
click node_modes "https://github.com/abhinaytharu/scicalculator/blob/main/script.js"
click node_evaluation "https://github.com/abhinaytharu/scicalculator/blob/main/script.js"
click node_exact "https://github.com/abhinaytharu/scicalculator/blob/main/script.js"
click node_preview "https://github.com/abhinaytharu/scicalculator/blob/main/script.js"
click node_result "https://github.com/abhinaytharu/scicalculator/blob/main/script.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_interface,node_shortcuts,node_user toneBlue
class node_editing,node_modes toneAmber
class node_evaluation,node_exact toneMint
class node_preview,node_result toneRose
class node_mathjs,node_katex toneIndigo
```

## Components

### Calculator interface

- [Calculator interface](https://github.com/abhinaytharu/scicalculator/blob/main/index.html): `index.html`
- [Shortcut reference](https://github.com/abhinaytharu/scicalculator/blob/main/index.html): `index.html`

### Input and modes

- [Expression editing](https://github.com/abhinaytharu/scicalculator/blob/main/script.js): `script.js`
- [Keyboard and angle modes](https://github.com/abhinaytharu/scicalculator/blob/main/script.js): `script.js`

### Calculation and results

- [Expression evaluation](https://github.com/abhinaytharu/scicalculator/blob/main/script.js): `script.js`
- [Exact result formatting](https://github.com/abhinaytharu/scicalculator/blob/main/script.js): `script.js`

### Math rendering

- [Live expression preview](https://github.com/abhinaytharu/scicalculator/blob/main/script.js): `script.js`
- [Result display](https://github.com/abhinaytharu/scicalculator/blob/main/script.js): `script.js`

### Other components

- **Calculator user**
- **Math.js**
- **KaTeX**

## Connections

- Calculator user → Calculator interface: enters expressions (evidence: `README.md`)
- Calculator user → Shortcut reference: consults shortcuts (evidence: `README.md`)
- Calculator interface → Expression editing: handles key clicks (evidence: `script.js`)
- Expression editing → Expression evaluation: calculates (evidence: `script.js`)
- Keyboard and angle modes → Expression evaluation: sets angle behavior (evidence: `README.md`)
- Expression evaluation → Math.js: evaluates expressions (evidence: `script.js`)
- Expression evaluation → Exact result formatting: stores raw result (evidence: `script.js`)
- Expression editing → Live expression preview: renders expression (evidence: `script.js`)
- Live expression preview → Math.js: parses expression (evidence: `script.js`)
- Live expression preview → KaTeX: renders preview (evidence: `script.js`)
- Result display → KaTeX: renders formatted math (evidence: `script.js`)
- Exact result formatting → Result display: formats exact values (evidence: `README.md`)