diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..67b6e7a Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f673a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/README.md b/README.md index 6d168c8..ca2c446 100644 --- a/README.md +++ b/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. \ No newline at end of file +# 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 ) + +Image Alt Text + +### 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. + +Image Alt Text +Image Alt Text + +## 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. + +Image Alt Text +Image Alt Text + +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. diff --git a/docs/images/duck.png b/docs/images/duck.png new file mode 100644 index 0000000..cb23cc5 Binary files /dev/null and b/docs/images/duck.png differ diff --git a/docs/images/logo.svg b/docs/images/logo.svg new file mode 100644 index 0000000..67cf7ae --- /dev/null +++ b/docs/images/logo.svg @@ -0,0 +1,6 @@ + + + TEAM EEND + + + diff --git a/docs/images/quintenEend.png b/docs/images/quintenEend.png new file mode 100644 index 0000000..42c52d9 Binary files /dev/null and b/docs/images/quintenEend.png differ diff --git a/docs/images/sea.png b/docs/images/sea.png new file mode 100644 index 0000000..62c9e3d Binary files /dev/null and b/docs/images/sea.png differ diff --git a/docs/images/zijaanzicht-eend.png b/docs/images/zijaanzicht-eend.png new file mode 100644 index 0000000..219e762 Binary files /dev/null and b/docs/images/zijaanzicht-eend.png differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..281829c --- /dev/null +++ b/docs/index.html @@ -0,0 +1,92 @@ + + + + + + Wafs Eendjes + + + + + + +
+ +
+ +
+
+ image of a river +
+ + image of a duck + +
+

Kwak

+
+
+
+ +

Lars

+ + +
+

Kwak

+
+
+
+ + image of a duck + + +
+

Kwak

+
+
+
+ +

Quinten

+ + + +
+

Kwak

