# shreyavarvaniya3108/learning-javascript architecture

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

- Interactive diagram: https://gitdiagram.com/shreyavarvaniya3108/learning-javascript
- Repository: https://github.com/shreyavarvaniya3108/learning-javascript

## Overview

This repository is a collection of standalone JavaScript learning examples, not an integrated application. A learner studies language fundamentals, collection and string operations, then browser-facing examples; many scripts print results, while a few interact with browser APIs. The README is empty, and the HTML pages and several scripts were not sampled, so their wiring and behavior cannot be established. The graph therefore shows the evidenced browser interactions without implying that the lessons form a runtime pipeline.

Main entry points: [`storage.js`](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/storage.js) (Browser Storage), [`Manipulating_Classes.js`](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/Manipulating_Classes.js) (Class Manipulation), [`variable.js`](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/variable.js) (Variables), [`datatype.js`](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/datatype.js) (Data Types)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_fundamentals["Language Fundamentals"]
  node_variable["Variables<br/>[variable.js]"]
  node_datatype["Data Types<br/>[datatype.js]"]
  node_operators["Operators<br/>[operators.js]"]
  node_conditions["Conditions"]
  node_switchcase["Switch Cases<br/>[switchcase.js]"]
  node_loops["Loops<br/>[loops.js]"]
  node_functions["Functions<br/>[function.js]"]
  node_function_declare["Function Declarations"]
  node_revision["Language Revision<br/>[revision.js]"]
  node_revision_method["Methods Revision<br/>[method.js]"]
  node_new_example["Operator Examples<br/>[new.js]"]
end

subgraph group_data["Data Operations"]
  node_array["Arrays<br/>[array.js]"]
  node_array_methods["Array Methods<br/>[array_method.js]"]
  node_array_conditions["Array Filtering"]
  node_objects["Object Methods<br/>[object_method.js]"]
  node_strings["String Methods<br/>[string_method.js]"]
  node_json["JSON Examples<br/>[json.js]"]
end

subgraph group_browser["Browser Examples"]
  node_dom_access["Element Access"]
  node_class_manipulation["Class Manipulation"]
  node_storage_example["Browser Storage<br/>[storage.js]"]
  node_index_html["HTML Page<br/>[index.html]"]
  node_dom_html["DOM Page<br/>[dom.html]"]
  node_class_html["Class Demo Page"]
  node_storage_html["Storage Page<br/>[storage_dom.html]"]
  node_new_html["HTML Example<br/>[new.html]"]
end

node_learner(("Learner"))
node_browser_dom["Browser DOM"]
node_local_storage[("Local Storage")]
node_session_storage[("Session Storage")]

node_learner -->|"studies"| node_variable
node_learner -->|"studies"| node_datatype
node_learner -->|"studies"| node_operators
node_learner -->|"studies"| node_conditions
node_learner -->|"studies"| node_switchcase
node_learner -->|"studies"| node_loops
node_learner -->|"studies"| node_functions
node_learner -->|"studies"| node_function_declare
node_learner -->|"studies"| node_revision
node_learner -->|"studies"| node_revision_method
node_learner -->|"studies"| node_new_example
node_learner -->|"studies"| node_array
node_learner -->|"studies"| node_array_methods
node_learner -->|"studies"| node_array_conditions
node_learner -->|"studies"| node_objects
node_learner -->|"studies"| node_strings
node_learner -->|"studies"| node_json
node_learner -->|"studies"| node_dom_access
node_learner -->|"studies"| node_class_manipulation
node_learner -->|"studies"| node_storage_example
node_storage_example -->|"reads"| node_browser_dom
node_storage_example -->|"writes"| node_local_storage
node_storage_example -->|"reads and writes"| node_session_storage
node_class_manipulation -->|"updates classes"| node_browser_dom

