Merge pull request #267 from Dorin-David/attributes-and-properties

longo-andrea · web-flow · commit 7b1ea9e3f998 · 2021-03-23T20:42:18.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
@@ -7,12 +7,12 @@
   <div data-widget-name="menu">Choose the genre</div>
 
   <script>
-    // getting it
+    // trovalo
     let elem = document.querySelector('[data-widget-name]');
 
-    // reading the value
+    // leggi il valore
     alert(elem.dataset.widgetName);
-    // or
+    // oppure
     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,9 +2,9 @@ importance: 5
 
 ---
 
-# Get the attribute
+# Trova l'attributo
 
-Write the code to select the element with `data-widget-name` attribute from the document and to read its value.
+Scrivi il codice per selezionare e leggere il valore degli elementi del documento con l'attributo `data-widget-name`.
 
 ```html run
 <!DOCTYPE html>
@@ -14,7 +14,7 @@ Write the code to select the element with `data-widget-name` attribute from the
   <div data-widget-name="menu">Choose the genre</div>
 
   <script>
-    /* your code */
+    /* il tuo codice */
   </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.
+Prima di tutto, dobbiamo trovare tutte le referenze esterne.
 
-There are two ways.
+Ci sono due modi.
 
-The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
+Il primo è quello di trovare tutti i link utilizzando `document.querySelectorAll('a')` e poi filtrare quelli che ci servono:
 
 ```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; // nessun attributo
 
-  if (!href.includes('://')) continue; // no protocol
+  if (!href.includes('://')) continue; // nessun protocollo
 
-  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.
+Nota: utilizziamo `link.getAttribute('href')`, non `link.href`, perché abbiamo bisogno del valore dall'HTML.
 
-...Another, simpler way would be to add the checks to CSS selector:
+...Un'altra, più semplice alternativa sarebbe aggiungere dei controlli ai selettori CSS:
 
 ```js
-// look for all links that have :// in href
-// but href doesn't start with http://internal.com
+// cerca tutti i link che hanno :// in href
+// ma href non inizia 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/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
+# Rendi tutti i link esterni arancioni
 
-Make all external links orange by altering their `style` property.
+Rendi tutti i link esterni arancioni modificandone la proprietà `style`.
 
-A link is external if:
-- Its `href` has `://` in it
-- But doesn't start with `http://internal.com`.
+Un link è esterno se:
+- Il suo `href` ha `://` 
+- Ma non comincia con `http://internal.com`.
 
-Example:
+Esempio:
 
 ```html run
 <a name="list">the list</a>
@@ -24,12 +24,12 @@ Example:
 </ul>
 
 <script>
-  // setting style for a single link
+  // imposta lo stile per un singolo link
   let link = document.querySelector('a');
   link.style.color = 'orange';
 </script>
 ```
 
-The result should be:
+Il risultato dovrebbe essere:
 
 [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
