//Таблица умножения
let body = document.querySelector(".body"); //Нахожу в разметке тег body, буду в нем отрисовывать таблицу

let table = document.createElement("table"); //Создания тега table

table.classList.add("table"); //Присваиваю таблице класс table для частичной стилизации из css

for(let i = 1; i < 10; i++) { //Цикл для отрисовки таблицы
    let tr = document.createElement("tr");

    for(let j = 1; j < 10; j++) {
        let td = document.createElement("td");

        td.textContent = i*j;

        tr.appendChild(td);
    }

    table.appendChild(tr);
}

body.appendChild(table);


//Подсветить ячейку
//Подсветить строку и столбец,
let allTd = document.querySelectorAll("td"); //Нахожу все td на странице что бы я мог навесить слушателей событий

let fillTheLineHorizontally = function(style, element) { //Эта функция будет каждому элементу td в строке добавляет атрибут style с переданным в него цветом 
    let allparentTdElement = element.parentElement.querySelectorAll("td");

    for(let itemElement of allparentTdElement) {
        itemElement.style = style;
    }
}

let fillTheLineVertically = function(style, element, index) { //Эта функция будет каждому элементу td в столбце добавляет атрибут style с переданным в него цветом, отличия от функции fillTheLineHorizontally состоит в том что fillTheLineVertically заходит в каждый элемент tr и красит один элемент td по индексу который я в нее передаю
    let mainTable = element.parentElement.parentElement;
    let mainTr = mainTable.querySelectorAll("tr");

    for(let mainItemTr of mainTr) {
        mainItemTr.children[index].style = style;
    }
}

for(item of allTd) { //Этот цикл навешивает слушатели событий на все td
    item.addEventListener("mouseover", function(evt) { //Отрисовка цвета при ховере
        let index = this.cellIndex;

        fillTheLineHorizontally("background-color: #f7d571;", this);
        fillTheLineVertically("background-color: #f7d571;", this, index)

        this.style = "background-color: #a8996a;";
    });
    item.addEventListener("mouseout", function() { //Удаление отрисовки когда ховер пропадает
        let index = this.cellIndex;

        fillTheLineHorizontally("", this);
        fillTheLineVertically("", this, index)
    });
}


//Calc
//Calc Live
//Я уже реализовал эти задачи в HW 01 для задания calc, данные обновляются динамически