add task solution

src/scripts/main.js

@@ -1 +1,3 @@
-'use strict';
+import slider from './slider';
+
+slider();

src/scripts/slider.js

@@ -0,0 +1,68 @@
+export default function slider() {
+  const collectionSlides = document.querySelectorAll('.slider__slide');
+  const slides = Array.from(collectionSlides);
+  const dotContainer = document.querySelector('.slider__dots');
+  let currentSlide = 0;
+  const cloneFirsSlide = collectionSlides[0].cloneNode(true);
+
+  slides.push(cloneFirsSlide);
+  dotContainer.insertAdjacentElement('beforebegin', cloneFirsSlide);
+
+  const createDots = () => {
+    slides.forEach((_, i) => {
+      if (i <= 3) {
+        dotContainer.insertAdjacentHTML(
+          'beforeend',
+          `<button class='slider__button' data-slide='${i}'></button>`,
+        );
+      }
+    });
+  };
+
+  const activateDot = (numberSlide) => {
+    const collectonDots = document.querySelectorAll('.slider__button');
+
+    collectonDots.forEach((dot) => {
+      dot.classList.remove('slider__button--active');
+    });
+
+    document
+      .querySelector(`.slider__button[data-slide='${numberSlide}']`)
+      .classList.add('slider__button--active');
+  };
+
+  const goToSlide = (numberSlide) => {
+    slides.forEach((s, i) => {
+      s.style.transform = `translate(${100 * (i - numberSlide)}%)`;
+    });
+  };
+
+  slides.forEach((s, i) => {
+    s.style.transform = `translate(${100 * i}%)`;
+  });
+
+  dotContainer.addEventListener('click', (e) => {
+    const { slide } = e.target.dataset;
+
+    if (!slide) {
+      return;
+    }
+
+    activateDot(slide);
+    goToSlide(slide);
+  });
+
+  setInterval(() => {
+    goToSlide(currentSlide);
+    activateDot(currentSlide);
+    currentSlide = (currentSlide + 1) % 4;
+  }, 1500);
+
+  const init = () => {
+    createDots();
+    activateDot(0);
+    goToSlide(0);
+  };
+
+  init();
+}

src/styles/aside/aside.scss

@@ -0,0 +1,138 @@
+.menu {
+  &__content {
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding-inline: 20px;
+    padding-block: 27px;
+    background-color: $dark-green;
+
+    @include on-tablet {
+      padding: 39px;
+      flex-direction: row;
+      gap: 39px;
+    }
+
+    @include on-desktop {
+      padding-left: 55px;
+      margin-inline: auto;
+      justify-content: space-between;
+    }
+
+    &--footer {
+      padding: 0;
+      background-color: $c-gray;
+    }
+  }
+
+  &__top {
+    display: flex;
+    gap: 28px;
+
+    @include on-tablet {
+      gap: 39px;
+    }
+
+    @include on-desktop {
+      gap: 102px;
+    }
+  }
+
+  &__close {
+    text-decoration: none;
+    display: block;
+    background-image: url(../images/icon/icon-close.svg);
+    width: 24px;
+    height: 24px;
+    background-repeat: no-repeat;
+
+    @include hover(transform, scale(1.2));
+  }
+
+  &__hr {
+    height: 1px;
+    background-color: rgba(255, 255, 255, 0.5);
+
+    @include on-tablet {
+      width: 1px;
+      height: auto;
+    }
+  }
+
+  &__bottom {
+    @include on-tablet {
+      display: flex;
+      gap: 39px;
+      justify-content: space-between;
+    }
+
+    &--footer {
+      display: flex;
+      flex-direction: column;
+      gap: 25px;
+    }
+  }
+
+  &__schedule {
+    flex-grow: 1;
+  }
+
+  &__schedule-title {
+    margin: 0;
+    margin-bottom: 20px;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 141%;
+    letter-spacing: 0;
+    color: $white-color;
+
+    &--footer {
+      color: $dark-title;
+    }
+  }
+
+  &__hours {
+    margin: 0;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 150%;
+    letter-spacing: 0;
+    color: $white-color;
+
+    &--footer {
+      color: $dark-title;
+    }
+  }
+
+  &__day {
+    font-weight: 400;
+  }
+
+  &__day-on-tablet {
+    display: none;
+
+    @include on-tablet {
+      display: inline;
+    }
+  }
+
+  &__info {
+    margin-top: 16px;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 150%;
+    letter-spacing: 0;
+    color: $white-color;
+    align-self: flex-end;
+
+    &--footer {
+      color: $dark-title;
+      align-self: flex-start;
+      margin-top: 0;
+    }
+  }
+}

src/styles/footer/contacts.scss

@@ -0,0 +1,28 @@
+.contacts {
+  &__title {
+    margin: 0;
+    margin-bottom: 20px;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 141%;
+    letter-spacing: 0;
+  }
+
+  &__address {
+    all: unset;
+  }
+
+  &__link {
+    text-decoration: none;
+    display: block;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 150%;
+    letter-spacing: 0;
+    color: $dark-title;
+
+    @include hover(font-weight, 600);
+  }
+}