done hw 8 DOM

javascript/hw.js

@@ -1,18 +1,32 @@
 'use strict';
 import htmlObj from './someTree.js';
 
-//Домашнее задание. Функции 2, ES6
-//Переделайте предыдущее ДЗ используя максимум возможностей ES6. Отметьте облегчение (или утяжеление) синтаксиса.
-// Easier: used loop forEach on row 34 ,and arrow function on row 60
-// Harder : We cant totally replace simple loop from ES5 because it's not suit to use ES6 for already counted iterations
+//Домашнее задание  DOM2
+//Еще дз: переписать подсветку таблицы используя минимум this.* и максимум
+//переменных замыкания. Для этого Надо занести обработчики событий во вложенный for
 
 const table = document.createElement('table');
+
 for (let i = 0; i < 10; i++) {
 	const tr = document.createElement('tr');
+	const handleLightTr = function (td, className) {
+		Object.values(table.children).forEach((el) => {
+			Object.values(el.children).forEach(
+				(td) => (td.style.backgroundColor = tr === el ? 'yellow' : 'grey')
+			);
+		});
+		const trColl = document.getElementsByClassName(className);
+		Object.values(trColl).forEach(
+			(tr) => (tr.style.backgroundColor = 'orange')
+		);
+		td.style.backgroundColor = 'green';
+	};
 	for (let j = 1; j < 11; j++) {
 		const td = document.createElement('td');
-		td.id = String(i) + String(j);
-		td.dataset.col = String(i);
+		td.addEventListener('mousemove', () =>
+			handleLightTr(td, j === 10 ? 10 : j)
+		);
+		td.classList.add(j === 10 ? 10 : j);
 		if (j === 10) {
 			td.textContent = String(i);
 			tr.prepend(td);
@@ -25,182 +39,3 @@ for (let i = 0; i < 10; i++) {
 }
 
 document.body.append(table);
-
-table.onmouseover = function ({
-	target: {
-		cellIndex,
-		tagName,
-		id,
-		dataset: { col },
-	},
-}) {
-	this.childNodes.forEach((element) => {
-		element.childNodes.forEach((td) => {
-			if (td.cellIndex === cellIndex) {
-				td.style.backgroundColor = 'yellow';
-			} else if (td.dataset.col === col) {
-				td.style.backgroundColor = 'orange';
-			} else {
-				td.style.backgroundColor = 'grey';
-			}
-		});
-	});
-	if (tagName === 'TD')
-		document.getElementById(id).style.backgroundColor = 'green';
-};
-
-//Calc
-const btnSubmit = document.getElementById('submitCalc');
-const resultP = document.getElementById('result');
-
-btnSubmit.addEventListener('click', updateValue);
-function updateValue(e) {
-	const values = e.target.parentNode.children;
-	resultP.textContent = String(+values[0].value * +values[1].value);
-}
-//Calc Live
-const firstInput = document.getElementById('first');
-const secondInput = document.getElementById('second');
-const handelInputs = (e, inputValue) => {
-	resultP.textContent = String(+e.target.value * +inputValue.value);
-};
-firstInput.addEventListener('change', (e) => handelInputs(e, secondInput));
-secondInput.addEventListener('change', (e) => handelInputs(e, firstInput));
-
-//sort
-//Сделайте обобщенную функцию сортировки массива
-//Функция позволяет отсортировать любой набор данных по имени поля (второй параметр).
-//Третьим параметром идет необязательный Boolean, который в случае true делает сортировку по
-//возрастанию, в случае false - по убыванию.По умолчанию(без третьего параметра) происходит сортировка по возрастанию.
-const persons = [
-	{ name: 'Canvas', age: 17 },
-	{ name: 'Bogdan', age: 35 },
-	{ name: 'Anton', age: 73 },
-	{ name: 'Dango', age: 120 },
-];
-
-const sort = (arr, sortBy, flag = true) => {
-	const sorted = [
-		...arr.sort(function (a, b) {
-			if (a[sortBy] < b[sortBy]) {
-				return -1;
-			} else if (a[sortBy] > b[sortBy]) {
-				return 1;
-			}
-			return 0;
-		}),
-	];
-	return flag ? sorted : sorted.reverse();
-};
-
-console.log(sort(persons, 'age')); //sort increase by age
-console.log(sort(persons, 'age', false)); //decrease sort increase by age
-console.log(sort(persons, 'name')); //sort increase by name
-console.log(sort(persons, 'name', false)); //decrease sort increase by name
-
-//array map
-//Используя Array.map приведите все строки в массиве к числу. Элементы других типов оставьте как есть:
-//должно превратиться в
-//[1, {}, null, undefined, 500, 700]
-
-const arrValues = ['1', {}, null, undefined, '500', 700];
-const rightArray = arrValues.map((el) => {
-	console.log(isNaN(el));
-	if (typeof el === 'string') return Number(el);
-	return el;
-});
-console.log(rightArray);
-
-//array reduce
-//Получите произведение всех чисел в массиве, используя Array.reduce. Не обрабатывайте типы данных, не являющиеся числом.
-//результат должен быть 15
-
-const arrForReduce = ['0', 5, 3, 'string', null];
-const amountOfNumbers = arrForReduce.reduce((acc, el) => {
-	if (typeof el === 'number') return (acc *= el);
-	return acc;
-}, 1);
-console.log(amountOfNumbers);
-
-//object filter
-//Напишите свою реализацию Array.filter для объектов:
-//должно вернуть
-// {
-//     ram: 2,
-//     color: "black",
-// }
-//Для удаления пары ключ-значение используйте delete. Или сделайте копию объекта.
-
-const phone = {
-	brand: 'meizu',
-	model: 'm2',
-	ram: 2,
-	color: 'black',
-};
-
-function objectFilter(arr, f) {
-	const result = {};
-	for (const [key, value] of Object.entries(arr)) {
-		if (f(key, value)) result[key] = value;
-	}
-	return result;
-}
-
-console.log(
-	objectFilter(phone, (key, value) => key === 'color' || value === 2)
-);
-
-//object map
-//Напишите свою реализацию Array.map для объектов:
-// map({name: "Иван", age: 17},function(key,value){
-// var result = {};
-// result[key+"_"] = value + "$";
-// return result;
-// }) //должен вернуть {name_: "Иван$", age_: "17$"}
-//"Напишите свою реализацию" значит написать function map.... и её тело, после чего код выше заработает
-
-const mapObjects = (obj, cb) => {
-	const result = {};
-	for (const key in obj) {
-		if (cb(key, obj[key])) result[key + '_'] = obj[key] + '$';
-	}
-	return result;
-};
-const object = { name: 'Hryhorii', age: 24 };
-console.log(
-	mapObjects(object, (key, value) => (key === 'name') | (value === 'Hryhorii'))
-);
-
-//Рекурсия
-//Sum
-//Напишите функцию, который будет считать сумму арифметической прогрессии рекурсивно.
-
-const sumRecursion = (n) => {
-	if (n === 1) return 1;
-	return n + sumRecursion(n - 1);
-};
-
-console.log(sumRecursion(5)); // recursion
-
-//HTML Tree
-//Сделать задание на синий пояс, используя рекурсию, без ограничения вложенности.
-
-const htmlConstructor = (htmlObj, previousHtml) => {
-	if (htmlObj.children === undefined) return previousHtml;
-	if (previousHtml === undefined) {
-		return htmlConstructor(htmlObj, document.createElement(htmlObj.tagName));
-	}
-	htmlObj.children.forEach((innerObj, i) => {
-		const { tagName, text, attrs } = innerObj;
-		const tag = document.createElement(tagName);
-		tag.textContent = text;
-		for (const atr in attrs) {
-			tag.setAttribute(atr, attrs[atr]);
-		}
-		previousHtml.append(tag);
-		return htmlConstructor(innerObj, previousHtml.children[i]);
-	});
-	return previousHtml;
-};
-
-document.body.prepend(htmlConstructor(htmlObj));