Homeworks_Oleksii.L/Homework_18/DOM1.js

// Таблиця множення + підсвічування ячейки ---------------------------------------------------------------------------------;
{
  let myTable = document.createElement("table");
  document.body.append(myTable);
  table.className = "Cross";
  for (let i = 1; i <= 10; i++) {
    let tr = document.createElement("tr");
    myTable.appendChild(tr);
    i % 2 === 0
      ? (tr.style.backgroundColor = "green")
      : (tr.style.backgroundColor = "red");
    for (let j = 1; j <= 10; j++) {
      let td = document.createElement("td");
      td.onmouseover = function (event) {
        td.style.backgroundColor = "blue";
      };
      td.onmouseout = function (event) {
        td.style.backgroundColor = "";
      };
      td.style.border = "1px solid black";
      td.style.textAlign = "center";
      td.style.padding = "10px";
      tr.appendChild(td);
      td.innerText = i * j;
    }
  }
}

// Підсвічування строки та стовпця----------------------------------------------------------------------------------------------;
{
  let yourTable = document.createElement("table");
  document.body.append(yourTable);

  for (let i = 1; i <= 10; i++) {
    let tr = document.createElement("tr");
    yourTable.appendChild(tr);
    for (let j = 1; j <= 10; j++) {
      let td = document.createElement("td");
      td.style.border = "1px solid black";
      yourTable.style.borderCollapse = "collapse";
      td.style.textAlign = "center";
      td.style.padding = "10px";
      tr.appendChild(td);
      td.innerText = i * j;
    }
  }
  const changeBg = (event, color) => {
    const target = event.target;
    if (target.tagName === "TD") {
      target.style.backgroundColor = color;
      target.parentNode.style.backgroundColor = color;
      const index = event.srcElement.cellIndex;
      const rows = document.querySelectorAll("tr");
      rows.forEach(
        (tr) => (tr.childNodes[index].style.backgroundColor = color)
      );
    }
  };

  const defaultCol = (event) => {
    myTable.childNodes.style.backgroundColor = "";
  };

  myTable.onmouseover = (event) => changeBg(event, "yellow");
  myTable.onmouseout = (event) => changeBg(event, "");
}

// Calc------------------------------------------------------------------------------------------------------------------------------;

{
  let calculator = document.getElementById("calc");

  let breakFa = document.getElementById("breakfast");
  let lunch = document.getElementById("lunch");
  let dinner = document.getElementById("dinner");
  let result = document.getElementById("res");

  calculator.onclick = function () {
    result.innerText = +breakFa.value + +lunch.value + +dinner.value;
    result.style.backgroundColor = "green";
  };
}

// Calc Live-------------------------------------------------------------------------------------------------------------------------;

{
  let breakFa = document.getElementById("breakfast");
  let lunch = document.getElementById("lunch");
  let dinner = document.getElementById("dinner");
  let result = document.getElementById("res");
  function calc() {
    result.innerText = +breakFa.value + +lunch.value + +dinner.value;
    result.style.backgroundColor = "";
  }

  breakFa.oninput = calc;
  lunch.oninput = calc;
  dinner.oninput = calc;
}