Комментирование и рефакторинг кода

index.html

@@ -148,7 +148,7 @@ <h1 class="test heading">Поздравляю, вы прошли тест!</h1>
           <li><a href="#">Frontend-разработчик</a></li>
           <li><a href="#">React: библиотека фронтенд-разработки</a></li>
         </ul>
-
+        
         <ul id="legend" class="hidden">
           <li>
             <span class="profession">Тестировщик</span>

js/events/eventsController.js

@@ -143,7 +143,7 @@ document.getElementById("title").innerHTML = eventsList[eventsList.length - 1].t
 document.getElementById("description").innerHTML = eventsList[eventsList.length - 1].description;
 // Заполнение карточки по клику на неё.
 for (let index = 0; index < eventsList.length; index++) {
-    console.log(index);
+    // console.log(index);
     document.getElementById("sideBlock").children[index].children[0].addEventListener("click", function() {Oliver(index);});
 }
 // Добавление всплывающих окон с подробной информацией о событиях (pop-ups)

js/events/eventsScroll.js

@@ -1,8 +1,10 @@
 // Здесь описана анимация изменения размера и цвета пролистываемых мероприятий
 requestAnimationFrame(() => {
+    // Обнаружение всех элементов с классом box
     const boxes = document.querySelectorAll(".box");
     let carousel = document.getElementById("carouselGallery")
 
+    // Функция для вычисления коэфициента пересечения 2х элементов
     function getIntersectionRatio(i) {
       const a = [carousel.scrollTop, carousel.scrollTop + carousel.clientHeight]; 
       const b = [boxes[i].offsetTop, boxes[i].offsetTop + boxes[i].clientHeight];
@@ -13,9 +15,12 @@ requestAnimationFrame(() => {
       return Math.max(0, (min - max) / (b[1] - b[0]));
     }
 
+    // Функция вызываемая при прокрутке страницы
     function onScroll() {
       var boxes = document.querySelectorAll(".bigger .box");
       let lastActiveElemI = 0;
+
+      // Применение стилей к дочернему элементу каждого box
       for (let i = 0; i < boxes.length; i++) {
         const intersection = getIntersectionRatio(i);
         const top = boxes[i].offsetTop - carousel.scrollTop < 0;
@@ -28,10 +33,13 @@ requestAnimationFrame(() => {
         background-image: ${eventsList[i].background};
         `;
 
-        if (intersection === 1){
+        if (intersection === 1) // Если элемент полностью видим
+        {
           lastActiveElemI = i;
         }
       }
+
+      // Обновляем активный элемент и применяем стили
       if (lastActiveElemI !== activeElemI && lastActiveElemI !== 0) {
         boxes[activeElemI].classList.remove("active");
         boxes[lastActiveElemI].classList.add("active");

js/events/eventsSideBlock.js

@@ -1,35 +1,43 @@
 // Данная функция добавляет и отображает дату с боку от просматриваемого мероприятия (Controller part)
 class EventsSideBlock {
+    // Создание элемента div для блока
     element = document.createElement("div");
     title;
     background;
     description;
     year;
     month;
 
-    set["bg"](v) {
-        this.background = v;
-        this.element.lastElementChild.style.backgroundImage = v;
+    // Свойство установки фона блока
+    set["bg"](background_value)
+    {
+        this.background = background_value;
+        this.element.lastElementChild.style.backgroundImage = background_value;
     }
 
-    constructor({title, background, description, daddy, year, month}) {
+    // Конструктор всего блока
+    constructor({title, background, description, daddy, year, month})
+    {
         let element1 = this.element;
         element1.classList = ["box"];
         element1.appendChild(document.createElement("div"));
 
+        // Инициализируем свойства блока
         this.title = title;
         this.description = description;
-        this.bg = background;
+        this.bg = background; // Используем свойство bg для установки фона
         this.year = year;
         this.month = month;
 
+        // Создаем и добавляем внутренний слой блока
         let sup_layer = Object.assign(document.createElement("div"));
         element1.children[0].appendChild(sup_layer).classList.add('sup_layer');
 
+        // Создаем и добавляем span с заголовком внутреннего слоя
         let span = Object.assign(document.createElement("span"), {innerHTML: title});
         element1.children[0].children[0].appendChild(span);
 
+        // Добавление сформированного блока в родительский элемент
         daddy.appendChild(element1);
     }
 }
-

js/members/membersBlock.js

@@ -11,6 +11,7 @@ class Member{
 
     constructor({name, age, faculty, photo, abstract, cvLink, cvLinkAddress, daddy}) {
         let element = this.element;
+        // Клонирование содержимого шаблона, для создания настоящей карточки
         let template = document.getElementById("member_template").content.cloneNode(true);
 
         element.classList.add("member");
@@ -23,18 +24,21 @@ class Member{
         this.cvLink = cvLink;
         this.cvLinkAddress = cvLinkAddress;
 
+        // Заполнение структуры карточки данными из параметров
         template.querySelector(".member_faculty").innerHTML = faculty;
         template.querySelector(".member_name").innerHTML = name;
         template.querySelector(".member_age").innerHTML = age;
         template.querySelector(".member_photo").setAttribute("src", photo);
         template.querySelector(".member_desc").innerHTML = abstract;
 
+        // Заполнение элемента под ссылку в карточке ссылкой так, чтобы она была интерактивной.
         let elementLink = template.querySelector(".member_cv");
         elementLink.innerHTML = cvLink;
         elementLink.setAttribute("href", cvLinkAddress)
         elementLink.setAttribute("target", "_blank");
 
-        // Заполнение карточки с использованием шаблона
+        // Добавление карточки сформированной с использованием шаблона
+        // в родительский элемент
         element.appendChild(template);
         daddy.appendChild(element);
     }

js/members/membersController.js

@@ -1,7 +1,6 @@
 // Тут данные для заполнения (Model part)
 
 let memberBlock = document.getElementById("memberBlock");
-console.log(memberBlock);
 
 let membersList = [];
 

js/members/membersScroll.js

@@ -1,15 +1,10 @@
+// Слайдер для участников
 $('.memberBlock').slick({
     dots: false,
     adaptiveHeight: true,
 });
 
-$(".intro").slick({
-    slidesToShow: 8 ,
-    slidesToScroll: 1,
-    autoplay: true,
-    autoplaySpeed: 2000
-});
-
+// Слайдер для мероприятий
 $("#events > .smaller > .slider").slick({
     slidesToShow: 1,
     slidesToScroll: 1,