<repo_name>Selezeznyaka/Ajax-test<file_sep>/js/index.js
// =include ./video-play.js
// =include ./feedback-scroll.js
// =include ./nav-menu.js
// =include ./services.js
// =include ./team-cards.js
<file_sep>/js/script.js
$(function(){
    var output = $('#output'); // блок вывода информации
    $('#btn').on('click', function(){
      $.ajax({
        url: 'handler.php', // путь к php-обработчику
        type: 'POST', // метод передачи данных
        dataType: 'json', // тип ожидаемых данных в ответе
        data: {key: 1}, // данные, которые передаем на сервер
        beforeSend: function(){ // Функция вызывается перед отправкой запроса
          output.text('Запрос отправлен. Ждите ответа.');
        },
        error: function(req, text, error){ // отслеживание ошибок во время выполнения ajax-запроса
          output.text('Хьюстон, У нас проблемы! ' + text + ' | ' + error);
        },
        complete: function(){ // функция вызывается по окончании запроса
          output.append('<p>Запрос полностью завершен!</p>');
        },
        success: function(json){ // функция, которая будет вызвана в случае удачного завершения запроса к серверу
          // json - переменная, содержащая данные ответа от сервера. Обзывайте её как угодно ;)
          output.html(json); // выводим на страницу данные, полученные с сервера
        }
      });
    });
  });<file_sep>/js/services.js
const arrowElem = document.getElementsByClassName('services-about__drop-down-arrow');
const toogleItem = document.getElementsByClassName('services-about__item');
document.addEventListener('click', (event) => {
    let target = event.target;
    for (let i = 0; i < arrowElem.length; i++) {
        if (arrowElem[i] === target) {
            [].forEach.call(toogleItem, (elem) => {
                elem.classList.remove('services-about__item--active');
            });
            toogleItem[i].classList.toggle('services-about__item--active');
        }
    }
});

<file_sep>/js/video-play.js
const video = document.getElementById('video-file');
const playBtn = document.getElementById('play-button');
const playBtnSign = document.getElementById('play-button-sign');

function playVideo() {
    video.play().then(() => {
        !video.controls ? video.controls = true : console.log('norm');
    }).then(() => {
        if (video.controls) {
            playBtn.style.display = 'none';
            playBtnSign.style.display = 'none';
        }
    });
}

document.addEventListener('click', (event) => {
    let target = event.target;
    console.log();
    if (target === video || target === playBtn) {
        playVideo();
    }
});

<file_sep>/js/team-cards.js
const photos = document.getElementsByClassName('team-cards__photo');
const description = document.getElementsByClassName('description--team-cards');
const teamCards = document.getElementsByClassName('team-cards')[0];
console.log(getComputedStyle(teamCards));


document.addEventListener('click', setUnsetActiveClass);

function setUnsetActiveClass(event) {
    let target = event.target;
    for (let i = 0; i < photos.length; i++) {
        if (photos[i] === target) {
            [].forEach.call(photos, (elem) => {
                elem.classList.remove('team-cards__photo--active');
            });
            [].forEach.call(description, (elem) => {
                elem.classList.remove('description--team-cards--active');
            });
            photos[i].classList.add('team-cards__photo--active');
            description[i].classList.add('description--team-cards--active');
        }
    }
}
