123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- /*---=== Таблица умножения ===---*/
- 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 ===---*/
|