From 0cdbe4ebcb20ffad3bf0b3b8a0747e1dd44c8744 Mon Sep 17 00:00:00 2001 From: olgakuzminagithub Date: Thu, 26 Jul 2018 13:10:00 +0300 Subject: [PATCH 1/5] add 0 Task + carousel, confused in numbers and called a branch of homemaking 18 --- js-core/homeworks/homework-17/index.html | 91 ++++++++++ js-core/homeworks/homework-17/src/main.js | 193 ++++++++++++++++++++++ 2 files changed, 284 insertions(+) create mode 100644 js-core/homeworks/homework-17/index.html create mode 100644 js-core/homeworks/homework-17/src/main.js diff --git a/js-core/homeworks/homework-17/index.html b/js-core/homeworks/homework-17/index.html new file mode 100644 index 0000000..b5ae9c8 --- /dev/null +++ b/js-core/homeworks/homework-17/index.html @@ -0,0 +1,91 @@ + + + + + Homework-17 + + + +
+ + +
+ + + + + \ No newline at end of file diff --git a/js-core/homeworks/homework-17/src/main.js b/js-core/homeworks/homework-17/src/main.js new file mode 100644 index 0000000..2e364d0 --- /dev/null +++ b/js-core/homeworks/homework-17/src/main.js @@ -0,0 +1,193 @@ +/* + TASK 0 + Отобразите всех лидеров массива. + * + * + * Элемент лидер если он больше чем все последующие элементы + * после него ( элементы справа ). + * Последний элемент всегда лидер. Например в массиве [16,17,4,3,5,2] + * лидеры 17, 5 и 2. + * + * */ + +const solution = arr => { + let newArr =[]; + for ( let i = 0; 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 + } + start () { + /*Объявляем перменные */ + 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 < 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'); + } + + /* Один круг карусели */ + + 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(); + + + /*Запускаем таймер, если он есть*/ + + if (this.timer !== 0) { + setInterval(() => { + 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') + } else { + list[i].classList.remove('active') + } + } + } else if (list[last].classList.contains('active') && infinity === true) { + newRoundCarusel(); + } + }, this.timer); + } + } +} + +/*Не поянла с методм initialize, поэтому просто создала элемент класса*/ + +let carousel = new Carousel({ + elementToApply: '.carousel', + widthImg: 1170, + transition: 1, + infinity: true, + nav: true, + timer: 0 +}); + +carousel.start(); + +// var myInitializedCarousel = Carousel.initialize({ +// elementToApply: '.carousel', +// infinity: true, +// }); + + + + + From b0ee022b39c6c7c658932c8f825cb9d23a46f7f8 Mon Sep 17 00:00:00 2001 From: olgakuzminagithub Date: Thu, 26 Jul 2018 15:53:20 +0300 Subject: [PATCH 2/5] add method initialize --- js-core/homeworks/homework-17/src/main.js | 44 ++++++++++++++++++----- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/js-core/homeworks/homework-17/src/main.js b/js-core/homeworks/homework-17/src/main.js index 2e364d0..0613103 100644 --- a/js-core/homeworks/homework-17/src/main.js +++ b/js-core/homeworks/homework-17/src/main.js @@ -47,7 +47,7 @@ class Carousel { this.nav = element.nav, this.timer = element.timer } - start () { + start() { /*Объявляем перменные */ let carousel = document.querySelector(this.elementToApply); let prev = carousel.querySelector('.prev'); @@ -167,11 +167,13 @@ class Carousel { }, this.timer); } } + static initialize(properties) { + var myInitializedCarousel = new Carousel(properties); + myInitializedCarousel.start(); + } } -/*Не поянла с методм initialize, поэтому просто создала элемент класса*/ - -let carousel = new Carousel({ +Carousel.initialize({ elementToApply: '.carousel', widthImg: 1170, transition: 1, @@ -180,12 +182,36 @@ let carousel = new Carousel({ timer: 0 }); -carousel.start(); -// var myInitializedCarousel = Carousel.initialize({ -// elementToApply: '.carousel', -// infinity: true, -// }); +/* +* TASK 2 +* Сделайте класс, который будет иметь метод topStyle +* метод topStyle принимает объект с CSS стилями и добавляет в +* новый элемент с данными стилями +* +* +* */ +// .topStyle('fetch', {backgroundColor:'blue'}) +/* +* +* ` +// } +// } +// const newStyle = new Style(); +// newStyle.topStyle('fetch', {backgroundColor:'blue'}); From 7b8e59789138471f0fe2dbb592b17b47a15e0238 Mon Sep 17 00:00:00 2001 From: olgakuzminagithub Date: Mon, 30 Jul 2018 17:12:12 +0300 Subject: [PATCH 3/5] add TASK 2 --- js-core/homeworks/homework-17/index2.html | 11 +++ js-core/homeworks/homework-17/src/main.js | 89 +++++++------------ .../homeworks/homework-17/src/top-style.js | 39 ++++++++ 3 files changed, 82 insertions(+), 57 deletions(-) create mode 100644 js-core/homeworks/homework-17/index2.html create mode 100644 js-core/homeworks/homework-17/src/top-style.js diff --git a/js-core/homeworks/homework-17/index2.html b/js-core/homeworks/homework-17/index2.html new file mode 100644 index 0000000..e98f73f --- /dev/null +++ b/js-core/homeworks/homework-17/index2.html @@ -0,0 +1,11 @@ + + + + + HomeWork 17 Part 2 + + +
+ + + \ No newline at end of file diff --git a/js-core/homeworks/homework-17/src/main.js b/js-core/homeworks/homework-17/src/main.js index 0613103..03e765f 100644 --- a/js-core/homeworks/homework-17/src/main.js +++ b/js-core/homeworks/homework-17/src/main.js @@ -45,9 +45,31 @@ class Carousel { this.transition = element.transition, this.infinity = element.infinity, this.nav = element.nav, - this.timer = element.timer + this.timer = element.timer, + this.list = carousel.querySelectorAll('li'); } - start() { + 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'); @@ -64,7 +86,7 @@ class Carousel { const div = document.createElement('div'); div.setAttribute('class', 'navigation'); const ul = document.createElement('ul'); - for (let i = 0; i < list.length; i++) { + for (let i = 0; i < this.list.length; i++) { const li = document.createElement('li'); li.setAttribute('class', 'nav'); li.innerHTML = i + 1; @@ -73,14 +95,14 @@ class Carousel { 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 ++) { @@ -139,37 +161,20 @@ class Carousel { } }; }; - - /*Запускаем карусель */ - newRoundCarusel(); + } + start () { + this.startCarousel(); /*Запускаем таймер, если он есть*/ if (this.timer !== 0) { setInterval(() => { - 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') - } else { - list[i].classList.remove('active') - } - } - } else if (list[last].classList.contains('active') && infinity === true) { - newRoundCarusel(); - } + this.infinityCarousel() }, this.timer); } - } - static initialize(properties) { - var myInitializedCarousel = new Carousel(properties); - myInitializedCarousel.start(); + } } @@ -183,36 +188,6 @@ Carousel.initialize({ }); -/* -* TASK 2 -* Сделайте класс, который будет иметь метод topStyle -* метод topStyle принимает объект с CSS стилями и добавляет в -* новый элемент с данными стилями -* -* -* */ -// .topStyle('fetch', {backgroundColor:'blue'}) -/* -* -* ` -// } -// } -// const newStyle = new Style(); -// newStyle.topStyle('fetch', {backgroundColor:'blue'}); - diff --git a/js-core/homeworks/homework-17/src/top-style.js b/js-core/homeworks/homework-17/src/top-style.js new file mode 100644 index 0000000..68025df --- /dev/null +++ b/js-core/homeworks/homework-17/src/top-style.js @@ -0,0 +1,39 @@ + +/* +* TASK 2 +* Сделайте класс, который будет иметь метод topStyle +* метод topStyle принимает объект с CSS стилями и добавляет в +* новый элемент с данными стилями +* +* +* */ +// .topStyle('fetch', {backgroundColor:'blue'}) +/* +* +*