Разработка веб сайта для заказы междугородного такси и попутчиков

ПРИЛОЖЕНИЯ


Технологии: JavaScript, Node.js, React, SASS, HTML

const filter = document.querySelector(".filter");

const mainFilterWrap = document.querySelector(".main__filter-wrap"); const mainFilterInner = document.querySelector(".main__filter-inner"); const filterToogle = document.querySelector(".filter__toogle");

const filterButtonsLetter = document.querySelectorAll(".filter__button-letter");

const filterCountries = document.querySelectorAll(".filter__countries");

• 
  Открытие и закрытие фильтра
  

if (filter && filterToogle) { filterToogle.addEventListener("click", function () {

filter.classList.toggle("filter--open"); mainFilterWrap.classList.add("main__filter-wrap--open"); mainFilterInner.classList.add("main__filter-inner--open");

});

}

• 
  Удаляет класс nojs
  

if (filter && mainFilterWrap && mainFilterInner) { filter.classList.remove("filter--nojs"); mainFilterWrap.classList.remove("main__filter-wrap--nojs"); mainFilterInner.classList.remove("main__filter-inner--nojs");

}

• 
  Функция удаления текущих классов
  

58

if (filterButtonsLetter) {

function clearCurrentCountries() {

for (let i = 0; i < filterButtonsLetter.length; i += 1) { filterButtonsLetter[i].classList.remove('filter__button-letter--current'); filterCountries[i].classList.remove('filter__countries--current');

};

};

• 
  Добавляет текущие классы
  

for (let i = 0; i < filterButtonsLetter.length; i += 1) { filterButtonsLetter[i].addEventListener('click', function(evt) {

evt.preventDefault();

clearCurrentCountries();

filterButtonsLetter[i].classList.add('filter__button-letter--current'); filterCountries[i].classList.add('filter__countries--current');

});

};

};

const buttonsFilterContent = document.querySelectorAll(".companion-filter__legend-button");

const filterContents = document.querySelectorAll(".companion-filter__content");

if (buttonsFilterContent && filterContents) {

• 
  Удаляет класс nojs
  

59
for (let i = 0; i < buttonsFilterContent.length; i += 1) { buttonsFilterContent[i].classList.remove("companion-filter__legend-

button--nojs");

filterContents[i].classList.remove("companion-filter__content--nojs");

}

• 
  Открывает и закрывает фильтр
  

for (let i = 0; i < buttonsFilterContent.length; i += 1) { buttonsFilterContent[i].addEventListener('click', function() {

buttonsFilterContent[i].classList.toggle('companion-filter__legend-button--open');

filterContents[i].classList.toggle('companion-filter__content--open'); });

}

}

const header = document.querySelector(".header"); const mainNav = document.querySelector(".main-nav"); const mainPage = document.querySelector(".main");

const headerToggle = document.querySelector(".header__toggle"); const toogleText = headerToggle.querySelector(".visually-hidden");

headerToggle.addEventListener("click", function () { if (header.classList.contains("header--opened")) {

toogleText.textContent = "Закрыть меню"; header.classList.remove("header--opened");

} else {

toogleText.textContent = "Открыть меню";

60
header.classList.add("header--opened");

}

if (header.classList.contains("header--scroll") && header.classList.contains("header--opened")) {

headerToggle.classList.remove("header__toggle--theme-smoke");

}

if (header.classList.contains("header--scroll") && header.classList.contains("header--opened") === false) {

headerToggle.classList.add("header__toggle--theme-smoke");

}

});

header.classList.remove("header--nojs");

mainPage.classList.remove("main--nojs");

window.addEventListener("scroll", function () { header.classList.add("header--scroll"); headerToggle.classList.add("header__toggle--theme-smoke"); mainNav.classList.remove("main-nav--theme-light");

if (pageYOffset > 0 && header.classList.contains("header--opened")) { headerToggle.classList.remove("header__toggle--theme-smoke");

}

if (pageYOffset === 0) {

headerToggle.classList.remove("header__toggle--theme-smoke");

header.classList.remove("header--scroll");

mainNav.classList.add("main-nav--theme-light");

}

61
});

$radius: 30px;

.add-plan {

position: relative;

color: $dark-blue-300;

background-color: $light-blue-500;

border-radius: $radius $radius 0 0;

&::before {

content: "";

position: absolute;

top: 0;

left: 0;

z-index: -1;

width: 100%;

height: $radius;

background-color: $light-blue-400;

}

@media #{$desktop} {

$radius: 60px;

border-radius: $radius $radius 0 0;

}

62
}

.add-plan__inner {

padding: 30px 0 42px;

@media #{$tablet} {

padding: 53px 35px 63px;

}

@media #{$desktop} {

padding: 55px 0 70px;

}

}

.add-plan__title-wrap {

display: flex;

justify-content: space-between;

align-items: center;

margin: 0 0 30px;

@media #{$tablet} {

margin: 0 0 56px;

}

@media #{$desktop} {

margin: 0 0 54px 68px;

}

}

.add-plan__title {

63
margin: 0;

}

.add-plan__marks {

margin: 0 18px 0 0;

@media #{$tablet} {

margin: 0;

}

@media #{$desktop} {

display: none;

}

}

.add-plan__step {

margin: 0 0 10px;

&:last-of-type {

margin: 0;

}

@media #{$tablet} {

margin: 0 0 39px;

&--special-margin {

margin: 0 0 51px;

}

}

64
@media #{$desktop} {

margin: 0 0 45px;

&--special-margin {

margin: 0 0 44px;

}

}


}

65