22 - python & all web labs

labWeb/lab7/public/js/burger_menu.js

@@ -0,0 +1,12 @@
+const burgerButtonNode = document.querySelector(".head__burgermenu");
+const lineOneNode = document.querySelector(".line-1");
+const lineTwoNode = document.querySelector(".line-2");
+const lineThreNode = document.querySelector(".line-3");
+const navbarNode = document.querySelector(".head__navbar");
+
+burgerButtonNode.addEventListener("click", function () {
+  navbarNode.classList.toggle("transform_navbar");
+  lineOneNode.classList.toggle("rotate45");
+  lineThreNode.classList.toggle("rotate-45");
+  lineTwoNode.classList.toggle("dnone");
+});

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)";
+});