//1task
const table = document.createElement('table');

for (let i = 0; i <= 9; i++){
  let tr = document.createElement('tr');
  for (let j = 0; j <= 9; j++){
    let td = document.createElement('td');
    td.style.border = "1px solid gray"
    td.style.padding = "7px"
    let val = i * j;
    if (val === 0) {
      val = i || j;
    }
    td.innerHTML = val;
    tr.append(td);
  }
  table.append(tr);
}

document.body.append(table);

let tdSelect = document.querySelectorAll('td');
let trSelect = document.querySelectorAll('tr');
            
        tdSelect.forEach(function(td){
        td.addEventListener('mouseover', function(event) {
            let target = event.target;
            target.style.backgroundColor = 'lightblue';
            target.parentElement.style.backgroundColor = 'lightblue';
            let index = target.cellIndex;
            trSelect.forEach (tr => tr.children[index].style.backgroundColor = 'lightblue');
        })
            
        td.addEventListener('mouseout', function(event) {
            let target = event.target;
            target.style.backgroundColor = '';
            target.parentElement.style.backgroundColor = '';
            let index = target.cellIndex;
            trSelect.forEach (tr => tr.children[index].style.backgroundColor = '');
        })
        });

//2task
// const body = document.body
// const form = document.createElement("form")
// body.append(form)
// form.style.marginTop = "30px"

// let inputOil = document.createElement('input')
// let inputDistance = document.createElement('input')
// let inputButton = document.createElement('input')
// let result = document.createElement('div')
// let span = document.createElement('span')
// let p = document.createElement('p')
// inputOil.id = "inputOil"
// inputDistance.id = "inputDistance"
// inputButton.id = "calc"
// form.append(inputOil)
// form.append(inputDistance)
// form.append(inputButton)
// form.append(result)
// result.append(p)
// result.append(span)



// inputOil.type = "number"
// inputDistance.type = "number"
// inputButton.type = "button"

// inputOil.placeholder = "Введите количество израсходованного топлива"
// inputDistance.placeholder = "Введите дистанцию , которую вы проехали"
// calc.value = "Расчитать расход"
// p.innerText = "Расход составляет:"

// inputOil.style.width = "310px"
// inputOil.style.marginRight = "10px"
// inputDistance.style.width = "300px"
// inputDistance.style.marginRight = "20px"
// result.style.marginTop = "30px"

// calc.onclick = function () {
//   let resultFinish = (inputOil.value/inputDistance.value) * 100 + "л. бензина на 100км";
//   span.style.color = "red";
//   span.innerHTML  = resultFinish
// }

//3task

const body = document.body
const form = document.createElement("form")
body.append(form)
form.style.marginTop = "30px"

let inputOil = document.createElement('input')
let inputDistance = document.createElement('input')
let result = document.createElement('input')
inputOil.id = "inputOil"
inputDistance.id = "inputDistance"
result.id = "calc"
form.append(inputOil)
form.append(inputDistance)
form.append(result)

inputOil.type = "number"
inputDistance.type = "number"
result.type = "number"

inputOil.placeholder = "Введите количество израсходованного топлива"
inputDistance.placeholder = "Введите дистанцию , которую вы проехали"

inputOil.style.width = "310px"
inputOil.style.marginRight = "10px"
inputDistance.style.width = "300px"
inputDistance.style.marginRight = "20px"
result.style.marginTop = "30px"

calc.onclick = function () {
  let resultFinish = (inputOil.value/inputDistance.value) * 100 + "л. бензина на 100км";
  span.style.color = "red";
  span.innerHTML = resultFinish
}

function calc() {
  result.value = (inputOil.value) / (inputDistance.value) * 100
}

inputOil.oninput = calc
inputDistance.oninput = calc