# cpgabo/final-proyect-firstsem-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/cpgabo/final-proyect-firstsem-frontend
- Repository: https://github.com/cpgabo/final-proyect-firstsem-frontend

## Overview

This is a small Spanish-language frontend with an entry page, an article home page, and an article-detail page. The main reader workflow starts at the entry page, continues to a list loaded from an articles API, and opens a selected article by ID. The home and detail pages also fetch Montevideo weather; the home page includes contact-form validation, while the entry page provides a noise-based audio player. Source excerpts show these behaviors, but the HTML and backend are not sampled.

Main entry points: [`HOME/script.js`](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/HOME/script.js) (Article listing), [`INDEX/index.js`](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/INDEX/index.js) (Home navigation), [`ARTICULO/articulo.js/articulo.js`](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/ARTICULO/articulo.js/articulo.js) (Article detail loader), [`INDEX/index.html`](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/INDEX/index.html) (Entry page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry and audio"]
  node_landing["Entry page<br/>[index.html]"]
  node_entrynav["Home navigation<br/>[index.js]"]
  node_audio["Noise player<br/>[index.js]"]
end

subgraph group_editorial["Article browsing"]
  node_home["Home page<br/>[home.html]"]
  node_articlelist["Article listing<br/>[script.js]"]
end

subgraph group_detail["Article reading"]
  node_detailpage["Article detail page<br/>[articulo.html]"]
  node_articlecontent["Article detail loader<br/>[articulo.js]"]
end

subgraph group_homeextras["Home features"]
  node_weatherhome["Home weather<br/>[script.js]"]
  node_weatherdetail["Detail weather<br/>[articulo.js]"]
  node_contact["Contact form<br/>[script.js]"]
end

node_visitor(("Visitor"))
node_audioapi["Browser audio API"]
node_articleservice["Articles API"]
node_weatherapi["Open-Meteo"]

node_visitor -->|"opens"| node_landing
node_visitor -->|"starts playback"| node_audio
node_audio -->|"uses"| node_audioapi
node_visitor -->|"clicks"| node_entrynav
node_entrynav -->|"navigates"| node_home
node_articlelist -->|"fetches list"| node_articleservice
node_articlelist -->|"links to"| node_detailpage
node_articlecontent -->|"fetches article"| node_articleservice
node_weatherhome -->|"fetches forecast"| node_weatherapi
node_weatherdetail -->|"fetches forecast"| node_weatherapi
node_visitor -->|"submits"| node_contact

click node_landing "https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/INDEX/index.html"
click node_entrynav "https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/INDEX/index.js"
click node_audio "https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/INDEX/index.js"
click node_home "https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/HOME/home.html"
click node_articlelist "https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/HOME/script.js"
click node_detailpage "https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/ARTICULO/articulo.html"
click node_articlecontent "https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/ARTICULO/articulo.js/articulo.js"
click node_weatherhome "https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/HOME/script.js"
click node_weatherdetail "https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/ARTICULO/articulo.js/articulo.js"
click node_contact "https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/HOME/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_landing,node_entrynav,node_audio,node_audioapi toneBlue
class node_home,node_articlelist toneAmber
class node_detailpage,node_articlecontent,node_articleservice toneMint
class node_weatherhome,node_weatherdetail,node_contact toneRose
class node_visitor,node_weatherapi toneIndigo
```

## Components

### Entry and audio

- [Entry page](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/INDEX/index.html): `INDEX/index.html`
- [Home navigation](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/INDEX/index.js): `INDEX/index.js`
- [Noise player](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/INDEX/index.js): `INDEX/index.js`

### Article browsing

- [Home page](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/HOME/home.html): `HOME/home.html`
- [Article listing](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/HOME/script.js): `HOME/script.js`

### Article reading

- [Article detail page](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/ARTICULO/articulo.html): `ARTICULO/articulo.html`
- [Article detail loader](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/ARTICULO/articulo.js/articulo.js): `ARTICULO/articulo.js/articulo.js`

### Home features

- [Home weather](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/HOME/script.js): `HOME/script.js`
- [Detail weather](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/ARTICULO/articulo.js/articulo.js): `ARTICULO/articulo.js/articulo.js`
- [Contact form](https://github.com/cpgabo/final-proyect-firstsem-frontend/blob/main/HOME/script.js): `HOME/script.js`

### Other components

- **Visitor**
- **Browser audio API**
- **Articles API**
- **Open-Meteo**

## Connections

- Visitor → Entry page: opens
- Visitor → Noise player: starts playback (evidence: `INDEX/index.js`)
- Noise player → Browser audio API: uses (evidence: `INDEX/index.js`)
- Visitor → Home navigation: clicks (evidence: `INDEX/index.js`)
- Home navigation → Home page: navigates (evidence: `INDEX/index.js`)
- Article listing → Articles API: fetches list (evidence: `HOME/script.js`)
- Article listing → Article detail page: links to (evidence: `HOME/script.js`)
- Article detail loader → Articles API: fetches article (evidence: `ARTICULO/articulo.js/articulo.js`)
- Home weather → Open-Meteo: fetches forecast (evidence: `HOME/script.js`)
- Detail weather → Open-Meteo: fetches forecast (evidence: `ARTICULO/articulo.js/articulo.js`)
- Visitor → Contact form: submits (evidence: `HOME/script.js`)