Dit is mijn portfolio voor het vak Web Advanced aan de Erasmushogeschool Brussel. Hieronder vind je een lijst van onderwerpen die in dit portfolio zijn opgenomen, samen met een korte beschrijving van hoe elk onderwerp is toegepast.
Voorbeeld: In het bestand bierexplorer.js, regels 43-49, heb ik JavaScript gebruikt om elementen op basis van hun id te selecteren.
Voorbeeld: In het bestand bierexplorer.js, regels 43-49, heb ik JavaScript gebruikt om de tekstinhoud van een HTML-element te wijzigen nadat een knop is ingedrukt.
Voorbeeld: In het bestand bierexplorer.js, regels 150, 157, 164, 173, 190, 209, 240 & 249, heb ik een JavaScript-eventhandler toegevoegd aan een HTML-knop, zodat een functie wordt uitgevoerd wanneer erop wordt geklikt.
Voorbeeld: In het bestand bierexplorer.js, regels 209-229, heb ik JavaScript gebruikt om een HTML-formulier te valideren, met name in de sectie waar gebruikers hun geboortedatum moeten invoeren alvorens toegang te krijgen tot de website.
Voorbeeld: In het bestand bierexplorer.js, regel 31, heb ik een constante gebruikt om de waarde van api sleutel op te slaan en te gebruiken in de functie 'fetchWeather' voor het ophalen van weerinformatie.
Voorbeeld: In het bestand bierexplorer.js, regels 43-49, heb ik template literals gebruikt om de innerHTML van verschillende elementen in te stellen met behulp van variabelen.
Voorbeeld: In het bestand bierexplorer.js, regel 41, heb ik destructuring toegepast om de eigenschappen van het 'bier' object op te slaan in individuele variabelen, waardoor ik deze gemakkelijk kon gebruiken om de informatie van het bier weer te geven op de webpagina.
Voorbeeld: In het bestand bierexplorer.js, regels 56-65, heb ik de de spread-operator gebruikt om de bierData array te verspreiden en individuele elementen toe te voegen aan de filteredBier array, terwijl ik ook de rest-operator heb gebruikt om alle overgebleven argumenten te verzamelen.
Voorbeeld: In het bestand bierexplorer.js, regels 133-148, heb ik een JavaScript-lus gebruikt om door een array te itereren en dynamisch HTML-elementen te genereren voor elk element in de array.
Voorbeeld: In het bestand bierexplorer.js, regels 150, 157, 164, 173, 190, 209, 240 & 249, heb ik een arrow-functie gebruikt als callback-functie voor het click-event van een element, wat de functionaliteit activeert om de favorieten weer te geven.
Voorbeeld: In het bestand bierexplorer.js, regels 133-148, heb ik een callback-functie gebruikt als argument voor de 'forEach' functie.
Voorbeeld: In het bestand bierexplorer.js, regel 68, heb ik een Promise gebruikt om asynchroon een leuk weetje over het geselecteerde bier op te halen en weer te geven op de webpagina.
Voorbeeld: In het bestand portfolio.js, regels 67-85, heb ik de functie fetchBierWeetje geïmplementeerd, die een Promise retourneert om een feit over het geselecteerde bier op te halen en eventuele fouten logt.
Voorbeeld: In het bestand bierexplorer.js, regels 87-100, heb ik de async- en await-sleutelwoorden gebruikt om te wachten op de data van fetchBierWeetje voordat de gebruikersinterface wordt bijgewerkt:
Voorbeeld: In het bestand portfolio.js, regel 5, heb ik een zelf-uitvoerende functie geschreven omdat ik niet zeker wist waar deze anders geïmplementeerd moest worden.
Voorbeeld: In het bestand bierexplorer.js, regel 32, heb ik de Fetch API gebruikt om gegevens op te halen van een externe server en deze weer te geven op mijn website.
Voorbeeld: In het bestand bierexplorer.js, regels 102-115, heb ik JSON-gegevens gemanipuleerd en weergegeven voor de opgeslagen favorieten.
Voorbeeld: In het bestand bierexplorer.css, regel 143, heb ik CSS-animatie gebruikt om een container op mijn website te laten verschijnen.
Voorbeeld: In het bestand bierexplorer.css, regels 66, 125, 225, 231 & 240, heb ik gebruik gemaakt van flexbox om elementen binnen containers te ordenen, uit te lijnen en ruimte te verdelen op een gestructureerde manier.
Voorbeeld: In het bestand bierexplorer.js, regels 103, 109 & 118, heb ik LocalStorage gebruikt om bierfavorieten te slaan, op te halen en weer te geven.
- [https://www.w3schools.com/css/css3_animations.asp]
- [https://www.w3schools.com/js/js_destructuring.asp]
- [https://ehbits.atlassian.net/wiki/spaces/IT/pages/647987282/VPN+Toegang+studenten+campus+Kaai#Windows-IKEv2]
- [https://www.w3schools.com/js/js_promise.asp]
- [https://www.youtube.com/watch?v=9CY0V0JAgNU&ab_channel=DaniKrossing]
- [https://developers.google.com/maps/documentation/javascript/get-api-key]
- [https://www.latlong.net/]
- [https://stackoverflow.com/questions/55378367/how-to-set-mapboxgl-accesstoken-in-angular-project]
- [https://docs.mapbox.com/api/maps/styles/]
- [https://www.youtube.com/playlist?list=PLGsnrfn8XzXhJUyCxjyvMmHDD-HbL2pDy]
ChatGPT-log: