# jatin33/100daysofcode architecture

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

- Interactive diagram: https://gitdiagram.com/jatin33/100daysofcode
- Repository: https://github.com/jatin33/100daysofcode

## Overview

#### Purpose and Shape
This is a learning repository for JavaScript30-style browser exercises within a broader 100 Days of Code effort. It is not a unified application: each directory is an independently runnable static page focused on one DOM, CSS, or browser-API behavior. The root `README.md` documents the exercise sequence; there is no central router, shared application layer, or build output.

Paths: `README.md`, `package.json`, `_config.yml`

#### Entry Points and Execution Model
Open each exercise HTML file directly in a browser or serve its containing directory as static content. Most behavior is embedded in each HTML entry point; where separated, page-specific JavaScript and CSS are colocated. “START” filenames indicate challenge/starter variants rather than a common bootstrap.

Paths: `JS and CSS Clock/index-START.html`, `ArrayCardio1/index-START.html`, `Flex Panel Gallery/index.html`

#### DOM Interaction Exercises
A major component group demonstrates event-driven DOM updates: keyboard/mouse input, selection state, propagation, scrolling, and geometry-based presentation. Browser events are the primary control boundary: listeners transform event state into direct DOM/CSS changes.

Paths: `Hold Shift and Check Checkboxes/index.html`, `Event Capture, Propagation, Bubbling and Once/index.html`, `Slide in on Scroll/index.html`

#### UI State and Layout Demos
Several isolated pages couple JavaScript with CSS for interactive visual behavior, including draggable scrolling, dynamic CSS variables, navigation/highlighting, panels, timers, and shadows. State is generally ephemeral in the page runtime, except where browser storage is used.

Paths: `Click and Drag/index.html`, `CSS Variables/index-START.html`, `Stripe Follow Along Nav/script.js`

#### Data Transformation and Rendering
Array-method exercises process in-page datasets, while search/sorting examples render or reorder browser-visible results. This is client-only data flow: source data or markup → JavaScript array/string transformations → DOM output.

Paths: `Array Cardio Day 2/index.html`, `Type Ahead/index.html`, `Sort Without Articles/index.html`

#### Browser Media, Canvas, and Speech Boundaries
The repository directly integrates browser-provided capabilities that require runtime support and, for camera/microphone access, user permission. Media/player controls operate on a bundled video; webcam work captures stream imagery through canvas; speech pages depend on Web Speech APIs.

Paths: `Custom Video Player/index.html`, `Custom Video Player/652333414.mp4`, `Webcam Fun/scripts.js`, `Speech Detection/index-START.html`, `Speech Synthesis/script.js`

#### Persistence, External Services, and Deployment
`LocalStorage` is the principal client persistence boundary, serializing page state in the browser. The README references prior static hosting on Amazon S3 and identifies an external Cornify script for key-sequence effects. No backend service implementation is present. Per-exercise `package.json` files exist for speech/webcam directories, but the visible architecture remains static browser pages.

Paths: `LocalStorage/index.html`, `Key Sequence Detection/index.html`, `Speech Detection/package.json`, `Webcam Fun/package.json`

