Sprint Challenge stretch refactored to use functions

README.md

Turns out there's still a memory leak (if that's what it's called?), need to find out how to remove these event listeners on each recursive run call. Fixed: by using onclick instead of addEventListener you can override the existing listener on each run call. I stole the mod definition from Donald Knuth (via Wikipedia page: https://en.wikipedia.org/wiki/Modulo_operation#Remainder_calculation_for_the_modulo_operation).

Carousel.js

const mod = (x, y) => x - y * Math.floor(x / y)

const carousel = document.querySelector(".carousel")
const imgList = carousel.querySelectorAll("img")
const length = imgList.length
const [left, right] = [...carousel.querySelectorAll("[class$='button']")]

;(function run(current = 0, last) {
  last !== undefined && (imgList[last].style.display = "none")
  imgList[current].style.display = "block"
  left.onclick = () => run(mod(current - 1, length), current)
  right.onclick = () => run(mod(current + 1, length), current)
})()

Tabs.js

const tabs = document.querySelectorAll(".tab")
const cards = document.querySelectorAll(".card")

const show = tab => {
  cards.forEach(({ dataset, style }) => {
    tab === "all"
      ? (style.display = "flex")
      : dataset.tab === tab && (style.display = "flex")
  })
  tabs.forEach(({ dataset, classList }) => {
    dataset.tab === tab && classList.add("active-tab")
  })
}

const hide = tab => {
  cards.forEach(({ dataset, style }) => {
    tab === "all"
      ? (style.display = "none")
      : dataset.tab === tab && (style.display = "none")
  })
  tabs.forEach(({ dataset, classList }) => {
    dataset.tab === tab && classList.remove("active-tab")
  })
}

;(function run(current = "all", last) {
  last && hide(last)
  show(current)
  tabs.forEach(tab => {
    tab.onclick = () => run(tab.dataset.tab, current)
  })
})()