From 6bb77c6b073885236c03d292be5cfe72c7bdd3f2 Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Tue, 24 Jul 2018 21:16:29 +0300 Subject: [PATCH 01/11] classwork 17 --- js-core/classworks/classwork-17/index.html | 25 +++++ js-core/classworks/classwork-17/main.js | 116 +++++++++++++++++++++ js-core/homeworks/homework-17/index.html | 12 +++ js-core/homeworks/homework-17/main.js | 0 4 files changed, 153 insertions(+) create mode 100644 js-core/classworks/classwork-17/index.html create mode 100644 js-core/classworks/classwork-17/main.js create mode 100644 js-core/homeworks/homework-17/index.html create mode 100644 js-core/homeworks/homework-17/main.js diff --git a/js-core/classworks/classwork-17/index.html b/js-core/classworks/classwork-17/index.html new file mode 100644 index 0000000..3a7ed53 --- /dev/null +++ b/js-core/classworks/classwork-17/index.html @@ -0,0 +1,25 @@ + + + + + Lesson_17 + + + + +

Classwork 17

+ +
+ + + + + + \ No newline at end of file diff --git a/js-core/classworks/classwork-17/main.js b/js-core/classworks/classwork-17/main.js new file mode 100644 index 0000000..71bde15 --- /dev/null +++ b/js-core/classworks/classwork-17/main.js @@ -0,0 +1,116 @@ +//------createDocumentFragment-------------------------- +//css нету + +let myDocument = document.createDocumentFragment(); +const div = document.createElement('div'); +div.textContent = 'qwerty'; + +myDocument.appendChild(div); +document.body.appendChild(myDocument); + +//-------documentWrite----------------------------------- +//напишется прям в том месте дома, где встретился по коду + +//document.write('

qwert

') + +let myNext = document.getElementById('next'); +console.log(myNext); +//сделать по клику, чтобы менялся цвет зеленый-желтый-красный------- +//green +//yellow +//red + +/*myNext.onclick = function(){ + const {style} = next; + + if (style.backgroundColor === 'green') { + style.backgroundColor = 'yellow'; + + } else if (style.backgroundColor === 'yellow'){ + style.backgroundColor = 'red'; + } else { + style.backgroundColor = 'green'; + } + +}*/ + +//сделать, чтобы цвет менялся каждую секунду------------------ + +/*let arr = ['green', 'yellow', 'red']; + +let counter = 0; + +setInterval(()=>{ + next.style.backgroundColor = arr[counter]; + counter++; + if(counter === arr.length) { + counter = 0; + } +}, 1000)*/ + +//увеличивайте ширину next на 10 px каждую 1 сек---------------- +let arr = ['green', 'yellow', 'red']; + +let counter = 0; +//let widthCounter = 10 + +/*setInterval(()=>{ + next.style.backgroundColor = arr[counter]; + const newWidth = parseInt(next.style.width) + 10; + + next.style.width = newWidth + 'px'; + //next.style.left = newWidth + 'px'; + + console.log(next.style.width); + counter++; + if(counter === arr.length) { + counter = 0; + } +}, 100)*/ + +//-----------------------------КЛАССЫ---------------------- +console.log(next.classList) //выводит весь список классов +//element.classList.contains()//содержит +//element.classList.add()//добавить +//element.classList.remove()//удалить +//element.classList.toggle()//переключить + +//через 1 сек делать квадрат то кругом, то квадратом +setInterval(()=>{ + next.style.backgroundColor = arr[counter]; + //const newWidth = parseInt(next.style.width) + 10; + //next.style.width = newWidth + 'px'; + + next.classList.toggle('active'); + counter++; + if(counter === arr.length) { + counter = 0; + } +}, 500); + +//--------------------------------------- +/*element.clientTop ~ css border, высота бордера верхнего +element.clientLeft ~ css border, ширина левого бордера +element.clientWidth ~ css width + padding - (scroll-bar) +element.clientHeight ~ css height + padding//без единиц измерения, только цифры + +offsetHeight ~ css height + border + padding, То же, что и clientHeight, но возвращает ширину/высоту элемента с учетом и паддинга, и бордера +offsetWidth ~ css width + border + padding +offsetTop - положение сверху относительно offsetParent элемента +offsetLeft - положение слева относительно offsetParent элемента +offsetParent - расстояние текущего элемента по отношению к верхней части offsetParent узла. */ + +setInterval(()=>{ + next.style.backgroundColor = arr[counter]; + //const newWidth = parseInt(next.style.width) + 10; + //next.style.width = newWidth + 'px'; + + next.classList.toggle('active'); + counter++; + if(counter === arr.length) { + counter = 0; + } +}, 500); + +//scro + diff --git a/js-core/homeworks/homework-17/index.html b/js-core/homeworks/homework-17/index.html new file mode 100644 index 0000000..97e1e78 --- /dev/null +++ b/js-core/homeworks/homework-17/index.html @@ -0,0 +1,12 @@ + + + + + Homework 17 + + +

