Homework/07/script.js

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

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"
task1.style = "border: 2px solid;  text-align: center; margin: 15px 0"

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

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; text-align: center; margin: 15px 0"

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

    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; text-align: center; margin: 15px 0"

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

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; text-align: 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");
let wrapper = document.createElement("div")

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(wrapper);
wrapper.append(num1);
wrapper.append(num2);
wrapper.append(result);
wrapper.append(calc);
wrapper.append(check);
// document.write("shc");
wrapper.append('Automation Calculation');
wrapper.style = "display: flex; justify-content: space-around";
// document.body.insertAdjacentHTML("beforeEnd", 'abrakadabra')

// 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;
    result.innerText = (+num1.value) + (+num2.value);
}

check.oninput = () => {
    if(check.checked) {
        calc.setAttribute("disabled", "disabled");
        num1.oninput = num2.oninput = calc.onclick;
        calc.onclick();
    }
    else {
        calc.removeAttribute("disabled");
        num1.oninput = num2.oninput = null;
    }
}