# enzomonoo/cjoweb2026 architecture

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

- Interactive diagram: https://gitdiagram.com/enzomonoo/cjoweb2026
- Repository: https://github.com/enzomonoo/cjoweb2026

## Overview

This repository is a collection of web-development coursework: static lesson pages, small browser-based JavaScript exercises, sample sites, and a vinyl-record storefront. The JavaScript exercises take prompt input and render results; the storefront includes cart controls, album-color extraction, and a 3D disc effect. The README only identifies the course, and most HTML was not sampled, so links among pages and scripts are not asserted. Storefront behavior is represented as separate components where the excerpts show no calls between them.

Main entry points: [`JavaScript/Site1/js/scriptCalculadora.js`](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptCalculadora.js) (Calculator), [`JavaScript/Site1/js/scriptFatorial.js`](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptFatorial.js) (Value Swap), [`JavaScript/Site1/js/scriptMenu.js`](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptMenu.js) (Menu Script), [`JavaScript/Site1/js/scriptQuantidadeDeSegundos.js`](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptQuantidadeDeSegundos.js) (Seconds Converter)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_lessons["HTML Lessons"]
  node_lesson_pages["Lesson Pages<br/>[paginaInicial.html]"]
  node_exercise_pages["Exercise Pages<br/>[exercicio3.html]"]
end

subgraph group_exercises["JavaScript Exercises"]
  node_js_site_pages["Exercise Site Pages<br/>[index.html]"]
  node_calculator["Calculator"]
  node_factorial["Value Swap<br/>[scriptFatorial.js]"]
  node_menu_script["Menu Script<br/>[scriptMenu.js]"]
  node_seconds["Seconds Converter"]
  node_clock["Time Converter<br/>[scriptRelogio.js]"]
  node_sum["Summation<br/>[scriptSomatorio.js]"]
  node_swap["Value Swap"]
  node_verification["Verification Script"]
  node_site_scripts["Shared Scripts<br/>[scripts.js]"]
end

subgraph group_samples["Sample Sites"]
  node_site01["Site 01<br/>[index.html]"]
  node_site02["Site 02<br/>[index.html]"]
  node_site06["Site 06<br/>[index.html]"]
  node_site06_behavior["Navigation Behavior<br/>[scripts.js]"]
end

subgraph group_store["Vinyl Store"]
  node_storefront["Storefront<br/>[index.html]"]
  node_catalog["Disc Catalog<br/>[template.html]"]
  node_store_search["Store Search<br/>[index.html]"]
  node_cart_toggle["Cart Sidebar<br/>[carrinho.js]"]
  node_cart_add["Add To Cart<br/>[addCarrinho.js]"]
  node_album_colors["Album Colors<br/>[coresCapaDisco.js]"]
  node_disc_3d["3D Disc Effect<br/>[efeito3DDisco.js]"]
end

node_browser_user(("Browser User"))

node_browser_user -->|"enters values"| node_calculator
node_browser_user -->|"enters values"| node_factorial
node_browser_user -->|"enters values"| node_menu_script
node_browser_user -->|"enters duration"| node_seconds
node_browser_user -->|"enters time"| node_clock
node_browser_user -->|"enters numbers"| node_sum
node_browser_user -->|"enters values"| node_swap
node_browser_user -->|"scrolls and clicks"| node_site06_behavior
node_browser_user -->|"toggles cart"| node_cart_toggle
node_browser_user -->|"adds item"| node_cart_add
node_browser_user -->|"moves pointer"| node_disc_3d
node_browser_user -->|"views album"| node_album_colors