Homework 17

+ + + + \ No newline at end of file diff --git a/js-core/homeworks/homework-17/main.js b/js-core/homeworks/homework-17/main.js new file mode 100644 index 0000000..e69de29 From 8662cc0cab1244541a21e459e5b272047837cc9d Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Sat, 28 Jul 2018 16:50:11 +0300 Subject: [PATCH 02/11] classwork 17 --- js-core/classworks/classwork-17/main.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/js-core/classworks/classwork-17/main.js b/js-core/classworks/classwork-17/main.js index 71bde15..59d3b10 100644 --- a/js-core/classworks/classwork-17/main.js +++ b/js-core/classworks/classwork-17/main.js @@ -1,4 +1,7 @@ //------createDocumentFragment-------------------------- +//Создает “виртуальный документ”, в которым можно генерировать разметку и работать с элементами. +//При вставке в документ document fragment исчезает, остается только разметка. +//Удобно при создание виртуальной разметки…. //css нету let myDocument = document.createDocumentFragment(); From a6e283846c4512d48040d74e87e713e3226c7f44 Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Sat, 28 Jul 2018 19:43:52 +0300 Subject: [PATCH 03/11] classwork 17 was continued --- js-core/classworks/classwork-17/main.js | 65 +++++++++++++++++++++++-- 1 file changed, 62 insertions(+), 3 deletions(-) diff --git a/js-core/classworks/classwork-17/main.js b/js-core/classworks/classwork-17/main.js index 59d3b10..86ad46b 100644 --- a/js-core/classworks/classwork-17/main.js +++ b/js-core/classworks/classwork-17/main.js @@ -1,3 +1,47 @@ +/* -----------------------PREVIOUS HOMEWORK-------------------------- + + 0 Алгоритмы + Реализуйте функцию которая будет превращать трехмерный массив + в двухмерный, а если массив двухмерный, тогда в трехмерный массив + + ИСПОЛЬЗУЙТЕ МЕТОДЫ МАССИВОВ ! + */ +solution = arr => { +// каким-то образом понять, сколько должно быть на выходе + return arr[0].map((_, index) => { // это чтобы понять, сколько должно быть массивов на выходе + return arr.map((value) => { //value - это в первом случае [1, 3, 5]. Этот ретерн сработает 3 раза, т.е. вернет 3 массива + return value[index];// верни из [1, 3, 5] первое значение, потом второе, потом третье - + // в зависимости от итерации по маленькому массиву + }) + }) + +} +/*Мое решение - так себе +solution = arr => { + let counter = 0; + let resultArray = []; + + while (counter != arr[0].length) { + + let smallArray = arr.map(item => { // [1, 'a'] + return item[counter]; + }) + + resultArray.push(smallArray); + counter++; + } + + return resultArray; + +}*/ +//console.log(solution([ [1, 3, 5], [2, 4, 6] ])) //=> [ [1, 2], [3, 4], [5, 6] ]; +//console.log(solution([ [1, 'a'], [2, 'b'], [3, 'c'] ])) //=> [ [1, 2, 3], [a, b, c] ]; +//console.log(solution([[]]))// => [] +//console.log(solution([ [ [ ] ] ])) // = [ [] ] + + + +//--------------CLASSWORK 17--------------------------- //------createDocumentFragment-------------------------- //Создает “виртуальный документ”, в которым можно генерировать разметку и работать с элементами. //При вставке в документ document fragment исчезает, остается только разметка. @@ -72,7 +116,8 @@ let counter = 0; }, 100)*/ //-----------------------------КЛАССЫ---------------------- -console.log(next.classList) //выводит весь список классов +//элемент.className - вернет список классов элемента в виде строки +console.log(next.classList) //выводит весь список классов в виде псевдомассива //element.classList.contains()//содержит //element.classList.add()//добавить //element.classList.remove()//удалить @@ -101,7 +146,8 @@ offsetHeight ~ css height + border + padding, То же, что и clientHeight, offsetWidth ~ css width + border + padding offsetTop - положение сверху относительно offsetParent элемента offsetLeft - положение слева относительно offsetParent элемента -offsetParent - расстояние текущего элемента по отношению к верхней части offsetParent узла. */ +offsetParent - Свойство offsetParent содержит первый родительский элемент у которого CSS свойство position не равно static, либо body если его нет. + То есть родителя относительно которого происходит позиционирование элемента. */ setInterval(()=>{ next.style.backgroundColor = arr[counter]; @@ -115,5 +161,18 @@ setInterval(()=>{ } }, 500); -//scro +//element.scrollTop - позиция скролла относительно блока элемента (px) считывает или устанавлиет + // количество пикселей, прокрученных от верха элемента. scrollTop измеряет + // дистанцию от верха элемента до верхней точки видимого контента. Когда контент + // элемента не создаёт вертикальную прокрутку, его scrollTop равно 0. +//element.scrollLeft - позиция скролла относительно горизонтального элемента (px) + +//element.scrollIntoView() - скролл к элементу +//elem.scrollIntoView(true) - Прилепит элемент elem, на котором вызывается метод, к верху страницы +//elem.scrollIntoView(false) - Прилепит элемент elem, на котором вызывается метод, к низу страницы + +//window.pageYOffset - скролл Y относительно окна window. хранит текущую прокрутку страницы в px, не работает в IE +//window.pageXoffset - скролл X относительно окна window. хранит текущую прокрутку страницы в px, не работает в IE +//document.documentElement.scrollTop - то же самое для IE и FF +//document.body.scrollTop - то же самое, работает в хроме, в файрфоксе не работает From de03f95352c029ee6a816fd6bde7c61d04e67dd8 Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Sat, 28 Jul 2018 20:24:02 +0300 Subject: [PATCH 04/11] tasks for hw-17 were added --- js-core/homeworks/homework-17/main.js | 95 +++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) diff --git a/js-core/homeworks/homework-17/main.js b/js-core/homeworks/homework-17/main.js index e69de29..703edfe 100644 --- a/js-core/homeworks/homework-17/main.js +++ b/js-core/homeworks/homework-17/main.js @@ -0,0 +1,95 @@ +/* + TASK 0---------------------------------------------------------------- + Отобразите всех лидеров массива. + * + * + * Элемент лидер если он больше чем все последующие элементы + * после него ( элементы справа ). + * Последний элемент всегда лидер. Например в массиве [16,17,4,3,5,2] + * лидеры 17, 5 и 2. + * + * */ + +const solution = arr => { +}; + +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--------------------------------------------------------------- + * Сделайте карусель. + * При клике по кнопке "<=" показывается первое изображение по "=>" следующее. + * + * 1.1 + * Сделайте слайдер - бесконечным, после третьего изображения снова первое. + * 1.2 + * Добавьте внизу цифры с текущим активным изображением. + * + * + * + * @SUPER -> @front-end--------------------------------------------------- + * Уберите в стилях li - position:absolute. + * изменяйте свойство transform:translate3d у .carousel, добавьте transition + * и сделайте чтобы картинки передвигались влево и вправо + * + * @PUPER -> переход к первой картинка------------------------------------- + * + * */ +class Carousel { +} +/*создайте новый instance Carouse при вызове initialize*/ +var myInitializedCarousel = Carousel.initialize({ + elementToApply: '.carousel', + infinity: true, +}); + +/* +* TASK 2--------------------------------------------------------------------- +* Сделайте класс, который будет иметь метод topStyle +* метод topStyle принимает объект с CSS стилями и добавляет в +* новый элемент с данными стилями +* +* +* */ +// .topStyle('fetch', {backgroundColor:'blue'}) +/* +* +*

