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