homework/07/src/App.js

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

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

const space1 = document.createElement('br');
document.body.appendChild(space1);

const task1 = document.createElement('div');
document.body.appendChild(task1);
task1.setAttribute('id', 'task-1');

var table = document.createElement('table');
table.setAttribute('border', '2');
var tableBody = document.createElement('tbody');


for (let i = 1; i < 10; i++) {
    var tr = document.createElement('tr');
    for (let j = 1; j < 10; j++) {
        var td = document.createElement('td');
        var tdText = document.createTextNode(`${i * j}`);
        td.appendChild(tdText);
        tr.appendChild(td);
    }
    tableBody.appendChild(tr);
}
table.appendChild(tableBody);
task1.appendChild(table);

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

// Читкоды:

// в обработчик события в качестве this передается элемент, на котором событие произошло;

// td.onmouseover = function (event) {
//     console.log(this, event) //event -   это объект с информацией о событии,
//     //передается первым параметром в обработчик события.
// }

// Внимание: :hover это читерство :-)

let tdarr = document.querySelectorAll("td");

tdarr.forEach((tdMove) => (tdMove.onmousemove = function () {
    this.style.backgroundColor = "gray";
}));

tdarr.forEach((tdOut) => (tdOut.onmouseout = function () {
    this.style.backgroundColor = "transparent";
}));

// Подсветить строку и столбец,в которой находится подсвеченная ячейка. 
// Используйте parentElement (родительский элемент элемента DOM), и список его детей: children.

// Читкоды:

// * в обработчик события в качестве this передается элемент, на котором событие произошло;
// * у td есть свойство cellIndex, в котором лежит номер ячейки;
// * у tr, аналогично есть свойство rowIndex - номер строки;

tdarr.forEach((tdMove) => (tdMove.onmousemove = function () {
    this.parentElement.style.backgroundColor = "lightgray";
    let index = this.cellIndex;
    let column = document.querySelectorAll("tr");
    column.forEach((columns) => (columns.children[index].style.backgroundColor = "lightgray"));
    this.style.backgroundColor = "gray";
}));

tdarr.forEach((tdOut) => (tdOut.onmouseout = function () {
    this.parentElement.style.backgroundColor = "transparent";
    let index = this.cellIndex;
    let column = document.querySelectorAll("tr");
    column.forEach((columns) => (columns.children[index].style.backgroundColor = "transparent"));
    this.style.backgroundColor = "transparent";
}));

// Calc

// Сделайте ваш калькулятор из первых занятий используя DOM и элементы input (в т. ч. type="number" для чисел) 
// Каждому полю ввода присвойте тот или иной id для обращения в обрабочтике события.
// Для запуска раcчета используйте, например <button id="calc"> и

// calc.onclick = function(){
//     alert((+someIdOfInput1.value) + (+someIdOfInput2.value)) //просуммировали два поля ввода с id someIdOfInput1 и someIdOfInput2 
// }

// Также можете создать поле ввода для результата и записывать результат в value этого поля.

const space2 = document.createElement('br');
document.body.appendChild(space2);

const task2 = document.createElement('div');
task2.style.width = '300px';
document.body.appendChild(task2);

let calculator = document.createElement('form');
task2.appendChild(calculator);
task2.setAttribute('id', 'task-2');

let result = document.createElement('input');
result.style.width = '292px';
result.style.height = '100px';
result.style.color = 'gray';
result.style.fontSize = '14px'
calculator.appendChild(result);

let inputField1 = document.createElement('input');
inputField1.setAttribute('type', 'number');
inputField1.style.width = '142px';
inputField1.style.height = '50px';
calculator.appendChild(inputField1);

let inputField2 = document.createElement('input');
inputField2.setAttribute('type', 'number');
inputField2.style.width = '142px';
inputField2.style.height = '50px';
calculator.appendChild(inputField2);

let sum = document.createElement('button');
sum.innerText = '+';
sum.style.width = '75px';
sum.style.height = '50px';
calculator.appendChild(sum);