click node_variable "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/variable.js"
click node_datatype "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/datatype.js"
click node_operators "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/operators.js"
click node_conditions "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/if_else_condition.js"
click node_switchcase "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/switchcase.js"
click node_loops "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/loops.js"
click node_functions "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/function.js"
click node_function_declare "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/function_declare.js"
click node_revision "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/js%20revision/revision.js"
click node_revision_method "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/js%20revision/method.js"
click node_new_example "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/new.js"
click node_array "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/array.js"
click node_array_methods "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/array_method.js"
click node_array_conditions "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/js%20revision/array_with_conditions.js"
click node_objects "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/object_method.js"
click node_strings "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/string_method.js"
click node_json "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/json.js"
click node_dom_access "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/Accessing_Elements.js"
click node_class_manipulation "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/Manipulating_Classes.js"
click node_storage_example "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/storage.js"
click node_index_html "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/index.html"
click node_dom_html "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/dom.html"
click node_class_html "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/manipulating_classes.html"
click node_storage_html "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/storage_dom.html"
click node_new_html "https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/new.html"

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_variable,node_datatype,node_operators,node_conditions,node_switchcase,node_loops,node_functions,node_function_declare,node_revision,node_revision_method,node_new_example,node_browser_dom toneBlue
class node_array,node_array_methods,node_array_conditions,node_objects,node_strings,node_json,node_local_storage,node_session_storage toneAmber
class node_dom_access,node_class_manipulation,node_storage_example,node_index_html,node_dom_html,node_class_html,node_storage_html,node_new_html toneMint
class node_learner toneIndigo
```

## Components

### Language Fundamentals

- [Variables](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/variable.js): `variable.js`
- [Data Types](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/datatype.js): `datatype.js`
- [Operators](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/operators.js): `operators.js`
- [Conditions](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/if_else_condition.js): `if_else_condition.js`
- [Switch Cases](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/switchcase.js): `switchcase.js`
- [Loops](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/loops.js): `loops.js`
- [Functions](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/function.js): `function.js`
- [Function Declarations](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/function_declare.js): `function_declare.js`
- [Language Revision](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/js%20revision/revision.js): `js revision/revision.js`
- [Methods Revision](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/js%20revision/method.js): `js revision/method.js`
- [Operator Examples](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/new.js): `new.js`

### Data Operations

- [Arrays](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/array.js): `array.js`
- [Array Methods](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/array_method.js): `array_method.js`
- [Array Filtering](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/js%20revision/array_with_conditions.js): `js revision/array_with_conditions.js`
- [Object Methods](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/object_method.js): `object_method.js`
- [String Methods](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/string_method.js): `string_method.js`
- [JSON Examples](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/json.js): `json.js`

### Browser Examples

- [Element Access](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/Accessing_Elements.js): `Accessing_Elements.js`
- [Class Manipulation](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/Manipulating_Classes.js): `Manipulating_Classes.js`
- [Browser Storage](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/storage.js): `storage.js`
- [HTML Page](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/index.html): `index.html`
- [DOM Page](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/dom.html): `dom.html`
- [Class Demo Page](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/manipulating_classes.html): `manipulating_classes.html`
- [Storage Page](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/storage_dom.html): `storage_dom.html`
- [HTML Example](https://github.com/shreyavarvaniya3108/learning-javascript/blob/main/new.html): `new.html`

### Other components

- **Learner**
- **Browser DOM**
- **Local Storage**
- **Session Storage**

## Connections

- Learner → Variables: studies
- Learner → Data Types: studies
- Learner → Operators: studies
- Learner → Conditions: studies
- Learner → Switch Cases: studies
- Learner → Loops: studies
- Learner → Functions: studies
- Learner → Function Declarations: studies
- Learner → Language Revision: studies
- Learner → Methods Revision: studies
- Learner → Operator Examples: studies
- Learner → Arrays: studies
- Learner → Array Methods: studies
- Learner → Array Filtering: studies
- Learner → Object Methods: studies
- Learner → String Methods: studies
- Learner → JSON Examples: studies
- Learner → Element Access: studies
- Learner → Class Manipulation: studies
- Learner → Browser Storage: studies
- Browser Storage → Browser DOM: reads
- Browser Storage → Local Storage: writes
- Browser Storage → Session Storage: reads and writes
- Class Manipulation → Browser DOM: updates classes