EasyCode-JavaScriptReact-v1 · olgakuzminagithub · Jul 26, 2018 · Jul 26, 2018 · Jul 30, 2018 · Jul 30, 2018
diff --git a/js-core/homeworks/homework-17/index.html b/js-core/homeworks/homework-17/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Homework-17</title>
+    <style>
+        .container {
+            width: 90%;
+            max-width: 1170px;
+            margin: auto;
+        }
+        .carousel {
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            align-items: center;
+
+        }
+        .arrow {
+            width: 20px;
+            padding: 5px;
+            border: 1px solid #000;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .carousel .carousel-images {
+            width: 1000px;
+            height: 600px;
+            overflow: hidden;
+        }
+        .carousel .carousel-images ul {
+            width: 9999px;
+            padding-left: 0;
+            position: relative;
+        }
+        .carousel .carousel-images ul li {
+            position: absolute;
+            list-style-type: none;
+        }
+        .carousel .carousel-images ul li img {
+            width: 1170px;
+            height: auto;
+            display: block;
+        }
+        .carousel .navigation {
+            margin: auto;
+        }
+        .carousel .navigation li {
+            list-style-type: none;
+            display: inline;
+            padding: 0 5px;
+            color: #000;
+        }
+        .carousel .navigation li.active {
+            color: blue;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="carousel" id="carousel">
+        <div class="arrow prev"><=</div>
+        <div class="carousel-images">
+            <ul>
+                <li>
+                    <img src="https://cs10.pikabu.ru/post_img/2018/06/21/10/1529597665124189599.jpg">
+                </li>
+                <li>
+                    <img src="https://cs7.pikabu.ru/post_img/2018/06/21/10/1529597652134517558.jpg">
+                </li>
+                <li>
+                    <img src="https://cs7.pikabu.ru/post_img/2018/06/21/10/152959764518437593.jpg">
+                </li>
+                <li>
+                    <img src="https://cs7.pikabu.ru/post_img/2018/06/21/10/1529597617155826805.jpg">
+                </li>
+                <li>
+                    <img src="https://cs10.pikabu.ru/post_img/2018/06/21/10/152959760815609960.jpg">
+                </li>
+            </ul>
+        </div>
+        <div class="arrow next">=></div>
+    </div>
+
+</div>
+
+
+<script src="src/main.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/homework-17/index2.html b/js-core/homeworks/homework-17/index2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>HomeWork 17 Part 2</title>
+</head>
+<body>
+<div class="fetch"></div>
+<script src="src/top-style.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/homework-17/src/main.js b/js-core/homeworks/homework-17/src/main.js
@@ -0,0 +1,194 @@
+/*
+ TASK 0
+ Отобразите всех лидеров массива.
+ *
+ *
+ * Элемент лидер если он больше чем все последующие элементы
+ * после него ( элементы справа ).
+ * Последний элемент всегда лидер. Например в массиве [16,17,4,3,5,2]
+ * лидеры 17, 5 и 2.
+ *
+ * */
+
+const solution = arr => {
+    let newArr =[];
+    for ( let i = 0; i <arr.length; i++) {
+        let count = 0;
+        for (let j = i + 1; j < arr.length; j ++) {
+            if (arr[i] > arr[j]) {
+               count ++;
+            }
+        }
+        if (count === arr.length - i - 1) {
+            newArr.push(arr[i]);
+        }
+    }
+    return newArr;
+};
+
+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])); // [5, 4]
+
+
+/* TASK 1
+ * Сделайте карусель.
+ * При клике по кнопке "<=" показывается первое изображение по "=>" следующее.
+ */
+
+class Carousel {
+    constructor (element) {
+        this.elementToApply = element.elementToApply,
+        this.widthImg = element.widthImg,
+        this.transition = element.transition,
+        this.infinity = element.infinity,
+        this.nav = element.nav,
+        this.timer = element.timer,
+        this.list = carousel.querySelectorAll('li');
+    }
+    static initialize(properties) {
+        let myInitializedCarousel =  new Carousel(properties);
+        myInitializedCarousel.start();
+    }
+    infinityCarousel () {
+        let last = this.list.length - 1;
+        if (!this.list[last].classList.contains('active')) {
+            for (let i = 0; i < this.list.length; i ++) {
+                let nextPosition = parseInt(this.list[i].style.left) - this.widthImg * this.count;
+                this.list[i].style.left = nextPosition + 'px';
+                let position = parseInt(this.list[i].style.left);
+                if (position === 0) {
+                    this.list[i].classList.add('active')
+                } else {
+                    this.list[i].classList.remove('active')
+                }
+            }
+        } else if (this.list[last].classList.contains('active') && this.infinity === true) {
+            this.startCarousel();
+        }
+    }
+    startCarousel () {
+        /*Объявляем перменные */
+        let carousel =  document.querySelector(this.elementToApply);
+        let prev = carousel.querySelector('.prev');
+        let next = carousel.querySelector('.next');
+        let list = carousel.querySelectorAll('li');
+
+        let widthImg = this.widthImg;
+        let count = this.transition;
+        let infinity = this.infinity;
+        let nav = this.nav;
+
+        /* Нумеруем картинки*/
+
+        const div = document.createElement('div');
+        div.setAttribute('class', 'navigation');
+        const ul = document.createElement('ul');
+        for (let i = 0; i < this.list.length; i++) {
+            const li = document.createElement('li');
+            li.setAttribute('class', 'nav');
+            li.innerHTML = i + 1;
+            ul.appendChild(li);
+        }
+        div.appendChild(ul);
+        let navs = [];
+
+        if (nav === true) {
+            carousel.appendChild(div);
+            navs = carousel.querySelectorAll('.nav');
+        }
+
+        /* Один круг карусели */
+        /* Не получилось разделить метод на несколько, потому что при событии onclick
+        не получаеться обращаться к глобальной переменной this.list и надо переопредлять переменную list в саом методе */
+
+        const newRoundCarusel = () => {
+            for (let i = 0; i < list.length; i ++) {
+                list[0].classList.add('active');
+                list[list.length-1].classList.remove('active');
+                list[i].style.top = 0;
+                list[i].style.left = widthImg * count * i + 'px';
+                if (nav  === true) {
+                    navs[0].classList.add('active');
+                    navs[list.length-1].classList.remove('active');
+                }
+            }
+            prev.onclick = function () {
+                if (!list[0].classList.contains('active')) {
+                    for (let i = 0; i < list.length; i ++) {
+                        let nextPosition = parseInt(list[i].style.left) + widthImg * count;
+                        list[i].style.left = nextPosition + 'px';
+                        let position = parseInt(list[i].style.left);
+                        if (position === 0) {
+                            list[i].classList.add('active');
+                            if (nav  === true) {
+                                navs[i].classList.add('active');
+                            }
+
+                        } else {
+                            list[i].classList.remove('active');
+                            if (nav  === true) {
+                                navs[i].classList.remove('active');
+                            }
+                        }
+                    }
+                }
+            };
+            next.onclick = function () {
+                let last = list.length - 1;
+                if (!list[last].classList.contains('active')) {
+                    for (let i = 0; i < list.length; i ++) {
+                        let nextPosition = parseInt(list[i].style.left) - widthImg * count;
+                        list[i].style.left = nextPosition + 'px';
+                        let position = parseInt(list[i].style.left);
+                        if (position === 0) {
+                            list[i].classList.add('active');
+                            if (nav  === true) {
+                                navs[i].classList.add('active');
+                            }
+                        } else {
+                            list[i].classList.remove('active');
+                            if (nav  === true) {
+                                navs[i].classList.remove('active');
+                            }
+                        }
+                    }
+                } else if (list[last].classList.contains('active') && infinity === true) {
+                    newRoundCarusel();
+
+                }
+            };
+        };
+        newRoundCarusel();
+
+    }
+    start () {
+        this.startCarousel();
+
+        /*Запускаем таймер, если он есть*/
+
+        if (this.timer !== 0) {
+            setInterval(() => {
+                this.infinityCarousel()
+            }, this.timer);
+        }
+
+    }
+}
+
+Carousel.initialize({
+    elementToApply: '.carousel',
+    widthImg: 1170,
+    transition: 1,
+    infinity: true,
+    nav: true,
+    timer: 0
+});
+
+
+
+
+
+
diff --git a/js-core/homeworks/homework-17/src/top-style.js b/js-core/homeworks/homework-17/src/top-style.js
@@ -0,0 +1,38 @@
+
+/*
+* TASK 2
+* Сделайте класс, который будет иметь метод topStyle
+* метод topStyle принимает объект с CSS стилями и добавляет в <head>
+*   новый элемент с данными стилями
+*
+*
+* */
+// .topStyle('fetch', {backgroundColor:'blue'})
+/*
+*
+* <style>.fetch {
+* background-color
+* */
+
+/* Не получилось */
+
+class Style {
+    standartViewStyle (property) {
+        return property.replace(/([a-z])([A-Z])/, '$1-$2').toLowerCase();
+    }
+    topStyle (className, yourStyle) {
+        const style = document.createElement('style');
+        let properties = '';
+        for (let key in yourStyle) {
+            properties += `${this.standartViewStyle(key)}: ${yourStyle[key]};
+            `;
+        }
+        style.innerHTML = `.${className} {
+            ${properties}
+        }`;
+        document.head.appendChild(style);
+
+    }
+}
+const newStyle  = new Style();
+newStyle.topStyle('fetch', {backgroundColor:'blue', width: '100px', height: '100px', marginLeft: '100px', marginTop: '100px'});