# lino089/dicoding architecture

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

## Overview

This repository is a collection of JavaScript learning exercises and small browser demos, rather than one integrated product. The clearest user-to-result workflows are submitting transactions to the expense tracker, playing the Web Storage number game, and running small JavaScript examples. The graph highlights those workflows alongside sampled exercises in events, asynchronous callbacks, functional programming, OOP, and order management. No README content was provided, and unsampled directories are represented only where their paths are evident from the tree.

Main entry points: [`frontend/expense-tracker-starter-project/main.js`](https://github.com/lino089/dicoding/blob/main/frontend/expense-tracker-starter-project/main.js) (Transaction handler), [`frontend/webStorage/ImplementasiWebStorage/script.js`](https://github.com/lino089/dicoding/blob/main/frontend/webStorage/ImplementasiWebStorage/script.js) (Game logic), [`frontend/webStorage/script.js`](https://github.com/lino089/dicoding/blob/main/frontend/webStorage/script.js) (Session counter), [`JavaScript/final-assessment/optional-04-oop/main.js`](https://github.com/lino089/dicoding/blob/main/JavaScript/final-assessment/optional-04-oop/main.js) (Inventory example)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_expense["Expense tracker"]
  node_expense_page["Tracker page<br/>[index.html]"]
  node_expense_app["Transaction handler<br/>[main.js]"]
  node_transaction_state["Transactions<br/>[main.js]"]
  node_tracker_view["Lists and dashboard<br/>[main.js]"]
end

subgraph group_browser["Browser labs"]
  node_game_page["Number game<br/>[index.html]"]
  node_game_logic["Game logic<br/>[script.js]"]
  node_browser_storage[("Browser storage<br/>[script.js]")]
  node_counter_page["Counter page<br/>[index.html]"]
  node_counter_logic["Session counter<br/>[script.js]"]
  node_events_page["Events demo<br/>[event.html]"]
  node_events_logic["DOM events<br/>[script.js]"]
end

subgraph group_javascript["JavaScript exercises"]
  node_coffee_demo["Coffee order demo<br/>[main.js]"]
  node_coffee_module["Coffee callbacks<br/>[coffe.js]"]
  node_product_functions["Product functions<br/>[Coding_Quiz.js]"]
  node_animal_classes["Animal classes<br/>[Kuis_Coding.js]"]
  node_api_exercise["Promise exercise<br/>[main.js]"]
  node_api_support["Fetch simulation<br/>[support.js]"]
end

subgraph group_assessment["Assessment exercises"]
  node_inventory_demo["Inventory example<br/>[main.js]"]
  node_inventory["Inventory class<br/>[Inventory.js]"]
  node_item["Item class<br/>[Item.js]"]
  node_orders_demo["Order example<br/>[main.js]"]
  node_orders["Order operations<br/>[orders.js]"]
end

node_person(("User"))

node_person -->|"opens"| node_expense_page
node_expense_page -->|"loads"| node_expense_app
node_person -->|"submits"| node_expense_app
node_expense_app -->|"adds transaction"| node_transaction_state
node_expense_app -->|"renders and totals"| node_tracker_view
node_transaction_state -->|"reads"| node_tracker_view
node_person -->|"opens"| node_game_page
node_game_page -->|"loads"| node_game_logic
node_person -->|"plays and guesses"| node_game_logic
node_game_logic -->|"reads and writes"| node_browser_storage
node_person -->|"opens"| node_counter_page
node_counter_page -->|"loads"| node_counter_logic
node_person -->|"increments or clears"| node_counter_logic
node_counter_logic -->|"reads and writes"| node_browser_storage
node_person -->|"opens"| node_events_page
node_events_page -->|"loads"| node_events_logic
node_person -->|"clicks controls"| node_events_logic
node_coffee_demo -->|"calls callbacks"| node_coffee_module
node_api_exercise -->|"calls simulated API"| node_api_support
node_inventory_demo -->|"uses inventory"| node_inventory
node_inventory_demo -->|"creates items"| node_item
node_orders_demo -->|"calls order operations"| node_orders

click node_expense_page "https://github.com/lino089/dicoding/blob/main/frontend/expense-tracker-starter-project/index.html"
click node_expense_app "https://github.com/lino089/dicoding/blob/main/frontend/expense-tracker-starter-project/main.js"
click node_transaction_state "https://github.com/lino089/dicoding/blob/main/frontend/expense-tracker-starter-project/main.js"
click node_tracker_view "https://github.com/lino089/dicoding/blob/main/frontend/expense-tracker-starter-project/main.js"
click node_game_page "https://github.com/lino089/dicoding/blob/main/frontend/webStorage/ImplementasiWebStorage/index.html"
click node_game_logic "https://github.com/lino089/dicoding/blob/main/frontend/webStorage/ImplementasiWebStorage/script.js"
click node_browser_storage "https://github.com/lino089/dicoding/blob/main/frontend/webStorage/ImplementasiWebStorage/script.js"
click node_counter_page "https://github.com/lino089/dicoding/blob/main/frontend/webStorage/index.html"
click node_counter_logic "https://github.com/lino089/dicoding/blob/main/frontend/webStorage/script.js"
click node_events_page "https://github.com/lino089/dicoding/blob/main/frontend/EVENT/event.html"
click node_events_logic "https://github.com/lino089/dicoding/blob/main/frontend/EVENT/script.js"
click node_coffee_demo "https://github.com/lino089/dicoding/blob/main/JavaScript/asynchronus/main.js"
click node_coffee_module "https://github.com/lino089/dicoding/blob/main/JavaScript/asynchronus/coffe.js"
click node_product_functions "https://github.com/lino089/dicoding/blob/main/JavaScript/Pure_Function/Coding_Quiz.js"
click node_animal_classes "https://github.com/lino089/dicoding/blob/main/JavaScript/OOP/Kuis_Coding.js"
click node_inventory_demo "https://github.com/lino089/dicoding/blob/main/JavaScript/final-assessment/optional-04-oop/main.js"
click node_inventory "https://github.com/lino089/dicoding/blob/main/JavaScript/final-assessment/optional-04-oop/Inventory.js"
click node_item "https://github.com/lino089/dicoding/blob/main/JavaScript/final-assessment/optional-04-oop/Item.js"
click node_orders_demo "https://github.com/lino089/dicoding/blob/main/JavaScript/final-assessment/optional-07-real-world-scenario/main.js"
click node_orders "https://github.com/lino089/dicoding/blob/main/JavaScript/final-assessment/optional-07-real-world-scenario/orders.js"
click node_api_exercise "https://github.com/lino089/dicoding/blob/main/JavaScript/asynchronus/Latihan/main.js"
click node_api_support "https://github.com/lino089/dicoding/blob/main/JavaScript/asynchronus/Latihan/support.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_expense_page,node_expense_app,node_transaction_state,node_tracker_view,node_person toneBlue
class node_game_page,node_game_logic,node_browser_storage,node_counter_page,node_counter_logic,node_events_page,node_events_logic toneAmber
class node_coffee_demo,node_coffee_module,node_product_functions,node_animal_classes,node_api_exercise,node_api_support toneMint
class node_inventory_demo,node_inventory,node_item,node_orders_demo,node_orders toneRose
```

## Components

### Expense tracker

- [Tracker page](https://github.com/lino089/dicoding/blob/main/frontend/expense-tracker-starter-project/index.html): `frontend/expense-tracker-starter-project/index.html`
- [Transaction handler](https://github.com/lino089/dicoding/blob/main/frontend/expense-tracker-starter-project/main.js): `frontend/expense-tracker-starter-project/main.js`
- [Transactions](https://github.com/lino089/dicoding/blob/main/frontend/expense-tracker-starter-project/main.js): `frontend/expense-tracker-starter-project/main.js`
- [Lists and dashboard](https://github.com/lino089/dicoding/blob/main/frontend/expense-tracker-starter-project/main.js): `frontend/expense-tracker-starter-project/main.js`

### Browser labs

- [Number game](https://github.com/lino089/dicoding/blob/main/frontend/webStorage/ImplementasiWebStorage/index.html): `frontend/webStorage/ImplementasiWebStorage/index.html`
- [Game logic](https://github.com/lino089/dicoding/blob/main/frontend/webStorage/ImplementasiWebStorage/script.js): `frontend/webStorage/ImplementasiWebStorage/script.js`
- [Browser storage](https://github.com/lino089/dicoding/blob/main/frontend/webStorage/ImplementasiWebStorage/script.js): `frontend/webStorage/ImplementasiWebStorage/script.js`
- [Counter page](https://github.com/lino089/dicoding/blob/main/frontend/webStorage/index.html): `frontend/webStorage/index.html`
- [Session counter](https://github.com/lino089/dicoding/blob/main/frontend/webStorage/script.js): `frontend/webStorage/script.js`
- [Events demo](https://github.com/lino089/dicoding/blob/main/frontend/EVENT/event.html): `frontend/EVENT/event.html`
- [DOM events](https://github.com/lino089/dicoding/blob/main/frontend/EVENT/script.js): `frontend/EVENT/script.js`

### JavaScript exercises

- [Coffee order demo](https://github.com/lino089/dicoding/blob/main/JavaScript/asynchronus/main.js): `JavaScript/asynchronus/main.js`
- [Coffee callbacks](https://github.com/lino089/dicoding/blob/main/JavaScript/asynchronus/coffe.js): `JavaScript/asynchronus/coffe.js`
- [Product functions](https://github.com/lino089/dicoding/blob/main/JavaScript/Pure_Function/Coding_Quiz.js): `JavaScript/Pure_Function/Coding_Quiz.js`
- [Animal classes](https://github.com/lino089/dicoding/blob/main/JavaScript/OOP/Kuis_Coding.js): `JavaScript/OOP/Kuis_Coding.js`
- [Promise exercise](https://github.com/lino089/dicoding/blob/main/JavaScript/asynchronus/Latihan/main.js): `JavaScript/asynchronus/Latihan/main.js`
- [Fetch simulation](https://github.com/lino089/dicoding/blob/main/JavaScript/asynchronus/Latihan/support.js): `JavaScript/asynchronus/Latihan/support.js`

### Assessment exercises

- [Inventory example](https://github.com/lino089/dicoding/blob/main/JavaScript/final-assessment/optional-04-oop/main.js): `JavaScript/final-assessment/optional-04-oop/main.js`
- [Inventory class](https://github.com/lino089/dicoding/blob/main/JavaScript/final-assessment/optional-04-oop/Inventory.js): `JavaScript/final-assessment/optional-04-oop/Inventory.js`
- [Item class](https://github.com/lino089/dicoding/blob/main/JavaScript/final-assessment/optional-04-oop/Item.js): `JavaScript/final-assessment/optional-04-oop/Item.js`
- [Order example](https://github.com/lino089/dicoding/blob/main/JavaScript/final-assessment/optional-07-real-world-scenario/main.js): `JavaScript/final-assessment/optional-07-real-world-scenario/main.js`
- [Order operations](https://github.com/lino089/dicoding/blob/main/JavaScript/final-assessment/optional-07-real-world-scenario/orders.js): `JavaScript/final-assessment/optional-07-real-world-scenario/orders.js`

### Other components

- **User**

## Connections

- User → Tracker page: opens
- Tracker page → Transaction handler: loads
- User → Transaction handler: submits
- Transaction handler → Transactions: adds transaction
- Transaction handler → Lists and dashboard: renders and totals
- Transactions → Lists and dashboard: reads
- User → Number game: opens
- Number game → Game logic: loads
- User → Game logic: plays and guesses
- Game logic → Browser storage: reads and writes
- User → Counter page: opens
- Counter page → Session counter: loads
- User → Session counter: increments or clears
- Session counter → Browser storage: reads and writes
- User → Events demo: opens
- Events demo → DOM events: loads
- User → DOM events: clicks controls
- Coffee order demo → Coffee callbacks: calls callbacks
- Promise exercise → Fetch simulation: calls simulated API
- Inventory example → Inventory class: uses inventory
- Inventory example → Item class: creates items
- Order example → Order operations: calls order operations