Arbejdsfordeling
Jeg var i gruppe med Mikkel og Ingrid. Første dag startede vi med at lave forsiden med HTML og CSS så vi kunne få overblik og derefter se hvilke JavaScript funktioner vi ville implementere. Mikkel lavede en burger menu hvor Ingrid lavede en lille quiz som man kunne tage.
Implementeret funktion
Det jeg fik implementeret var en interaktiv FAQ-sektion hvor brugeren har mulighed for:
– Åbne spørgsmål ved at klikke på dem
– Lukke igen ved at klikke på samme element
– Lukke åbne punkter ved at klikke udenfor FAQ-boksen
Formålet var at lave et type interaktion, som også bruges på mange kommercielle hjemmeside, hvor indhold vises dynamisk
Løsningen
Selve FAQ sektionen blev implementeret ved hjælpe af disse JavaScript elementer:
– Udvælgelse af elementer med QuerySelectorAll
-EventListeners på knapper til at registrere klik
– Toggle af active for at styre visning/skjulning
En del af løsningen var at der også skulle registreres klik udenfor sektionen derfor skulle man kunne kontrollere hvad der blev klikket på så sektionen kunne skelne imellem elementerne. Det blev gjort med event.target hvor at JavaScript vil tjekke om et klik er indenfor eller udenfor et bestemt DOM-element.
Refleksion
Arbejdet med FAQ-funktionen lærte mig at der er stor forskel på at forstå JavaScript og selv skulle arbejde med det på noget som kan bruges. I undervisningen har vi arbejdet med funktioner hvor vi vidste hvordan resultatet skulle være og på den måde havde et resultat, men her skulle vi selv tage stilling til strukturen og hvordan det skulle ende med at fungere som gjorde det sværere.
En vigtig ting jeg fandt ud af er hvor vigtig HTML-strukturen er for, hvor let eller svært det bliver at arbejde med JavaScript. Hvis strukturen ikke er gennemtænkt, bliver det hurtigt meget rodet og svært at styre.
Projektet lærte mig også at det er vigtigt at planlægge ens løsning før man går i gang med at kode. Altså man starter med at skrive et par linjer om hvordan funktionen skal fungere så man har en klar retningslinje for hvad der skal kodes. Det giver i sidste ende en mere stabil løsning fra begyndelsen som også gør at man til sidst skal bruge mindre tid på fejlsøgning
Link til video: https://www.youtube.com/watch?v=N3reV-4NesE