👀 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 was blij met de rol die ik had gekregen om alles rondom GitHub te begeleiden. Ik was niet echt bekend met GitHub/git, maar door dit groepsproject heb ik veel kunnen leren hierover. Ik was begonnen met opdracht forken vanuit fdnd squadpage, teamleden toegevoegd via collaboration in Github zo konden we samen uit de groep repository werken. 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 die wij hebben gemaakt tijdens project:

📝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.