Week 2
Ik ben begonnen met het de pagina responsive te maken, met name de liked + sub playlist section vanwege dat die helemaal niet responsive was.
Voor de progressive enhancement-taak had ik besloten om een carousel in de site te redesignen, ik was begonnen met inspiratie op te doen van het design.
Vanuit de inspiratie die ik had opgedaan heb ik dat toegepast in mijn ontwerp. Vanuit daar heb ik een breakdownschets gemaakt. In mijn ontwerp heb ik rekening gehouden met de hierachy of user delight door met de lagen van PE te werken en pleasurable interacties toe te voegen.
Het carousel is scrollbaar, maar je kan ook buttons gebruiken om het te bedienen. Als de JS uitstaat hebben de buttons geen werking. Om die reden heb ik gekozen als de JS uitstaat dat de buttons niet zichtbaar zijn.
Als de JS uitstaat dan zijn de buttons weg. Omdat het zonder JS niet heel duidelijk is dat het een carousel is was ik nog van plan om het duidelijker te maken als de JS uitstaat.
Om de buttons werkend te maken en het een pleasurable te maken heb ik client-side JS toegevoegd, door dit toe te voegen heb kan je het carousel bedienen met de buttons.
// Carousel own playlist
// Buttons click scrollevent in carousel
prevBTN.addEventListener('click', function () {
carousel.scrollBy({
left: -carousel.offsetWidth,
behavior: 'smooth'
})
});
nextBTN.addEventListener('click', function () {
carousel.scrollBy({
left: carousel.offsetWidth,
behavior: 'smooth'
})
});
Op vrijdag hebben we een pull request gemerged, we hebben de 'own-playlist section' gemerged.
