hw-js-06/javascript/hw.js

'use strict';
//DOM: ДЗ
//Таблица умножения
//Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу,
//вложенные строки и ячейки в циклах.Должно получится что - то вроде этого:

const table = document.createElement('table');
for (let i = 0; i < 10; i++) {
	const tr = document.createElement('tr');
	for (let j = 1; j < 11; j++) {
		const td = document.createElement('td');
		td.id = String(i) + String(j);
		td.dataset.col = String(i);
		if (j === 10) {
			td.textContent = String(i);
			tr.prepend(td);
			continue;
		}
		td.textContent = String((i === 0 ? 1 : i) * j);
		tr.append(td);
	}
	table.append(tr);
}
document.body.append(table);

//Подсветить ячейку
//над которой находится курсор мыши. Используйте события mouseover и mouseout,
//и style.backgroundColor для подсветки.
//Читкоды:
//в обработчик события в качестве this передается элемент, на котором событие произошло;
//Внимание: :hover это читерство :-
// let tdId;

// table.onmouseover = function (e): void {
// 	const {tagName,id} = e.target
// 	const oldTd = document.getElementById(tdId)
// 	if (oldTd) oldTd.style.backgroundColor = 'grey'
// 	if (tagName === "TD") {
// 		const td = document.getElementById(id)
// 		td.style.backgroundColor = 'green'
// 		tdId = id
// 	} //event -   это объект с информацией о событии,
//                              //передается первым параметром в обработчик события.
// }

// Подсветить строку и столбец,
//в которой находится подсвеченная ячейка. Используйте parentElement
//(родительский элемент элемента DOM), и список его детей: children.
//Читкоды:
//в обработчик события в качестве this передается элемент, на котором событие произошло;
//у td есть свойство cellIndex, в котором лежит номер ячейки;
//у tr, аналогично есть свойство rowIndex - номер строки;

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
//Сделайте ваш калькулятор из первых занятий используя DOM и элементы input
//(в т.ч.type = "number" для чисел) Каждому полю ввода присвойте тот или иной id для обращения в обрабочтике события.
//Для запуска раcчета используйте, например < button id = "calc" > и
//Также можете создать поле ввода для результата и записывать результат в value этого поля.

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
//Сделайте расчет живым, т. е. обновляющимся по событию oninput каждого поля ввода,
//влияющего на результат.Нет смысла копировать одну и ту же калькуляцию,
//поэтому вначале задекларируйте функцию расчета, а потом присвойте её в
//качестве обработчика события в каждом поле ввода:

const firstInput = document.getElementById('first');
const secondInput = document.getElementById('second');
const hadleInputs = (e, inputValue) => {
	resultP.textContent = String(+e.target.value * +inputValue.value);
};
firstInput.addEventListener('change', (e) => hadleInputs(e, secondInput));
secondInput.addEventListener('change', (e) => hadleInputs(e, firstInput));