click node_lesson_pages "https://github.com/enzomonoo/cjoweb2026/blob/main/Aula2/paginaInicial.html"
click node_exercise_pages "https://github.com/enzomonoo/cjoweb2026/blob/main/Exercicio3/exercicio3.html"
click node_js_site_pages "https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/index.html"
click node_calculator "https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptCalculadora.js"
click node_factorial "https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptFatorial.js"
click node_menu_script "https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptMenu.js"
click node_seconds "https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptQuantidadeDeSegundos.js"
click node_clock "https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptRelogio.js"
click node_sum "https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptSomatorio.js"
click node_swap "https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptTrocaDeValores.js"
click node_verification "https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptVerificacao.js"
click node_site_scripts "https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scripts.js"
click node_site01 "https://github.com/enzomonoo/cjoweb2026/blob/main/Site01/index.html"
click node_site02 "https://github.com/enzomonoo/cjoweb2026/blob/main/Site02/index.html"
click node_site06 "https://github.com/enzomonoo/cjoweb2026/blob/main/Site06/index.html"
click node_site06_behavior "https://github.com/enzomonoo/cjoweb2026/blob/main/Site06/js/scripts.js"
click node_storefront "https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/index.html"
click node_catalog "https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/discos/template.html"
click node_store_search "https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/busca/index.html"
click node_cart_toggle "https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/js/carrinho.js"
click node_cart_add "https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/js/addCarrinho.js"
click node_album_colors "https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/js/coresCapaDisco.js"
click node_disc_3d "https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/js/efeito3DDisco.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_lesson_pages,node_exercise_pages,node_browser_user toneBlue
class node_js_site_pages,node_calculator,node_factorial,node_menu_script,node_seconds,node_clock,node_sum,node_swap,node_verification,node_site_scripts toneAmber
class node_site01,node_site02,node_site06,node_site06_behavior toneMint
class node_storefront,node_catalog,node_store_search,node_cart_toggle,node_cart_add,node_album_colors,node_disc_3d toneRose
```

## Components

### HTML Lessons

- [Lesson Pages](https://github.com/enzomonoo/cjoweb2026/blob/main/Aula2/paginaInicial.html): `Aula2/paginaInicial.html`
- [Exercise Pages](https://github.com/enzomonoo/cjoweb2026/blob/main/Exercicio3/exercicio3.html): `Exercicio3/exercicio3.html`

### JavaScript Exercises

- [Exercise Site Pages](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/index.html): `JavaScript/Site1/index.html`
- [Calculator](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptCalculadora.js): `JavaScript/Site1/js/scriptCalculadora.js`
- [Value Swap](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptFatorial.js): `JavaScript/Site1/js/scriptFatorial.js`
- [Menu Script](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptMenu.js): `JavaScript/Site1/js/scriptMenu.js`
- [Seconds Converter](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptQuantidadeDeSegundos.js): `JavaScript/Site1/js/scriptQuantidadeDeSegundos.js`
- [Time Converter](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptRelogio.js): `JavaScript/Site1/js/scriptRelogio.js`
- [Summation](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptSomatorio.js): `JavaScript/Site1/js/scriptSomatorio.js`
- [Value Swap](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptTrocaDeValores.js): `JavaScript/Site1/js/scriptTrocaDeValores.js`
- [Verification Script](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scriptVerificacao.js): `JavaScript/Site1/js/scriptVerificacao.js`
- [Shared Scripts](https://github.com/enzomonoo/cjoweb2026/blob/main/JavaScript/Site1/js/scripts.js): `JavaScript/Site1/js/scripts.js`

### Sample Sites

- [Site 01](https://github.com/enzomonoo/cjoweb2026/blob/main/Site01/index.html): `Site01/index.html`
- [Site 02](https://github.com/enzomonoo/cjoweb2026/blob/main/Site02/index.html): `Site02/index.html`
- [Site 06](https://github.com/enzomonoo/cjoweb2026/blob/main/Site06/index.html): `Site06/index.html`
- [Navigation Behavior](https://github.com/enzomonoo/cjoweb2026/blob/main/Site06/js/scripts.js): `Site06/js/scripts.js`

### Vinyl Store

- [Storefront](https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/index.html): `trabalho/ladob/index.html`
- [Disc Catalog](https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/discos/template.html): `trabalho/ladob/discos/template.html`
- [Store Search](https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/busca/index.html): `trabalho/ladob/busca/index.html`
- [Cart Sidebar](https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/js/carrinho.js): `trabalho/ladob/js/carrinho.js`
- [Add To Cart](https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/js/addCarrinho.js): `trabalho/ladob/js/addCarrinho.js`
- [Album Colors](https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/js/coresCapaDisco.js): `trabalho/ladob/js/coresCapaDisco.js`
- [3D Disc Effect](https://github.com/enzomonoo/cjoweb2026/blob/main/trabalho/ladob/js/efeito3DDisco.js): `trabalho/ladob/js/efeito3DDisco.js`

### Other components

- **Browser User**

## Connections

- Browser User → Calculator: enters values (evidence: `JavaScript/Site1/js/scriptCalculadora.js`)
- Browser User → Value Swap: enters values (evidence: `JavaScript/Site1/js/scriptFatorial.js`)
- Browser User → Menu Script: enters values (evidence: `JavaScript/Site1/js/scriptMenu.js`)
- Browser User → Seconds Converter: enters duration (evidence: `JavaScript/Site1/js/scriptQuantidadeDeSegundos.js`)
- Browser User → Time Converter: enters time (evidence: `JavaScript/Site1/js/scriptRelogio.js`)
- Browser User → Summation: enters numbers (evidence: `JavaScript/Site1/js/scriptSomatorio.js`)
- Browser User → Value Swap: enters values (evidence: `JavaScript/Site1/js/scriptTrocaDeValores.js`)
- Browser User → Navigation Behavior: scrolls and clicks (evidence: `Site06/js/scripts.js`)
- Browser User → Cart Sidebar: toggles cart (evidence: `trabalho/ladob/js/carrinho.js`)
- Browser User → Add To Cart: adds item (evidence: `trabalho/ladob/js/addCarrinho.js`)
- Browser User → 3D Disc Effect: moves pointer (evidence: `trabalho/ladob/js/efeito3DDisco.js`)
- Browser User → Album Colors: views album (evidence: `trabalho/ladob/js/coresCapaDisco.js`)