let sub = document.createElement('button');
sub.innerText = '-';
sub.style.width = '75px';
sub.style.height = '50px';
calculator.appendChild(sub);

let mult = document.createElement('button');
mult.innerText = '*';
mult.style.width = '75px';
mult.style.height = '50px';
calculator.appendChild(mult);

let divide = document.createElement('button');
divide.innerText = '/';
divide.style.width = '75px';
divide.style.height = '50px';
calculator.appendChild(divide);

sum.onclick = () => {
    result.value = +inputField1.value + (+inputField2.value);
};

sub.onclick = () => {
    result.value = +inputField1.value - (+inputField2.value);
};

mult.onclick = () => {
    result.value = +inputField1.value * (+inputField2.value);
};

divide.onclick = () => {
    result.value = +inputField1.value / (+inputField2.value);
};

// Calc Live

// Сделайте расчет живым, т. е. обновляющимся по событию oninput каждого поля ввода, влияющего на результат. 
// Нет смысла копировать одну и ту же калькуляцию, поэтому вначале задекларируйте функцию расчета, 
// а потом присвойте её в качестве обработчика события в каждом поле ввода:

// function calc() {
//     result.value = (+input1.value) + (+input2.value)
// }

// input1.oninput = calc
// input2.oninput = calc

const space3 = document.createElement('br');
document.body.appendChild(space3);

const task3 = document.createElement('div');
task3.style.width = '300px';
document.body.appendChild(task3);

let liveCalculator = document.createElement('form');
task3.appendChild(liveCalculator);
task3.setAttribute('id', 'task-3');

let liveResult = document.createElement('input');
liveResult.style.width = '292px';
liveResult.style.height = '100px';
liveResult.style.color = 'gray';
liveResult.style.fontSize = '14px'
liveCalculator.appendChild(liveResult);

let liveInputField1 = document.createElement('input');
liveInputField1.setAttribute('type', 'number');
liveInputField1.style.width = '142px';
liveInputField1.style.height = '50px';
liveCalculator.appendChild(liveInputField1);

let liveInputField2 = document.createElement('input');
liveInputField2.style.width = '142px';
liveInputField2.style.height = '50px';
liveCalculator.appendChild(liveInputField2);

let liveSum = document.createElement('button');
liveSum.innerText = '+';
liveSum.style.width = '75px';
liveSum.style.height = '50px';
liveSum.style.backgroundColor = 'yellow';
liveSum.style.fontWeight = '900';
liveCalculator.appendChild(liveSum);

let liveSub = document.createElement('button');
liveSub.innerText = '-';
liveSub.style.width = '75px';
liveSub.style.height = '50px';
liveSub.style.backgroundColor = 'blue';
liveSub.style.fontWeight = '900'
liveCalculator.appendChild(liveSub);

let liveMult = document.createElement('button');
liveMult.innerText = '*';
liveMult.style.width = '75px';
liveMult.style.height = '50px';
liveMult.style.backgroundColor = 'red';
liveCalculator.appendChild(liveMult);

let liveDivide = document.createElement('button');
liveDivide.innerText = '/';
liveDivide.style.width = '75px';
liveDivide.style.height = '50px';
liveDivide.style.backgroundColor = 'green';
liveCalculator.appendChild(liveDivide);

liveSum.onclick = () => {
    liveResult.value = +liveInputField1.value + (+liveInputField2.value);
};

liveSub.onclick = () => {
    liveResult.value = +liveInputField1.value - (+liveInputField2.value);
};

liveMult.onclick = () => {
    liveResult.value = +liveInputField1.value * (+liveInputField2.value);
};

liveDivide.onclick = () => {
    liveResult.value = +liveInputField1.value / (+liveInputField2.value);
};

liveInputField1.oninput = () =>  {
    liveResult.value = liveInputField1.value;
    liveInputField2 = liveInputField2 || 0;
};

liveInputField2.oninput = () =>  {
    liveInputField1 = liveInputField1 || 0;
    liveResult.value = liveInputField2.value;
}