07 + calc

07/script.js

@@ -1,5 +1,10 @@
 // ----------------------------------------------Таблица умножения------------------------------------------------------------------
 
+let task1 = document.createElement("div");
+document.body.append(task1);
+task1.innerText = "Таблица умножения";
+task1.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"
+
 let table = document.createElement("table");
 table.setAttribute("border", "1");
 document.body.append(table);
@@ -52,6 +57,11 @@ for (let y = 0; y < 10; y++) {
 
 // ---------------------------------------------Подсветить строку и столбец------------------------------------------------------------------
 
+let task2 = document.createElement("div");
+document.body.append(task2);
+task2.innerText = "Подсветить строку и столбец";
+task2.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"
+
 function light() {
     let table = document.createElement("table");
     table.setAttribute("border", "1");
@@ -73,8 +83,6 @@ function light() {
             td.style.height = "25px";
             td.style.textAlign = "center";
 
-            // -----------------Подсветить ячейку-------------------- 
-
             td.onmousemove = function () {
 
                 for (let item of this.parentElement.children) {
@@ -108,7 +116,12 @@ function light() {
 
 light();
 
-// Выбор ячейки
+// _______________________Выбор ячейки_____________________________
+
+let task3 = document.createElement("div");
+document.body.append(task3);
+task3.innerText = "Выбор ячейки (сделал для практики)";
+task3.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"
 
 table = document.createElement("table");
 table.setAttribute("border", "1");
@@ -133,8 +146,8 @@ for (let y = 0; y < 10; y++) {
 
         td.onclick = function () {
             if (!flag) {
-                this.style.background = "darkgrey";
-                this.style.color = "white"
+                this.style.background = "blue";
+                this.style.color = "#d1e819"
             } else {
                 this.style.background = "none";
                 this.style.color = "black"
@@ -146,3 +159,38 @@ for (let y = 0; y < 10; y++) {
 
 // ----------------------------------------------Calc------------------------------------------------------------------
 
+let task4 = document.createElement("div");
+document.body.append(task4);
+task4.innerText = "Calc";
+task4.style = "border: 2px solid; display: flex; justifyContent: center; alignItems: center; textAlign: center; margin: 15px 0"
+
+let num1 = document.createElement("input");
+let num2 = document.createElement("input");
+let result = document.createElement("div");
+let calc = document.createElement("button");
+let check = document.createElement("input");
+
+num1.setAttribute("id", "1");
+num1.setAttribute("type", "number");
+num1.setAttribute("placeholder", "0");
+num2.setAttribute("id", "2");
+num2.setAttribute("type", "number");
+num2.setAttribute("placeholder", "0");
+result.setAttribute("id", "res");
+calc.setAttribute("id", "button");
+check.setAttribute("id", "checkbox");
+check.setAttribute("type", "checkbox");
+
+document.body.append(num1);
+document.body.append(num2);
+document.body.append(result);
+document.body.append(calc);
+document.body.append(check);
+
+calc.style = "height: 50px; width: 150px; background: #6290d0";
+calc.innerHTML = "Calculate"
+result.style = "height: 50px; width: 150px; background: #fff; border: 2px solid";
+
+calc.onclick = () => {
+    result.innerText = num1.value + num2.value;
+}