# bradtraversy/vanillawebprojects architecture

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

- Interactive diagram: https://gitdiagram.com/bradtraversy/vanillawebprojects
- Repository: https://github.com/bradtraversy/vanillawebprojects

## Overview

This repository is a course collection of independent vanilla-JavaScript browser projects, not one integrated application. Users open a project and interact with its page; each project owns its own state and presentation. The README documents 20 projects, so all are represented even where source was not sampled. External service links are included only where sampled code shows requests or browser APIs; unsampled projects use their exact directory paths, and their internal wiring is not inferred.

Main entry points: [`lyrics-search/script.js`](https://github.com/bradtraversy/vanillawebprojects/blob/master/lyrics-search/script.js) (Lyrics search), [`typing-game/script.js`](https://github.com/bradtraversy/vanillawebprojects/blob/master/typing-game/script.js) (Typing game), [`memory-cards/script.js`](https://github.com/bradtraversy/vanillawebprojects/blob/master/memory-cards/script.js) (Memory cards), [`speech-text-reader/script.js`](https://github.com/bradtraversy/vanillawebprojects/blob/master/speech-text-reader/script.js) (Speech text reader)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_games["Games and play"]
  node_breakout["Breakout game<br/>[script.js]"]
  node_hangman["Hangman game<br/>[script.js]"]
  node_typing["Typing game<br/>[script.js]"]
  node_speechguess["Speak-number game"]
  node_memory["Memory cards<br/>[script.js]"]
end

subgraph group_media["Media and relaxation"]
  node_relaxer["Breathing relaxer"]
  node_video["Custom video player"]
  node_music["Music player<br/>[script.js]"]
  node_speechreader["Speech text reader<br/>[script.js]"]
end

subgraph group_data["Data and discovery"]
  node_exchange["Exchange calculator"]
  node_domarray["DOM array methods<br/>[script.js]"]
  node_expense["Expense tracker<br/>[script.js]"]
  node_infinite["Infinite scrolling"]
  node_lyrics["Lyrics search<br/>[script.js]"]
  node_meals["Meal finder<br/>[script.js]"]
  node_products["Product filtering<br/>[script.js]"]
end

subgraph group_interfaces["Interactive utilities"]
  node_movie["Seat booking"]
  node_form["Form validator"]
  node_modal["Menu and modal"]
  node_sortable["Sortable list<br/>[script.js]"]
  node_countdown["New Year countdown"]
end

node_user(("User"))
node_randomapi["Random User API"]
node_mealapi["TheMealDB API"]
node_lyricsapi["Lyrics API"]
node_corsproxy["CORS proxy"]
node_localstorage[("Browser local storage")]
node_speechsynth["Speech synthesis"]

node_user -->|"plays"| node_breakout
node_user -->|"plays"| node_hangman
node_user -->|"plays"| node_typing
node_user -->|"plays"| node_speechguess
node_user -->|"reviews cards"| node_memory
node_user -->|"books seats"| node_movie
node_user -->|"submits form"| node_form
node_user -->|"opens controls"| node_modal
node_user -->|"sorts list"| node_sortable
node_user -->|"uses"| node_relaxer
node_user -->|"plays video"| node_video
node_user -->|"plays tracks"| node_music
node_user -->|"enters or selects text"| node_speechreader
node_user -->|"views countdown"| node_countdown
node_user -->|"converts currency"| node_exchange
node_user -->|"transforms data"| node_domarray
node_user -->|"tracks transactions"| node_expense
node_user -->|"browses posts"| node_infinite
node_user -->|"searches songs"| node_lyrics
node_user -->|"searches meals"| node_meals
node_user -->|"filters products"| node_products
node_domarray -.->|"fetches users"| node_randomapi
node_meals -.->|"fetches meals"| node_mealapi
node_lyrics -.->|"fetches suggestions and lyrics"| node_lyricsapi
node_lyrics -.->|"fetches pages"| node_corsproxy
node_memory -->|"reads and writes cards"| node_localstorage
node_expense -->|"reads and writes transactions"| node_localstorage
node_typing -->|"reads and writes difficulty"| node_localstorage
node_speechreader -.->|"speaks text"| node_speechsynth

click node_breakout "https://github.com/bradtraversy/vanillawebprojects/blob/master/breakout-game/script.js"
click node_hangman "https://github.com/bradtraversy/vanillawebprojects/blob/master/hangman/script.js"
click node_typing "https://github.com/bradtraversy/vanillawebprojects/blob/master/typing-game/script.js"
click node_speechguess "https://github.com/bradtraversy/vanillawebprojects/tree/master/speak-number-guess"
click node_memory "https://github.com/bradtraversy/vanillawebprojects/blob/master/memory-cards/script.js"
click node_movie "https://github.com/bradtraversy/vanillawebprojects/tree/master/movie-seat-booking"
click node_form "https://github.com/bradtraversy/vanillawebprojects/tree/master/form-validator"
click node_modal "https://github.com/bradtraversy/vanillawebprojects/tree/master/modal-menu-slider"
click node_sortable "https://github.com/bradtraversy/vanillawebprojects/blob/master/sortable-list/script.js"
click node_relaxer "https://github.com/bradtraversy/vanillawebprojects/tree/master/relaxer-app"
click node_video "https://github.com/bradtraversy/vanillawebprojects/tree/master/custom-video-player"
click node_music "https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/script.js"
click node_speechreader "https://github.com/bradtraversy/vanillawebprojects/blob/master/speech-text-reader/script.js"
click node_countdown "https://github.com/bradtraversy/vanillawebprojects/tree/master/new-year-countdown"
click node_exchange "https://github.com/bradtraversy/vanillawebprojects/tree/master/exchange-rate"
click node_domarray "https://github.com/bradtraversy/vanillawebprojects/blob/master/dom-array-methods/script.js"
click node_expense "https://github.com/bradtraversy/vanillawebprojects/blob/master/expense-tracker/script.js"
click node_infinite "https://github.com/bradtraversy/vanillawebprojects/tree/master/infinite_scroll_blog"
click node_lyrics "https://github.com/bradtraversy/vanillawebprojects/blob/master/lyrics-search/script.js"
click node_meals "https://github.com/bradtraversy/vanillawebprojects/blob/master/meal-finder/script.js"
click node_products "https://github.com/bradtraversy/vanillawebprojects/blob/master/product-filtering/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_breakout,node_hangman,node_typing,node_speechguess,node_memory,node_user,node_randomapi toneBlue
class node_relaxer,node_video,node_music,node_speechreader,node_localstorage toneAmber
class node_exchange,node_domarray,node_expense,node_infinite,node_lyrics,node_meals,node_products,node_mealapi,node_lyricsapi toneMint
class node_movie,node_form,node_modal,node_sortable,node_countdown toneRose
class node_corsproxy,node_speechsynth toneIndigo
```

## Components

### Games and play

- [Breakout game](https://github.com/bradtraversy/vanillawebprojects/blob/master/breakout-game/script.js): `breakout-game/script.js`
- [Hangman game](https://github.com/bradtraversy/vanillawebprojects/blob/master/hangman/script.js): `hangman/script.js`
- [Typing game](https://github.com/bradtraversy/vanillawebprojects/blob/master/typing-game/script.js): `typing-game/script.js`
- [Speak-number game](https://github.com/bradtraversy/vanillawebprojects/tree/master/speak-number-guess): `speak-number-guess`
- [Memory cards](https://github.com/bradtraversy/vanillawebprojects/blob/master/memory-cards/script.js): `memory-cards/script.js`

### Media and relaxation

- [Breathing relaxer](https://github.com/bradtraversy/vanillawebprojects/tree/master/relaxer-app): `relaxer-app`
- [Custom video player](https://github.com/bradtraversy/vanillawebprojects/tree/master/custom-video-player): `custom-video-player`
- [Music player](https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/script.js): `music-player/script.js`
- [Speech text reader](https://github.com/bradtraversy/vanillawebprojects/blob/master/speech-text-reader/script.js): `speech-text-reader/script.js`

### Data and discovery

- [Exchange calculator](https://github.com/bradtraversy/vanillawebprojects/tree/master/exchange-rate): `exchange-rate`
- [DOM array methods](https://github.com/bradtraversy/vanillawebprojects/blob/master/dom-array-methods/script.js): `dom-array-methods/script.js`
- [Expense tracker](https://github.com/bradtraversy/vanillawebprojects/blob/master/expense-tracker/script.js): `expense-tracker/script.js`
- [Infinite scrolling](https://github.com/bradtraversy/vanillawebprojects/tree/master/infinite_scroll_blog): `infinite_scroll_blog`
- [Lyrics search](https://github.com/bradtraversy/vanillawebprojects/blob/master/lyrics-search/script.js): `lyrics-search/script.js`
- [Meal finder](https://github.com/bradtraversy/vanillawebprojects/blob/master/meal-finder/script.js): `meal-finder/script.js`
- [Product filtering](https://github.com/bradtraversy/vanillawebprojects/blob/master/product-filtering/script.js): `product-filtering/script.js`

### Interactive utilities

- [Seat booking](https://github.com/bradtraversy/vanillawebprojects/tree/master/movie-seat-booking): `movie-seat-booking`
- [Form validator](https://github.com/bradtraversy/vanillawebprojects/tree/master/form-validator): `form-validator`
- [Menu and modal](https://github.com/bradtraversy/vanillawebprojects/tree/master/modal-menu-slider): `modal-menu-slider`
- [Sortable list](https://github.com/bradtraversy/vanillawebprojects/blob/master/sortable-list/script.js): `sortable-list/script.js`
- [New Year countdown](https://github.com/bradtraversy/vanillawebprojects/tree/master/new-year-countdown): `new-year-countdown`

### Other components

- **User**
- **Random User API**
- **TheMealDB API**
- **Lyrics API**
- **CORS proxy**
- **Browser local storage**
- **Speech synthesis**

## Connections

- User → Breakout game: plays
- User → Hangman game: plays
- User → Typing game: plays
- User → Speak-number game: plays
- User → Memory cards: reviews cards
- User → Seat booking: books seats
- User → Form validator: submits form
- User → Menu and modal: opens controls
- User → Sortable list: sorts list
- User → Breathing relaxer: uses
- User → Custom video player: plays video
- User → Music player: plays tracks
- User → Speech text reader: enters or selects text
- User → New Year countdown: views countdown
- User → Exchange calculator: converts currency
- User → DOM array methods: transforms data
- User → Expense tracker: tracks transactions
- User → Infinite scrolling: browses posts
- User → Lyrics search: searches songs
- User → Meal finder: searches meals
- User → Product filtering: filters products
- DOM array methods → Random User API: fetches users
- Meal finder → TheMealDB API: fetches meals
- Lyrics search → Lyrics API: fetches suggestions and lyrics
- Lyrics search → CORS proxy: fetches pages
- Memory cards → Browser local storage: reads and writes cards
- Expense tracker → Browser local storage: reads and writes transactions
- Typing game → Browser local storage: reads and writes difficulty
- Speech text reader → Speech synthesis: speaks text