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

let task1 = document.createElement("div");
document.body.append(task1);
task1.innerText = "Таблица умножения";
task1.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"

let table = document.createElement("table");
table.setAttribute("border", "1");
document.body.append(table);

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

    for (let x = 0; x < 10; x++) {
        let td = document.createElement("td");
        tr.append(td);
        let temp = x * y;
        if (x === 0) temp = y;
        else if (y === 0) temp = x;
        td.innerText = temp;
        // td.innerHTML(x * y);
        td.style.width = "50px";
        td.style.height = "25px";
        td.style.textAlign = "center";

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

        td.onmousemove = function () {
            this.style.background = "yellow";
        }

        td.onmouseout = function () {
            this.style.background = "none";
        }
    }
}


//  ____Тестовый вариант, чтобы разобраться_____

// document.write("<table width=60% border=1 cellspacing=0 cellpadding=4>")
// // document.write("<table  border=1 >")

// for (i = 0; i < 10; i++) {
//     if(i === 0) i=1
//     document.write("<tr>");
//     for (j = 0; j < 10; j++) {
//         if(i === 0) ++j
//         document.write("<td>" + (j * i) + "</td>");
//     }
//     document.write("</tr>");
// }

// document.write("</table>")

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

let task2 = document.createElement("div");
document.body.append(task2);
task2.innerText = "Подсветить строку и столбец";
task2.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"

function light() {
    let table = document.createElement("table");
    table.setAttribute("border", "1");
    document.body.append(table);

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

        for (let x = 0; x < 10; x++) {
            let td = document.createElement("td");
            tr.append(td);
            let temp = x * y;
            if (x === 0) temp = y;
            else if (y === 0) temp = x;
            td.innerText = temp;
            // td.innerHTML(x * y);
            td.style.width = "50px";
            td.style.height = "25px";
            td.style.textAlign = "center";

            td.onmousemove = function () {

                for (let item of this.parentElement.children) {
                    item.style.background = "yellowgreen";
                }
                for (let item of this.parentElement.parentElement.children) {
                    for (let item2 of item.children) {
                        if (item2.cellIndex === this.cellIndex) {
                            item2.style.background = "yellowgreen";
                        }
                    }
                }
            }

            td.onmouseout = function () {

                for (let item of this.parentElement.children) {
                    item.style.background = "none";
                }
                for (let item of this.parentElement.parentElement.children) {
                    for (let item2 of item.children) {
                        if (item2.cellIndex === this.cellIndex) {
                            item2.style.background = "none";
                        }
                    }
                }
            }
        }
    }
}

light();

// _______________________Выбор ячейки_____________________________

let task3 = document.createElement("div");
document.body.append(task3);
task3.innerText = "Выбор ячейки (сделал для практики)";
task3.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"

table = document.createElement("table");
table.setAttribute("border", "1");
document.body.append(table);

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

    for (let x = 0; x < 10; x++) {
        let td = document.createElement("td");
        tr.append(td);
        let temp = x * y;
        if (x === 0) temp = y;
        else if (y === 0) temp = x;
        td.innerText = temp;
        td.style.width = "50px";
        td.style.height = "25px";
        td.style.textAlign = "center";

        let flag = false;

        td.onclick = function () {
            if (!flag) {
                this.style.background = "blue";
                this.style.color = "#d1e819"
            } else {
                this.style.background = "none";
                this.style.color = "black"
            }
            flag = !flag;
        }
    }
}

// ----------------------------------------------Calc------------------------------------------------------------------

let task4 = document.createElement("div");
document.body.append(task4);
task4.innerText = "Calc";
task4.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"

let num1 = document.createElement("input");
let num2 = document.createElement("input");
let result = document.createElement("div");
let calc = document.createElement("button");
let check = document.createElement("input");

num1.setAttribute("id", "1");
num1.setAttribute("type", "number");
num1.setAttribute("placeholder", "0");
num2.setAttribute("id", "2");
num2.setAttribute("type", "number");
num2.setAttribute("placeholder", "0");
result.setAttribute("id", "res");
calc.setAttribute("id", "button");
check.setAttribute("id", "checkbox");
check.setAttribute("type", "checkbox");

document.body.append(num1);
document.body.append(num2);
document.body.append(result);
document.body.append(calc);
document.body.append(check);

calc.style = "height: 50px; width: 150px; background: #6290d0";
calc.innerHTML = "Calculate"
result.style = "height: 50px; width: 150px; background: #fff; border: 2px solid";

calc.onclick = () => {
    result.innerText = num1.value + num2.value;
}