javascript_practice/hw07/index.js

/*---=== Таблица умножения ===---*/

let multiplyTable = [];

for (let i = 1; i <= 9; i++) {
	multiplyTable[i] = [];

	for (let j = 1; j <= 9; j++) {
		multiplyTable[i][j] = j * i;
	}
}

const htmlTable = (arr) => {
	const tableElement = document.createElement('table');
	tableElement.classList.add('table');

	for (const row in arr) {
		const tableRowElement = document.createElement('tr');

		for (const cell in arr[row]) {
			const tableCellElement = document.createElement('td');
			tableCellElement.innerText = arr[row][cell];
			tableRowElement.appendChild(tableCellElement);
		}
		tableElement.appendChild(tableRowElement);
	}

	return document.querySelector('#multiplyTable').appendChild(tableElement);
}

htmlTable(multiplyTable);

/*---=== /Таблица умножения ===---*/


/*---=== Подсветить ячейку ===---*/

const cell = [...document.querySelectorAll('table tr td')];

cell.forEach(element => {
	element.addEventListener('mouseover', event => {
		event.target.style.backgroundColor = 'red';
	});

	element.addEventListener('mouseout', event => {
		event.target.style.backgroundColor = '';
	});
});

/*---=== /Подсветить ячейку ===---*/


/*---=== Подсветить строку и столбец ===---*/

let cellRow = [...document.querySelectorAll('table tr td')];

const updateColor = (target, color) => {
	target.parentElement.style.backgroundColor = color;
	[...target.parentElement.parentElement.children].forEach(rows => {
		[...rows.children][target.cellIndex].style.backgroundColor = color;
	});
}

cellRow.forEach(element => {
	element.addEventListener('mouseover', event => {
		let {target} = event;

		updateColor(target, 'red');
	});

	element.addEventListener('mouseout', event => {
		let {target} = event;

		updateColor(target, '');
	});
});

/*---=== /Подсветить строку и столбец ===---*/


/*---=== Calc ===---*/

document.addEventListener("DOMContentLoaded", () => {

	const weight = document.querySelector('.calc-form .js-form-weight');
	const height = document.querySelector('.calc-form .js-form-height');
	const age = document.querySelector('.calc-form .js-form-age');
	const button = document.querySelector('.calc-form .js-form-calculate');
	const formAlertSuccess = document.querySelector('.calc-form .js-alert-success');
	const formAlertDanger = document.querySelector('.calc-form .js-alert-danger');

	button.addEventListener('click', () => {
		if (weight.value && height.value && age.value) {
			formAlertSuccess.innerText = `${Math.ceil((10 * weight.value) + (6.25 * height.value) - (5 * age.value) + 5)} ккал/сутки`;
			formAlertSuccess.style.setProperty('display', 'block');
			formAlertDanger.style.setProperty('display', 'none');
		} else {
			formAlertSuccess.style.setProperty('display', 'none');
			formAlertDanger.style.setProperty('display', 'block');
		}
	});
});

/*---=== /Calc ===---*/

/*---=== Calc Live ===---*/

document.addEventListener("DOMContentLoaded", () => {

	const weight = document.querySelector('.calc-form-live .js-form-weight');
	const height = document.querySelector('.calc-form-live .js-form-height');
	const age = document.querySelector('.calc-form-live .js-form-age');
	const fields = document.querySelectorAll('.js-form-input');
	const formAlertSuccess = document.querySelector('.calc-form-live .js-alert-success');
	const formAlertDanger = document.querySelector('.calc-form-live .js-alert-danger');

	const calc = () => {
		if (weight.value && height.value && age.value) {
			formAlertSuccess.innerText = `${Math.ceil((10 * weight.value) + (6.25 * height.value) - (5 * age.value) + 5)} ккал/сутки`;
			formAlertSuccess.style.setProperty('display', 'block');
			formAlertDanger.style.setProperty('display', 'none');
		} else {
			formAlertSuccess.style.setProperty('display', 'none');
			formAlertDanger.style.setProperty('display', 'block');
		}
	}

	[...fields].forEach(element => {
		element.addEventListener('input', calc);
	});
});

/*---=== /Calc Live ===---*/