homework/js_06_dom/main.js

//Таблица умножения
// let table = document.createElement('table');
// table.classList.add('bord');
// for (let r = 0; r < 10; r++){
//     let row = document.createElement('tr');
//     for(let c = 0; c < 10; c++){
//         let cell = document.createElement('td');
//         cell.classList.add('cell');
//         let val = r * c; 
//         if(val === 0){
//             val = r || c;
//         }
//     cell.innerHTML = val;
//     row.appendChild(cell);
//     }
//     table.appendChild(row);
// }
// document.body.appendChild(table);
// console.log(table);

//Подсветить ячейку
// let td = document.querySelectorAll('td');

// td.forEach((i) => {
//   i.onmouseover = () => i.style.backgroundColor = 'blue';
//   i.onmouseout = () => i.style.backgroundColor = '';
// });

//Подсветить строку и столбец
// let tr = document.querySelectorAll('tr');

// td.forEach((item, i) => {
//   item.onmouseover = (e) => {
//     let column = Array.from(item.parentElement.parentElement.children);
//     column.forEach((el, i) => {
//       if (el.children[i].cellIndex === item.cellIndex) {
//         Array.from(el.parentElement.children).forEach(elem => elem.children[i].style.backgroundColor = 'blue');
//       }
//     });
//   };
//   item.onmouseout = () => {
//     let column = Array.from(item.parentElement.parentElement.children);
//     column.forEach((el, i) => {
//       if (el.children[i].cellIndex === item.cellIndex) {
//         Array.from(el.parentElement.children).forEach(elem => elem.children[i].style.backgroundColor = '');
//         }
//     });
//   };
// });

// tr.forEach((item, i) => {
//   item.onmouseover = (e) => {
//     let rows = Array.from(item.children);
//     rows.forEach((el, i) => {
//         el.style.backgroundColor = 'blue';
//     });
//   };
//   item.onmouseout = () => {
//     let rows = Array.from(item.children);
//     rows.forEach((el, i) => {
//         el.style.backgroundColor = '';
//     });
//   };
// });

//Calc
let input1 = document.createElement('input');
input1.id = 'input1';
input1.type = 'number';
document.body.appendChild(input1);

let p1 = document.createElement('p');
p1.innerHTML = '+';
document.body.appendChild(p1);

let input2 = document.createElement('input');
input2.id = 'input2';
input2.type = 'number';
document.body.appendChild(input2);

let p2 = document.createElement('p');
p2.innerHTML = '=';
document.body.appendChild(p2);

let btn = document.createElement('button');
btn.id = 'btn';
btn.innerHTML = 'sum';
document.body.appendChild(btn);

btn.onclick = function () {
  ((+input1.value) + (+input2.value));
};

//Calc Live
let pRes = document.createElement('p');
function calc () {
  pRes.id = 'result';
  pRes.innerHTML = `Sum = ${((+input1.value) + (+input2.value))}`;
  document.body.appendChild(pRes);
}
input1.oninput = calc;
input2.oninput = calc;