# thing-t6/pastel-calc architecture

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

- Interactive diagram: https://gitdiagram.com/thing-t6/pastel-calc
- Repository: https://github.com/thing-t6/pastel-calc

## Overview

Pastel Calc is a small, dependency-free web calculator. The user enters an expression through the calculator controls; JavaScript handles input, clear/backspace, and evaluation, then updates the display. CSS provides the responsive pastel presentation. The README documents the interface and styling, while the sampled JavaScript shows display updates; the HTML and CSS source were not sampled, so their internal details are limited to README claims.

Main entry points: [`main.html`](https://github.com/thing-t6/pastel-calc/blob/main/main.html) (Calculator UI), [`main.js`](https://github.com/thing-t6/pastel-calc/blob/main/main.js) (Input and evaluation), [`main.css`](https://github.com/thing-t6/pastel-calc/blob/main/main.css) (Responsive styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_user(("User"))
node_interface["Calculator UI<br/>[main.html]"]
node_logic["Input and evaluation<br/>[main.js]"]
node_styles["Responsive styling<br/>[main.css]"]

node_user -->|"enters expression"| node_interface
node_interface -.->|"dispatches input"| node_logic
node_logic -->|"updates display"| node_interface
node_styles -->|"styles layout"| node_interface

click node_interface "https://github.com/thing-t6/pastel-calc/blob/main/main.html"
click node_logic "https://github.com/thing-t6/pastel-calc/blob/main/main.js"
click node_styles "https://github.com/thing-t6/pastel-calc/blob/main/main.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_interface toneBlue
class node_logic,node_styles toneTeal
```

## Components

### Other components

- **User**
- [Calculator UI](https://github.com/thing-t6/pastel-calc/blob/main/main.html): `main.html`
- [Input and evaluation](https://github.com/thing-t6/pastel-calc/blob/main/main.js): `main.js`
- [Responsive styling](https://github.com/thing-t6/pastel-calc/blob/main/main.css): `main.css`

## Connections

- User → Calculator UI: enters expression (evidence: `README.md`)
- Calculator UI → Input and evaluation: dispatches input
- Input and evaluation → Calculator UI: updates display (evidence: `main.js`)
- Responsive styling → Calculator UI: styles layout (evidence: `README.md`)