// Таблиця множення + підсвічування ячейки ---------------------------------------------------------------------------------; { 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; }