Week 2

Dinsdag

Bouwen

Responsive design liked + sug playlist section

Ik ben begonnen met het de pagina responsive te maken, met name de liked + sub playlist section vanwege dat die helemaal niet responsive was.

Woensdag

Analyseren

Inspiratie

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.

Ontwerpen

Pleasurable UI

Vanuit de inspiratie had ik een breakdownschets gemaakt van het design wat ik in mijn site wilden

Donderdag

Bouwen

Pleasurable UI carousel

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.

Javascript uit

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.

Javascript

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'
  })
});

Vrijdag

Integreren

Pull request + mergen

Op vrijdag hebben we een pull request gemerged, we hebben de 'own-playlist section' gemerged.