Justin

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}

README.md

@@ -1,5 +1,76 @@
 # TEAM app - Web App From Scratch @cmda-minor-web 2023 - 2024
 
-In de team app verzamel je de informatie van je teamleden en toon je ze op een toffe manier.
-De gegevens per teamlid haal je dynamisch op door middel van een samen vastgesteld dataformaat (json, microdata).
-Je zorgt ervoor dat in ./docs/team.json de juiste urls naar de persoonlijke pagina's staat. Die heb je nodig voor de basis van de team app, maar die gebruiken we ook voor een verzamelsite van alle team apps.
+# Procesverslag Teamproject: Webpagina Coderen
+
+**Datum:** 14-2-2024
+
+## Inleiding
+
+Voor de teamopdracht WAFS moeten wij als team een team web app, gerealiseerd met vanilla HTML, CSS en Javascript maken. De web app moet content bevatten via een data-connectie met de persoonlijke web app, Eén uitgewerkte micro-interactie bevatten, toegankelijk zijn en volledige responsive zijn. 
+
+**Teamleden:**
+- Quinten Kok (Senior)
+- Kevin Boere (Medior)
+- Lars van Veldhuizen (Junior)
+- Justin Prins (Junior)
+
+## Projectplanning
+
+### Doelen en Doelstellingen
+
+Voor dit project wilden wij een eendenvijver maken waarin ieder groepslid een klikbare persoonlijke eend heeft. Wanneer er op een eend geklikt wordt zal er data worden getoond op de web page. De data wordt van ieder groepslid zijn persoonlijke pagina gehaald.
+
+### Tijdsplanning
+
+Wij streefden ernaar dat iedereen zijn persoonlijke web app op vrijdag negen februari af had waardoor wij vanaf maandag twaalf tot en met woensdag veertien februari onze focus konden verleggen op de teamopdracht. Dit was het streven maar uiteindelijk is dit niet gelukt waardoor sommige teamleden nog kleine aanpassingen aan hun persoonlijke site moesten maken.
+
+## Voorbereidingsfase
+
+### Onderzoek en Analyse
+
+Nadat wij tijdens de introductie eenden ontvingen van het HVA, leek het ons als team leuk om onze web page over eenden te laten gaan. Quinten begon te schetsen in zijn boekje en kwam op het idee om een eenden cijfer te creëren ( zie Doelen en Doelstellingen )
+
+<img src="https://github.com/KaoriYes/wafsEend/assets/118190801/e90f9fcf-137f-4fd1-96d0-0602f0d18c90" alt="Image Alt Text" width="300">
+
+### Ontwerp
+
+Kevin heeft in Adobe XD een wireframes/ ontwerp gemaakt van de website. Hierdoor konden we gezamenlijk afstellen hoe de site eruit moest zien, zonder gelijk in de code te duiken.
+
+<img src="https://github.com/KaoriYes/wafsEend/assets/118190801/c0a83b5e-6386-48b1-9a59-725200b6e8b4" alt="Image Alt Text" width="300">
+<img src="https://github.com/KaoriYes/wafsEend/assets/118190801/4b936f0b-738e-42ab-9f78-39d10257c104" alt="Image Alt Text" width="300">
+
+## Uitvoeringsfase
+
+### Taakverdeling
+
+- Quinten Kok: Linken van persoonlijke data en ontwerpen eigen eendje.
+- Kevin Boere: Visueel gedeelte van de website coderen en ontwerpen eigen eendje.
+- Lars van Veldhuizen: Stylen van tekst en ontwerpen eigen eendje.
+- Justin Prins: Documentatie en ontwerpen eigen eendje.
+
+### Codering
+
+Kevin is begonnen met maken van een template waarin wij als groepje allemaal in kunnen werken. Uiteindelijk hebben wij allemaal onze eigen branch gemaakt. Om merching conflicts te voorkomen hadden wij als regel afgesproken dat we alleen mochten stijlen in onze eigen classname.
+
+<img src="https://github.com/KaoriYes/wafsEend/assets/118190801/0a362161-9a48-42c3-ab36-6ce930f03f81" alt="Image Alt Text" width="300">
+<img src="https://github.com/KaoriYes/wafsEend/assets/118190801/5c99b8ad-4c10-4f8c-88e1-204851ee5b6e" alt="Image Alt Text" width="300">
+
+Nadat ieder groepslid de animatie van zijn eigen eendje had voltooid begon Quinten de data vanuit onze persoonlijke websites te linken aan onze team web app. Wij hebben Quinten dit laten doen omdat hij de senior binnen het team is en hier het meeste verstand van heeft.
+
+![Afbeelding Code Quinten](link_naar_afbeelding_code_quinten)
+
+## Conclusie
+
+### Resultaten
+
+Het resultaat van dit alles is een web app die volledig responsive is waarbij de data van iemands persoonlijke web app zichtbaar wordt wanneer je op een groepslid zijn persoonlijke eendje klikt.
+
+### Leermomenten
+
+Tijdens dit teamproject ging het generen van ons concept erg vlot, al vrij vroeg zaten we op één lijn en bedachten we gezamenlijk nieuwe features waarbij er positief werd gereageerd op iedereen zijn ideeën. Door de positieve omgeving die wij als groepje creëerden werd duidelijk en goed gecommuniceerd waardoor deadlines of eventuele problemen af werden gemaakt en goed werden besproken. 
+
+Wat wij nog konden verbeteren waren de animaties, zo hadden wij bijvoorbeeld het eendje over het pad van de SVG kunnen laten lopen. Hier zijn wij helaas niet aan toegekomen. Ook hadden wij de vijver gedetailleerder kunnen maken door bijvoorbeeld een echte vijver of 3d toe te voegen.
+
+## Bronnen
+
+- GitHub REST API.

