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

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