javascript-tutorial · tarasyyyk · Jan 20, 2022 · Jan 18, 2022 · Jan 19, 2022 · Jan 19, 2022
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md
@@ -4,15 +4,15 @@
 <html>
 <body>
 
-  <div data-widget-name="menu">Choose the genre</div>
+  <div data-widget-name="menu">Виберіть жанр</div>
 
   <script>
-    // getting it
+    // отримаємо його
     let elem = document.querySelector('[data-widget-name]');
 
-    // reading the value
+    // прочитаємо значення
     alert(elem.dataset.widgetName);
-    // or
+    // чи
     alert(elem.getAttribute('data-widget-name'));
   </script>
 </body>

diff --git a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md
@@ -2,19 +2,19 @@ importance: 5
 
 ---
 
-# Get the attribute
+# Отримайте атрибут
 
-Write the code to select the element with `data-widget-name` attribute from the document and to read its value.
+Напишіть код, щоб вибрати елемент з атрибутом `data-widget-name` з документа та прочитати його значення.
 
 ```html run
 <!DOCTYPE html>
 <html>
 <body>
 
-  <div data-widget-name="menu">Choose the genre</div>
+  <div data-widget-name="menu">Виберіть жанр</div>
 
   <script>
-    /* your code */
+    /* ваш код */
   </script>
 </body>
 </html>

diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md
@@ -1,9 +1,9 @@
 
-First, we need to find all external references.
+По-перше, нам потрібно знайти всі зовнішні посилання.
 
-There are two ways.
+Є два способи.
 
-The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
+Перше -- знайти всі посилання, використовуючи `document.querySelectorAll('a')`, а потім відфільтровувати те, що нам потрібно:
 
 ```js
 let links = document.querySelectorAll('a');
@@ -12,23 +12,23 @@ for (let link of links) {
 *!*
   let href = link.getAttribute('href');
 */!*
-  if (!href) continue; // no attribute
+  if (!href) continue; // немає атрибуту
 
-  if (!href.includes('://')) continue; // no protocol
+  if (!href.includes('://')) continue; // немає протоколу
 
-  if (href.startsWith('http://internal.com')) continue; // internal
+  if (href.startsWith('http://internal.com')) continue; // внутрішня
 
   link.style.color = 'orange';
 }
 ```
 
-Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML.
+Будь ласка, зверніть увагу: ми використовуємо `link.getAttribute('href')`. Не `link.href` тому, що нам потрібна властивість з HTML.
 
-...Another, simpler way would be to add the checks to CSS selector:
+...Інший, простий спосіб полягає в тому, щоб додати перевірки до селектора CSS:
 
 ```js
-// look for all links that have :// in href
-// but href doesn't start with http://internal.com
+// шукати всі посилання, які мають :// у href
+// але href не починається з http://internal.com
 let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
 let links = document.querySelectorAll(selector);
 

diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html
@@ -2,7 +2,7 @@
 <html>
 <body>
 
-  <a name="list">The list:</a>
+  <a name="list">Список:</a>
   <ul>
     <li><a href="http://google.com">http://google.com</a></li>
     <li><a href="/tutorial">/tutorial.html</a></li>

diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/source.view/index.html b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/source.view/index.html
@@ -2,7 +2,7 @@
 <html>
 <body>
 
-  <a name="list">The list:</a>
+  <a name="list">Список:</a>
   <ul>
     <li><a href="http://google.com">http://google.com</a></li>
     <li><a href="/tutorial">/tutorial.html</a></li>
@@ -13,7 +13,7 @@
   </ul>
 
   <script>
-    // ...your code...
+    // ...ваш код...
   </script>
 
 </body>

diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md
@@ -2,18 +2,18 @@ importance: 3
 
 ---
 
-# Make external links orange
+# Зробіть зовнішні посилання помаранчевими
 
-Make all external links orange by altering their `style` property.
+Зробіть всі зовнішні посилання помаранчевими, змінюючи властивість `style`.
 
-A link is external if:
-- Its `href` has `://` in it
-- But doesn't start with `http://internal.com`.
+Посилання є зовнішнім, якщо:
+- В його `href` є `://`
+- Але не починається з `http://internal.com`.
 
-Example:
+Приклад:
 
 ```html run
-<a name="list">the list</a>
+<a name="list">список</a>
 <ul>
   <li><a href="http://google.com">http://google.com</a></li>
   <li><a href="/tutorial">/tutorial.html</a></li>
@@ -24,12 +24,12 @@ Example:
 </ul>
 
 <script>
-  // setting style for a single link
+  // налаштування style для одного посилання
   let link = document.querySelector('a');
   link.style.color = 'orange';
 </script>
 ```
 
-The result should be:
+Результат повинен бути:
 
 [iframe border=1 height=180 src="solution"]
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md