Analyseren:

Wij zijn begonnen met een teamcanvas om de rollen te bepalen en onze persoonlijke doelen en groepsdoelen op te schrijven. Uiteindelijk hebben we dit gezamenlijk besproken. Onderstaande rollen zijn uitgekozen. Ik vond mijn rol prima, en was er tevreden mee. Daarna had Arexan de repository aangemaakt en iedereen eraan toegevoegd, waarna we konden beginnen met de leertaak. Naast de onderstaande rollen heeft ieder ook deelgenomen in HTML, CSS en Javascript en Github.

• Celine - overzicht en planning
• Sanne - vormgeving en styling
• Robin - schetsen
• Cathelijn - reseacher (Googlen)
• Arexan - Github (push, fork, wiki, read me)
• Fatima - later bijgekomen in project en heeft geholpen bij alle stukken.

Ontwerpen:

We zijn begonnen met het maken van verschillende schetsen en hebben uiteindelijk een schets gezamenlijk uitgekozen. Het idee is dat alle visite kaartjes (25 kaartjes van squad A) samen een kaartenspel vormen. De kaarten (visitekaartjes) zijn dan onderaan de pagina verzameld op een rij. Door te klikken op je gekozen kaart springt de kaart naar boven en wordt visitekaartje zichtbaar met gegevens van de eigenaar.

Na een periode van bouwen en testen zijn we erachter gekomen dat het voor nu teveel werk is om de kaart naar het midden te vergroten. Het plan is nu om de kaart recht omhoog te laten springen. De kaarten gaan omhoog als je er overheen gaat met de muis (hover) en als je erop klikt springt de kaart volledig omhoog. Vervolgens kan je via de visitekaart button/link naar het visitekaartje van de eigenaar.

Schetsen:

Javascript schetsen

Breakdown schets

Project view schets

Bouwen

Om de projectstructuur te behouden, hebben we onderling afgesproken hoe wij HTML, CSS en Javascript gaan verdelen binnen het team zodat iedereen de kans krijgt om een onderdeel te coderen. Arexan heeft eerst de opdracht geforkt vanuit Github en een index.html, style.css, main.js aangemaakt en vervolgens gepusht zodat de rest van het team een pull konden doen. Vervolgens hebben we besproken hoe wij de opmaak gaan maken in onze index.html pagina. Omdat het idee een kaartenspel is hebben wij voornamelijk div class= "container" + div class= "card" gebruikt om alle 25 kaarten aan te maken en vervolgens gestyled in CSS met .container en .card, met deze basis kunnen wij verder bouwen en stylen in CSS en Javascript.

We hebben gewerkt met verschillende methoden. Voorbeelden hiervan zijn:

HTML/CSS:

• classes
• :root met variabelen
• display: flex/grid
• :hover
• @media
• keyframes

Javascript:

• foreach loop
• toggle
• array.prototype.slice
• .length
• const - let
• setTimeout
• addEvenListener

Integreren

Project is klaar, iedereen merged zijn laatste stukje naar "main" page dan zetten we het live. We zetten de link in de beschrijving zodat iedereen onze site kan bezoeken.

Testen

We zijn tijdens het bouwen continu aan het testen of ons idee werkt. We zijn erachter gekomen dat onze site nog niet erg responsive is, buttons werken niet en het lukt niet dat de kaarten omhoog gaan. We gaan opnieuw naar bouwen en later weer testen.

Wij zijn doorgegaan met testen nadat de media queries en stukje javascript is toegevoegd. Buttons werken en kaarten bewegen mee zoals het moet. Alles werkt zoals het moet en iedereen is tevreden met de squad page.