translate attributes and properties

nazarepiedady · web-flow · commit de41f75f9bc8 · 2023-12-24T00:30:55.000+01: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">Escolha o gênero</div>
 
   <script>
-    // getting it
+    // Obtendo o elemento
     let elem = document.querySelector('[data-widget-name]');
 
-    // reading the value
+    // lendo o valor
     alert(elem.dataset.widgetName);
-    // or
+    // ou
     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
+# Obtendo o atributo
 
-Write the code to select the element with `data-widget-name` attribute from the document and to read its value.
+Escreva o código para selecionar o elemento do documento com o atributo `data-widget-name` e leia seu valor.
 
 ```html run
 <!DOCTYPE html>
 <html>
 <body>
 
-  <div data-widget-name="menu">Choose the genre</div>
+  <div data-widget-name="menu">Escolha o gênero</div>
 
   <script>
-    /* your code */
+    /* seu 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.
+Primeiro, precisamos encontrar todas as referências externas.
 
-There are two ways.
+Há duas maneiras.
 
-The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
+A primeira é encontrar todos os links usando `document.querySelectorAll('a')` e então filtrar o que precisamos:
 
 ```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; // sem atributo
 
-  if (!href.includes('://')) continue; // no protocol
+  if (!href.includes('://')) continue; // sem protocolo
 
   if (href.startsWith('http://internal.com')) continue; // internal
 
   link.style.color = 'orange';
 }
 ```
 
-Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML.
+Observe: usamos `link.getAttribute('href')`. Não `link.href`, porque precisamos do valor do HTML.
 
-...Another, simpler way would be to add the checks to CSS selector:
+...Outra forma mais simples seria apenas adicionar as verificações ao seletor CSS
 
 ```js
-// look for all links that have :// in href
-// but href doesn't start with http://internal.com
+// procura por todos os links que tem :// em href
+// mas href não começa com 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 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">A 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...
+    // ...seu 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,18 +2,18 @@ importance: 3
 
 ---
 
-# Make external links orange
+# Faça com que links externos fiquem laranja
 
-Make all external links orange by altering their `style` property.
+Faça com que todos os links externos fiquem laranjas alterando a propriedade `style`.
 
-A link is external if:
-- Its `href` has `://` in it
-- But doesn't start with `http://internal.com`.
+Um link é externo se:
+- Seu `href` contém `://`.
+- Mas não começa com `http://internal.com`.
 
-Example:
+Por exemplo:
 
 ```html run
-<a name="list">the list</a>
+<a name="list">a lista</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
+  // Definindo o estilo para um único link
   let link = document.querySelector('a');
   link.style.color = 'orange';
 </script>
 ```
 
-The result should be:
+O resultado deverá 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