+
+
+ image of a duck +
+
+ + + + + + + \ No newline at end of file diff --git a/docs/scripts/index.js b/docs/scripts/index.js new file mode 100644 index 0000000..3f5ee75 --- /dev/null +++ b/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); diff --git a/docs/styles/index.css b/docs/styles/index.css new file mode 100644 index 0000000..e27ea35 --- /dev/null +++ b/docs/styles/index.css @@ -0,0 +1,461 @@ +/* Reset styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + /* Font Sizes */ + --h1-font-size: 2rem; + --h2-font-size: 1.5rem; + --h3-font-size: 1.4rem; + --h4-font-size: 1.2rem; + --h5-font-size: 1.2rem; + --h6-font-size: 1rem; + --p-font-size: 1rem; + + + /* Background Colors-light */ + --body-bg-color: #FFF9CC; + --bg-details-box: #E5DD97; + + /* Text Colors-light */ + --text-color-default: #000; + --text-color-accent: #E5DD97; + + --logo-fill-color: #000000; +} + +::selection { + background-color: var(--text-color-accent); + color: var(--text-color-default); +} + + +/* Header styles */ + +h1, +h2, +h3, +h4, +h5, +h6, +p { + font-weight: 400; + line-height: 1.2; + color: var(--text-color-default); +} + +h1 { + font-size: var(--h1-font-size); +} + +h2 { + font-size: var(--h2-font-size); +} + +h3 { + font-size: var(--h3-font-size); +} + +h4 { + font-size: var(--h4-font-size); +} + +h5 { + font-size: var(--h5-font-size); +} + +h6 { + font-size: var(--h6-font-size); +} + +p { + font-size: var(--p-font-size); +} + +/* standard styling */ + +body { + position: relative; + background-color: var(--body-bg-color); + font-family: 'Roboto', sans-serif; + overflow: hidden; +} + +body.dark-mode { + --body-bg-color: #222222; + --bg-details-box: #4B4B4B; + + --text-color-default: #ffffff; + --text-color-accent: #4B4B4B; + + --logo-fill-color: #ffffff; +} + +header { + position: relative; + z-index: 99999; +} + +header nav { + position: relative; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + padding: 1em; +} + +nav svg { + width: auto; + height: 50px; + +} + +nav svg #Team_Eend { + fill: var(--logo-fill-color); +} + +nav .hgroup { + display: flex; + flex-wrap: wrap; + flex-direction: column; + align-items: center; + text-transform: uppercase; + font-weight: 100; +} + +nav .hgroup span { + font-weight: 800; +} + +/* darkmode switch */ + +/* Hide the checkbox */ +.toggle-switch .toggle-checkbox { + display: none; +} + +/* Style the label to look like a toggle */ +.toggle-switch .toggle-label { + display: inline-block; + width: 60px; + height: 30px; + background-color: #ccc; + border-radius: 15px; + position: relative; + cursor: pointer; + outline: none; + /* Remove default focus outline */ +} + +/* Style the inner circle of the toggle */ +.toggle-switch .toggle-label:after { + content: ''; + position: absolute; + width: 22px; + height: 22px; + border-radius: 50%; + background-color: white; + top: 4px; + left: 2px; + transition: transform 0.3s ease; +} + +/* Move the inner circle to the right when the checkbox is checked */ +.toggle-switch .toggle-checkbox:checked+.toggle-label:after { + transform: translateX(30px); +} + +/* Visually hidden class for screen reader text */ +.visually-hidden { + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + height: 1px; + width: 1px; + margin: -1px; + padding: 0; + border: 0; +} + + + + +/* ------------------------------------------------main---------------------------------------- */ + +main { + height: 80vh; + width: 100vw; +} + +main section { + height: 100%; + width: 100%; +} + +details summary::marker { + content: ""; + list-style-type: none; +} + +img.sea { + position: fixed; + width: 100%; + bottom: 0; + pointer-events: none; +} + +img.sea:nth-child(1) { + z-index: -1; + bottom: 2vw; +} + +details .data-box { + position: absolute; + width: 80%; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + padding: 1em; + background-color: var(--bg-details-box); + border-radius: 10px; +} + +details.kevin { + position: absolute; + width: 100%; + height: 100%; + bottom: 0; + pointer-events: none; +} + +details.kevin summary { + position: absolute; + bottom: -4vw; + animation: floating 20s linear infinite; + cursor: pointer; + pointer-events: initial; +} + +details.kevin img { + width: 6vw; + height: auto; +} + +@keyframes floating { + 0% { + left: 0; + transform: translateY(-2vw); + } + + 3% { + transform: translateY(-7vw); + } + + 10% { + transform: translateY(-2vw); + } + + 15% { + transform: translateY(-7vw); + } + + 20% { + transform: translateY(-2vw); + } + + 33% { + transform: translateY(-7vw); + } + + 36% { + transform: translateY(-2vw); + } + + 39% { + transform: translateY(-9vw); + } + + 42% { + transform: translateY(-9vw); + } + + 46% { + transform: translateY(-2vw); + } + + 49% { + transform: translateY(-2vw); + } + + 50% { + left: calc(100% - 6vw); + transform: translateY(-2vw); + } + + 51% { + transform: translateY(-2vw); + } + + 54% { + transform: translateY(-2vw); + } + + 58% { + transform: translateY(-7vw); + } + + 61% { + transform: translateY(-7vw); + } + + 64% { + transform: translateY(-2vw); + } + + 67% { + transform: translateY(-7vw); + } + + 80% { + transform: translateY(-2vw); + } + + 85% { + transform: translateY(-6vw); + } + + 90% { + transform: translateY(-2vw); + } + + 97% { + transform: translateY(-7vw); + } + + 100% { + left: 0; + transform: translateY(-2vw); + } +} + +details.justin { + position: absolute; + width: 100%; + height: 100%; + bottom: 0; + pointer-events: none; +} + +details.justin summary { + position: absolute; + bottom: -4vw; + animation: swimming 25s linear infinite; + cursor: pointer; + pointer-events: initial; +} + +details.justin img { + width: 6vw; + height: auto; +} + +@keyframes swimming { + 0% { + left: 0; + transform: translateY(-2vw); + } + + 3% { + transform: translateY(-7vw); + } + + 10% { + transform: translateY(-2vw); + } + + 12% { + transform: translateY(-2vw); + } + + 15% { + transform: translateY(-2vw); + } + + 20% { + transform: translateY(2vw); + } + + + 33% { + transform: translateY(2vw); + } + + 36% { + transform: translateY(0vw); + } + + 39% { + transform: translateY(-7vw) rotate(0deg); + } + + 42% { + transform: translateY(-20vw) rotate(3600deg); + } + + 46% { + transform: translateY(-2vw); + } + + 49% { + transform: translateY(-2vw); + } + + 50% { + left: calc(100% - 6vw); + transform: translateY(-2vw) rotateY(180deg); + } + + 51% { + transform: translateY(-2vw) rotateY(180deg); + } + + 54% { + transform: translateY(-2vw) rotateY(180deg); + } + + 57% { + transform: translateY(-20vw) rotateY(180deg)rotate(3600deg); + } + + 64% { + transform: translateY(5vw) rotateY(180deg); + } + + 67% { + transform: translateY(5vw) rotateY(180deg); + } + + 80% { + transform: translateY(5vw) rotateY(180deg); + } + + 85% { + transform: translateY(-15vw) rotateY(180deg) rotate(3600deg); + } + + 88% { + transform: translateY(-2vw) rotateY(180deg); + } + + 97% { + transform: translateY(-7vw) rotateY(180deg); + } + + 100% { + left: 0; + transform: translateY(-2vw) rotateY(180deg); + } +} \ No newline at end of file