Added task Учебный проект (пролог): Карусель

5-module/3-task/README.md

@@ -0,0 +1,53 @@
+# Учебный проект (пролог): Карусель
+
+![Компонент Карусель](carousel.png)
+
+"Карусель" - компонент интерфейса, который состоит из перемещающихся по клику на стрелки слайдов.
+
+Вы можете посмотреть её вёрстку (пока не "живую" карусель) в файле `index.html`.
+
+Рабочую карусель можно увидеть вверху страницы проекта.
+
+Такую карусель предстоит написать вам. Вся вёрстка и весь CSS уже готовы, их изменять не нужно. 
+
+```js
+function initCarousel() {
+  // ваш код...
+}
+
+initCarousel(); // после того, как эта функция выполнится, в карусели должны начать переключаться слайды
+```
+
+Слайды должны перемещаться влево/вправо при клике по кнопкам вперёд/назад.
+
+Их CSS классы:
+- `.carousel__arrow_right` - класс кнопки переключения на слайд вперёд;
+- `.carousel__arrow_left` - класс кнопки переключения на слайд назад;
+
+Все слайды равны по ширине. В этом задании их для простоты ровно 4, и на это количество можно опираться в коде.
+
+### Как (технически) переключается карусель?
+
+Структура карусели такова, что есть внешний элемент, в котором находится "лента" из подряд идущих слайдов. Внешний элемент имеет фиксированную ширину, поэтому видна только часть ленты (один слайд).
+
+CSS класс элемента-ленты, в котором находятся все слайды - `.carousel__inner`. Для переключения слайда мы будем сдвигать его на ширину одного слайда.
+
+Допустим, что ширина одного слайда `300px`. Она может быть любой, точную ширину элемента, независимо от вёрстки, можно получить при помощи его свойства `offsetWidth`. Там хранится только число, без `px`. [Подробнее про offsetWidth](https://learn.javascript.ru/size-and-scroll#offsetwidth-height).
+
+Чтобы переключить на второй слайд, нужно переместить элемент с классом `.carousel__inner` на `300px` влево. Это можно сделать, изменив его свойство transform следующим образом: `elem.style.transform = 'translateX(-300px)'`. 
+
+Мы используем отрицательное значение пикселей, т.к. нам нужно сдвинуть весь элемент влево, если бы значение было положительное, он переместился бы наоборот вправо. [Подробнее про свойство style](https://learn.javascript.ru/styles-and-classes#element-style).
+
+ Чтобы переключить ещё на один слайд вперёд, нужно наш элемент сдвинуть ещё на `300px`, вот так: `elem.style.transform = 'translateX(-600px)` и т.д. 
+
+### Скрываем кнопки переключения при достижении крайних слайдов
+
+Когда пользователь дошёл до 4-ого слайда, нужно скрыть кнопку переключения вперёд, и наоборот, когда пользователь видит первый слайд, нужно скрыть кнопку переключения назад. 
+
+Скрывать и показывать кнопки нужно с помощью CSS свойства `display`, вот так: 
+- `carouselArrow.style.display = 'none'` - скрыть кнопку,
+- `carouselArrow.style.display = ''` - показать кнопку,
+
+(Предполагается, что в переменной `carouselArrow` содержится ссылка на кнопку переключения слайдов).
+
+

5-module/3-task/index.css

@@ -0,0 +1,152 @@
+.carousel {
+  height: var(--carousel-height);
+  position: relative;
+  overflow: hidden;
+}
+
+.carousel__caption {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  bottom: 0;
+  height: 70px;
+  background-color: var(--color-black-dark);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.carousel__price {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  display: inline-block;
+  padding: 8px;
+  min-width: 72px;
+  text-align: center;
+  background-color: var(--color-pink);
+  color: var(--color-body);
+  font-family: var(--font-primary), sans-serif;
+  font-weight: 700;
+  font-size: 17px;
+  line-height: 1.2;
+}
+
+.carousel__title {
+  text-align: center;
+  font-weight: 500;
+  font-size: 21px;
+  font-style: italic;
+  line-height: 1.2;
+  width: 100%;
+  padding: 0 20px;
+}
+
+.carousel__button {
+  background-color: var(--color-yellow);
+  width: 72px;
+  flex: 1 0 72px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: 0.2s all;
+}
+
+.carousel__button:hover,
+.carousel__button:active {
+  background-color: var(--color-yellow-dark);
+}
+
+.carousel__inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: all 1s ease;
+}
+
+.carousel__slide {
+  width: 100%;
+  min-width: 100%;
+  height: 100%;
+  position: relative;
+  margin: 0;
+}
+
+.carousel__arrow {
+  position: absolute;
+  z-index: 3;
+  bottom: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  height: 70px;
+}
+
+.carousel__arrow_right {
+  right: 0;
+}
+
+.carousel__arrow_left {
+  left: 0;
+}
+
+.carousel__arrow img,
+.carousel__arrow svg {
+  max-width: 20px;
+}
+
+.carousel__img {
+  min-width: 100%;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@media all and (max-width: 767px) {
+  .carousel {
+    padding-bottom: 57px;
+  }
+
+  .carousel__caption {
+    left: 0;
+    height: 57px;
+  }
+
+  .carousel__arrow {
+    bottom: 57px;
+  }
+
+  .carousel__arrow_right img,
+  .carousel__arrow_right svg {
+    margin-top: 0;
+  }
+
+  .carousel__arrow_left img,
+  .carousel__arrow_left svg {
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 992px) {
+  .carousel__img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: none;
+  }
+}

5-module/3-task/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<title>Бангкок Экспресс: Карусель</title>
+
+<link rel="stylesheet" href="/assets/styles/common.css" />
+<link rel="stylesheet" href="./index.css" />
+</head>
+
+<body>
+  <main>
+    <div class="container" data-carousel-holder>
+      <div class="carousel">
+        <div class="carousel__arrow carousel__arrow_right">
+          <img src="/assets/images/icons/angle-icon.svg" alt="icon">
+        </div>
+        <div class="carousel__arrow carousel__arrow_left">
+          <img src="/assets/images/icons/angle-left-icon.svg" alt="icon">
+        </div>
+
+        <div class="carousel__inner">
+          <div class="carousel__slide" data-id="penang-shrimp">
+            <img src="/assets/images/carousel/penang_shrimp.png" class="carousel__img" alt="slide">
+            <div class="carousel__caption">
+              <span class="carousel__price">€16.00</span>
+              <div class="carousel__title">Penang shrimp</div>
+              <button type="button" class="carousel__button">
+                <img src="/assets/images/icons/plus-icon.svg" alt="icon">
+              </button>
+            </div>
+          </div>
+
+          <div class="carousel__slide" data-id="chicken-cashew">
+            <img src="/assets/images/carousel/chicken_cashew.png" class="carousel__img" alt="slide">
+            <div class="carousel__caption">
+              <span class="carousel__price">€14.00</span>
+              <div class="carousel__title">Chicken cashew</div>
+              <button type="button" class="carousel__button">
+                <img src="/assets/images/icons/plus-icon.svg" alt="icon">
+              </button>
+            </div>
+          </div>
+
+          <div class="carousel__slide" data-id="red-curry-veggies">
+            <img src="/assets/images/carousel/red_curry_vega.png" class="carousel__img" alt="slide">
+            <div class="carousel__caption">
+              <span class="carousel__price">€12.50</span>
+              <div class="carousel__title">Red curry veggies</div>
+              <button type="button" class="carousel__button">
+                <img src="/assets/images/icons/plus-icon.svg" alt="icon">
+              </button>
+            </div>
+          </div>
+
+          <div class="carousel__slide" data-id="chicken-springrolls">
+            <img src="/assets/images/carousel/chicken_loempias.png" class="carousel__img" alt="slide">
+            <div class="carousel__caption">
+              <span class="carousel__price">€6.50</span>
+              <div class="carousel__title">Chicken springrolls</div>
+              <button type="button" class="carousel__button">
+                <img src="/assets/images/icons/plus-icon.svg" alt="icon">
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <script src="./index.js">
+  </script>
+  <script>
+    if (initCarousel) {
+      initCarousel();
+    }
+  </script>
+</body>
+
+</html>

5-module/3-task/index.js

@@ -0,0 +1,3 @@
+function initCarousel() {
+  // ваш код...
+}