javascript-tutorial · dolgachio · Mar 26, 2022 · Feb 7, 2022 · Feb 16, 2022 · Mar 1, 2022
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/index.html
@@ -9,13 +9,13 @@
 <body>
 
   <ul>
-    <li>Click the div to edit.</li>
-    <li>Enter or blur saves the result.</li>
+    <li>Клікніть на div щоб відредагувати.</li>
+    <li>Натискання Enter або втрата фокусу збереже вміст поля введення.</li>
   </ul>
 
-  HTML is allowed.
+  HTML дозволено.
 
-  <div id="view" class="view">Text</div>
+  <div id="view" class="view">Текст</div>
 
   <script>
     let area = null;

diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css
@@ -14,12 +14,12 @@
 }
 
 .edit {
-  /* replace padding with border (still 3px not to shift the contents) */
+  /* замінити padding на border (3px щоб не зміщувати вміст) */
   border: 3px solid blue;
   padding: 0px;
 }
 
 .edit:focus {
-  /* remove focus border in Safari */
+  /* позбутися рамки при фокусуванні в Safari */
   outline: none;
 }
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/index.html
@@ -9,18 +9,18 @@
 <body>
 
   <ul>
-    <li>Click the div to edit.</li>
-    <li>Enter or blur saves the result.</li>
+    <li>Клікніть на div щоб відредагувати.</li>
+    <li>Натискання Enter або втрата фокусу збереже вміст поля введення.</li>
   </ul>
 
-  HTML is allowed.
+  HTML дозволено.
 
-  <div id="view" class="view">Text</div>
+  <div id="view" class="view">Текст</div>
 
   <script>
-    // ...your code...
-    // Note: <textarea> should have class="edit"
-    // my.css has styles to make it the same size as div
+    // ...ваш код...
+    // Зауважте: елемент <textarea> повинен мати class="edit"
+    // в my.css є стилі, які зроблять його такого ж розміру як і div 
   </script>
 
 </body>

diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css
@@ -14,12 +14,12 @@
 }
 
 .edit {
-  /* replace padding with border (still 3px not to shift the contents) */
+  /* замінити padding на border (3px щоб не зміщувати вміст) */
   border: 3px solid blue;
   padding: 0px;
 }
 
 .edit:focus {
-  /* remove focus border in Safari */
+  /* позбутися рамки при фокусуванні в Safari */
   outline: none;
 }
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Editable div
+# div, який можна відредагувати
 
-Create a `<div>` that turns into `<textarea>` when clicked.
+Створіть `<div>`, який при кліканні на ньому, перетворюється на `<textarea>`.
 
-The textarea allows to edit the HTML in the `<div>`.
+Текстова область дозволяє редагувати HTML всередині `<div>`.
 
-When the user presses `key:Enter` or it loses focus, the `<textarea>` turns back into `<div>`, and its content becomes HTML in `<div>`.
+Коли користувач натискає `key:Enter` або `<textarea>` втрачає фокус, тоді знову з’являється `<div>`, який містить в собі HTML введений в `<textarea>`.
 
 [demo src="solution"]
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md
@@ -1,5 +1,5 @@
 
