/* Таблица умножения */
let table = document.createElement("table")
document.body.append(table)

for (let i = 0; i < 10; i++) {
    let tr = document.createElement("tr")
    table.append(tr)

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

        tr.append(td)
        if (i === 0 || j === 0) {
            td.innerText = i + j
        } else {
            td.innerText = i * j
        }
        td.style.border = "1px solid black"
        td.style.padding = "7px"
    }
}

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

let backlight = table.querySelectorAll("td")
let row = table.querySelectorAll("tr")

let activeCellIndex = null;

backlight.forEach(tdOn => {
    tdOn.onmousemove = function () {
        this.style.backgroundColor = "red"
        activeCellIndex = this.cellIndex;
    }
})

backlight.forEach(tdOut => {
    tdOut.onmouseout = function () {
        this.style.backgroundColor = "white"
        activeCellIndex = null
    }

}
)

/* Подсветить стену и столбец */

row.forEach(rowOn => rowOn.onmousemove = function () {
    this.querySelectorAll("td").forEach(elem => elem.style.borderColor = 'red');
    row.forEach(elem => elem.cells[activeCellIndex].style.borderColor = 'red')
})
row.forEach(rowOn => rowOn.onmouseout = function () {
    table.querySelectorAll("td").forEach(elem => elem.style.borderColor = 'black');
})

/* Расчет */

let calc1 = document.getElementById("calc1")
let calc2 = document.getElementById("calc2")

    calc.onclick = function () {
                alert(+calc1.value + +calc2.value);
            };

/* Расчет в реальном времени */

function calc() {
    result.value = (+calc1.value) + (+calc2.value)
}

calc1.oninput = calc
calc2.oninput = calc