js4online_homework/07/main.js

// // Таблица умножения + Подсветить ячейку
// let table = document.createElement('table');
// for (let i = 1; i < 10; i++) {
//    let row = document.createElement('tr')
//    for (let j = 1; j < 10; j++) {
//       let td = document.createElement('td')
//       td.onmouseover = function () {
//          this.style.backgroundColor = 'red'
//       }
//       td.onmouseout = function () {
//          i % 2 !== 0 ? this.style.backgroundColor = '#e9e9e9' : this.style.backgroundColor = 'white'
//       }
//       if (i % 2 !== 0) { td.style.backgroundColor = '#e9e9e9' }
//       td.innerText = j * i
//       td.style.border = '1px solid #d3d3d3'
//       td.style.padding = '10px'
//       td.style.fontSize = '20px'
//       td.style.textAlign = 'center'
//       row.appendChild(td)
//    }
//    table.appendChild(row)
// }
// document.body.appendChild(table)


// Подсветить строку и столбец
let table = document.getElementById('table');
for (let i = 1; i < 10; i++) {
   let row = document.createElement('tr')
   for (let j = 1; j < 10; j++) {
      let td = document.createElement('td')
      td.onmouseover = function () {
         this.parentElement.style.backgroundColor = 'yellow'
         let index = this.cellIndex;
         let col = document.querySelectorAll('#table > tr');
         col.forEach((row) => row.children[index].style.backgroundColor = 'yellow');
         this.style.backgroundColor = 'red';
      }
      td.onmouseout = function () {
         this.style.backgroundColor = 'white'
         this.parentElement.style.backgroundColor = ''
         let index = this.cellIndex;
         let col = document.querySelectorAll('#table > tr');
         col.forEach((row) => row.children[index].style.backgroundColor = '');
      }
      td.innerText = j * i
      td.style.border = '1px solid #d3d3d3'
      td.style.padding = '10px'
      td.style.fontSize = '20px'
      td.style.textAlign = 'center'
      row.appendChild(td)
   }
   table.appendChild(row)
}
document.body.appendChild(table)

let secondtable = document.getElementById('table1');
for (let i = 1; i < 10; i++) {
   let row = document.createElement('tr')
   for (let j = 1; j < 10; j++) {
      let td = document.createElement('td')
      td.onmouseover = function () {
         this.parentElement.style.backgroundColor = 'yellow'
         let index = this.cellIndex;
         let col = document.querySelectorAll('#table1 > tr');
         col.forEach((row) => row.children[index].style.backgroundColor = 'yellow');
         this.style.backgroundColor = 'red';
      }
      td.onmouseout = function () {
         this.style.backgroundColor = 'white'
         this.parentElement.style.backgroundColor = ''
         let index = this.cellIndex;
         let col = document.querySelectorAll('#table1 > tr');
         col.forEach((row) => row.children[index].style.backgroundColor = '');
      }
      td.innerText = j * i
      td.style.border = '1px solid #d3d3d3'
      td.style.padding = '10px'
      td.style.fontSize = '20px'
      td.style.textAlign = 'center'
      row.appendChild(td)
   }
   secondtable.appendChild(row)
}
document.body.appendChild(secondtable)

// Calc
// let calc = document.getElementById("calc");
// let input1 = document.getElementById("input1");
// let input2 = document.getElementById("input2");
// calc.onclick = function () {
//    alert(`${(+input1.value) * (+input2.value)} km per week`);
// }

// Calc Live
let calc = document.getElementById("calc");
let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let result = document.getElementById("result");
let calc1 = function () {
   return result.innerText = (+input1.value) * (+input2.value);
}
input1.oninput = calc1
input2.oninput = calc1
calc.onclick = calc1