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
 <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

 ---

 #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

 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');
 *!*
  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 hrefdoesn'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
 <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
 <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>
  </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

 ---

 #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>
 </ul>

 <script>
  //setting stylefor 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"]
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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');
Expand All		@@ -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 hrefdoesn'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);

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>
Expand All		@@ -24,12 +24,12 @@ Example:
		</ul>

		<script>
		//setting stylefor 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"]