1. Info-knop toegevoegd:<button class="info-button" on:click={() => openPopup(48)}>i</button>
Er is een ronde "info"-knop toegevoegd onderaan de pagina. Wanneer erop wordt geklikt, wordt de popup met data van een bepaalde gebruiker (nu nog alleen id=48 als test, omdat het nog samen moet worden gevoegd met andere code) geopend, in de functie openPopup(personId).
2. Popup voor weergave van informatie:
De popup toont een afbeelding (avatar), volledige naam, GitHub-handle en biografie van een persoon. De popup kan worden gesloten door op een kruisje te klikken in de rechterbovenhoek.
3. Data ophalen:
Met een openPopup-functie wordt de informatie voor de gebruiker met bepaalde id opgehaald uit de data.persons en weergegeven in de popup.
Referentie schets in Figma
Mijn code
1. Info-knop toegevoegd:
<button class="info-button" on:click={() => openPopup(48)}>i</button>Er is een ronde "info"-knop toegevoegd onderaan de pagina. Wanneer erop wordt geklikt, wordt de popup met data van een bepaalde gebruiker (nu nog alleen id=48 als test, omdat het nog samen moet worden gevoegd met andere code) geopend, in de functieopenPopup(personId).2. Popup voor weergave van informatie: De popup toont een afbeelding (avatar), volledige naam, GitHub-handle en biografie van een persoon. De popup kan worden gesloten door op een kruisje te klikken in de rechterbovenhoek.
3. Data ophalen: Met een openPopup-functie wordt de informatie voor de gebruiker met bepaalde id opgehaald uit de data.persons en weergegeven in de popup.
4. Stijl toegevoegd:
5. Mediaqueries:
https://github.com/user-attachments/assets/d6550d45-b85d-413b-b365-37c85f4fb786