diff --git a/js-core/homeworks/homework-18/event.html b/js-core/homeworks/homework-18/event.html new file mode 100644 index 0000000..67f4916 --- /dev/null +++ b/js-core/homeworks/homework-18/event.html @@ -0,0 +1,53 @@ + + + + + + Document + + + + +
+
+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/js-core/homeworks/homework-18/events.js b/js-core/homeworks/homework-18/events.js new file mode 100644 index 0000000..89d9232 --- /dev/null +++ b/js-core/homeworks/homework-18/events.js @@ -0,0 +1,16 @@ +// @SUPER-FrontEnd +/* +У вас есть 3 блока смотри events.html +при mousedown и движении мышки нужно сделать +ресайз одного блока. +Подсказка - событие необходимо повесить на доп. элемент .resize +*/ + +const resizeBlocks = document.querySelectorAll('.resize'); + +[...resizeBlocks].forEach(block => { + console.log(block) + block.addEventListener('click', (e) => { + console.log(e.target.parentElement) + }); +}) \ No newline at end of file diff --git a/js-core/homeworks/homework-18/index.html b/js-core/homeworks/homework-18/index.html new file mode 100644 index 0000000..6a7c7ee --- /dev/null +++ b/js-core/homeworks/homework-18/index.html @@ -0,0 +1,61 @@ + + + + + Home work 18 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/js-core/homeworks/homework-18/src/main.js b/js-core/homeworks/homework-18/src/main.js new file mode 100644 index 0000000..a4de78d --- /dev/null +++ b/js-core/homeworks/homework-18/src/main.js @@ -0,0 +1,98 @@ +/* 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 [] +*/ + +const solution = sentence => { + let arrWithWords = sentence.join('').split(' '); + arrWithWords = arrWithWords.reduce((clearWords, word) => { + const clearWord = word.replace(/\W/gmi, ''); + clearWords.push(clearWord); + return clearWords; + }, []); + const middleLengthOfString = arrWithWords.reduce((acc, word) => acc + word.length, 0) / arrWithWords.length; + + return arrWithWords.reduce((output, word) => { + if(word.length > middleLengthOfString) { + output.push(word); + } + return output; + }, []); +} + +console.log(solution(["This is a sample string"])); +console.log(solution(["Some another sample"])); +console.log(solution(["Do, do, do, do... do it!"])); + +/* +Подготовка к занятию в пятницу. +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] +*/ +const table = document.querySelector('tbody'); +const reversedRows = [...table.rows].reverse(); +const reversedTable = reversedRows.reduce((output, tr) => { + output.push([...tr.cells].reverse()); + return output; +}, []); + +table.addEventListener('click', (e) => { + const toggleFunc = rowNumber => { + const index = e.target.cellIndex; + const cell = reversedTable[rowNumber][index]; + cell.classList.toggle('active'); + } + + if(!e.target.tagName === 'TD') { + return; + } + + const hashMap = { + 'first': 0, + 'second': 1, + 'third': 2, + 'fourth': 3, + 'fifth': 4 + } + + if(hashMap[e.target.parentElement.id] || !hashMap[e.target.parentElement.id]) { + toggleFunc(hashMap[e.target.parentElement.id]) + } +}) + +// @SUPER-FrontEnd +/* +У вас есть 3 блока смотри events.html +при mousedown и движении мышки нужно сделать +ресайз одного блока. +Подсказка - событие необходимо повесить на доп. элемент .resize +*/ \ No newline at end of file