docs/index.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<title>Wafs Eendjes</title>
+	<link href="./styles/index.css" rel="stylesheet">
+	<link rel="stylesheet"
+		href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap">
+</head>
+
+<body>
+
+	<header>
+		<nav>
+			<svg xmlns="http://www.w3.org/2000/svg" width="210" height="56.077" viewBox="0 0 210 56.077">
+				<g id="Group_1" data-name="Group 1" transform="translate(-291 -409)">
+					<text id="Team_Eend" data-name="Team Eend" transform="translate(291 451)" font-size="45"
+						font-family="Roboto-BoldCondensed, Roboto" font-weight="700">
+						<tspan x="0" y="0">TEAM EEND</tspan>
+					</text>
+					<path id="ducky-svgrepo-com"
+						d="M4.855,12.545c.278-.188.334-.318.334-.343s-.074-.131-.347-.26C1.765,10.492,0,8.706,0,7.043,0,5.7.711,5.016,2.112,5.016a7.932,7.932,0,0,1,1.321.134,1.244,1.244,0,0,0,.2.017,1.6,1.6,0,0,0,1.371-.961A7.315,7.315,0,0,1,18.944,7.312a7.275,7.275,0,0,1-2,5.024c-.254.269-.288.452-.27.511s.135.142.357.194a12.649,12.649,0,0,0,2.938.436,6.415,6.415,0,0,0,1.42-.152c.29-.065.674-.191,1.119-.337a11.8,11.8,0,0,1,3.458-.758,2.649,2.649,0,0,1,2.316,1.051c1.02,1.448.725,4.362-.9,8.91-1.97,5.506-5.634,7.554-13.521,7.554-1.215,0-2.536-.047-4.036-.144A10.641,10.641,0,0,1,3.2,27.025,8.416,8.416,0,0,1,.54,20.633,9.727,9.727,0,0,1,4.855,12.545Zm5.983-8.53a1.518,1.518,0,1,0,1.518,1.518A1.518,1.518,0,0,0,10.838,4.016ZM17.286,24.43c3.7-.6,6.937-4.227,6.937-6.21,0-.97-4.4-.97-8.15-.97-5.1,0-6.792,1.607-6.792,3.59S13.066,25.109,17.286,24.43Z"
+						transform="translate(388.549 430.368) rotate(11)" fill="#c8cc59" />
+				</g>
+			</svg>
+
+			<div class="hgroup">
+				<h1>Wij zijn team eend.</h1>
+				<h2>Weet jij welk eend <span>Naam van eend</span> heet?</h2>
+			</div>
+
+			<div class="toggle-switch">
+				<input type="checkbox" id="darkModeToggle" class="toggle-checkbox" aria-labelledby="toggle-label">
+				<label for="darkModeToggle" class="toggle-label" tabindex="0" id="toggle-label">
+					<span class="visually-hidden">Toggle Dark Mode</span>
+				</label>
+			</div>
+		</nav>
+	</header>
+
+	<main>
+		<section>
+			<img class="sea" src="./images/sea.png" alt="image of a river">
+			<details class="justin">
+				<summary>
+					<img class="duckFloat" alt="image of a duck" src="./images/zijaanzicht-eend.png">
+				</summary>
+				<div class="data-box">
+					<p>Kwak</p>
+				</div>
+			</details>
+			<details class="lars">
+				<summary>
+					<h2>Lars</h2>
+					<img alt="" src="">
+				</summary>
+				<div class="data-box">
+					<p>Kwak</p>
+				</div>
+			</details>
+			<details class="kevin">
+				<summary>
+					<img class="duckFloat" src="./images/duck.png" alt="image of a duck">
+				</summary>
+
+				<div class="data-box">
+					<p>Kwak</p>
+				</div>
+			</details>
+			<details class="quinten">
+				<summary>
+					<h2>Quinten</h2>
+					<img alt="" src="">
+
+				</summary>
+				<div class="data-box">
+					<p>Kwak</p>
+				</div>
+			</details>
+			<img class="sea" src="./images/sea.png" alt="image of a duck">
+		</section>
+	</main>
+
+	<footer>
+
+	</footer>
+
+	<script src="./scripts/index.js"></script>
+</body>
+
+</html>

docs/scripts/index.js

@@ -0,0 +1,13 @@
+console.log('Hello World');
+
+const darkModeToggle = document.getElementById('darkModeToggle');
+
+function toggleDarkMode() {
+  if (darkModeToggle.checked) {
+    document.body.classList.add('dark-mode');
+  } else {
+    document.body.classList.remove('dark-mode');
+  }
+}
+
+darkModeToggle.addEventListener('change', toggleDarkMode);