Apply suggestions from code review

Co-authored-by: Stanislav <s.dolgachov@gmail.com>

Author: AntonBurchak

2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md

@@ -1,5 +1,5 @@
-Як можна бачити з `HTML/CSS`, слайдер - це `<div>`, з кольровим фоном, всередині якого знаходиться інший `<div>`, оформлений як бігунок, з `position: relative`.
+Як можна бачити з `HTML/CSS`, слайдер -- це `<div>`, з кольровим фоном, всередині якого знаходиться інший `<div>`, оформлений як бігунок, з `position: relative`.
 
-Використовуємо для його позиціювання `position: relative`, тобто координати встановлюються не абсолютні, а відносно зовнішнього родича, так як це зручніше.
+Використаємо для його позиціювання `position: relative`, тобто координати встановлюються не абсолютні (`position: absolute`), а відносно батьківського елементу, бо це зручніше.
 
 І далі реалізуємо Drag'n'Drop тільки по горизонталі, з обмеженням по ширині.

2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.view/index.html

@@ -16,7 +16,7 @@
     let thumb = slider.querySelector('.thumb');
 
     thumb.onmousedown = function(event) {
-      event.preventDefault(); // запобігти запуск виділення (дія браузера)
+      event.preventDefault(); // запобігає запуску виділення (типова дія браузера)
 
       let shiftX = event.clientX - thumb.getBoundingClientRect().left;
       // shiftY не потрібен, слайдер рухається тільки по горизонталі
@@ -27,7 +27,7 @@
       function onMouseMove(event) {
         let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;
 
-        // курсор вийшов зі слайдера => залишити бігунок в його межах.
+        // курсор вийшов за межі слайдера => зафіксуємо бігунок в межах слайдера.
         if (newLeft < 0) {
           newLeft = 0;
         }

2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md

@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Slider
+# Слайдер
 
 Створіть слайдер:
 
 [iframe src="solution" height=60 border=1]
 
-Натисніть мишею на синій бігунок і рухайте його.
+Наведіть курсор миші на бігунок слайдеру, затисніть кнопку миші і рухайте бігунок переміщаючи курсор.
 
 Важливі деталі:
 
-- При натиснутому бігунці курсор миші може виходити за межі смуги слайдера, але слайдер нехай все одно працює (це зручно для користувача).
-- Слайдер повинен нормально працювати при різкому русі миші вліво або вправо за межі смуги. При цьому бігунок повинен зупинятися чітко в потрібному кінці смуги.
+- При натиснутій кнопці миші, курсор може виходити за межі слайдера, але слайдер все одно має працювати (це зручно для користувача).
+- Слайдер повинен нормально працювати при різкому русі миші ливоруч або праворуч за межі слайдера. При цьому бігунок повинен зупинятися чітко біля його краю.

2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md

@@ -1,5 +1,5 @@
-Щоб перетягнути елемент, ми можемо використовувати `position: fixed`, це робить управління координатами простіше. В кінці слід переключитися назад на `position: absolute`, щоб покласти елемент в документ.
+Щоб перетягнути елемент, ми можемо використовувати `position: fixed`, це робить управління координатами простішим. Після завершення слід переключитися назад на `position: absolute`, щоб  елемент залишився частиною сторінки.
 
 Коли координати знаходяться у верхній/нижній частині вікна, ми використовуємо `window.scrollTo` для прокрутки.
 
-Деталі рішення розписані в коментарях в вихідному коді.
+Деталі рішення розписані в коментарях у коді.

2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/index.html

@@ -8,15 +8,15 @@
 
 <body>
 
-  <h2>Розставте супергероїв по полю.</h2>
+  <h2>Розставте супергероїв полем.</h2>
 
-  <p>Супергерої і м’яч - це елементи з класом "draggable". Зробіть так, щоб їх можна було переносити.</p>
+  <p>Супергерої і м’яч -- це елементи з класом "draggable". Зробіть так, щоб їх можна було переносити.</p>
 
-  <p>Важливо: обмежити перетягування межами вікна. Якщо супергероя підносять до верхньої або нижньої межі сторінки, вона повинна автоматично прокручуватися.</p>
+  <p>Важливо: обмежити перетягування межами вікна. Якщо супергероя підносять до верхньої або нижньої межі вікна, сторінка повинна автоматично прокручуватися.</p>
 
-  <p>Якщо сторінка поміщається на вашому екрані цілком і не має вертикальної прокрутки - зробіть вікно браузера менше, щоб протестувати цю можливість.</p>
+  <p>Якщо сторінка міститься на екрані повністю і не має вертикальної прокрутки -- зробіть вікно браузера менше, щоб протестувати цю можливість.</p>
 
-  <p>У цьому завданні достатньо впоратися з вертикальною прокруткою. Зазвичай немає горизонтальної прокрутки, і вона обробляється аналогічним чином, якщо це необхідно.</p>
+  <p>У цьому завданні достатньо впоратися з вертикальною прокруткою. Зазвичай горизонтальна прокрутка відсутня, вона обробляється аналогічно, якщо це необхідно.</p>
 
   <p>Так, і ще: супергерої ні за яких умов не повинні потрапити за край екрану.</p>
 

2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css

@@ -10,7 +10,7 @@ html, body {
   float: left;
 }
 
-/*  герої і м'яч (dragables) */
+/*  герої і м’яч (dragables) */
 
 .hero {
   background: url(https://js.cx/drag-heroes/heroes.png);

2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js

@@ -25,7 +25,7 @@ document.addEventListener('mousedown', function(event) {
   }
 
   // на початку переміщення елемента:
-  //  запам'ятовуємо місце кліку по елементу (shiftX, shiftY) ,
+  //  зберегаємо місце кліку по елементу
   //  перемикаємо позиціонування елемента (position: fixed) і рухаємо елемент
   function startDrag(element, clientX, clientY) {
     if(isDragging) {
@@ -66,40 +66,40 @@ document.addEventListener('mousedown', function(event) {
     let newX = clientX - shiftX;
     let newY = clientY - shiftY;
 
-    // перевіряємо, чи не переходять нові координати за нижній край вікна:
+    // перевіряємо, чи не виходять нові координати за нижній край вікна:
     // спочатку обчислюємо гіпотетичний новий нижній край вікна
     let newBottom = newY + dragElement.offsetHeight;
 
-    // новий край вікна виходить за межі документа? прокручуємо сторінку
+    // виходять за межі вікна? прокручуємо сторінку
     if (newBottom > document.documentElement.clientHeight) {
       // координата нижнього краю документа щодо вікна
       let docBottom = document.documentElement.getBoundingClientRect().bottom;
 
-      // скролл документа на 10px вниз має проблему -
-      // він може прокручувати документ за його межі,
+      // прокрутка документа на 10px вниз має проблему --
+      // він може прокрутити документ за його межі,
       // тому використовуємо Math.min (відстань до кінця, 10)
       let scrollY = Math.min(docBottom - newBottom, 10);
 
-      // обчислення можуть бути не зовсім точні - трапляються помилки при округленні,
-      // які призводять до негативного значенням прокрутки. відфільтруємо їх:
+      // обчислення можуть бути не зовсім точні -- трапляються помилки при округленні,
+      // які призводять до негативного значенням прокрутки. Відфільтруємо їх:
       if (scrollY < 0) scrollY = 0;
 
       window.scrollBy(0, scrollY);
 
       // швидке переміщення миші може помістити курсор за межі документа вниз
       // якщо це сталося -
-      // обмежуємо нове значення Y максимально можливим виходячи з розміру документа:
+      // обмежуємо нове значення Y максимально можливим, виходячи з розміру документа:
       newY = Math.min(newY, document.documentElement.clientHeight - dragElement.offsetHeight);
     }
 
-    // перевіряємо, чи не переходять нові координати за верхній край вікна (по схожому алгоритму)
+    // перевіряємо, чи не переходять нові координати за верхній край вікна (за схожим алгоритмом)
     if (newY < 0) {
       // scroll up
       let scrollY = Math.min(-newY, 10);
       if (scrollY < 0) scrollY = 0; // перевіряємо помилки точності
 
       window.scrollBy(0, -scrollY);
-      // швидке переміщення миші може помістити курсор за межі документа вгору
+      // швидке переміщення миші може помістити курсор за межі документа зверху
       newY = Math.max(newY, 0); // newY не може бути менше нуля
     }
 

2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.css

@@ -10,7 +10,7 @@ html, body {
   float: left;
 }
 
-/*  герої і м'яч (dragables) */
+/*  герої і м’яч (dragables) */
 
 .hero {
   background: url(https://js.cx/drag-heroes/heroes.png);

2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md

@@ -4,14 +4,14 @@ importance: 5
 
 # Розставити супергероїв по полю
 
-У цьому завданні ви можете перевірити своє розуміння відразу декількох аспектів Drag'n'Drop і DOM .
+У цьому завданні ви можете перевірити своє розуміння відразу декількох аспектів Drag'n'Drop і DOM.
 
 Зробіть так, щоб елементи з класом `draggable` -- можна було переносити мишкою. Як м’яч в цьому розділі.
 
 Вимоги до реалізації:
 
 - Використовуйте делегування подій для відстеження початку перетягування: тільки один обробник подій `mousedown` на `document`.
-- Якщо елементи підносять до верхньої/нижньої межі вікна - вікно повинне прокручуватися вгору/вниз, щоб дозволити подальше перетягування.
+- Якщо елементи підносять до верхньої/нижньої межі вікна -- вікно повинне прокручуватися вгору/вниз, щоб дозволити подальше перетягування.
 - Горизонтальна прокрутка відсутня (трохи спрощує завдання, її просто додати).
 - Елемент при перенесенні, навіть при різких рухах мишкою, не повинен навіть частково потрапити поза вікно.
 

2-ui/3-event-details/4-mouse-drag-and-drop/ball.view/index.html

@@ -7,7 +7,7 @@
 
 <body style="height: 200px">
 
-  <p>Перетягни м’яч.</p>
+  <p>Перетягніть м’яч.</p>
 
   <img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">