Development Lifecycle - ArexanK/Magic-Universe-Squad-A-page Wiki

Analyseren

De opdracht voor de tweede leertaak is het maken van een squadpage met alle visitekaartjes van leertaak 1. De squad is verdeeld in groepjes van 5 teamleden. We zijn begonnen met een team canvas waar wij onze doelen, verwachtingen en rollen hebben beschreven. Samen hebben wij besproken wat onze ideeën zijn voor het project en wie welke rol op zich neemt.

  • Celine - overzicht en planning
  • Sanne - vormgeving en styling
  • Robin - schetsen
  • Cathelijn - reseacher (Googlen)
  • Arexan - Github (push, fork, wiki, read me)

Later heeft Fatima zich bij het project gevoegd. We zijn nu met 6 teamleden.

Naast bovenstaande rollen zullen we samen het project coderen in HTML, CSS, JavaScript.

team canvas- magic universe

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 -

schets magic universe

schets 1 schets 7 schets 12 schets 13

Breakdown schets-

schets celine

project view schets-

schets magic universe

schets magic universe versie 2

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.