195 Building a Slider Component Part 1 - Refactoring (to Jonas)

[hazartilirot]

Well, it's not an issue, just a question.

I wonder why you don't expect your students not to type code any better than yours :D?

Please, share and discuss more about any feature you're going to implement. The more information you share the more probability that your students would implement the feature on their own. On the left side I jscript.js it's what I implemented while figuring out how it should work. As soon as I finished, I started refactoring code. On the right side is ready to use code:

In case someone wants the code:

const slides = document.querySelectorAll('.slide')

let cSlide = 0; /*current slide*/

const listOfSlides = () => slides.forEach((slide, i) => 
    slide.style.transform = `translateX(${(i - cSlide) * 100}%)`);

listOfSlides(); /*set slides in the initial position of 0, 100%, 200%*/

function getStepFurther() {
  this === 'right' ? cSlide++ : cSlide--;
  if (cSlide > slides.length - 1)
    cSlide = 0;
  else if (cSlide < 0)
    cSlide = slides.length - 1;
  
  listOfSlides();
}
document.querySelector('.slider__btn--left')
  .addEventListener('click', getStepFurther.bind('left'));
document.querySelector('.slider__btn--right')
  .addEventListener('click', getStepFurther.bind('right'));

[hazartilirot]

Eventually, there is the final result. I've spent a couple of hours just debugging a simple error. As it turned out in the end that when we apply destructuring assignment of e.target.dataset object that we get at the event once we clicked on a dot, the value we get from destructuring is a String. If you asked me why I spent so much time on this. Well, I tried to print two values console.log(cSlide, i) and the result seems correct (I thought the console showing me values in different colours in a way that it'd be convenient to differentiate cSlide - white, i - blue (or violent?). White - is meant to be String. 😂🤣😆

const slides = document.querySelectorAll('.slide');
let dots = document.querySelector('.dots');

let cSlide = 0; /*current slide*/

const refreshDots = (i) => {
  if (i === 0)
    while(dots.firstChild)
      dots.removeChild(dots.lastChild);

  dots.insertAdjacentHTML('beforeend', cSlide === i
      ? `<button class="dots__dot dots__dot--active" data-slide="${i}">`
      : `<button class="dots__dot" data-slide="${i}">`
    )
}
const listOfSlides = () => {
  slides.forEach((slide, i) => {
    slide.style.transform = `translateX(${(i - cSlide) * 100}%)`;
    refreshDots(i);
  })
}
listOfSlides(); /*set slides in the initial position of 0, 100%, 200%*/

function getStepFurther() {
  this === 'right' ? cSlide++ : cSlide--;
  if (cSlide > slides.length - 1)
    cSlide = 0;
  else if (cSlide < 0)
    cSlide = slides.length - 1;
  
  listOfSlides();
}

document.querySelector('.slider__btn--left')
  .addEventListener('click', getStepFurther.bind('left'));
document.querySelector('.slider__btn--right')
  .addEventListener('click', getStepFurther.bind('right'));

document.addEventListener('keydown', function(e) {
  if (e.key === 'ArrowLeft') getStepFurther.call('left');
  if (e.key === 'ArrowRight') getStepFurther.call('right');
});
dots.addEventListener('click', e => {
   if (e.target.classList.contains('dots__dot')) {
     const {slide} = e.target.dataset; /*destructuring*/
     cSlide = Number(slide);
     listOfSlides();
  }
})

https://codesandbox.io/s/unruffled-neumann-4gxw2