De weerwidget
Je maakt een weer-widget die op basis van je huidige locatie (geolocatie) via een externe API de UV-index ophaalt. Vervolgens verwerk je deze data in je eigen user interface.
Je leert in deze opdracht:
- hoe je locatiegegevens uit de browser haalt
- hoe je een API aanroept met een API-key
- hoe je JSON-gegevens verwerkt
- hoe je foutmeldingen op een professionele manier afvangt
- hoe groot en open het internet eigenlijk is — en welke verantwoordelijkheden je hebt als ontwikkelaar
Stap 1: Het project voorbereiden
Maak in Sublime Text een nieuw project met:
- een HTML-bestand
- een CSS-bestand
- een JS-bestand
Zorg dat de koppelingen tussen de bestanden en met jQuery in orde is.
WeatherAPI
Stap 2: Een account maken op WeatherAPI
- Ga naar https://www.weatherapi.com
- Maak een gratis account aan met je schoolmail.
- Na het inloggen zie je jouw persoonlijke API-key. Die heb je straks nodig in je code.
Wat is een API?
Een API is een afkorting van Application Programming Interface.
Je kunt het zien als een tussenpersoon die ervoor zorgt dat twee programma’s met elkaar kunnen praten.
Let op: je krijgt mogelijk een melding dat je op de trial zit. Als je niets doet, wordt je account automatisch overgezet naar het gratis plan. Je hoeft dus geen abonnement af te sluiten.
Een voorbeeld uit het echte leven:
Stel je voor dat je in een restaurant zit. Jij bent de gebruiker, de keuken is het systeem dat het eten maakt. Maar jij loopt niet zelf de keuken in, toch? Je geeft jouw bestelling aan de ober.
De ober brengt jouw bestelling naar de keuken en komt terug met je eten.
👉 Die ober is de API.
Wat doet een API in een webapp?
In jouw weerwidget bijvoorbeeld, gebruik je een API om weergegevens op te halen van een andere website (zoals weatherapi.com).
Je stuurt een verzoek (“Wat is het weer in Amsterdam?”), en de API stuurt de gegevens terug (“Het is 18 graden, de zon schijnt”).
geolocation
Stap 3: Je locatie ophalen met geolocation
In JavaScript kun je met navigator.geolocation.getCurrentPosition() jouw coördinaten ophalen: de breedtegraad (latitude) en lengtegraad (longitude).
Let op: Geolocatie werkt alleen als de gebruiker toestemming geeft in de browser.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
// Deze waardes gebruik je straks in de API-aanroep
console.log("Locatie gevonden:", latitude, longitude);
//HIER HAAL JE DE DATA OP
},
function (error) {
console.error("Geolocatie mislukt:", error.message);
}
);
} else {
console.error("Geolocatie wordt niet ondersteund door deze browser.");
}
Wat is geolocatie?
Geolocatie betekent letterlijk: de locatie op de aarde bepalen.
Met geolocatie kan een computer of telefoon uitzoeken waar jij bent — bijvoorbeeld je stad, straat of zelfs precieze coördinaten (zoals breedte- en lengtegraad).
Hoe werkt dat?
Apparaten kunnen je locatie op verschillende manieren bepalen:
- Via wifi-netwerken in de buurt
- Via het mobiele netwerk van je telefoon
- Via GPS (satellieten hoog in de lucht)
- Via je IP-adres (minder precies)
In je weerwidget…
Als je een weerwidget maakt die automatisch weet waar je bent, dan gebruik je geolocatie.
Je hoeft dan niet zelf je stad in te typen — de widget vraagt het aan je browser, en die bepaalt je locatie voor jou.
Bijvoorbeeld:
“Je bent in Oranjestad, Aruba — hier is het 31°C 🌞”
Is dat veilig?
Ja, je browser vraagt altijd eerst om toestemming.
Een website kan niet zomaar je locatie gebruiken. Je moet eerst op “Toestaan” klikken.
Is het altijd veilig om op “Toestaan” te klikken?
Nee, niet altijd. Je moet goed opletten aan wie je toestemming geeft om je locatie te gebruiken.
Wanneer is het wél veilig?
Als je de website kent en vertrouwt, zoals:
- Je eigen weerwidget
- Een kaart-app zoals Google Maps
- Een schoolwebsite of opdrachtpagina
Als de website uitlegt waarom je locatie nodig is (bijvoorbeeld: om je weerbericht te tonen)
Wanneer is het niet veilig?
Als je op een vreemde of onbetrouwbare site bent, zoals:
- Een site met veel pop-ups of nep-wedstrijden
- Een site waar je via een gekke link terecht bent gekomen
- Een site die meteen om je locatie vraagt zonder uitleg
Dan kun je beter op “Blokkeren” klikken.
Tip!
Geef je locatie alleen aan websites die je vertrouwt.
Twijfel je? Klik op “Blokkeren”. Je kunt het later altijd nog toestaan.
Data ophalen
Stap 4: Gegevens ophalen van de WeatherAPI
Nu gebruik je jQuery om via de API de gegevens op te halen. Je stuurt je coördinaten en je API-key mee in de URL.
Je gebruikt $.getJSON() om de data op te halen.
JSON staat voor JavaScript Object Notation. Het is een manier om gegevens (data) op te slaan en te versturen tussen computers, bijvoorbeeld van een server naar jouw website of app.
JSON is eigenlijk gewoon tekst, maar zo geschreven dat het lijkt op de manier waarop JavaScript met objecten werkt.
.done(…) wordt uitgevoerd als het is gelukt en het gevraagde object ontvangen is.
.fail(…) wordt uitgevoerd als het mislukt (bijv. geen internet, verkeerde API-key).
const apiKey = "JOUW_API_KEY_HIER";
const url = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${latitude},${longitude}`;
$.getJSON(url)
.done(function(data) {
// HIER VERWERK JE DE DATA
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.error("Fout bij ophalen van data:", textStatus, errorThrown);
});
console.error(…) gebruik je bij fouten omdat het visueel opvalt in de console (rood) en bedoeld is voor fouten. console.log(…) gebruik je meer voor gewone info tijdens het debuggen.
De data verwerken
Stap 5: De data vastleggen in variabelen
Als de API werkt, krijg je toegang tot veel gegevens. Enkele voorbeelden zie je in het script.
Deze gegevens kun je weergeven met jQuery in de console of in de HTML pagina.
const uvIndex = data.current.uv;
const temperatuur = data.current.temp_c;
const neerslag = data.current.precip_mm;
const windkracht = data.current.wind_kph;
const plaats = data.location.name;
const land = data.location.country;
console.log(uvIndex);
console.log(temperatuur);
console.log(neerslag);
console.log(windkracht);
console.log(plaats);
console.log(land);
updateUi(uvIndex,temperatuur,neerslag,windkracht,plaats,land);
updateUi
Stap 6: De weergegevens tonen in de browser
Op de laatste scriptregel onder het kopje De data verwerken zie je dat er een functie updateUi wordt aangeroepen.
Alle data die zijn opgehaald en die we willen gaan gebruiken worden als parameters meegestuurd.
updateUi staat voor update user-interface.
function updateUi(uvIndex) {
$("#txt").html(`UV-index in ${plaats}, ${land}: <strong>${uvIndex}</strong>`);
$("#txt2").html(`
<p>Temperatuur: <strong>${temperatuur}ºC</strong></p>
<p>Neerslag: <strong>${neerslag}</strong> mm</p>
<p>Windkracht: <strong>${windkracht}</strong> km/u</p>
`);
}
Uitbreiding
Stap 7: Meer data toevoegen
De basis staat!
Je script bepaalt automatisch jouw locatie en haalt daar actuele weergegevens bij op via de API.
Deze locatiegegevens en het weer worden vervolgens weergegeven op je webpagina.
Nu is het tijd om je widget uit te breiden:
- Ga naar WeatherAPI – API Response Fields
- Bekijk welke gegevens beschikbaar zijn binnen de API-respons.
- Kies minimaal drie extra weergegevens die jij wilt toevoegen aan je widget. Denk aan bijvoorbeeld: luchtvochtigheid, gevoelstemperatuur, zicht of UV-blootstellingstijd.
- Meer is natuurlijk altijd beter – laat zien wat je kunt!
Het design
Stap 8: De vormgeving
Je hebt nu een mooie set weergegevens opgehaald — maar daarmee heb je nog geen echte widget. Wat je tot nu toe hebt, is de basis.
Nu is het tijd om je gegevens te presenteren in een aantrekkelijk en gebruiksvriendelijk ontwerp.
Opdracht:
Ontwerp een weerwidget van maximaal 400 pixels breed waarin je gegevens op een visueel aantrekkelijke manier worden weergegeven. Gebruik daarbij CSS om vorm te geven en eventueel JavaScript voor extra interactie of animatie.
Minimale eisen:
- Gebruik van kleuren om de informatie visueel te ondersteunen (denk aan UV-index, temperatuur, etc.)
- Een animatie om de widget levendiger te maken. Dit mag met CSS of met JavaScript.
Tips:
- Zorg voor overzicht: werk met titels, kaders of iconen.
- Denk aan toegankelijkheid: kleurenblindvriendelijke keuzes en voldoende contrast.
- Laat je inspireren door bestaande weerwidgets, maar geef er je eigen draai aan!