Homework 17

+
+
    + +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+ + + +
diff --git a/js-core/homeworks/homework-17/main.js b/js-core/homeworks/homework-17/main.js index 703edfe..e2f8f25 100644 --- a/js-core/homeworks/homework-17/main.js +++ b/js-core/homeworks/homework-17/main.js @@ -13,24 +13,90 @@ const solution = arr => { }; -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] +//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--------------------------------------------------------------- +/* TASK 1-------------------------------------------------------------- * Сделайте карусель. * При клике по кнопке "<=" показывается первое изображение по "=>" следующее. * - * 1.1 + 1.1 * Сделайте слайдер - бесконечным, после третьего изображения снова первое. * 1.2 * Добавьте внизу цифры с текущим активным изображением. - * - * - * - * @SUPER -> @front-end--------------------------------------------------- + */ + /*создайте новый instance Carouse при вызове initialize*/ //не поняла, что это значит +/*var myInitializedCarousel = Carousel.initialize({ + elementToApply: '.carousel', + infinity: true, +});*/ + + +/*class Carousel { + + static initialize() { + return new Carousel; + } + + constructor(){ + this.clickHandler(); + } + + clickHandler() { + let leftArrow = document.querySelector('.ec-left'); + let rightArrow = document.querySelector('.ec-right'); + let slides = [...document.querySelectorAll('li')]; + let activeNumberSpan = document.querySelector('.number'); + let activeSlide = null; + + slides.forEach((item) => { + if (item.getAttribute('style') == 'display: block') { + activeSlide = item; + activeNumberSpan.innerHTML = activeSlide.firstElementChild.alt; + } + }); + + leftArrow.onclick = () => { + activeSlide.setAttribute('style', 'display:none'); + if (activeSlide.previousElementSibling) { + activeSlide.previousElementSibling.setAttribute('style', 'display:block'); + activeSlide = activeSlide.previousElementSibling; + activeNumberSpan.innerHTML = activeSlide.firstElementChild.alt; + + } else { + slides[slides.length - 1].setAttribute('style', 'display:block'); + activeSlide = slides[slides.length - 1]; + activeNumberSpan.innerHTML = activeSlide.firstElementChild.alt; + } + + } + + rightArrow.onclick = () => { + activeSlide.setAttribute('style', 'display:none'); + if (activeSlide.nextElementSibling) { + activeSlide.nextElementSibling.setAttribute('style', 'display:block'); + activeSlide = activeSlide.nextElementSibling; + activeNumberSpan.innerHTML = activeSlide.firstElementChild.alt; + } else { + slides[0].setAttribute('style', 'display:block'); + activeSlide = slides[0]; + activeNumberSpan.innerHTML = activeSlide.firstElementChild.alt; + } + + } + + } + +} +//let myCarousel = new Carousel; +var myInitializedCarousel = Carousel.initialize(); +*/ + + + /* @SUPER -> @front-end--------------------------------------------------- * Уберите в стилях li - position:absolute. * изменяйте свойство transform:translate3d у .carousel, добавьте transition * и сделайте чтобы картинки передвигались влево и вправо @@ -39,12 +105,76 @@ console.log(solution([12, 12, 12])); // [5, 4] * * */ class Carousel { + + static initialize() { + return new Carousel; + } + + constructor(){ + this.clickHandler(); + } + + clickHandler() { + let leftArrow = document.querySelector('.ec-left'); + let rightArrow = document.querySelector('.ec-right'); + + let parent = document.querySelector('ul'); + let slides = [...parent.children]; + + let oneChildWidth = parseInt(getComputedStyle(slides[0]).width); + let parentWidth = oneChildWidth * slides.length; + parent.style.width = parentWidth + 'px'; + + let activeSlide = parent.firstElementChild; + + let activeNumberSpan = document.querySelector('.number'); + activeNumberSpan.innerHTML = activeSlide.firstElementChild.alt; + + + leftArrow.onclick = () => { + + if (activeSlide.nextElementSibling) { + + parent.style.transform += `translateX(-${oneChildWidth}px)`; + activeSlide = activeSlide.nextElementSibling; + activeNumberSpan.innerHTML = activeSlide.firstElementChild.alt; + + } else { + parent.style.transform = `translateX(0px)`; + activeSlide = parent.firstElementChild; + activeNumberSpan.innerHTML = activeSlide.firstElementChild.alt; + } + + } + + rightArrow.onclick = () => { + + if (activeSlide.previousElementSibling) { + + parent.style.transform += `translateX(${oneChildWidth}px)`; + activeSlide = activeSlide.previousElementSibling; + activeNumberSpan.innerHTML = activeSlide.firstElementChild.alt; + + } else { + + parent.style.transform = `translateX(-${oneChildWidth*(slides.length-1)}px)`; + activeSlide = parent.lastElementChild; + activeNumberSpan.innerHTML = activeSlide.firstElementChild.alt; + } + + } + + } + } -/*создайте новый instance Carouse при вызове initialize*/ -var myInitializedCarousel = Carousel.initialize({ - elementToApply: '.carousel', - infinity: true, -}); +//let myCarousel = new Carousel; +var myInitializedCarousel = Carousel.initialize( + //{ + //elementToApply: '.carousel', + //infinity: true, + //} +); + /* * TASK 2--------------------------------------------------------------------- @@ -60,7 +190,49 @@ var myInitializedCarousel = Carousel.initialize({ * + + + +

