# klanes0905/small-project architecture

> Architecture diagram of the GitHub repository klanes0905/small-project, 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/klanes0905/small-project
- Repository: https://github.com/klanes0905/small-project

## Overview

This repository is a collection of independent browser demos, small games, utilities, and static pages—not one integrated application. Users open a demo, interact with its page, and see a result such as a game outcome, updated count, or formatted time. Sampled scripts show direct DOM updates; the slot machine also persists coins in browser local storage. Other capabilities are represented from the file tree only, so their internal wiring is not inferred.

Main entry points: [`slotmachine/slot.js`](https://github.com/klanes0905/small-project/blob/main/slotmachine/slot.js) (Symbol slot machine), [`InBetween/script.js`](https://github.com/klanes0905/small-project/blob/main/InBetween/script.js) (In-between), [`guessinggame/script.js`](https://github.com/klanes0905/small-project/blob/main/guessinggame/script.js) (Number guessing), [`try/cas.js`](https://github.com/klanes0905/small-project/blob/main/try/cas.js) (Dice slot demo)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_games["Games"]
  node_card_game["In-between<br/>[script.js]"]
  node_guess_game["Number guessing<br/>[script.js]"]
  node_slot_game["Symbol slot machine<br/>[slot.js]"]
  node_slot_demo["Dice slot demo<br/>[cas.js]"]
end

subgraph group_utilities["Utilities"]
  node_counter["Counter<br/>[index.js]"]
  node_calculator["Calculator<br/>[script.js]"]
  node_timer["Stopwatch<br/>[script.js]"]
  node_clock["Clock<br/>[script.js]"]
  node_password["Password generator"]
end

subgraph group_pages["Web pages"]
  node_blog["Blog page<br/>[blog.html]"]
  node_business_card["Business card<br/>[businesscard.html]"]
  node_form["Form page<br/>[form.html]"]
  node_emoji["Emoji page<br/>[emoji.html]"]
end

subgraph group_learning["JavaScript examples"]
  node_array_examples["Array and callbacks<br/>[script.js]"]
end

node_user(("Visitor"))
node_browser_page["Page controls"]
node_local_storage[("Browser storage")]

node_user -->|"plays"| node_card_game
node_card_game -->|"updates display"| node_browser_page
node_user -->|"guesses"| node_guess_game
node_guess_game -->|"shows feedback"| node_browser_page
node_user -->|"spins"| node_slot_game
node_slot_game -->|"shows outcome"| node_browser_page
node_slot_game -->|"reads and writes coins"| node_local_storage
node_user -->|"spins"| node_slot_demo
node_slot_demo -->|"shows outcome"| node_browser_page
node_user -->|"changes count"| node_counter
node_counter -->|"updates count"| node_browser_page
node_user -->|"enters expression"| node_calculator
node_calculator -->|"updates display"| node_browser_page
node_user -->|"controls timer"| node_timer
node_timer -->|"updates elapsed time"| node_browser_page
node_clock -->|"updates clock"| node_browser_page
node_user -->|"uses generator"| node_password
node_user -->|"views page"| node_blog
node_user -->|"views page"| node_business_card
node_user -->|"uses form"| node_form
node_user -->|"views page"| node_emoji
node_user -->|"runs examples"| node_array_examples

click node_card_game "https://github.com/klanes0905/small-project/blob/main/InBetween/script.js"
click node_guess_game "https://github.com/klanes0905/small-project/blob/main/guessinggame/script.js"
click node_slot_game "https://github.com/klanes0905/small-project/blob/main/slotmachine/slot.js"
click node_slot_demo "https://github.com/klanes0905/small-project/blob/main/try/cas.js"
click node_counter "https://github.com/klanes0905/small-project/blob/main/count/index.js"
click node_calculator "https://github.com/klanes0905/small-project/blob/main/calculator/script.js"
click node_timer "https://github.com/klanes0905/small-project/blob/main/timer/script.js"
click node_clock "https://github.com/klanes0905/small-project/blob/main/clock/script.js"
click node_password "https://github.com/klanes0905/small-project/tree/main/PasswordGenerator"
click node_blog "https://github.com/klanes0905/small-project/blob/main/blogg/blog.html"
click node_business_card "https://github.com/klanes0905/small-project/blob/main/businesscard/businesscard.html"
click node_form "https://github.com/klanes0905/small-project/blob/main/formm/form.html"
click node_emoji "https://github.com/klanes0905/small-project/blob/main/emoji/emoji.html"
click node_array_examples "https://github.com/klanes0905/small-project/blob/main/callback%2C%20forEach%2C%20map/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_card_game,node_guess_game,node_slot_game,node_slot_demo toneBlue
class node_counter,node_calculator,node_timer,node_clock,node_password,node_local_storage toneAmber
class node_blog,node_business_card,node_form,node_emoji toneMint
class node_array_examples toneRose
class node_user,node_browser_page toneIndigo
```

## Components

### Games

- [In-between](https://github.com/klanes0905/small-project/blob/main/InBetween/script.js): `InBetween/script.js`
- [Number guessing](https://github.com/klanes0905/small-project/blob/main/guessinggame/script.js): `guessinggame/script.js`
- [Symbol slot machine](https://github.com/klanes0905/small-project/blob/main/slotmachine/slot.js): `slotmachine/slot.js`
- [Dice slot demo](https://github.com/klanes0905/small-project/blob/main/try/cas.js): `try/cas.js`

### Utilities

- [Counter](https://github.com/klanes0905/small-project/blob/main/count/index.js): `count/index.js`
- [Calculator](https://github.com/klanes0905/small-project/blob/main/calculator/script.js): `calculator/script.js`
- [Stopwatch](https://github.com/klanes0905/small-project/blob/main/timer/script.js): `timer/script.js`
- [Clock](https://github.com/klanes0905/small-project/blob/main/clock/script.js): `clock/script.js`
- [Password generator](https://github.com/klanes0905/small-project/tree/main/PasswordGenerator): `PasswordGenerator`

### Web pages

- [Blog page](https://github.com/klanes0905/small-project/blob/main/blogg/blog.html): `blogg/blog.html`
- [Business card](https://github.com/klanes0905/small-project/blob/main/businesscard/businesscard.html): `businesscard/businesscard.html`
- [Form page](https://github.com/klanes0905/small-project/blob/main/formm/form.html): `formm/form.html`
- [Emoji page](https://github.com/klanes0905/small-project/blob/main/emoji/emoji.html): `emoji/emoji.html`

### JavaScript examples

- [Array and callbacks](https://github.com/klanes0905/small-project/blob/main/callback%2C%20forEach%2C%20map/script.js): `callback, forEach, map/script.js`

### Other components

- **Visitor**
- **Page controls**
- **Browser storage**

## Connections

- Visitor → In-between: plays
- In-between → Page controls: updates display
- Visitor → Number guessing: guesses
- Number guessing → Page controls: shows feedback
- Visitor → Symbol slot machine: spins
- Symbol slot machine → Page controls: shows outcome
- Symbol slot machine → Browser storage: reads and writes coins
- Visitor → Dice slot demo: spins
- Dice slot demo → Page controls: shows outcome
- Visitor → Counter: changes count
- Counter → Page controls: updates count
- Visitor → Calculator: enters expression
- Calculator → Page controls: updates display
- Visitor → Stopwatch: controls timer
- Stopwatch → Page controls: updates elapsed time
- Clock → Page controls: updates clock
- Visitor → Password generator: uses generator
- Visitor → Blog page: views page
- Visitor → Business card: views page
- Visitor → Form page: uses form
- Visitor → Emoji page: views page
- Visitor → Array and callbacks: runs examples