Main entry points: [`Hold Shift and Check Checkboxes/index.html`](https://github.com/jatin33/100daysofcode/blob/master/Hold%20Shift%20and%20Check%20Checkboxes/index.html) (Event-driven pages), [`Array Cardio Day 2/index.html`](https://github.com/jatin33/100daysofcode/blob/master/Array%20Cardio%20Day%202/index.html) (Array and rendering demos), [`README.md`](https://github.com/jatin33/100daysofcode/blob/master/README.md) (Exercise sequence), [`Custom Video Player/index.html`](https://github.com/jatin33/100daysofcode/blob/master/Custom%20Video%20Player/index.html) (Custom video player)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Repository guide"]
  node_readme["Exercise sequence<br/>documentation<br/>[README.md]"]
end

subgraph group_dom["DOM interactions"]
  node_dom_events["Event-driven pages<br/>static pages<br/>[index.html]"]
  node_event_propagation["Propagation demo<br/>static page<br/>[index.html]"]
  node_scroll_slide["Scroll geometry demo<br/>static page<br/>[index.html]"]
end

subgraph group_ui["UI and data demos"]
  node_clock["Clock page<br/>static page<br/>[index-START.html]"]
  node_array_cardio_1["Array Cardio starter<br/>static page<br/>[index-START.html]"]
  node_flex_gallery["Flex panel gallery<br/>static page<br/>[index.html]"]
  node_drag_scroll["Drag scrolling<br/>static page<br/>[index.html]"]
  node_css_variables["CSS variable controls<br/>static page<br/>[index-START.html]"]
  node_nav_script["Follow-along nav<br/>page script<br/>[script.js]"]
  node_data_rendering["Array and rendering demos<br/>static pages<br/>[index.html]"]
  node_type_ahead["Type-ahead search<br/>static page<br/>[index.html]"]
  node_article_sort["Article sorter<br/>static page<br/>[index.html]"]
end

subgraph group_browser["Browser capabilities"]
  node_video_player["Custom video player<br/>static page<br/>[index.html]"]
  node_video_asset["Bundled video<br/>media asset<br/>[652333414.mp4]"]
  node_webcam["Webcam and canvas<br/>browser media script<br/>[scripts.js]"]
  node_speech_detection["Speech recognition<br/>static page<br/>[index-START.html]"]
  node_speech_synthesis["Speech synthesis<br/>page script<br/>[script.js]"]
  node_browser_runtime{{"Browser runtime<br/>execution boundary"}}
  node_camera_permission{{"Camera permission and stream<br/>browser API"}}
  node_web_speech{{"Web Speech APIs<br/>browser API"}}
end

subgraph group_external["Persistence and external dependencies"]
  node_local_storage["LocalStorage demo<br/>static page<br/>[index.html]"]
  node_key_sequence["Key sequence demo<br/>static page<br/>[index.html]"]
  node_browser_storage[("Browser LocalStorage<br/>client persistence")]
  node_cornify{{"Cornify script<br/>external script"}}
end

node_readme -.->|"documents"| node_clock
node_readme -.->|"documents"| node_array_cardio_1
node_browser_runtime -->|"runs"| node_clock
node_browser_runtime -->|"dispatches events to"| node_dom_events
node_browser_runtime -->|"runs"| node_drag_scroll
node_browser_runtime -->|"runs"| node_data_rendering
node_browser_runtime -->|"runs"| node_video_player
node_browser_runtime -->|"runs"| node_local_storage
node_dom_events -.->|"includes pattern shown by"| node_event_propagation
node_dom_events -.->|"includes pattern shown by"| node_scroll_slide
node_data_rendering -.->|"search variant"| node_type_ahead
node_data_rendering -.->|"sorting variant"| node_article_sort
node_video_player -->|"plays"| node_video_asset
node_webcam -->|"requests"| node_camera_permission
node_speech_detection -->|"uses recognition"| node_web_speech
node_speech_synthesis -->|"uses synthesis"| node_web_speech
node_local_storage -->|"persists state in"| node_browser_storage
node_key_sequence -->|"loads"| node_cornify

click node_readme "https://github.com/jatin33/100daysofcode/blob/master/README.md"
click node_clock "https://github.com/jatin33/100daysofcode/blob/master/JS%20and%20CSS%20Clock/index-START.html"
click node_array_cardio_1 "https://github.com/jatin33/100daysofcode/blob/master/ArrayCardio1/index-START.html"
click node_flex_gallery "https://github.com/jatin33/100daysofcode/blob/master/Flex%20Panel%20Gallery/index.html"
click node_dom_events "https://github.com/jatin33/100daysofcode/blob/master/Hold%20Shift%20and%20Check%20Checkboxes/index.html"
click node_event_propagation "https://github.com/jatin33/100daysofcode/blob/master/Event%20Capture%2C%20Propagation%2C%20Bubbling%20and%20Once/index.html"
click node_scroll_slide "https://github.com/jatin33/100daysofcode/blob/master/Slide%20in%20on%20Scroll/index.html"
click node_drag_scroll "https://github.com/jatin33/100daysofcode/blob/master/Click%20and%20Drag/index.html"
click node_css_variables "https://github.com/jatin33/100daysofcode/blob/master/CSS%20Variables/index-START.html"
click node_nav_script "https://github.com/jatin33/100daysofcode/blob/master/Stripe%20Follow%20Along%20Nav/script.js"
click node_data_rendering "https://github.com/jatin33/100daysofcode/blob/master/Array%20Cardio%20Day%202/index.html"
click node_type_ahead "https://github.com/jatin33/100daysofcode/blob/master/Type%20Ahead/index.html"
click node_article_sort "https://github.com/jatin33/100daysofcode/blob/master/Sort%20Without%20Articles/index.html"
click node_video_player "https://github.com/jatin33/100daysofcode/blob/master/Custom%20Video%20Player/index.html"
click node_video_asset "https://github.com/jatin33/100daysofcode/blob/master/Custom%20Video%20Player/652333414.mp4"
click node_webcam "https://github.com/jatin33/100daysofcode/blob/master/Webcam%20Fun/scripts.js"
click node_speech_detection "https://github.com/jatin33/100daysofcode/blob/master/Speech%20Detection/index-START.html"
click node_speech_synthesis "https://github.com/jatin33/100daysofcode/blob/master/Speech%20Synthesis/script.js"
click node_local_storage "https://github.com/jatin33/100daysofcode/blob/master/LocalStorage/index.html"
click node_key_sequence "https://github.com/jatin33/100daysofcode/blob/master/Key%20Sequence%20Detection/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_readme toneBlue
class node_dom_events,node_event_propagation,node_scroll_slide toneAmber
class node_clock,node_array_cardio_1,node_flex_gallery,node_drag_scroll,node_css_variables,node_nav_script,node_data_rendering,node_type_ahead,node_article_sort toneMint
class node_video_player,node_video_asset,node_webcam,node_speech_detection,node_speech_synthesis,node_browser_runtime,node_camera_permission,node_web_speech toneRose
class node_local_storage,node_key_sequence,node_browser_storage,node_cornify toneIndigo
```

## Components

### Repository guide

- [Exercise sequence](https://github.com/jatin33/100daysofcode/blob/master/README.md): documentation · Lists the independently runnable exercises. · `README.md`

### DOM interactions

- [Event-driven pages](https://github.com/jatin33/100daysofcode/blob/master/Hold%20Shift%20and%20Check%20Checkboxes/index.html): static pages · Listeners directly update DOM and CSS state. · `Hold Shift and Check Checkboxes/index.html`
- [Propagation demo](https://github.com/jatin33/100daysofcode/blob/master/Event%20Capture%2C%20Propagation%2C%20Bubbling%20and%20Once/index.html): static page · `Event Capture, Propagation, Bubbling and Once/index.html`
- [Scroll geometry demo](https://github.com/jatin33/100daysofcode/blob/master/Slide%20in%20on%20Scroll/index.html): static page · `Slide in on Scroll/index.html`

### UI and data demos

- [Clock page](https://github.com/jatin33/100daysofcode/blob/master/JS%20and%20CSS%20Clock/index-START.html): static page · Standalone HTML/CSS/JS exercise. · `JS and CSS Clock/index-START.html`
- [Array Cardio starter](https://github.com/jatin33/100daysofcode/blob/master/ArrayCardio1/index-START.html): static page · `ArrayCardio1/index-START.html`
- [Flex panel gallery](https://github.com/jatin33/100daysofcode/blob/master/Flex%20Panel%20Gallery/index.html): static page · `Flex Panel Gallery/index.html`
- [Drag scrolling](https://github.com/jatin33/100daysofcode/blob/master/Click%20and%20Drag/index.html): static page · `Click and Drag/index.html`
- [CSS variable controls](https://github.com/jatin33/100daysofcode/blob/master/CSS%20Variables/index-START.html): static page · `CSS Variables/index-START.html`
- [Follow-along nav](https://github.com/jatin33/100daysofcode/blob/master/Stripe%20Follow%20Along%20Nav/script.js): page script · Updates navigation highlight geometry. · `Stripe Follow Along Nav/script.js`
- [Array and rendering demos](https://github.com/jatin33/100daysofcode/blob/master/Array%20Cardio%20Day%202/index.html): static pages · Transforms client-side data into visible results. · `Array Cardio Day 2/index.html`
- [Type-ahead search](https://github.com/jatin33/100daysofcode/blob/master/Type%20Ahead/index.html): static page · `Type Ahead/index.html`
- [Article sorter](https://github.com/jatin33/100daysofcode/blob/master/Sort%20Without%20Articles/index.html): static page · `Sort Without Articles/index.html`

### Browser capabilities

- [Custom video player](https://github.com/jatin33/100daysofcode/blob/master/Custom%20Video%20Player/index.html): static page · `Custom Video Player/index.html`
- [Bundled video](https://github.com/jatin33/100daysofcode/blob/master/Custom%20Video%20Player/652333414.mp4): media asset · `Custom Video Player/652333414.mp4`
- [Webcam and canvas](https://github.com/jatin33/100daysofcode/blob/master/Webcam%20Fun/scripts.js): browser media script · Captures a permitted camera stream and renders imagery through canvas. · `Webcam Fun/scripts.js`
- [Speech recognition](https://github.com/jatin33/100daysofcode/blob/master/Speech%20Detection/index-START.html): static page · Uses the browser Web Speech recognition API. · `Speech Detection/index-START.html`
- [Speech synthesis](https://github.com/jatin33/100daysofcode/blob/master/Speech%20Synthesis/script.js): page script · Uses the browser speech synthesis API. · `Speech Synthesis/script.js`
- **Browser runtime**: execution boundary · Pages run directly as static browser content.
- **Camera permission and stream**: browser API
- **Web Speech APIs**: browser API

### Persistence and external dependencies

- [LocalStorage demo](https://github.com/jatin33/100daysofcode/blob/master/LocalStorage/index.html): static page · Serializes page state in browser storage. · `LocalStorage/index.html`
- [Key sequence demo](https://github.com/jatin33/100daysofcode/blob/master/Key%20Sequence%20Detection/index.html): static page · Loads an external Cornify effect script. · `Key Sequence Detection/index.html`
- **Browser LocalStorage**: client persistence
- **Cornify script**: external script

## Connections

- Exercise sequence → Clock page: documents
- Exercise sequence → Array Cardio starter: documents
- Browser runtime → Clock page: runs
- Browser runtime → Event-driven pages: dispatches events to
- Browser runtime → Drag scrolling: runs
- Browser runtime → Array and rendering demos: runs
- Browser runtime → Custom video player: runs
- Browser runtime → LocalStorage demo: runs
- Event-driven pages → Propagation demo: includes pattern shown by
- Event-driven pages → Scroll geometry demo: includes pattern shown by
- Array and rendering demos → Type-ahead search: search variant
- Array and rendering demos → Article sorter: sorting variant
- Custom video player → Bundled video: plays
- Webcam and canvas → Camera permission and stream: requests
- Speech recognition → Web Speech APIs: uses recognition
- Speech synthesis → Web Speech APIs: uses synthesis
- LocalStorage demo → Browser LocalStorage: persists state in
- Key sequence demo → Cornify script: loads