# wikode/calculatrice-javascript architecture

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

- Interactive diagram: https://gitdiagram.com/wikode/calculatrice-javascript
- Repository: https://github.com/wikode/calculatrice-javascript

## Overview

1. **Project type**
   - This is a small client-side calculator built for learning DOM manipulation in JavaScript.
   - It is not backed by a server, database, or API; the whole app runs in the browser.

2. **Core runtime**
   - The execution environment is the browser.
   - JavaScript provides all interaction and calculation logic, while HTML and CSS provide structure and presentation.

3. **UI structure**
   - `index.html` is the entry point and defines the calculator’s visible layout.
   - It likely contains the display area plus the button grid for digits and operators, with no routing or multi-page navigation.

4. **Styling layer**
   - `style.css` is the complete visual subsystem.
   - It controls layout, sizing, colors, spacing, and the calculator’s look-and-feel, separate from the behavior code.

5. **Interaction and logic**
   - `app.js` is the application logic layer.
   - It handles button clicks, updates the display, and performs arithmetic operations, acting as the bridge between the DOM and calculator state.

6. **Data flow**
   - User input starts in the browser through button presses.
   - Events are captured in JavaScript, translated into calculator state changes, and reflected back into the DOM display.
   - The primary output is the updated on-screen result, not persisted data.

7. **State model**
   - The calculator state is likely kept entirely in memory in `app.js`.
   - Typical state elements for this kind of app are the current value, selected operator, and pending result, with no storage beyond the current session.

8. **Boundaries**
   - There is a clear separation between markup (`index.html`), behavior (`app.js`), and presentation (`style.css`).
   - No subsystem communicates with external services, making the architecture self-contained and deterministic.

9. **Deployment**
   - The README points to GitHub Pages, so the app is intended for static hosting.
   - Deployment is therefore just serving the static assets; no build pipeline is evident from the file tree.

10. **Supporting files**
   - `.vscode` contains editor configuration for development convenience.
   - `.gitattributes` likely manages line endings or repository text handling; it does not affect runtime architecture.

11. **Architecture summary**
   - At a high level, this is a three-file static front-end app: HTML shell, CSS skin, and JavaScript controller/engine.
   - The main diagram should show a browser user interacting with the DOM, with `app.js` mediating state and calculation logic entirely on the client side.

Main entry points: [`index.html`](https://github.com/wikode/calculatrice-javascript/blob/master/index.html) (HTML shell), [`app.js`](https://github.com/wikode/calculatrice-javascript/blob/master/app.js) (App logic), [`style.css`](https://github.com/wikode/calculatrice-javascript/blob/master/style.css) (Stylesheet)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client app"]
  node_browser["Browser<br/>runtime"]
  node_index_html["HTML shell<br/>markup<br/>[index.html]"]
  node_style_css["Stylesheet<br/>[style.css]"]
  node_app_js["App logic<br/>javascript<br/>[app.js]"]
  node_dom_ui["Calculator DOM<br/>ui"]
  node_state[("Calc state<br/>in-memory state")]
  node_ops{{"Arithmetic<br/>compute"}}
end

node_user(("User<br/>actor"))

node_user -->|"interacts with"| node_browser
node_browser -->|"loads"| node_index_html
node_index_html -->|"renders"| node_dom_ui
node_index_html -->|"styled by"| node_style_css
node_index_html -->|"executes"| node_app_js
node_app_js -->|"updates"| node_dom_ui
node_app_js -->|"reads/writes"| node_state
node_app_js -->|"invokes"| node_ops
node_state -.->|"drives"| node_ops
node_ops -->|"outputs"| node_dom_ui

click node_index_html "https://github.com/wikode/calculatrice-javascript/blob/master/index.html"
click node_style_css "https://github.com/wikode/calculatrice-javascript/blob/master/style.css"
click node_app_js "https://github.com/wikode/calculatrice-javascript/blob/master/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_browser,node_index_html,node_style_css,node_app_js,node_dom_ui,node_state,node_ops toneBlue
class node_user toneNeutral
```

## Components

### Client app

Static browser-based calculator UI and logic

- **Browser**: runtime · Executes the app entirely on the client
- [HTML shell](https://github.com/wikode/calculatrice-javascript/blob/master/index.html): markup · Defines the calculator layout and interactive elements · `index.html`
- [Stylesheet](https://github.com/wikode/calculatrice-javascript/blob/master/style.css): styles · Controls layout, spacing, colors, and visual presentation · `style.css`
- [App logic](https://github.com/wikode/calculatrice-javascript/blob/master/app.js): javascript · Handles events, state updates, and calculations · `app.js`
- **Calculator DOM**: ui · Display and button grid rendered in the page
- **Calc state**: in-memory state · Holds current value, operator, and pending result during a session
- **Arithmetic**: compute · Performs the calculator operations

### Other components

- **User**: actor · Presses calculator buttons and reads results

## Connections

- User → Browser: interacts with · User presses buttons and views results
- Browser → HTML shell: loads · The static page is opened in the browser
- HTML shell → Calculator DOM: renders · HTML provides the display and keypad structure
- HTML shell → Stylesheet: styled by · Presentation is applied through CSS
- HTML shell → App logic: executes · JavaScript is loaded to wire up interactions
- App logic → Calculator DOM: updates · Changes the display and button-driven interface
- App logic → Calc state: reads/writes · Maintains calculator state in memory
- App logic → Arithmetic: invokes · Calls arithmetic logic for operations
- Calc state → Arithmetic: drives · Stored values feed each computation
- Arithmetic → Calculator DOM: outputs · Results are reflected back onto the display