Jul 30, 2020 · Jul 25, 2020 · Jul 29, 2020 · Jul 29, 2020 · Jul 29, 2020 · Jul 29, 2020
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">Elige el género</div>

  <script>
    //getting it
    //obteniéndolo
    let elem = document.querySelector('[data-widget-name]');

    //reading the value
    //leyendo el valor
    alert(elem.dataset.widgetName);
    //or
    //o
    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
 #Obtén en atributo

 Write the code to select the element with`data-widget-name`attribute from the document and to read its value.
 Escribe el código para obtener el atributo`data-widget-name`del documento y leer su valor.

 ```html run
 <!DOCTYPE html>
 <html>
 <body>

  <div data-widget-name="menu">Choose the genre</div>
  <div data-widget-name="menu">Elige el genero</div>

  <script>
    /*your code */
    /*Tu código */
  </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.
 Primero, necesitamos encontrar todos los enlaces externos.

 There are two ways.
 Hay dos.

 The first is to find all links using `document.querySelectorAll('a')`and then filter out what we need:
 El primero es encontrar todos los enlaces usando `document.querySelectorAll('a')`y luego filtrar lo que necesitamos:

 ```js
 let links = document.querySelectorAll('a');
 *!*
  let href = link.getAttribute('href');
 */!*
  if (!href) continue; // noattribute
  if (!href) continue; // noatributo

  if (!href.includes('://')) continue; // noprotocol
  if (!href.includes('://')) continue; // noprotocolo

  if (href.startsWith('http://internal.com')) continue; //internal
  if (href.startsWith('http://internal.com')) continue; //interno

  link.style.color = 'orange';
 }
 ```

 Please note: we use `link.getAttribute('href')`.Not `link.href`,because we need the value from HTML.
 Tenga en cuenta: nosotros usamos `link.getAttribute('href')`.No `link.href`,porque necesitamos el valor del HTML.

 ...Another, simpler way would be to add the checks to CSS selector:
 ...Otra forma más simple sería agregar las comprobaciones al selector CSS:

 ```js
 //look for all links that have ://in href
 // buthrefdoesn't start with http://internal.com
 //busque todos los enlaces que tengan://en href
 //perohrefno comienza con 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">La lista:</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">La lista</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...
    // ...Tu código...
  </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
 #Haz los enlaces externos naranjas

 Make all external linksorangeby altering their `style` property.
 Haz todos los enlaces externos de colororangealterando su propiedad `style`.

 A linkis external if:
 -Its `href`has `://`in it
 -But doesn't start with `http://internal.com`.
 Un linkes externo si:
 -Su `href`tiene `://`
 -Pero no comienza con `http://internal.com`.

 Example:
 Ejemplo:

 ```html run
 <a name="list">the list</a>
 </ul>

 <script>
  //setting style for a single link
  //establecer un estilo para un enlace
  let link = document.querySelector('a');
  link.style.color = 'orange';
 </script>
 ```

 The result should be:
 El resultado podría ser:

 [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">Elige el género</div>
vplentinax marked this conversation as resolved. Show resolvedHide resolved

		<script>
		//getting it
		//obteniéndolo
		let elem = document.querySelector('[data-widget-name]');

		//reading the value
		//leyendo el valor
		alert(elem.dataset.widgetName);
		//or
		//o
		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
		#Obtén en atributo

		Write the code to select the element with`data-widget-name`attribute from the document and to read its value.
		Escribe el código para obtener el atributo`data-widget-name`del documento y leer su valor.

		```html run
		<!DOCTYPE html>
		<html>
		<body>

		<div data-widget-name="menu">Choose the genre</div>
		<div data-widget-name="menu">Elige el genero</div>

		<script>
		/your code /
		/Tu código /
		</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.
		Primero, necesitamos encontrar todos los enlaces externos.

		There are two ways.
		Hay dos.

		The first is to find all links using `document.querySelectorAll('a')`and then filter out what we need:
		El primero es encontrar todos los enlaces usando `document.querySelectorAll('a')`y luego filtrar lo que necesitamos:

		```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; // noattribute
		if (!href) continue; // noatributo

		if (!href.includes('://')) continue; // noprotocol
		if (!href.includes('://')) continue; // noprotocolo

		if (href.startsWith('http://internal.com')) continue; //internal
		if (href.startsWith('http://internal.com')) continue; //interno

		link.style.color = 'orange';
		}
		```

		Please note: we use `link.getAttribute('href')`.Not `link.href`,because we need the value from HTML.
		Tenga en cuenta: nosotros usamos `link.getAttribute('href')`.No `link.href`,porque necesitamos el valor del HTML.

		...Another, simpler way would be to add the checks to CSS selector:
		...Otra forma más simple sería agregar las comprobaciones al selector CSS:

		```js
		//look for all links that have ://in href
		// buthrefdoesn't start with http://internal.com
		//busque todos los enlaces que tengan://en href
		//perohrefno comienza con 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">La lista:</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,15 +2,15 @@ importance: 3

		---

		#Make external links orange
		#Haz los enlaces externos naranjas

		Make all external linksorangeby altering their `style` property.
		Haz todos los enlaces externos de colororangealterando su propiedad `style`.

		A linkis external if:
		-Its `href`has `://`in it
		-But doesn't start with `http://internal.com`.
		Un linkes externo si:
		-Su `href`tiene `://`
		-Pero no comienza con `http://internal.com`.

		Example:
		Ejemplo:

		```html run
		<a name="list">the list</a>
Expand All		@@ -24,12 +24,12 @@ Example:
		</ul>

		<script>
		//setting style for a single link
		//establecer un estilo para un enlace
		let link = document.querySelector('a');
		link.style.color = 'orange';
		</script>
		```

		The result should be:
		El resultado podría ser:

		[iframe border=1 height=180 src="solution"]