HomeWorks/HW7 DOM Base/script.js

//DOM

/* Таблица умножения
Сделать таблицу умножения, используя DOM createElement 
и innerText. Создайте таблицу, вложенные строки и ячейки в циклах.  */


let root = document.querySelector('.root');

for (let i = 0; i < 10; i++) {

    let tr = document.createElement('tr');

    root.append(tr);

    for (let k = 0; k < 10; k++) {

        let td = document.createElement('td');

        if (i === 0) {
            td.innerText = k;
            tr.append(td);
        } else if (k === 0) {
            td.innerText = i;
            tr.append(td);
        } else {
            td.innerText = i * k;
            tr.append(td);
        }
    }
}

/* Подсветить ячейку над которой находится курсор мыши.
 Используйте события mouseover и mouseout, 
 и style.backgroundColor для подсветки.
 */

let td = document.querySelectorAll('td');

/* td.forEach((i) => {
    i.onmouseover = () => i.style.backgroundColor = 'yellow';
    i.onmouseout = () => i.style.backgroundColor = '';
})  */

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



td.forEach((item, i) => {
    item.onmouseover = (e) => {

        item.style.backgroundColor = 'yellow';
        item.parentNode.style.backgroundColor = 'green';
        let trCollect = Array.from(item.parentElement.parentElement.children);
        trCollect.forEach((el, i) => {
            // console.log(el.children[i].cellIndex);
            //console.log(item.cellIndex);
            if (el.children[i].cellIndex === item.cellIndex) {
                Array.from(el.parentElement.children).forEach(elem => elem.children[i].style.backgroundColor = 'red');
            }
        });
    };

    item.onmouseout = () => {
        item.style.backgroundColor = '';
        item.parentNode.style.backgroundColor = '';
        let trCollect = Array.from(item.parentElement.parentElement.children);
        trCollect.forEach((el, i) => {
            if (el.children[i].cellIndex === item.cellIndex) {
                Array.from(el.parentElement.children).forEach(elem => elem.children[i].style.backgroundColor = '');
            }

        });
    }
})





//Calc + Calc Live 


let fuel = document.querySelector('[name = "liters"]'),
    way = document.querySelector('[name = "km"]'),
    checkLiter = document.querySelector('#liter'),
    checkUah = document.querySelector('#uah'),
    priceInput = document.querySelector('.price__item'),
    price = document.querySelector('[name = "price"]'),
    reset = document.querySelector('.btn'),
    outer = document.querySelector('.outer');


function calcMyConsumption(fuelLiters, kmWay, pricePerLiter) {
    if (fuelLiters && kmWay && pricePerLiter) {
        pricePerLiter = price.value;
        const result = (fuelLiters / kmWay) * 100 * pricePerLiter;
        outer.textContent = `Ваш затраты на 100км пути ${result.toFixed(2)} грн`;
        reset.style.display = 'block';

    } else {
        const result = (fuelLiters / kmWay) * 100;
        outer.textContent = `Ваш расход на 100км пути ${result.toFixed(2)} литров`;
        reset.style.display = 'block';

    }
}

checkLiter.addEventListener('change', () => {
    if (checkLiter.checked && fuel.value && way.value) {
        priceInput.style.display = 'none';
        calcMyConsumption(fuel.value, way.value);

    } else {
        outer.textContent = `Заполните все формы`;

    }
})

// add event onchange 
checkUah.addEventListener('change', () => {
    if (checkUah.checked && fuel.value && way.value) {
        priceInput.style.display = 'block';
        price.value = '';
        outer.textContent = `Внесите цену`;
        price.addEventListener('input', () => calcMyConsumption(fuel.value, way.value, price));

    } else {
        outer.textContent = `Заполните данные формы`;

    }
})

reset.addEventListener('click', () => {
    fuel.value = '';
    way.value = '';
    price.value = '';
    outer.textContent = '';
    priceInput.style.display = 'none';
    reset.style.display = 'none';


})