# arunkudiyal/fed_sem5 architecture

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

- Interactive diagram: https://gitdiagram.com/arunkudiyal/fed_sem5
- Repository: https://github.com/arunkudiyal/fed_sem5

## Overview

This repository is a collection of browser-based JavaScript teaching examples, not a single application. The learner-facing progression covers language fundamentals, DOM interaction, asynchronous task creation, and HTTP requests; separate examples demonstrate GitHub and YouTube search APIs. The AJAX and YouTube request flows are visible in sampled source. DOM and fundamentals examples are mostly commented out, and the HTML files were not sampled, so page-to-script wiring and active DOM behavior are not inferred.

Main entry points: [`YouTube/script.js`](https://github.com/arunkudiyal/fed_sem5/blob/main/YouTube/script.js) (YouTube Search), [`AJAX/ajax.js`](https://github.com/arunkudiyal/fed_sem5/blob/main/AJAX/ajax.js) (GitHub AJAX)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_fundamentals["Language Basics"]
  node_basics["JavaScript Basics<br/>[main.js]"]
end

subgraph group_browser["Browser Interaction"]
  node_dom_examples["DOM Examples<br/>[dom.js]"]
  node_dom_page["DOM Lesson Page<br/>[index.html]"]
end

subgraph group_async["Async Patterns"]
  node_async_callbacks["Callback Tasks<br/>[main.js]"]
  node_async_promises["Promise Tasks<br/>[promises.js]"]
  node_async_page["Async Lesson Page<br/>[index.html]"]
end

subgraph group_apis["API Requests"]
  node_ajax_example["GitHub AJAX<br/>[ajax.js]"]
  node_ajax_page["AJAX Lesson Page<br/>[index.html]"]
  node_youtube_search["YouTube Search<br/>[script.js]"]
  node_youtube_page["YouTube Lesson Page<br/>[index.html]"]
end

node_learner(("Learner"))
node_github_api{{"GitHub Users API"}}
node_youtube_api{{"YouTube Search API"}}

node_learner -->|"clicks search"| node_youtube_search
node_ajax_example -->|"GET users"| node_github_api
node_youtube_search -->|"GET search"| node_youtube_api

click node_basics "https://github.com/arunkudiyal/fed_sem5/blob/main/main.js"
click node_dom_examples "https://github.com/arunkudiyal/fed_sem5/blob/main/DOM/dom.js"
click node_dom_page "https://github.com/arunkudiyal/fed_sem5/blob/main/DOM/index.html"
click node_async_callbacks "https://github.com/arunkudiyal/fed_sem5/blob/main/Async_JS/main.js"
click node_async_promises "https://github.com/arunkudiyal/fed_sem5/blob/main/Async_JS/promises.js"
click node_async_page "https://github.com/arunkudiyal/fed_sem5/blob/main/Async_JS/index.html"
click node_ajax_example "https://github.com/arunkudiyal/fed_sem5/blob/main/AJAX/ajax.js"
click node_ajax_page "https://github.com/arunkudiyal/fed_sem5/blob/main/AJAX/index.html"
click node_youtube_search "https://github.com/arunkudiyal/fed_sem5/blob/main/YouTube/script.js"
click node_youtube_page "https://github.com/arunkudiyal/fed_sem5/blob/main/YouTube/index.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_basics,node_github_api toneBlue
class node_dom_examples,node_dom_page toneAmber
class node_async_callbacks,node_async_promises,node_async_page,node_youtube_api toneMint
class node_ajax_example,node_ajax_page,node_youtube_search,node_youtube_page toneRose
class node_learner toneIndigo
```

## Components

### Language Basics

- [JavaScript Basics](https://github.com/arunkudiyal/fed_sem5/blob/main/main.js): `main.js`

### Browser Interaction

- [DOM Examples](https://github.com/arunkudiyal/fed_sem5/blob/main/DOM/dom.js): `DOM/dom.js`
- [DOM Lesson Page](https://github.com/arunkudiyal/fed_sem5/blob/main/DOM/index.html): `DOM/index.html`

### Async Patterns

- [Callback Tasks](https://github.com/arunkudiyal/fed_sem5/blob/main/Async_JS/main.js): `Async_JS/main.js`
- [Promise Tasks](https://github.com/arunkudiyal/fed_sem5/blob/main/Async_JS/promises.js): `Async_JS/promises.js`
- [Async Lesson Page](https://github.com/arunkudiyal/fed_sem5/blob/main/Async_JS/index.html): `Async_JS/index.html`

### API Requests

- [GitHub AJAX](https://github.com/arunkudiyal/fed_sem5/blob/main/AJAX/ajax.js): `AJAX/ajax.js`
- [AJAX Lesson Page](https://github.com/arunkudiyal/fed_sem5/blob/main/AJAX/index.html): `AJAX/index.html`
- [YouTube Search](https://github.com/arunkudiyal/fed_sem5/blob/main/YouTube/script.js): `YouTube/script.js`
- [YouTube Lesson Page](https://github.com/arunkudiyal/fed_sem5/blob/main/YouTube/index.html): `YouTube/index.html`

### Other components

- **Learner**
- **GitHub Users API**
- **YouTube Search API**

## Connections

- Learner → YouTube Search: clicks search
- GitHub AJAX → GitHub Users API: GET users
- YouTube Search → YouTube Search API: GET search