Web Advanced Project
Deze interactieve Single Page Application (SPA) is ontwikkeld voor het vak Advanced Web. De app biedt gebruikers een overzicht van landen wereldwijd, waarbij ze landen kunnen zoeken, filteren, sorteren en persoonlijke favorieten kunnen opslaan. De data wordt opgehaald via de gratis REST Countries API (https://restcountries.com/v3.1/all) en wordt gepresenteerd in visueel aantrekkelijke kaarten met uitgebreide informatie per land. Het project combineert verschillende moderne JavaScript-concepten en technieken die tijdens het vak Web Advanced zijn behandeld.
| Onderdeel | Bestand(en) | Regels | Uitleg |
|---|---|---|---|
| Router en navigatie | src/JS/router.mjs |
1-26 | Router class, hashchange event, route handlers |
| Home pagina | src/home.js |
1-14 | Home component, statische HTML |
| Landen pagina | src/landen.js |
1-199 | Data ophalen, zoeken, filteren, sorteren, tonen kaarten |
| Favorieten functionaliteit | src/landen.js, src/favorites.js |
50-150 (landen.js), 1-58 (favorites.js) | Favorieten opslaan, verwijderen, toggelen en tonen |
| Contact pagina | src/contact.js |
1-36 | Formulier met validatie en submit event |
| 404 pagina | src/404.js |
1-14 | Not found component |
| Thema wisselen | src/theme.js |
1-20 | Thema toggle, localStorage opslaan |
| Observer API (animaties) | src/observerAPI.js |
1-16 | IntersectionObserver voor kaarten animaties |
| CSS Styling | src/CSS/style.css |
1-288 | Responsive design, thema styles, animaties, UI styling |
| API Data ophalen | src/landen.js |
10-40 | Fetch met async/await |
| Event handlers | Meerdere bestanden | Verspreid | Event listeners voor knoppen, inputs, router, etc. |
- Clone de repository:
git clone https://github.com/jouwgebruikersnaam/jouwrepository.git cd jouwrepository - Installeer dependencies:
npm install
3.Voor productie build:
npm run build- Start de ontwikkelserver:
npm run dev- Open de app in je browser: http://localhost:5173
| Concept | Locatie in Code | Beschrijving |
|---|---|---|
| Constanten | landen.js, theme.js |
Gebruik van const voor onveranderlijke waarden zoals API URL, DOM-elementen, etc. |
| Template literals | landen.js |
HTML markup opgebouwd met backticks en ${}-expressies. |
| Iteratie (arrays) | landen.js |
Gebruik van map, filter, sort om landen te verwerken. |
| Arrow functions | Meerdere bestanden (landen.js, router.mjs) |
Gebruik van korte functie-syntaxis, o.a. voor event handlers en array-methodes. |
| Ternary operator | landen.js |
Voor korte conditionele expressies, bijvoorbeeld bij sorteren en toggles. |
| Callback functions | Event listeners in landen.js, favorites.js |
Functies worden doorgegeven aan event listeners en array-methodes. |
| Promises | landen.js |
Fetch API werkt met promises voor asynchrone data ophalen. |
| Async & Await | landen.js |
Asynchrone functies voor overzichtelijke API-aanroepen. |
| Observer API | observerAPI.js |
IntersectionObserver gebruikt om animaties te triggeren wanneer kaarten in beeld komen. |
Gebruikte API REST Countries API link: https://restcountries.com/v3.1/all :Deze API levert uitgebreide informatie over landen wereldwijd.
Beschrijving: Knop waarmee gebruiker kan schakelen tussen licht en donker thema.
Beschrijving: Dropdowns voor filteren op continent en sorteren op naam.
Beschrijving: Overzicht van landenkaarten met vlag, details en favorieten knop in licht thema.
Beschrijving: Zoekbalk waar gebruiker landnamen kan invoeren om te filteren.
Beschrijving: Overzicht van favorieten met knop om uit favorieten te verwijderen.
Beschrijving: Navigatiebalk met actieve pagina “Favorieten” gemarkeerd.
Beschrijving: Lijst met landen in donker thema, met laadanimatie zichtbaar.
Beschrijving: Kaarten overzicht landen op tablet.
Beschrijving: Thema wisselknop op home pagina.
REST Countries API: https://restcountries.com/ Font Awesome (voor iconen) Vite (build tool) Inspiratie zoekbalk: https://codepen.io/yuhomyan/pen/XWdYJdv Inspiratie navigatie menu: https://codepen.io/kylelavery88/pen/abbvGRN chat gpt:(https://chatgpt.com/share/682fa8c7-de48-8004-873e-3417f2865c28) canvas : https://canvas.ehb.be/courses/39258/pages/module-8-moderne-browser-features-in-javascript#8_3