Frontend-for-designers

Procesverslag

Auteur: -Sena Nur Korkutan-

De opdrachten: opdracht 1 en opdracht 2

Markdown is een simpele manier om HTML te schrijven.
Markdown cheat cheet: Hulp bij het schrijven van Markdown.

Nb. De standaardstructuur en de spartaanse opmaak van de README.md zijn helemaal prima. Het gaat om de inhoud van je procesverslag. Besteedt de tijd voor pracht en praal aan je website.

Nb. Door open toe te voegen aan een details element kun je deze standaard open zetten. Fijn om dat steeds voor de relevante stuk(ken) te doen.

Bronnenlijst

Opdracht 1

  1. Figma logo size css
  2. Figma trademark guideline
  3. Whyte Intrap font
  4. Hide an element
  5. Transform property
  6. [Shadow to an ::after   :: before element](https://stackoverflow.com/questions/28033616/adding-box-shadow-to-a-after-pseudo-element)
  7. Gradient generator
  8. Prefers Reduced Motion

Opdracht 2

  1. Cursor
  2. Flexbox css-tricks
  3. My old css codes
  4. Scroll
  5. Inspiration
  6. chatGPT

Opdracht 1 plan

uitwerken na schetsen idee (voor week 2) ### Je storyboard: storyboard voor opdracht 1 ### Je ambitie: Aan deze technieken/punten wil ik werken: - Professionele animaties kunnen maken - Gemakkelijk te spelen met de elementen - Dark mode aanpassen - Proberen responsieve schermen te maken

Opdracht 1 reflectie

uitwerken bij afronden opdracht (voor week 4) ### Je uitkomst - karakteristiek screenshot(s): uitomst opdracht 1 - light mode uitomst opdracht 1 - light uitomst opdracht 1 - dark mode uitomst opdracht 1 - dark ### Dit ging goed/Heb ik geleerd: - Custom properties - Dark/light-mode ging gewoon goed. - Reduced motion was makkelijker dan ik dacht - @font-face lijkt me heel makkelijk - 2 animatie maken in een @keyframe - Manipuleren van ::after en ::before was makkelijker dan ik dacht - Elementen hidden krijgen - Verschillende shadow opties uitomst opdracht 1 - light uitomst opdracht 1 - dark ### Dit was lastig/Is niet gelukt: - Kleuren zijn erg belangrijk voor contrast, er waren te veel kleuren waardoor het moeilijk was om contrast aan te brengen - Ik vind gebruiken van de z-index property lastig. Elementen die op de grond moet blijven zijn niet op de ground, andere elementen komen vóór het elemnt, zoals in de foto te zien. - Heel veel rekening heb ik gedaan tijdens procenten deel van de animaties z-index fout

Opdracht 2 plan

uitwerken na schetsen idee (voor week 5) ### Je ontwerp: wireflow opdracht 2 ### Je ambitie: Aan deze technieken/punten wil ik werken: - Items sorteren - Items zoeken - Gemakkelijk te spelen met de elementen - Dark mode aanpassen - Zoveel mogelijk responsieve schermen te maken

Opdracht 2 test

uitwerken na testen (week 7) Neem minimaal 5 bevindingen op: ### Bevinding 1: Ik dacht dat ik een database moest gebruiken. #### oplossing: Later heb ik geleerd dat er een local storage is en het gebruiken van hem is niet moeilijker dan ik dacht. ### Bevinding 2: Ik had geen idee hoe ik songs in mijn html kon krijgen. Ik heb js gebruikt om elementen te maken binnen het ul element hieronder. #### oplossing: ### Bevinding 3: Ik dacht altijd dat chatGPT niet echt hielp om dingen beter te begrijpen. #### oplossing: Ik heb nu ontdekt dat ik de juiste vragen moet stellen als ik nuttige informatie wil. Ik heb bijvoorbeeld het idee van lokale opslag van chatCPT gekregen. ### Bevinding 4: Het liken en zien van hetzelfde liedje op een andere pagina was moeilijker dan ik dacht. Ik had veel tijd besteed aan die like-functie. #### oplossing: document.addEventListener("DOMContentLoaded", function () { const likeHearts = document.querySelectorAll(".like"); likeHearts.forEach(function (heart) { heart.addEventListener("click", function () { heart.classList.toggle("liked"); if (heart.classList.contains("liked")) { heart.setAttribute("src", "images/heart-filled.png"); heart.setAttribute("alt", "heart-filled"); } else { heart.setAttribute("src", "images/heart.png"); heart.setAttribute("alt", "heart"); } const songTitle = heart.parentNode.querySelector("h2").innerText; const artistName = heart.parentNode.querySelector("h3").innerText; let likedSongs = localStorage.getItem("likedSongs"); if (!likedSongs) { likedSongs = [songTitle]; } else { likedSongs = JSON.parse(likedSongs); likedSongs.push(songTitle); } localStorage.setItem("likedSongs", JSON.stringify(likedSongs)); }); }); }); Na het like effect werkt, heb ik local storage gebruiktom op te slagen. ### Bevinding 5: Bij sorteren was ik niet zeker hoe het te doen, Sanne's code helpt mij om deze probleem op te losssen. #### oplossing: Ik vond een library en gebruikte die om sorteerknoppen werkend te krijgen.

Opdracht 2 reflectie

uitwerken bij afronden opdracht (voor week 8) ### Je uitkomst - karakteristiek screenshot(s): loading opdracht 2 index page opdracht 2 index liked page opdracht 2 playlist page opdracht 2 playlist search page opdracht 2 playlist sort page opdracht 2 ### Dit ging goed/Heb ik geleerd: - Custom properties - Dark/light-mode ging gewoon goed. - Reduced motion was makkelijker dan ik dacht - Makkelijk animaties schrijven met @keyframe - Manipuleren van ::after en ::before was makkelijker dan ik dacht - Items sorteren - Drag en drop effect - Items liken en gebruiken in andere pagina - Keyboard functies gebruiken - Local storage - Search functie - Loading animation ### Dit was lastig/Is niet gelukt: - Wanneer ik weer een nieuw item wil toevoegen aan de locale storage, verdwijnen de items die ik eerder heb toegevoegd. Ik vond het moeilijk om dit probleem op te lossen, dus uiteindelijk besloot ik om het niet toe te voegen.