const coursesNode = document.querySelector(".courses__container");


const itemArrayNode = document.querySelectorAll(".tape__item");


const tapeNode = document.querySelector(".courses__container__tape");


const resize = () => {
  
  
  var coursesWidth = coursesNode.clientWidth;

  
  
  var tapelength = coursesWidth * itemArrayNode.length;

  
  
  tapeNode.style.width = tapelength + "px";

  for (let i = 0; i < itemArrayNode.length; i++) {
    
    itemArrayNode[i].style.width = coursesWidth + "px";
  }
};

resize();

window.addEventListener("resize", function () {
  resize();
  tapeNode.style.transform =
  "translate(-" + coursesNode.clientWidth * position + "px)";
});


const buttonLeftNode = document.querySelector(".button__left");
const buttonRightNode = document.querySelector(".button__right");


let position = 0;

buttonRightNode.addEventListener("click", () => {
  position++;
  if (position >= itemArrayNode.length) {
    position = 0;
  }
  tapeNode.style.transform =
    "translate(-" + coursesNode.clientWidth * position + "px)";
});

buttonLeftNode.addEventListener("click", () => {
  position--;
  if (position < 0) {
    position = itemArrayNode.length;
    position--;
  }
  tapeNode.style.transform =
    "translate(-" + coursesNode.clientWidth * position + "px)";
});