Classwork 18

+
+
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/js-core/classworks/classwork-18/main.js b/js-core/classworks/classwork-18/main.js new file mode 100644 index 0000000..84d42a9 --- /dev/null +++ b/js-core/classworks/classwork-18/main.js @@ -0,0 +1,57 @@ +/*DOM EVENTS LEVEL 1*/ +let block1 = document.querySelector('.block1'); +let block2 = document.querySelector('.block2'); +let block3 = document.querySelector('.block3'); + +/*block1.addEventListener('click', function(){ + console.log('I am block1'); +}, false); + +block2.addEventListener('click', function(){ + console.log('I am block2'); +}, false);*/ + +block3.addEventListener('click', clickHandler); + +let counter = 0; +function clickHandler(){ + if (counter < 3) { + console.log('I am block3'); + counter++; + return; + } + + block3.removeEventListener('click', clickHandler); + console.log('eventListener was deleted'); +} + +//3 параметр - всплытие +//по умолчанию стоит false +//по умолчанию ловятся события на всплытии +//но если при погружении джаваскрипту встретится событие, у которого true, +//то сначала выполнится событие с true, потом целевое событие, потом события, +//которые на блоках выше и у которых false + +/*let table = document.querySelector('table'); + +table.addEventListener('click', function(){ + + if (!event && !event.target) { + return; + }; + + let target = event.target; + if (target.tagName != "TD") { + return; + }; + target.style.background = 'red'; + +});*/ + +//event.stopPropagation(); - остановка всплытия или погружения, т.е. если это написать +//в ф-ции, т. выполнится только это событие и никакие более высокие не выполнятся + +//event.stopImmediatePropogation() - остановит на всплытии вообще все последующие события + +//preventDefault() - останавливает поведение по умолчанию, например, переход по ссылке + From fe558967fe188778b5a920a17b9537882a57fc8e Mon Sep 17 00:00:00 2001 From: Nataliia Date: Wed, 1 Aug 2018 20:25:42 +0300 Subject: [PATCH 08/11] hw_18 part 1 --- js-core/homeworks/homework-18/index.html | 107 +++++++++++++++++++++++ js-core/homeworks/homework-18/main.js | 100 +++++++++++++++++++++ 2 files changed, 207 insertions(+) create mode 100644 js-core/homeworks/homework-18/index.html create mode 100644 js-core/homeworks/homework-18/main.js diff --git a/js-core/homeworks/homework-18/index.html b/js-core/homeworks/homework-18/index.html new file mode 100644 index 0000000..b6dc92d --- /dev/null +++ b/js-core/homeworks/homework-18/index.html @@ -0,0 +1,107 @@ + + + + + + Homework 18 + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + \ No newline at end of file diff --git a/js-core/homeworks/homework-18/main.js b/js-core/homeworks/homework-18/main.js new file mode 100644 index 0000000..0635425 --- /dev/null +++ b/js-core/homeworks/homework-18/main.js @@ -0,0 +1,100 @@ +/* EASY--------------------------------------------------------- +Алгоритмы ! +TASK 0 +Вам дано предложение, верните массив из слов, +которые длинее чем средняя длина всех слов. +Слова разделены пробелами, если в предложении запятые,они должны быть пропущены +solution(["This is a sample string"]) expected ["This" "sample" "string"] +solution(["Some another sample"]) expected ["another" "sample"] +solution(["Do, do, do, do... do it!"]) expected [] +*/ + +/* +Подготовка к занятию в пятницу.-----------DONE------------------------------------------- +Windows: + Установите все node.js скачать отсюда -> https://nodejs.org/en/ + Скачайте последнюю 10.x.x версию + Для проверки установки в консоле введите "node -v" (без кавычек) отобразит версию node.js +Linux: + sudo apt install npm // установить менеджер пакетов npm + npm i -g n // установить пакет для установки node.js + sudo n latest // установить последнюю версию node.js +*/ + + +/* TASK 1------------------------------------------------------------------------------- +Сделайте таблицу 5x5 +При клике на элемент, изменяйте цвет у элемента на красный. +Но цвет у элемента должен изменяться пропорционально в другой половине квадрата +Пример 3х3: +[]|[]|[] +[]|[]|[] +[]|[]|[] +кликаем сюда -> []|[]|[] + []|[]|[] + []|[]|[x] <- загорается тут + + []|[]|[] +кликаем сюда -> []|[]|[x] <- загорается тут + []|[]|[x] +*/ +let table = document.querySelector('table'); + +table.addEventListener('click', makeItRed); + +function makeItRed(){ + let target = event && event.target; + + if (target.tagName == 'TD') { + target.textContent = ' '; + + //this.coloredTD = null; + + let rowsChildren = [...target.parentNode.parentNode.children]; + + let clickedRow = target.parentNode; + + + rowsChildren.forEach((row, j, rowsArr) => { + if(clickedRow == row){ + + let clickedIndexRow = j+1; + + let shouldBeColoredRow = rowsArr.length - clickedIndexRow; + + [...row.children].forEach((td, i, tdsArr) => { + + if (td.textContent == ' ') { + + let clickedIndex = i+1; + let shouldBeColoredIndex = tdsArr.length - clickedIndex; + + //if (this.coloredTD) { + // console.log(1); + // this.coloredTD.removeAttribute('style'); + + //}; + + [...rowsArr[shouldBeColoredRow].children][shouldBeColoredIndex].style.backgroundColor = 'red'; + + //this.coloredTD = [...rowsArr[shouldBeColoredRow].children][shouldBeColoredIndex]; + + return; + } + }) + + } // end of if + + }) // end of rowsChildren.forEach + + } // end of if + +} // end of function + +// @SUPER-FrontEnd---------------------------------------------------------------- +/* +У вас есть 3 блока смотри events.html +при mousedown и движении мышки нужно сделать +ресайз одного блока. +Подсказка - событие необходимо повесить на доп. элемент .resize +*/ \ No newline at end of file From 7533acda0ff3915246b71d97659c45c655edec09 Mon Sep 17 00:00:00 2001 From: Nataliia Date: Thu, 2 Aug 2018 17:31:02 +0300 Subject: [PATCH 09/11] hw_18 almost finished --- js-core/homeworks/homework-18/index.html | 4 +- js-core/homeworks/homework-18/main.js | 92 +++++++++++++++++++----- 2 files changed, 77 insertions(+), 19 deletions(-) diff --git a/js-core/homeworks/homework-18/index.html b/js-core/homeworks/homework-18/index.html index b6dc92d..77490f0 100644 --- a/js-core/homeworks/homework-18/index.html +++ b/js-core/homeworks/homework-18/index.html @@ -60,7 +60,7 @@
-
+
@@ -100,7 +100,7 @@
-
+ diff --git a/js-core/homeworks/homework-18/main.js b/js-core/homeworks/homework-18/main.js index 0635425..43a4570 100644 --- a/js-core/homeworks/homework-18/main.js +++ b/js-core/homeworks/homework-18/main.js @@ -3,11 +3,38 @@ TASK 0 Вам дано предложение, верните массив из слов, которые длинее чем средняя длина всех слов. -Слова разделены пробелами, если в предложении запятые,они должны быть пропущены -solution(["This is a sample string"]) expected ["This" "sample" "string"] -solution(["Some another sample"]) expected ["another" "sample"] -solution(["Do, do, do, do... do it!"]) expected [] -*/ +Слова разделены пробелами, если в предложении запятые,они должны быть пропущены*/ +function solution(arr){ + let wordsArray = arr[0].split(' '); + let pattern = /\W/g; + let onlyWords = []; + + let itemsLength = wordsArray.reduce((newItem, item) => { + + if (item.search(pattern) > -1){ + item = item.replace(pattern, ''); + } + + onlyWords.push(item); + return newItem + item.length; + + }, 0); + + let averageLength = Math.floor(itemsLength / wordsArray.length); + + let result = onlyWords.filter((item) => { + if (item.length > averageLength) { + return item; + } + }) + + return result; +} + +console.log(solution(["This is a sample string"])) //expected ["This" "sample" "string"] +console.log(solution(["Some another sample"])) //expected ["another" "sample"] +console.log(solution(["Do, do, do, do... do it!"])) //expected [] + /* Подготовка к занятию в пятницу.-----------DONE------------------------------------------- @@ -41,20 +68,16 @@ Linux: let table = document.querySelector('table'); table.addEventListener('click', makeItRed); - +//let coloredTD = null; function makeItRed(){ let target = event && event.target; if (target.tagName == 'TD') { target.textContent = ' '; - //this.coloredTD = null; - let rowsChildren = [...target.parentNode.parentNode.children]; - let clickedRow = target.parentNode; - - + rowsChildren.forEach((row, j, rowsArr) => { if(clickedRow == row){ @@ -69,15 +92,14 @@ function makeItRed(){ let clickedIndex = i+1; let shouldBeColoredIndex = tdsArr.length - clickedIndex; - //if (this.coloredTD) { - // console.log(1); - // this.coloredTD.removeAttribute('style'); - + //if (coloredTD) { + // coloredTD.removeAttribute('style'); + //coloredTD = null; //}; [...rowsArr[shouldBeColoredRow].children][shouldBeColoredIndex].style.backgroundColor = 'red'; - //this.coloredTD = [...rowsArr[shouldBeColoredRow].children][shouldBeColoredIndex]; + //coloredTD = [...rowsArr[shouldBeColoredRow].children][shouldBeColoredIndex]; return; } @@ -97,4 +119,40 @@ function makeItRed(){ при mousedown и движении мышки нужно сделать ресайз одного блока. Подсказка - событие необходимо повесить на доп. элемент .resize -*/ \ No newline at end of file +*/ + +class Resize { + constructor(){ + this.parent = document.querySelector('section'); + this.parent.addEventListener('mousedown', this.handlerMouseDown.bind(this)); + window.addEventListener('mouseup', this.handlerMouseUp.bind(this)); + } + + handlerMouseDown(e){ + this.target = e.target; + this.startMouseX = e.clientX; + //this.initialWidth = this.target.parentNode.offsetWidth; + + if (this.target && this.target.classList.contains('resize')) { + window.addEventListener('mousemove', this.handlerMouseMove.bind(this)); + } + } + + handlerMouseMove(e) { + //let startMouseX = e.clientX; + let endMouseX = e.clientX; // собирает координаты мыши все время, пока происходит движение + + //if (endMouseX > this.startMouseX) { + this.target.parentNode.style.cssText = `flex-basis:${endMouseX-this.startMouseX}px;`; + //} + } + + handlerMouseUp(){ + console.log('щас сниму'); + window.removeEventListener('mousemove', this.handlerMouseMove); + console.log('снял') + } + +} + +let newResize = new Resize(); From f6d1273db2f49dc54b82047112f70c8f58c88ad7 Mon Sep 17 00:00:00 2001 From: Nataliia Date: Fri, 3 Aug 2018 09:37:05 +0300 Subject: [PATCH 10/11] hw_18 was refactored --- js-core/homeworks/homework-18/index.html | 3 +++ js-core/homeworks/homework-18/main.js | 27 +++++++++++++----------- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/js-core/homeworks/homework-18/index.html b/js-core/homeworks/homework-18/index.html index 77490f0..211ef5c 100644 --- a/js-core/homeworks/homework-18/index.html +++ b/js-core/homeworks/homework-18/index.html @@ -45,6 +45,9 @@ border: 3px solid black; margin: 0 auto; } + .painted { + background: red; + } diff --git a/js-core/homeworks/homework-18/main.js b/js-core/homeworks/homework-18/main.js index 43a4570..cadfccf 100644 --- a/js-core/homeworks/homework-18/main.js +++ b/js-core/homeworks/homework-18/main.js @@ -66,9 +66,9 @@ Linux: []|[]|[x] */ let table = document.querySelector('table'); - table.addEventListener('click', makeItRed); -//let coloredTD = null; +//let coloredTD; + function makeItRed(){ let target = event && event.target; @@ -91,20 +91,13 @@ function makeItRed(){ let clickedIndex = i+1; let shouldBeColoredIndex = tdsArr.length - clickedIndex; - - //if (coloredTD) { - // coloredTD.removeAttribute('style'); - //coloredTD = null; - //}; - - [...rowsArr[shouldBeColoredRow].children][shouldBeColoredIndex].style.backgroundColor = 'red'; - - //coloredTD = [...rowsArr[shouldBeColoredRow].children][shouldBeColoredIndex]; + let shouldBeColoredTD = [...rowsArr[shouldBeColoredRow].children][shouldBeColoredIndex]; + + toPaint(shouldBeColoredTD); return; } }) - } // end of if }) // end of rowsChildren.forEach @@ -113,6 +106,16 @@ function makeItRed(){ } // end of function +function toPaint(elem){ //I want to remove bg color from previous colored element, but it works in strange way + //if (coloredTD) { + // coloredTD.classList.remove('painted'); + //} + + //coloredTD = elem; + //coloredTD.classList.add('painted'); + elem.classList.add('painted'); +} + // @SUPER-FrontEnd---------------------------------------------------------------- /* У вас есть 3 блока смотри events.html From 4997eed669ccc97bcf51de45f68b489cfc61be8d Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Sun, 5 Aug 2018 14:51:59 +0300 Subject: [PATCH 11/11] new way to binding --- js-core/homeworks/homework-18/main.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/js-core/homeworks/homework-18/main.js b/js-core/homeworks/homework-18/main.js index cadfccf..68b663f 100644 --- a/js-core/homeworks/homework-18/main.js +++ b/js-core/homeworks/homework-18/main.js @@ -128,6 +128,7 @@ class Resize { constructor(){ this.parent = document.querySelector('section'); this.parent.addEventListener('mousedown', this.handlerMouseDown.bind(this)); + this.handlerMouseMove = this.handlerMouseMove.bind(this); window.addEventListener('mouseup', this.handlerMouseUp.bind(this)); } @@ -137,7 +138,7 @@ class Resize { //this.initialWidth = this.target.parentNode.offsetWidth; if (this.target && this.target.classList.contains('resize')) { - window.addEventListener('mousemove', this.handlerMouseMove.bind(this)); + window.addEventListener('mousemove', this.handlerMouseMove); } } @@ -151,9 +152,7 @@ class Resize { } handlerMouseUp(){ - console.log('щас сниму'); window.removeEventListener('mousemove', this.handlerMouseMove); - console.log('снял') } }