Live chat media player#83

.gitignore

@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

README.md

@@ -1,33 +1,94 @@
-> _Fork_ deze leertaak en ga aan de slag. 
-Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. 
-De instructie vind je in: [docs/INSTRUCTIONS.md](docs/INSTRUCTIONS.md)
+# 🎶 Mediahuis radiogids
+<img width="1771" alt="Scherm­afbeelding 2024-10-25 om 19 00 05" src="https://github.com/user-attachments/assets/240fca23-b6c1-431e-8154-9732e71eda66">
 
-# Titel
-<!-- Geef je project een titel en schrijf in één zin wat het is -->
+## 🔗 Link naar de website
+<a href="https://lose-your-head-the-client-case-5q6r.vercel.app/" alt="link naar de website">Bekijk hier de website</a>
 
-## Inhoudsopgave
+## 📄 Inhoudsopgave
+* [✏️ Beschrijving](#-beschrijving)
+* [💻 Gebruik](#-gebruik)
+* [👨‍💻 Wat heb ik gedaan in dit project?](#-wat-heb-ik-gedaan-in-dit-project)
+* [✅ Waar ben ik trots op](#-waar-ben-ik-trots-op)
+* [❌ Waar liep ik tegen aan en hoe heb ik dit opgelost?](#-waar-liep-ik-tegen-aan-en-hoe-heb-ik-dit-opgelost)
+* [📡 Technieken](#-technieken)
+* [🧰 Tools](#-tools)
+* [📊 Projectboard](#-projectboard)
+* [🔧 Installatie](#-installatie)
+* [📚 Bronnen](#-bronnen)
 
-  * [Beschrijving](#beschrijving)
-  * [Kenmerken](#kenmerken)
-  * [Installatie](#installatie)
-  * [Gebruik](#gebruik)
-  * [Bronnen](#bronnen)
-  * [Licentie](#licentie)
+## ✏️ Beschrijving
+We hebben een radiogids gebouwd voor mediahuis, op deze gids kun je een dag selecteren, op de gekozen dag zie je alle tijdstippen van de radioshows en alle radio dj's die draaien tijdens de show.
 
-## Beschrijving
-<!-- In de Beschrijving staat hoe je project er uit ziet, hoe het werkt en wat je er mee kan. -->
-<!-- Voeg een mooie poster visual toe 📸 -->
-<!-- Voeg een link toe naar Github Pages 🌐-->
+## 💻 Gebruik
+### User story
+Als gebruiker wil ik kunnen zien wanneer alle radioshows spelen en welke dj er draait.
 
-## Kenmerken
-<!-- Bij Kenmerken staat welke technieken zijn gebruikt en hoe. Wat is de HTML structuur? Wat zijn de belangrijkste dingen in CSS? Wat is er met Javascript gedaan en hoe? Misschien heb je een framwork of library gebruikt? -->
+### Gebruik van de radiogids
+Door op de dagen te klikken kun je het overzicht van de radioshows die op die dag spelen ophalen.
 
-## Installatie
+### Ontwerp
+We hebben een ontwerp van Triple gekregen de desktop view hebben we in een horizontale lijn gezet zodat er meer radiostations in een keer te bekijken zijn.
 
-## Gebruik
+### Features
 
-## Bronnen
+#### Responsive page
+Doormiddel van media queries is de pagina responsive en te gebruiken op elk scherm formaat!
+
+#### Image optimalisatie (layout shifting)
+De images hebben een standaard width en height, zodat dit layout shifting voorkomt.
+
+## 👨‍💻 Wat heb ik gedaan in dit project?
+
+- Een weekselectie maken die de huidige datum op haalt en deze markeerd
+- Herbruikbare link component
+- Mede verantwoordelijk voor een kleine redesign (Horizontale view inplaats van verticale view)
+
+## ✅ Waar ben ik trots op
+
+### Week selectie
+Ik ben erg trots op de week selectie. Ik heb hiervoor een javascript functie gebouwd die de huidige maand ophaalt en de huidige dag markeerd, zodat je weet welke dag het is. Dit was een grote uitdaging maar ben hier uiteindelijk wel uitgekomen!
+
+### Link component
+Ik heb een link component gemaakt ik ben hier trots op omdat dit een van mijn eerste keren is dat ik werk met svelte en uberhaupt components. Ik heb doormiddel van variabelen en css classes ervoor gezorgd dat de link over het hele project te gebruiken is.
+
+## ❌ Waar liep ik tegen aan en hoe heb ik dit opgelost?
+
+### Week selectie
+#### javascript functie
+Ik wist niet goed hoe ik de maand moest gaan ophalen en de huidige dag moest tonen. Om dit aantepakken ben ik op internet gaan lezen over datetime. Na heel veel lezen en wat hulp gevraagd te hebben aan docenten heb ik het uiteindelijk voor elkaar gekregen om de functie werkend te krijgen.
+
+#### Fade effect
+Ik heb aan de zijkanten een fade effect gemaakt. Ik liep er tegen aan dat ik niet goed wist hoe ik dit kon maken zonder dat het de toegankelijkheid aanttast. Uiteindelijk heb ik dit opgelost met before's. Deze heb ik een witte shadow gegeven waardoor het lijkt alsof de content vervaagd, dit maakt het scrollen duidelijker.
+
+#### Scrollen met buttons
+Ik wist niet hoe ik de weekselectie moest laten scrollen doormiddel van buttons. Ik heb eerst de stappen gevolgd die ik wel kende zoals het toevoegen van een eventlistener, etc. Alleen nu moest ik nog de functie schrijven. Ik heb op google gezocht naar artikelen en oplossingen. Uiteindelijk vond ik een klasgenoot die een soort gelijke functie had gemaakt en heb ik met hem gekeken hoe het moet. Daarna heb ik nog extra comments bij de code gezet zodat ik de code nog beter onthoudt.
+
+## 📡 Technieken
+- HTML
+- CSS
+- JS
+- Svelte
+
+## 🧰 Tools
+- Visual studio code (code editor)
+- Vercel (hosting)
+- Figma (Design tool)
+
+## 📊 Projectboard
+In ons projectboard kun je precies volgen hoe we aan het project hebben gewerkt en wat er wel en niet af is. Ons projectboard vind je <a href="https://github.com/users/Daan645/projects/8">hier</a>
+
+## 🔧 Installatie
+1. Clone deze repository
+2. Open de repository met een code editor naar keuze
+3. Open het terminal in de code editor
+4. Typ **npm install** in om alle benodigdheden voor het project te installeren in de terminal
+5. Om het project te kunnen typ: `npm run dev` om de server op te starten
+5. Gebruik de link <a href="http://localhost:5173/">localhost</a> om het project lokaal te bekijken
+6. Mocht je het project online bekijken dan kan dat via <a href="https://lose-your-head-the-client-case-5q6r.vercel.app/" alt="link naar de website">deze link</a>
+
+## 📚 Bronnen
+- <a href="https://www.shecodes.io/athena/73295-how-to-display-the-current-day-of-the-week-and-time-using-javascript#:~:text=%2F%2F%20create%20a%20new%20Date,current%20time%20const%20time%20%3D%20now.">Show current date in JS</a>
+
+- <a href="https://www.shecodes.io/athena/38917-how-to-display-the-current-date-and-time-in-javascript#:~:text=To%20display%20the%20current%20date%20and%20time%20in%20JavaScript%2C%20you,()%20object%20and%20its%20methods.&text=In%20the%20code%20above%2C%20we,the%20current%20date%20and%20time.">Display date and time in JS</a>
 
-## Licentie
 
-This project is licensed under the terms of the [MIT license](./LICENSE).

docs/INSTRUCTIONS.md

@@ -1,6 +1,6 @@
 # Lose Your Head - the Client Case
 
-Ontwerp en maak een website voor een opdrachtgever op basis van een Headless CMS API 
+Ontwerp en maak een website voor een opdrachtgever op basis van een Headless CMS API
 
 ## Context
 Deze leertaak hoort bij sprint 14: Lose your Head. Dit is een opdracht die je individueel uitvoert voor een opdrachtgever.
@@ -28,7 +28,7 @@ De development lifecycle kent de volgende stappen:
 
 1. Kies een user story uit de backlog van het project waar je aan gaat werken, of schrijf een nieuwe user story.  De projecten staan bij [FDND Agency](https://github.com/fdnd-agency).
 2. Maak een fork van [deze leertaak](https://github.com/fdnd-task/lose-your-head-the-client-case).
-3. Kopieer de user story waar jij aan gaat werken naar de Wiki van de geforkte repository. Deze user story ga je gedurende deze sprint beantwoorden/ verwerkelijken/ realiseren. **NB: Een user-story moet vaak nog opgesplitst worden in taken!** 
+3. Kopieer de user story waar jij aan gaat werken naar de Wiki van de geforkte repository. Deze user story ga je gedurende deze sprint beantwoorden/ verwerkelijken/ realiseren. **NB: Een user-story moet vaak nog opgesplitst worden in taken!**
 4. Plan een gesprek met de opdrachtgever, maak verkennende schetsen en bereid vragen voor en zorg dat je de opdracht helder hebt voor je aan de slag gaat.
 5. Hanteer de fases uit de dev-lifecycle om jouw project in te richten, bespreek vooraf met een docent welke stappen je denkt te gaan hanteren.
 6. Documenteer doorlopend jouw proces, alle (technische en ontwerp) beslissingen dienen onderbouwd te worden en je verwijst naar alle bronnen die je bij de verschillende fases gebruikt hebt.
@@ -50,5 +50,3 @@ DOD's deeltaak Content First
 - [ ] Per pagina een content model is gedocumenteerd.
 - [ ] Herhaalde elementen zijn aangegeven
 -->
-
-

docs/infromation-architecture.md

@@ -3,7 +3,7 @@
 ## Information Architecture
 _In het college S14W2-02-informatie-architectuur wordt behandeld hoe het structureren en organiseren van informatie op de frontend invloed heeft op de Content modelling._
 
-Analyseer de content stuctuur van de bestaande website(s) van de opdrachtgever en schets een datamodel waarmee de API kan worden ingericht. 
+Analyseer de content stuctuur van de bestaande website(s) van de opdrachtgever en schets een datamodel waarmee de API kan worden ingericht.
 
 
 
@@ -22,12 +22,12 @@ Bekijk de bestaande website(s) van het door jou gekozen project en breng de stru
 
 #### Aanpak
 
-1. Documenteer uit welke (mogelijke) pagina’s jouw opdracht bestaat en welke pagina's op elkaar lijken wat betreft de structuur. 
+1. Documenteer uit welke (mogelijke) pagina’s jouw opdracht bestaat en welke pagina's op elkaar lijken wat betreft de structuur.
 2. Schets wireframes van de verschillende paginastructuren
 3. Schets het datamodel van de content.
 4. Bespreek dit met een docent of medestudent
 
-#### Materiaal 
+#### Materiaal
 
 - [8 steps to content first design @ UX-Design](https://uxdesign.cc/8-steps-to-content-first-design-fa2885b9caee)
 - [Content modelling (in Hygraph)](https://hygraph.com/docs/getting-started/fundamentals/content-modeling)
@@ -40,5 +40,3 @@ Deze opdracht is done als:
 - [ ] Aan de hand van schetsen is gedocumenteerd welke pagina's in jouw project voorkomen.
 - [ ] Per pagina een content model is gedocumenteerd.
 - [ ] Herhaalde elementen zijn aangegeven
-
-