EasyCode-JavaScriptReact-v1 · GeorgeTsendra · Jul 31, 2018
diff --git a/homework-17/img/1.jpg b/homework-17/img/1.jpg
diff --git a/homework-17/img/2.jpg b/homework-17/img/2.jpg
diff --git a/homework-17/img/3.jpg b/homework-17/img/3.jpg
diff --git a/homework-17/img/4.jpg b/homework-17/img/4.jpg
diff --git a/homework-17/img/5.jpg b/homework-17/img/5.jpg
diff --git a/homework-17/img/6.jpg b/homework-17/img/6.jpg
diff --git a/homework-17/img/7.jpg b/homework-17/img/7.jpg
diff --git a/homework-17/img/8.jpg b/homework-17/img/8.jpg
diff --git a/homework-17/index.html b/homework-17/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" href="style.css">
+    <style media="screen">
+
+    </style>
+  </head>
+  <body>
+    <div class="slider">
+      <div class="photos">
+        <img src="img/1.jpg" alt="" class="active">
+        <img src="img/2.jpg" alt="">
+        <img src="img/3.jpg" alt="">
+        <img src="img/4.jpg" alt="">
+        <img src="img/5.jpg" alt="">
+        <img src="img/6.jpg" alt="">
+        <img src="img/7.jpg" alt="">
+        <img src="img/8.jpg" alt="">
+
+      </div>
+      <div class="buttons">
+        <input type="button" name="" value="first" class="first">
+        <input type="button" name="" value="previus" class="prev">
+        <input type="button" name="" value="next" class="next">
+      </div>
+      <div class="photosList">
+        <input type="button" name="" value="1" id="el1">
+        <input type="button" name="" value="2" id="el2">
+        <input type="button" name="" value="3" id="el3">
+        <input type="button" name="" value="4" id="el4">
+        <input type="button" name="" value="5" id="el5">
+        <input type="button" name="" value="6" id="el6">
+        <input type="button" name="" value="7" id="el7">
+        <input type="button" name="" value="8" id="el8">
+
+      </div>
+
+    </div>
+
+    <script type="text/javascript" src="js.js">
+
+    </script>
+  </body>
+</html>
diff --git a/homework-17/js.js b/homework-17/js.js
@@ -0,0 +1,260 @@
+/*
+ TASK 0
+ Отобразите всех лидеров массива.
+ *
+ *
+ * Элемент лидер если он больше чем все последующие элементы
+ * после него ( элементы справа ).
+ * Последний элемент всегда лидер. Например в массиве [16,17,4,3,5,2]
+ * лидеры 17, 5 и 2.
+ *
+ * */
+
+
+  let result = [];
+const solution = arr => {
+  let arrStatic = [];
+  let indexToSplice = 0
+  //клонирую массив
+  arr.forEach((value) => {
+    arrStatic.push(value)})
+  // сортирую оригинал
+  let arrSorted = arr.sort((a, b) => {
+    return a > b;})
+  // из сортированного выбераю самый большой елемент
+  let biggesrElem = arrSorted[arrSorted.length - 1]
+  // из сортированного выбераю самый маленький елемент
+  let minElem = arrStatic[arrStatic.length - 1]
+  // добавляю в массив "лидера"
+  result.push(biggesrElem)
+  // ищу индекс самого большого
+  arrStatic.forEach((elem, index, arr) => {
+    if (biggesrElem == elem) {
+      indexToSplice = index;}
+  }, 0)
+  // режу массив до самого большего елемента
+  arrToSplice = arrStatic.splice(indexToSplice + 1, arrStatic.length);
+  if (arrToSplice.length > 1) {
+    //добавляю массив в рекурсивную функцию
+    return solution(arrToSplice)
+  } else {
+    result.push(minElem)
+    return result
+  }
+}
+// console.log(solution([16, 17, 4, 3, 5, 2])); // === [17, 5, 2]
+// console.log(solution([4, 3, 7, 12, 6, 67, 5, 45, 34, 35, 2, 8])); // [67, 45, 35, 8]
+// console.log(solution([12, 10, 12, 8, 7, 6])); // [12, 8, 7, 6]
+// console.log(solution([1, 2, 3, 4, 5, 4])); // [5, 4]
+// console.log(solution([12, 12, 12]));
+
+
+
+/* TASK 1
+ * Сделайте карусель.
+ * При клике по кнопке "<=" показывается предыдущее изображение по "=>" следующее.
+ *
+ * 1.1
+ * Сделайте слайдер - бесконечным, после третьего изображения снова первое.
+ * 1.2
+ * Добавьте внизу цифры с текущим активным изображением.
+ *
+ @SUPER -> @front-end
+ * Уберите в стилях li - position:absolute.
+ * изменяйте свойство transform:translate 3d у .carousel, добавьте transition
+ * и сделайте чтобы картинки передвигались влево и вправо
+ *
+ * @PUPER -> переход к первой картинкu
+ *
+ * */
+
+// class Carousel {
+//   constructor(options) {
+//     this.prevBut =options.prevBut
+//     this.nextBut =options.nextBut
+//     this.img =options.img
+//
+//     this.i = options.i;
+//   };
+//   prevSlide() {
+//     this.img[this.i].className = " ";
+//     this.i--;
+//     if (this.i <= 0) {
+//       this.i = this.img.length - 1;
+//     }
+//     this.img[this.i].className = "active";
+//   }
+//   nextSlide() {
+//     this.img[this.i].className = " ";
+//     this.i++;
+//     if (this.i >= 0) {
+//       this.i = this.img.length - 1;
+//     }
+//     this.img[this.i].className = "active";
+//   }
+// }
+/*создайте новый instance Carouse при вызове initialize*/
+// var myInitializedCarousel = Carousel.initialize({
+//   elementToApply: '.carousel',
+//   infinity: true,
+// });
+
+// let mySlider = new Carousel({prevBut:document.querySelector(".slider .buttons .prev"),
+//                             nextBut:document.querySelector(".slider .buttons .next"),
+//                             img:document.querySelectorAll(".slider .photos img"),
+//                             i: 0})
+
+
+var prevBut = document.querySelector(".slider .buttons .prev");
+var nextBut = document.querySelector(".slider .buttons .next");
+var firstBut = document.querySelector(".slider .buttons .first");
+var firImg = document.querySelector(".slider .photosList #el1");
+var secImg = document.querySelector(".slider .photosList #el2");
+var therImg = document.querySelector(".slider .photosList #el3");
+var fourImg = document.querySelector(".slider .photosList #el4");
+var fifImg = document.querySelector(".slider .photosList #el5");
+var sixImg = document.querySelector(".slider .photosList #el6");
+var sevImg = document.querySelector(".slider .photosList #el7");
+var eigImg = document.querySelector(".slider .photosList #el8");
+var img = document.querySelectorAll(".slider .photos img");
+var i = 0;
+
+
+
+prevBut.onclick = function() {
+  img[i].className = " ";
+  i--;
+  if (i < 0) {
+    i = img.length - 1;
+  }
+  img[i].className = "active";
+}
+nextBut.onclick = function() {
+  img[i].className = " ";
+  i++;
+  if (i > img.length - 1) {
+    i = 0;
+  }
+  img[i].className = "active";
+}
+firstBut.onclick = function() {
+  for (var i = 0; i < img.length; i++) {
+    if (i == 0) {
+      img[i].className = "active";
+    } else {
+      img[i].className = " ";
+    }
+  }
+}
+firImg.onclick = function() {
+  for (var i = 0; i < img.length; i++) {
+    if (i == 0) {
+      img[i].className = "active";
+    } else {
+      img[i].className = " ";
+    }
+  }
+}
+secImg.onclick = function() {
+  for (var i = 0; i < img.length; i++) {
+    if (i == 1) {
+      img[i].className = "active";
+    } else {
+      img[i].className = " ";
+    }
+  }
+}
+therImg.onclick = function() {
+  for (var i = 0; i < img.length; i++) {
+    if (i == 2) {
+      img[i].className = "active";
+    } else {
+      img[i].className = " ";
+    }
+  }
+}
+fourImg.onclick = function() {
+  for (var i = 0; i < img.length; i++) {
+    if (i == 3) {
+      img[i].className = "active";
+    } else {
+      img[i].className = " ";
+    }
+  }
+}
+fifImg.onclick = function() {
+  for (var i = 0; i < img.length; i++) {
+    if (i == 4) {
+      img[i].className = "active";
+    } else {
+      img[i].className = " ";
+    }
+  }
+}
+sixImg.onclick = function() {
+  for (var i = 0; i < img.length; i++) {
+    if (i == 5) {
+      img[i].className = "active";
+    } else {
+      img[i].className = " ";
+    }
+  }
+}
+sevImg.onclick = function() {
+  for (var i = 0; i < img.length; i++) {
+    if (i == 6) {
+      img[i].className = "active";
+    } else {
+      img[i].className = " ";
+    }
+  }
+}
+eigImg.onclick = function() {
+  for (var i = 0; i < img.length; i++) {
+    if (i == 7) {
+      img[i].className = "active";
+    } else {
+      img[i].className = " ";
+    }
+  }
+}
+
+/*
+* TASK 2
+* Сделайте класс, который будет иметь метод topStyle
+* метод topStyle принимает объект с CSS стилями и добавляет в <head>
+*   новый элемент с данными стилями
+*
+*
+* */
+
+class styleInitiate {
+
+  topStyle(newClass, newStyle){
+    document.body.head.style.innerHTML += `.${newClass}{${newStyle};}`
+  }
+}
+
+let elem = new styleInitiate()
+
+elem.topStyle('fetch', { "background-color":'blue'})
+/*
+*
+* <style>.fetch {
+* background-color
+* */
+
+/* @SUPER
+ *
+ * Напишите функцию которая будет преобразовывать CSS-свойство в
+ * ликвидное JS свойство
+ *
+ * background-color -> backgroundColor
+ * margin-left -> marginLeft
+ * flex-basis -> flexBasis
+ *
+ * ...etc
+ *
+ * сделать через regExp
+ *
+ * */
diff --git a/homework-17/style.css b/homework-17/style.css
@@ -0,0 +1,29 @@
+*{
+  margin: 0;
+  padding: 0;
+}
+
+.slider{
+  text-align: center;
+  width: 900px;
+  margin: 0 auto;
+}
+
+.slider .photos{
+  position: relative;
+  width: 100%;
+  height: 530px;
+}
+.slider .photos img{
+  position: absolute;
+  opacity: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.slider .photos img.active{
+  opacity: 1;
+  transition: all 1s ease;
+
+}