-1. On click -- replace `innerHTML` of the cell by `<textarea>` with same sizes and no border. Can use JavaScript or CSS to set the right size.
-2. Set `textarea.value` to `td.innerHTML`.
-3. Focus on the textarea.
-4. Show buttons OK/CANCEL under the cell, handle clicks on them.
+1. По кліку -- замінити `innerHTML` клітини на `<textarea>` того ж розміру, без рамки. Задати розміри можна як в CSS так і в JavaScript.
+2. Взяти значення `textarea.value` з `td.innerHTML`.
+3. Встановити фокус в текстову область.
+4. Показати кнопки ЗГОДА/ВІДМІНА під клітиною, опрацювати кліки на них.
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css
@@ -1,4 +1,4 @@
-/* common styles for the table, no need to modify these */
+/* загальні стилі для таблиці, немає потреби редагувати */
 
 th {
   text-align: center;

diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html
@@ -10,61 +10,61 @@
   <link rel="stylesheet" href="my.css">
 
 
-  <p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
+  <p>Клікніть на клітину щоб відредагувати. Натисніть ЗГОДА або ВІДМІНА щоб завершити.</p>
 
   <table id="bagua-table">
     <tr>
-      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+      <th colspan="3">Таблиця<em>Bagua</em>: Напрям, Елемент, Колір, Значення</th>
     </tr>
     <tr>
-      <td class="nw"><strong>Northwest</strong>
-        <br>Metal
-        <br>Silver
-        <br>Elders
+      <td class="nw"><strong>Північний захід</strong>
+        <br>Метал
+        <br>Срібло
+        <br>Старійшини
       </td>
-      <td class="n"><strong>North</strong>
-        <br>Water
-        <br>Blue
-        <br>Change
+      <td class="n"><strong>Північ</strong>
+        <br>Вода
+        <br>Синій
+        <br>Зміни
       </td>
-      <td class="ne"><strong>Northeast</strong>
-        <br>Earth
-        <br>Yellow
-        <br>Direction
+      <td class="ne"><strong>Північний схід</strong>
+        <br>Земля
+        <br>Жовтий
+        <br>Напрям
       </td>
     </tr>
     <tr>
-      <td class="w"><strong>West</strong>
-        <br>Metal
-        <br>Gold
-        <br>Youth
+      <td class="w"><strong>Захід</strong>
+        <br>Метал
+        <br>Золото
+        <br>Молодість
       </td>
-      <td class="c"><strong>Center</strong>
-        <br>All
-        <br>Purple
-        <br>Harmony
+      <td class="c"><strong>Центр</strong>
+        <br>Все
+        <br>Багряний
+        <br>Гармонія
       </td>
-      <td class="e"><strong>East</strong>
-        <br>Wood
-        <br>Blue
-        <br>Future
+      <td class="e"><strong>Схід</strong>
+        <br>Дерево
+        <br>Синій
+        <br>Майбутнє
       </td>
     </tr>
     <tr>
-      <td class="sw"><strong>Southwest</strong>
-        <br>Earth
-        <br>Brown
-        <br>Tranquility
+      <td class="sw"><strong>Південний захід</strong>
+        <br>Земля
+        <br>Коричневий
+        <br>Спокій
       </td>
-      <td class="s"><strong>South</strong>
-        <br>Fire
-        <br>Orange
-        <br>Fame
+      <td class="s"><strong>Південь</strong>
+        <br>Вогонь
+        <br>Помаранчевий
+        <br>Слава
       </td>
-      <td class="se"><strong>Southeast</strong>
-        <br>Wood
-        <br>Green
-        <br>Romance
+      <td class="se"><strong>Південний схід</strong>
+        <br>Дерево
+        <br>Зелений
+        <br>Роман
       </td>
     </tr>
 

diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/my.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/my.css
@@ -4,13 +4,13 @@
   padding: 0;
   display: block;
 
-  /* remove resizing handle in Firefox */
+  /* заборонити змінювати розмір в Firefox */
   resize: none;
 
-  /* remove outline on focus in Chrome */
+  /* позбутися рамки при фокусуванні в Chrome */
   outline: none;
 
-  /* remove scrollbar in IE */
+  /* позбутися прокрутки в IE */
   overflow: auto;
 }
 

diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js
@@ -4,7 +4,7 @@ let editingTd;
 
 table.onclick = function(event) {
 
-  // 3 possible targets
+  // 3 можливі цілі
   let target = event.target.closest('.edit-cancel,.edit-ok,td');
 
   if (!table.contains(target)) return;
@@ -14,7 +14,7 @@ table.onclick = function(event) {
   } else if (target.className == 'edit-ok') {
     finishTdEdit(editingTd.elem, true);
   } else if (target.nodeName == 'TD') {
-    if (editingTd) return; // already editing
+    if (editingTd) return; // вже редагується
 
     makeTdEditable(target);
   }
@@ -27,7 +27,7 @@ function makeTdEditable(td) {
     data: td.innerHTML
   };
 
-  td.classList.add('edit-td'); // td is in edit state, CSS also styles the area inside
+  td.classList.add('edit-td'); // td в режимі редагування, CSS також стилізує область всередині
 
   let textArea = document.createElement('textarea');
   textArea.style.width = td.clientWidth + 'px';
@@ -40,7 +40,7 @@ function makeTdEditable(td) {
   textArea.focus();
 
   td.insertAdjacentHTML("beforeEnd",
-    '<div class="edit-controls"><button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button></div>'
+    '<div class="edit-controls"><button class="edit-ok">ЗГОДА</button><button class="edit-cancel">ВІДМІНА</button></div>'
   );
 }
 

diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css
@@ -1,4 +1,4 @@
-/* common styles for the table, no need to modify these */
+/* загальні стилі для таблиці, немає потреби редагувати */
 
 th {
   text-align: center;

diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/index.html
@@ -10,61 +10,61 @@
   <link rel="stylesheet" href="my.css">
 
 
-  <p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
+  <p>Клікніть на клітину щоб відредагувати. Натисніть ЗГОДА або ВІДМІНА щоб завершити.</p>
 
   <table id="bagua-table">
     <tr>
-      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+      <th colspan="3">Таблиця<em>Bagua</em>: Напрям, Елемент, Колір, Значення</th>
     </tr>
     <tr>
-      <td class="nw"><strong>Northwest</strong>
-        <br>Metal
-        <br>Silver
-        <br>Elders
+      <td class="nw"><strong>Північний захід</strong>
+        <br>Метал
+        <br>Срібло
+        <br>Старійшини
       </td>
-      <td class="n"><strong>North</strong>
-        <br>Water
-        <br>Blue
-        <br>Change
+      <td class="n"><strong>Північ</strong>
+        <br>Вода
+        <br>Синій
+        <br>Зміни
       </td>
-      <td class="ne"><strong>Northeast</strong>
-        <br>Earth
-        <br>Yellow
-        <br>Direction
+      <td class="ne"><strong>Північний схід</strong>
+        <br>Земля
+        <br>Жовтий
+        <br>Напрям
       </td>
     </tr>
     <tr>
-      <td class="w"><strong>West</strong>
-        <br>Metal
-        <br>Gold
-        <br>Youth
+      <td class="w"><strong>Захід</strong>
+        <br>Метал
+        <br>Золото
+        <br>Молодість
       </td>
-      <td class="c"><strong>Center</strong>
-        <br>All
-        <br>Purple
-        <br>Harmony
+      <td class="c"><strong>Центр</strong>
+        <br>Все
+        <br>Багряний
+        <br>Гармонія
       </td>
-      <td class="e"><strong>East</strong>
-        <br>Wood
-        <br>Blue
-        <br>Future
+      <td class="e"><strong>Схід</strong>
+        <br>Дерево
+        <br>Синій
+        <br>Майбутнє
       </td>
     </tr>
     <tr>
-      <td class="sw"><strong>Southwest</strong>
-        <br>Earth
-        <br>Brown
-        <br>Tranquility
+      <td class="sw"><strong>Південний захід</strong>
+        <br>Земля
+        <br>Коричневий
+        <br>Спокій
       </td>
-      <td class="s"><strong>South</strong>
-        <br>Fire
-        <br>Orange
-        <br>Fame
+      <td class="s"><strong>Південь</strong>
+        <br>Вогонь
+        <br>Помаранчевий
+        <br>Слава
       </td>
-      <td class="se"><strong>Southeast</strong>
-        <br>Wood
-        <br>Green
-        <br>Romance
+      <td class="se"><strong>Південний схід</strong>
+        <br>Дерево
+        <br>Зелений
+        <br>Роман
       </td>
     </tr>
 

diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css
@@ -1 +1 @@
-/* your styles */
+/* ваші стилі */
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js
@@ -1,3 +1,3 @@
 let table = document.getElementById('bagua-table');
 
-/* your code */
+/* ваш код */
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Edit TD on click
+# Редагувати TD по кліку
 
-Make table cells editable on click.
+Створіть таблицю, клітини якої можна було б редагувати клікнувши на них.
 
-- On click -- the cell should become "editable" (textarea appears inside), we can change HTML. There should be no resize, all geometry should remain the same.
-- Buttons OK and CANCEL appear below the cell to finish/cancel the editing.
-- Only one cell may be editable at a moment. While a `<td>` is in "edit mode", clicks on other cells are ignored.
-- The table may have many cells. Use event delegation.
+- По кліку -- в клітині з’являється `<textarea>`, в якій можна редагувати вміст в форматі HTML. Висота та ширина клітини при цьому не змінюється.
+- Кнопки ЗГОДА та ВІДМІНА з’являються внизу клітини щоб підтвердити/відмінити зміни.
+- Одночасно можна редагувати лише одну клітину. Поки `<td>` в "режимі редагування", кліки на інших клітинах ігноруються.
+- В талиці може бути багато клітин. Використовуйте делегування подій.
 
-The demo:
+Демо:
 
 [iframe src="solution" height=400]