Merge pull request #323 from vplentinax/domatt

joaquinelio · web-flow · commit e26b59e1d1f6 · 2020-07-30T09:29:41.000-03:00
Attributes and properties
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">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
@@ -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>
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.
+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');
@@ -12,23 +12,23 @@ for (let link of links) {
 *!*
   let href = link.getAttribute('href');
 */!*
-  if (!href) continue; // no attribute
+  if (!href) continue; // no atributo
 
-  if (!href.includes('://')) continue; // no protocol
+  if (!href.includes('://')) continue; // no protocolo
 
-  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
-// but href doesn't start with http://internal.com
+// busque todos los enlaces que tengan: // en href
+//pero href no 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
@@ -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>
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">La lista</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...
+    // ...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
@@ -2,15 +2,15 @@ importance: 3
 
 ---
 
-# Make external links orange
+# Haz los enlaces externos naranjas
 
-Make all external links orange by altering their `style` property.
+Haz todos los enlaces externos de color orange alterando su propiedad `style`.
 
-A link is external if:
-- Its `href` has `://` in it
-- But doesn't start with `http://internal.com`.
+Un link es externo si:
+- Su `href` tiene `://` 
+- Pero no comienza con `http://internal.com`.
 
-Example:
+Ejemplo:
 
 ```html run
 <a name="list">the list</a>
@@ -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"]
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
