# 7. Frontend: APIs & DOM

{% hint style="info" %}

## Theorie

Bekijk voor het labo aan te vangen eerst de volgende topics:

* [Fetch (herhaling)](https://apwt.gitbook.io/ba-web-programming-v24/cursus/wat-is-nodejs/asynchroon-programmeren/fetch)
* [JSON (herhaling)](https://apwt.gitbook.io/ba-web-programming-v24/cursus/wat-is-nodejs/asynchroon-programmeren/json)
* [Surge](https://apwt.gitbook.io/ba-web-programming-v24/cursus/frontend/deployment-met-surge)

{% endhint %}

## Oefeningen

### Voorbereiding

Maak een nieuwe directory `labo8` aan in de root van je project.

**Maak voor elke oefening een nieuw VITE project aan!**

### Cocktail API met VITE

{% content-ref url="8.-frontend-apis-and-dom/cocktail-api-met-vite" %}
[cocktail-api-met-vite](https://apwt.gitbook.io/ba-web-programming-v24/labos/8.-frontend-apis-and-dom/cocktail-api-met-vite)
{% endcontent-ref %}

### Weersvoorspellingen

{% content-ref url="8.-frontend-apis-and-dom/weather-api" %}
[weather-api](https://apwt.gitbook.io/ba-web-programming-v24/labos/8.-frontend-apis-and-dom/weather-api)
{% endcontent-ref %}

### Uitvinders (herhalingsoefening)

{% content-ref url="8.-frontend-apis-and-dom/uitvinders" %}
[uitvinders](https://apwt.gitbook.io/ba-web-programming-v24/labos/8.-frontend-apis-and-dom/uitvinders)
{% endcontent-ref %}

### Rick and Morty

{% content-ref url="8.-frontend-apis-and-dom/rick-and-morty" %}
[rick-and-morty](https://apwt.gitbook.io/ba-web-programming-v24/labos/8.-frontend-apis-and-dom/rick-and-morty)
{% endcontent-ref %}