update with edits

Author: dandgerson

2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Скрытие сообщения с помощью делегирования
+# Спрячьте сообщения с помощью делегирования
 
-Дан список сообщений с кнопкой для удаления `[x]`. Заставьте кнопку работать.
+Дан список сообщений с кнопками для удаления `[x]`. Заставьте кнопки работать.
 
-В результате, должно работать вот так:
+В результате должно работать вот так:
 
 [iframe src="solution" height=420]
 
-P.S. Используйте делегирование событий. Один обработчик для всего.
+P.S. Используйте делегирование событий. Должен быть лишь один обработчик на элементе-контейнере для всего.

2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html

@@ -54,7 +54,7 @@
   </ul>
 
   <script>
-    // обернуть весь текст элементом <span>
+    // поместить все текстовые узлы в элемент <span>
     // он занимает только то место, которое необходимо для текста
     for (let li of tree.querySelectorAll('li')) {
       let span = document.createElement('span');

2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html

@@ -71,7 +71,7 @@
 
       let rowsArray = Array.from(tbody.rows);
 
-      // compare(a, b) сравнивает два ряда, колбэк для метода sort
+      // compare(a, b) сравнивает два ряда, нужен для сортировки
       let compare;
 
       switch (type) {

2-ui/2-events/03-event-delegation/3-sortable-table/task.md

@@ -2,9 +2,9 @@ importance: 4
 
 ---
 
-# Сортировка таблицы
+# Сортируемая таблица
 
-Сделать сортировку таблицы: при клике на элемент `<th>` должна происходить сортировка соответствующего столбца.
+Сделать таблицу сортируемой: при клике на элемент `<th>` строки таблицы должны сортироваться по соответствующему столбцу.
 
 Каждый элемент `<th>` имеет атрибут data-type:
 
@@ -32,7 +32,7 @@ importance: 4
 </table>
 ```
 
-В примере выше первый столбец содержит числа, а второй -- строки. Функция сотрировки должна это учитывать, ведь числа сортируются иначе чем строки.
+В примере выше первый столбец содержит числа, а второй -- строки. Функция сотрировки должна это учитывать, ведь числа сортируются иначе, чем строки.
 
 Сортировка должна поддерживать только типы `"string"` и `"number"`.
 

2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html

@@ -6,7 +6,7 @@
   <style>
     body {
       height: 2000px;
-      /* доавим body прокрутку, подсказка должна работать и с прокруткой */
+      /* добавим body прокрутку, подсказка должна работать и с прокруткой */
     }
 
     .tooltip {
@@ -31,7 +31,7 @@
   <button data-tooltip="эта подсказка должна быть длиннее, чем элемент">Короткая кнопка</button>
   <button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
 
-  <p>Прокрутите страницу, чтобы кнопки оказались у верхнего края, проверьте правильно ли выводятся подсказки.</p>
+  <p>Прокрутите страницу, чтобы кнопки оказались у верхнего края, а затем проверьте правильно ли выводятся подсказки.</p>
 
 
   <script>
@@ -40,11 +40,11 @@
     document.onmouseover = function(event) {
       let target = event.target;
 
-      // получим содержимое подсказки...
+      // если у нас есть подсказка...
       let tooltipHtml = target.dataset.tooltip;
       if (!tooltipHtml) return;
 
-      // ...создадим элемент подсказки
+      // ...создадим элемент для подсказки
 
       tooltipElem = document.createElement('div');
       tooltipElem.className = 'tooltip';

2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html

@@ -6,7 +6,7 @@
   <style>
     body {
       height: 2000px;
-      /* доавим body прокрутку, подсказка должна работать и с прокруткой */
+      /* добавим body прокрутку, подсказка должна работать и с прокруткой */
     }
 
     .tooltip {
@@ -32,7 +32,7 @@
   <button data-tooltip="эта подсказка должна быть длиннее, чем элемент">Короткая кнопка</button>
   <button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
 
-  <p>Прокрутите страницу, чтобы кнопки оказались у верхнего края, проверьте правильно ли выводятся подсказки.</p>
+  <p>Прокрутите страницу, чтобы кнопки оказались у верхнего края, а затем проверьте правильно ли выводятся подсказки.</p>
 
 
   <script>

2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md

@@ -18,11 +18,11 @@ importance: 5
 
 [iframe src="solution" height=200 border=1]
 
-В этой задаче можно полагать, что в элементе с атрибутом `data-tooltip` -- только текст, то есть нет подэлементов.
+В этой задаче можно полагать, что в элементе с атрибутом `data-tooltip` -- только текст, то есть нет вложенных тегов внутри..
 
 Детали оформления:
 
-- Подсказка не должна вылезать за границы экрана, в том числе если страница частично прокручена. Если нельзя показать сверху -- показывать снизу элемента.
+- Подсказка не должна вылезать за границы экрана, в том числе если страница частично прокручена, если нельзя показать сверху -- показывать снизу элемента.
 - Текст подсказки брать из значения атрибута `data-tooltip`. Это может быть произвольный HTML.
 
 Для решения вам понадобятся два события:

2-ui/2-events/03-event-delegation/article.md

@@ -1,9 +1,9 @@
 
 # Делегирование событий
 
-Всплытие и перехват событий позволяет реализовать один из самых важных приёмов разработки *делегирование*.
+Всплытие и перехват событий позволяет реализовать один из самых важных приёмов разработки -- *делегирование*.
 
-Идея в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому -- мы ставим один обработчик на их общего предка.
+Идея в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому, мы ставим один обработчик на их общего предка.
 
 Из него можно получить целевой элемент `event.target`, понять на каком именно потомке произошло событие и обработать его.
 
@@ -25,8 +25,8 @@
     <td>...</td>
     <td>...</td>
   </tr>
-  <tr>...еще 2 строки такого же вида...</tr>
-  <tr>...еще 2 строки такого же вида...</tr>
+  <tr>...ещё 2 строки такого же вида...</tr>
+  <tr>...ещё 2 строки такого же вида...</tr>
 </table>
 ```