# waraton/html-css-js architecture

> Architecture diagram of the GitHub repository waraton/html-css-js, 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/waraton/html-css-js
- Repository: https://github.com/waraton/html-css-js
- Video tour (about a minute): https://gitdiagram.com/waraton/html-css-js/video

## Overview

This repository is a portfolio of independent, browser-based JavaScript experiments rather than one integrated application. The recurring user workflow is to open a mini-app, interact with its controls, and see a browser-rendered result; some apps also fetch data from public APIs. The graph groups projects by their apparent purpose and shows only API calls evidenced by sampled source. Many listed projects were not sampled, so their internal wiring is not inferred.

Main entry points: [`dictionary/app.js`](https://github.com/waraton/html-css-js/blob/main/dictionary/app.js) (Dictionary), [`BibleSearch/app.js`](https://github.com/waraton/html-css-js/blob/main/BibleSearch/app.js) (Bible search), [`simple-calculator/app.js`](https://github.com/waraton/html-css-js/blob/main/simple-calculator/app.js) (Simple calculator), [`live_search/app.js`](https://github.com/waraton/html-css-js/blob/main/live_search/app.js) (Live search)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_reference["Learning & Reference"]
  node_bible["Bible search<br/>[app.js]"]
  node_dictionary["Dictionary<br/>[app.js]"]
  node_opposites["Opposites quiz<br/>[app.js]"]
  node_datarep["Data representation<br/>[app.js]"]
  node_whoami["Who am I<br/>[app.js]"]
end

subgraph group_tools["Calculators &amp; Tools"]
  node_baseconv["Base converter<br/>[app.js]"]
  node_calculator["Simple calculator<br/>[app.js]"]
  node_lbkg["Weight converter<br/>[lb-kg-converter.py]"]
  node_calendar["Calendar<br/>[app.js]"]
  node_clock["Digital clock<br/>[clock.js]"]
  node_graph["Linear graph<br/>[app.js]"]
end

subgraph group_visual["Visual &amp; Media"]
  node_imageedit["Image editor<br/>[app.js]"]
  node_fractals["Fractal canvas<br/>[app.js]"]
  node_gallery["Image gallery<br/>[app.js]"]
  node_viewer["Image viewer<br/>[app.js]"]
  node_media["Media player<br/>[js.js]"]
  node_lyrics["Lyric timelines<br/>[interactivity.js]"]
end

subgraph group_content["Content &amp; Data"]
  node_southsudan["South Sudan flag<br/>[app.js]"]
  node_livesearch["Live search<br/>[app.js]"]
  node_jokes["Joke display<br/>[app.js]"]
  node_memes["Meme maker<br/>[app.js]"]
end

node_user(("Browser user"))
node_browser["Browser UI"]
node_bibleapi{{"Bible API"}}
node_dictapi{{"Dictionary API"}}
node_randomuser{{"Random User API"}}
node_jokeapi{{"Dad joke API"}}
node_localstorage[("Browser storage")]

node_user -->|"searches"| node_bible
node_bible -->|"fetches verse"| node_bibleapi
node_bible -->|"renders verse"| node_browser
node_user -->|"looks up word"| node_dictionary
node_dictionary -->|"fetches definition"| node_dictapi
node_dictionary -->|"renders definition"| node_browser
node_dictionary -->|"caches result"| node_localstorage
node_user -->|"answers quiz"| node_opposites
node_opposites -->|"updates quiz"| node_browser
node_user -->|"views data"| node_datarep
node_datarep -->|"renders table"| node_browser
node_user -->|"opens"| node_whoami
node_user -->|"converts number"| node_baseconv
node_baseconv -->|"shows conversion"| node_browser
node_user -->|"calculates"| node_calculator
node_calculator -->|"shows answer"| node_browser
node_calculator -->|"stores answer"| node_localstorage
node_user -->|"converts weight"| node_lbkg
node_user -->|"views calendar"| node_calendar
node_user -->|"views time"| node_clock
node_user -->|"plots equation"| node_graph
node_user -->|"edits image"| node_imageedit
node_imageedit -->|"updates preview"| node_browser
node_user -->|"mutates drawing"| node_fractals
node_fractals -->|"draws canvas"| node_browser
node_user -->|"browses images"| node_gallery
node_user -->|"views image"| node_viewer
node_user -->|"controls playback"| node_media
node_user -->|"controls timeline"| node_lyrics
node_user -->|"selects palette"| node_southsudan
node_southsudan -->|"updates colors"| node_browser
node_user -->|"filters users"| node_livesearch
node_livesearch -->|"fetches users"| node_randomuser
node_livesearch -->|"renders matches"| node_browser
node_user -->|"requests joke"| node_jokes
node_jokes -->|"fetches joke"| node_jokeapi
node_jokes -->|"shows joke"| node_browser
node_user -->|"creates meme"| node_memes

click node_bible "https://github.com/waraton/html-css-js/blob/main/BibleSearch/app.js"
click node_dictionary "https://github.com/waraton/html-css-js/blob/main/dictionary/app.js"
click node_opposites "https://github.com/waraton/html-css-js/blob/main/opposites/app.js"
click node_datarep "https://github.com/waraton/html-css-js/blob/main/data-representation/app.js"
click node_whoami "https://github.com/waraton/html-css-js/blob/main/whoAmI/app.js"
click node_baseconv "https://github.com/waraton/html-css-js/blob/main/base-converter/app.js"
click node_calculator "https://github.com/waraton/html-css-js/blob/main/simple-calculator/app.js"
click node_lbkg "https://github.com/waraton/html-css-js/blob/main/lb-kg-converter.py"
click node_calendar "https://github.com/waraton/html-css-js/blob/main/calender/js/app.js"
click node_clock "https://github.com/waraton/html-css-js/blob/main/Digital-clock/clock.js"
click node_graph "https://github.com/waraton/html-css-js/blob/main/graph_of_linear_equation/app.js"
click node_imageedit "https://github.com/waraton/html-css-js/blob/main/image-editing/app.js"
click node_fractals "https://github.com/waraton/html-css-js/blob/main/fractals-canvas/app.js"
click node_gallery "https://github.com/waraton/html-css-js/blob/main/Gallery/app.js"
click node_viewer "https://github.com/waraton/html-css-js/blob/main/image_viewer/app.js"
click node_media "https://github.com/waraton/html-css-js/blob/main/media-player/js.js"
click node_lyrics "https://github.com/waraton/html-css-js/blob/main/Lyrical/interactivity.js"
click node_southsudan "https://github.com/waraton/html-css-js/blob/main/south-sudan-flag/app.js"
click node_livesearch "https://github.com/waraton/html-css-js/blob/main/live_search/app.js"
click node_jokes "https://github.com/waraton/html-css-js/blob/main/jokes/app.js"
click node_memes "https://github.com/waraton/html-css-js/blob/main/memes/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_bible,node_dictionary,node_opposites,node_datarep,node_whoami,node_user,node_browser,node_randomuser toneBlue
class node_baseconv,node_calculator,node_lbkg,node_calendar,node_clock,node_graph,node_localstorage toneAmber
class node_imageedit,node_fractals,node_gallery,node_viewer,node_media,node_lyrics,node_bibleapi,node_dictapi,node_jokeapi toneMint
class node_southsudan,node_livesearch,node_jokes,node_memes toneRose
```

## Components

### Learning & Reference

- [Bible search](https://github.com/waraton/html-css-js/blob/main/BibleSearch/app.js): `BibleSearch/app.js`
- [Dictionary](https://github.com/waraton/html-css-js/blob/main/dictionary/app.js): `dictionary/app.js`
- [Opposites quiz](https://github.com/waraton/html-css-js/blob/main/opposites/app.js): `opposites/app.js`
- [Data representation](https://github.com/waraton/html-css-js/blob/main/data-representation/app.js): `data-representation/app.js`
- [Who am I](https://github.com/waraton/html-css-js/blob/main/whoAmI/app.js): `whoAmI/app.js`

### Calculators & Tools

- [Base converter](https://github.com/waraton/html-css-js/blob/main/base-converter/app.js): `base-converter/app.js`
- [Simple calculator](https://github.com/waraton/html-css-js/blob/main/simple-calculator/app.js): `simple-calculator/app.js`
- [Weight converter](https://github.com/waraton/html-css-js/blob/main/lb-kg-converter.py): `lb-kg-converter.py`
- [Calendar](https://github.com/waraton/html-css-js/blob/main/calender/js/app.js): `calender/js/app.js`
- [Digital clock](https://github.com/waraton/html-css-js/blob/main/Digital-clock/clock.js): `Digital-clock/clock.js`
- [Linear graph](https://github.com/waraton/html-css-js/blob/main/graph_of_linear_equation/app.js): `graph_of_linear_equation/app.js`

### Visual & Media

- [Image editor](https://github.com/waraton/html-css-js/blob/main/image-editing/app.js): `image-editing/app.js`
- [Fractal canvas](https://github.com/waraton/html-css-js/blob/main/fractals-canvas/app.js): `fractals-canvas/app.js`
- [Image gallery](https://github.com/waraton/html-css-js/blob/main/Gallery/app.js): `Gallery/app.js`
- [Image viewer](https://github.com/waraton/html-css-js/blob/main/image_viewer/app.js): `image_viewer/app.js`
- [Media player](https://github.com/waraton/html-css-js/blob/main/media-player/js.js): `media-player/js.js`
- [Lyric timelines](https://github.com/waraton/html-css-js/blob/main/Lyrical/interactivity.js): `Lyrical/interactivity.js`

### Content & Data

- [South Sudan flag](https://github.com/waraton/html-css-js/blob/main/south-sudan-flag/app.js): `south-sudan-flag/app.js`
- [Live search](https://github.com/waraton/html-css-js/blob/main/live_search/app.js): `live_search/app.js`
- [Joke display](https://github.com/waraton/html-css-js/blob/main/jokes/app.js): `jokes/app.js`
- [Meme maker](https://github.com/waraton/html-css-js/blob/main/memes/app.js): `memes/app.js`

### Other components

- **Browser user**
- **Browser UI**
- **Bible API**
- **Dictionary API**
- **Random User API**
- **Dad joke API**
- **Browser storage**

## Connections

- Browser user → Bible search: searches
- Bible search → Bible API: fetches verse
- Bible search → Browser UI: renders verse
- Browser user → Dictionary: looks up word
- Dictionary → Dictionary API: fetches definition
- Dictionary → Browser UI: renders definition
- Dictionary → Browser storage: caches result
- Browser user → Opposites quiz: answers quiz
- Opposites quiz → Browser UI: updates quiz
- Browser user → Data representation: views data
- Data representation → Browser UI: renders table
- Browser user → Who am I: opens
- Browser user → Base converter: converts number
- Base converter → Browser UI: shows conversion
- Browser user → Simple calculator: calculates
- Simple calculator → Browser UI: shows answer
- Simple calculator → Browser storage: stores answer
- Browser user → Weight converter: converts weight
- Browser user → Calendar: views calendar
- Browser user → Digital clock: views time
- Browser user → Linear graph: plots equation
- Browser user → Image editor: edits image
- Image editor → Browser UI: updates preview
- Browser user → Fractal canvas: mutates drawing
- Fractal canvas → Browser UI: draws canvas
- Browser user → Image gallery: browses images
- Browser user → Image viewer: views image
- Browser user → Media player: controls playback
- Browser user → Lyric timelines: controls timeline
- Browser user → South Sudan flag: selects palette
- South Sudan flag → Browser UI: updates colors
- Browser user → Live search: filters users
- Live search → Random User API: fetches users
- Live search → Browser UI: renders matches
- Browser user → Joke display: requests joke
- Joke display → Dad joke API: fetches joke
- Joke display → Browser UI: shows joke
- Browser user → Meme maker: creates meme