22 - python & all web labs

labWeb/lab7/public/js/courses.js

@@ -0,0 +1,62 @@
+
+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)";
+});