web1 script.js

(function() {
const navButtosns = document.getElementById("navigation").querySelectorAll("a");
for (let item of navButtosns) {
  item.onclick = function() {
    event.preventDefault();
    for (let item of navButtosns) {
      if (item === this) {
        if (!item.classList.contains("active")) {
          this.classList.add("active");
          console.log(this.innerText);
        }
      } else {
        item.classList.remove("active");
      }
    }
  }
}
})();

(function() {
  var timer = null;
  const navButtosns = document.getElementById("pictureFrameNavigation").querySelectorAll("input");
  const pictureHolder = document.getElementById("pictureHolder");

  let buttons = document.getElementById("pictureFrameArrows").querySelectorAll("svg");

  for (var item of buttons) {
    item.onclick = function(){

      for (let i = 0; i < navButtosns.length; i++) {
        if (navButtosns[i].checked) {
          let index = i+parseInt(this.dataset.term);
          if (index < 0) {
            index = navButtosns.length-1;
          }
          if (!(index < navButtosns.length)) {
            index = 0;
          }
          navButtosns[index].click();
          break;
        }
      }

    }
  }

  for (let item of navButtosns) {
    item.onchange = function(){
      clearTimeout(timer);
      pictureHolder.style.backgroundImage = `url(${this.dataset.picUrl})`;
      pictureHolder.removeChild(pictureHolder.lastChild);
      pictureHolder.appendChild(document.createElement("div"));
      for (let i = 0; i < navButtosns.length; i++) {
        if (navButtosns[i] === this) {
          let nextElement = null;
          if (i+1 < navButtosns.length) {
            nextElement = navButtosns[i+1];
          } else {
            nextElement = navButtosns[0];
          }
          timer = setTimeout(function(){
            nextElement.click();
          },8000);
        }
      }
    }
  }
  navButtosns[0].click();
})();

(function() {
  let sideLists = document.getElementsByClassName("sideList");

  for (var list of sideLists) {
    let elems = list.querySelectorAll("li ul");
    for (let item of elems) {
      item.style.height = `${item.scrollHeight}px`
      item.parentElement.classList.add("hidden")
    }
    elems = list.querySelectorAll("div");
    for (let item of elems) {
      item.onclick = function(){
        this.parentElement.classList.toggle("hidden")
      }
    }

  }

})();