andrey-shostik · KompanietsVV · May 14, 2018 · May 14, 2018 · May 16, 2018 · May 22, 2018
diff --git a/README.md b/README.md
@@ -1,16 +1,2 @@
 # JS-courses
-1. Выполнить задания и сделать ПР
-
-## Read
-
-[Селекторы DOM элементов](https://learn.javascript.ru/searching-elements-internals)
-
-[Навигация по DOM](https://learn.javascript.ru/traversing-dom)
-
-[Удаление и добавление элементов](https://learn.javascript.ru/modifying-document)
-
-[Браузерные события](https://learn.javascript.ru/events-and-interfaces)
-
-## DOM
-
-1. Нужно сделать поле из белых клеток (клетка может иметь размер около 28×28 пикселей). При клике на клетку она должна менять цвет на черный. Под таблицей должна быть кнопка «поменять цвета». При ее нажатии все цвета клеток меняются на противоположные. Делать поле удобно с помощью элемента <table>. Саму таблицу надо не вставить в исходный код, а сгенерировать и добавить в DOM страницы яваскриптом. Также надо сделать возможность что бы можно было вводить количество строк и столбцов.
+lesson9
diff --git a/index.html b/index.html
@@ -2,9 +2,11 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>title</title>
-    <script src="index.js" defer></script>
+    <title>JS courses</title>
 </head>
 <body>
+    <h1>JS courses</h1>
+    <h2>Lesson-9</h2>
+    <script src="lesson9.js" defer></script>
 </body>
 </html>
diff --git a/lesson9.js b/lesson9.js
@@ -0,0 +1,84 @@
+function initial() {
+    const rowLabel = document.createElement('label');
+    const rowNum = document.createElement('input');
+    const colNum = document.createElement('input');
+    const colLabel = document.createElement('label');
+    const confirm = document.createElement('button');
+    rowNum.setAttribute('type', 'text');
+    colNum.setAttribute('type', 'text');
+    rowLabel.innerHTML = 'Input number rows';
+    colLabel.innerHTML = 'Input number columns';
+    confirm.innerHTML = 'Confirm to create table';
+
+    document.body.appendChild(rowLabel);
+    rowLabel.appendChild(rowNum);
+    document.body.appendChild(colLabel);
+    colLabel.appendChild(colNum);
+    document.body.appendChild(confirm);
+
+    confirm.onclick = createTable;
+}
+
+function createTable() {
+    const myTable = document.createElement('table');
+    const tableBody = document.createElement('tbody');
+    const rNum = document.getElementsByTagName("input")[0];
+    const rowNum = rNum.value;
+    const cNum = document.getElementsByTagName("input")[1];
+    const colNum = cNum.value;
+
+    myTable.border = '1';
+
+    myTable.appendChild(tableBody);
+
+    for (let i = 0; i < rowNum; i++) {
+        const tr = document.createElement('tr');
+        tableBody.appendChild(tr);
+        for (let j = 0; j < colNum; j++) {
+            const td = document.createElement('td');
+            td.style.height = '28px';
+            td.style.width = '28px';
+            td.style.backgroundColor = '#FFFFFF';
+            tr.appendChild(td);
+        }
+    }
+
+    document.body.appendChild(myTable);
+    myTable.onclick = function (event) {
+        const target = event.target;
+        while (target !== myTable) {
+            if (target.tagName === 'TD') {
+                if (target.style.backgroundColor === 'rgb(255, 255, 255)') {
+                    target.style.backgroundColor = '#000000';
+                } else {
+                    target.style.backgroundColor = '#FFFFFF';
+                }
+
+                return;
+            }
+            this.target = target.parentNode;
+        }
+    }
+}
+
+function createBut() {
+    const changeCellsColor = document.createElement('button');
+    changeCellsColor.innerHTML = 'Invert cells color';
+    document.body.appendChild(changeCellsColor);
+    changeCellsColor.onclick = changeColorTable;
+}
+
+function changeColorTable() {
+    const td = document.getElementsByTagName('td');
+    for (let i = 0; i < td.length; i++) {
+        if (td[i].style.backgroundColor === 'rgb(255, 255, 255)') {
+            td[i].style.backgroundColor = '#000000';
+        } else {
+            td[i].style.backgroundColor = '#FFFFFF';
+        }
+    }
+}
+
+initial();
+createBut();
+