# jstmejosh/learningjavascript architecture

> Architecture diagram of the GitHub repository jstmejosh/learningjavascript, 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/jstmejosh/learningjavascript
- Repository: https://github.com/jstmejosh/learningjavascript

## Overview

This repository is a JavaScript learning playground: learners explore standalone scripts covering language fundamentals, data structures, functions, and browser interaction. The main user-to-result path is through browser-facing examples that accept prompts or respond to clicks and display results; many other examples log demonstrations to the console. The README also describes forms and HTML/CSS/JavaScript projects, but the sampled sources do not establish how the page, script.js, and individual examples are wired together, so those links are omitted.

Main entry points: [`conditiional.js`](https://github.com/jstmejosh/learningjavascript/blob/main/conditiional.js) (Conditions), [`DOM.js`](https://github.com/jstmejosh/learningjavascript/blob/main/DOM.js) (DOM Examples), [`higherOrderFunction.js`](https://github.com/jstmejosh/learningjavascript/blob/main/higherOrderFunction.js) (Higher-Order Functions), [`functions.js`](https://github.com/jstmejosh/learningjavascript/blob/main/functions.js) (Functions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_fundamentals["Language Fundamentals"]
  node_variables["Variables<br/>[variables.js]"]
  node_types["Data Types<br/>[dataType.js]"]
  node_operators["Operators<br/>[operators.js]"]
  node_numbers["Numbers<br/>[numbers.js]"]
  node_strings["Strings<br/>[strings.js]"]
  node_conditions["Conditions<br/>[conditiional.js]"]
end

subgraph group_data["Data and Functions"]
  node_arrays["Arrays<br/>[arrays.js]"]
  node_objects["Objects<br/>[objects.js]"]
  node_loops["Loops<br/>[loops.js]"]
  node_functions["Functions<br/>[functions.js]"]
  node_higher_order["Higher-Order Functions"]
end

subgraph group_browser["Browser Interaction"]
  node_page["HTML Page<br/>[index.html]"]
  node_dom["DOM Examples<br/>[DOM.js]"]
  node_script["Script Examples<br/>[script.js]"]
end

node_learner(("Learner"))
node_browser_runtime(("Browser"))
node_console(("Console"))

node_learner -->|"opens"| node_page
node_learner -->|"runs prompts"| node_conditions
node_browser_runtime -->|"provides dialogs"| node_conditions
node_conditions -->|"alerts"| node_browser_runtime
node_browser_runtime -->|"provides DOM"| node_dom
node_dom -->|"updates elements"| node_browser_runtime
node_dom -->|"registers click handler"| node_browser_runtime
node_browser_runtime -->|"displays logs"| node_console
node_variables -->|"logs"| node_console
node_types -->|"logs"| node_console
node_operators -->|"logs"| node_console
node_numbers -->|"logs"| node_console
node_strings -->|"logs"| node_console
node_conditions -->|"logs"| node_console
node_arrays -->|"logs"| node_console
node_objects -->|"logs"| node_console
node_loops -->|"logs"| node_console
node_functions -->|"logs"| node_console
node_higher_order -->|"logs"| node_console
node_higher_order -->|"imports and calls"| node_functions

click node_variables "https://github.com/jstmejosh/learningjavascript/blob/main/variables.js"
click node_types "https://github.com/jstmejosh/learningjavascript/blob/main/dataType.js"
click node_operators "https://github.com/jstmejosh/learningjavascript/blob/main/operators.js"
click node_numbers "https://github.com/jstmejosh/learningjavascript/blob/main/numbers.js"
click node_strings "https://github.com/jstmejosh/learningjavascript/blob/main/strings.js"
click node_conditions "https://github.com/jstmejosh/learningjavascript/blob/main/conditiional.js"
click node_arrays "https://github.com/jstmejosh/learningjavascript/blob/main/arrays.js"
click node_objects "https://github.com/jstmejosh/learningjavascript/blob/main/objects.js"
click node_loops "https://github.com/jstmejosh/learningjavascript/blob/main/loops.js"
click node_functions "https://github.com/jstmejosh/learningjavascript/blob/main/functions.js"
click node_higher_order "https://github.com/jstmejosh/learningjavascript/blob/main/higherOrderFunction.js"
click node_page "https://github.com/jstmejosh/learningjavascript/blob/main/index.html"
click node_dom "https://github.com/jstmejosh/learningjavascript/blob/main/DOM.js"
click node_script "https://github.com/jstmejosh/learningjavascript/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_variables,node_types,node_operators,node_numbers,node_strings,node_conditions,node_browser_runtime toneBlue
class node_arrays,node_objects,node_loops,node_functions,node_higher_order toneAmber
class node_page,node_dom,node_script toneMint
class node_learner,node_console toneIndigo
```

## Components

### Language Fundamentals

- [Variables](https://github.com/jstmejosh/learningjavascript/blob/main/variables.js): `variables.js`
- [Data Types](https://github.com/jstmejosh/learningjavascript/blob/main/dataType.js): `dataType.js`
- [Operators](https://github.com/jstmejosh/learningjavascript/blob/main/operators.js): `operators.js`
- [Numbers](https://github.com/jstmejosh/learningjavascript/blob/main/numbers.js): `numbers.js`
- [Strings](https://github.com/jstmejosh/learningjavascript/blob/main/strings.js): `strings.js`
- [Conditions](https://github.com/jstmejosh/learningjavascript/blob/main/conditiional.js): `conditiional.js`

### Data and Functions

- [Arrays](https://github.com/jstmejosh/learningjavascript/blob/main/arrays.js): `arrays.js`
- [Objects](https://github.com/jstmejosh/learningjavascript/blob/main/objects.js): `objects.js`
- [Loops](https://github.com/jstmejosh/learningjavascript/blob/main/loops.js): `loops.js`
- [Functions](https://github.com/jstmejosh/learningjavascript/blob/main/functions.js): `functions.js`
- [Higher-Order Functions](https://github.com/jstmejosh/learningjavascript/blob/main/higherOrderFunction.js): `higherOrderFunction.js`

### Browser Interaction

- [HTML Page](https://github.com/jstmejosh/learningjavascript/blob/main/index.html): `index.html`
- [DOM Examples](https://github.com/jstmejosh/learningjavascript/blob/main/DOM.js): `DOM.js`
- [Script Examples](https://github.com/jstmejosh/learningjavascript/blob/main/script.js): `script.js`

### Other components

- **Learner**
- **Browser**
- **Console**

## Connections

- Learner → HTML Page: opens
- Learner → Conditions: runs prompts
- Browser → Conditions: provides dialogs
- Conditions → Browser: alerts
- Browser → DOM Examples: provides DOM
- DOM Examples → Browser: updates elements
- DOM Examples → Browser: registers click handler
- Browser → Console: displays logs
- Variables → Console: logs
- Data Types → Console: logs
- Operators → Console: logs
- Numbers → Console: logs
- Strings → Console: logs
- Conditions → Console: logs
- Arrays → Console: logs
- Objects → Console: logs
- Loops → Console: logs
- Functions → Console: logs
- Higher-Order Functions → Console: logs
- Higher-Order Functions → Functions: imports and calls