🛠 Carousel: Useful JavaScript features

// Change these
const slides = Array.from(carousel.querySelectorAll('.carousel__slide'))
const dots = Array.from(carousel.querySelectorAll('.carousel__dot'))

// To these
const slides = [...carousel.querySelectorAll('.carousel__slide')]
const dots = [...carousel.querySelectorAll('.carousel__dot')]

// Change this
contents.style.transform = 'translateX(-' + destination + ')'

// To this
contents.style.transform = `translateX(-${destination})`

// Change this
dotsContainer.addEventListener('click', event => {
  const dot = event.target.closest('button')
  if (dot) {
    // Stuff here
  }
})

// To this
dotsContainer.addEventListener('click', event => {
  const dot = event.target.closest('button')
  if (!dot) return

  // Stuff here
})

let clickedDotIndex

for (let index = 0; index < dots.length; index++) {
  if (dots[index] === dot) {
    clickedDotIndex = index
  }
}

const clickedDotIndex = dots.findIndex(d => d === dot)