Merge pull request #311 from elemarmar/search-elements-dom-emm

joaquinelio · web-flow · commit 35d7d532ab31 · 2020-07-21T06:02:11.000-03:00
Searching: getElement*, querySelector*
diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md
@@ -1,35 +1,35 @@
-There are many ways to do it.
+Hay muchas maneras de resolverlo.
 
-Here are some of them:
+Aquí hay algunas de ellas:
 
 ```js
-// 1. The table with `id="age-table"`.
+// 1. La tabla con `id="age-table"`.
 let table = document.getElementById('age-table')
 
-// 2. All label elements inside that table
+// 2. Todos los elementos `label` dentro de esa tabla
 table.getElementsByTagName('label')
 // or
 document.querySelectorAll('#age-table label')
 
-// 3. The first td in that table (with the word "Age")
+// 3. El primer `td` en la tabla (con la palabra "Age")
 table.rows[0].cells[0]
 // or
 table.getElementsByTagName('td')[0]
 // or
 table.querySelector('td')
 
-// 4. The form with the name "search"
-// assuming there's only one element with name="search" in the document
+// 4. El `form` con name="search"
+// suponiendo que sólo hay un elemento con name="search" en el documento
 let form = document.getElementsByName('search')[0]
-// or, form specifically
+//o, utilizando el form específicamente
 document.querySelector('form[name="search"]')
 
-// 5. The first input in that form.
+// 5. El primer input en el form.
 form.getElementsByTagName('input')[0]
-// or
+// o
 form.querySelector('input')
 
-// 6. The last input in that form
-let inputs = form.querySelectorAll('input') // find all inputs
-inputs[inputs.length-1] // take the last one
+// 6. El último input en el form. 
+let inputs = form.querySelectorAll('input') // encontrar todos los inputs
+inputs[inputs.length-1] // obtener el último
 ```
diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html b/2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html
@@ -2,7 +2,7 @@
 <html>
 <body>
   <form name="search">
-    <label>Search the site:
+    <label>Buscar en la página:
       <input type="text" name="search">
     </label>
     <input type="submit" value="Search!">
@@ -11,22 +11,22 @@
   <hr>
 
   <form name="search-person">
-    Search the visitors:
+    Buscar a los visitantes:
     <table id="age-table">
       <tr>
-        <td>Age:</td>
+        <td>Edad:</td>
         <td id="age-list">
           <label>
-            <input type="radio" name="age" value="young">less than 18</label>
+            <input type="radio" name="age" value="young">menor de 18</label>
           <label>
             <input type="radio" name="age" value="mature">18-50</label>
           <label>
-            <input type="radio" name="age" value="senior">more than 50</label>
+            <input type="radio" name="age" value="senior">mayor de 50</label>
         </td>
       </tr>
 
       <tr>
-        <td>Additionally:</td>
+        <td>Más:</td>
         <td>
           <input type="text" name="info[0]">
           <input type="text" name="info[1]">
diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md
@@ -2,17 +2,16 @@ importance: 4
 
 ---
 
-# Search for elements
+# Buscar elementos
+Aquí está el documento con la tabla y el formulario.
 
-Here's the document with the table and form.
+¿Cómo encontrar?...
 
-How to find?...
+1. La tabla con `id="age-table"`.
+2. Todos los elementos `label`dentro de la tabla (debería haber 3).
+3. El primer `td` en la tabla (con la palabra "Age").
+4. El `form` con `name="search"`.
+5. El primer `input` en ese formulario.
+6. El último `input` en ese formulario.
 
-1. The table with `id="age-table"`.
-2. All `label` elements inside that table (there should be 3 of them).
-3. The first `td` in that table (with the word "Age").
-4. The `form` with `name="search"`.
-5. The first `input` in that form.
-6. The last `input` in that form.
-
-Open the page [table.html](table.html) in a separate window and make use of browser tools for that.
+Abra la página [table.html](table.html) en una ventana separada y haga uso de las herramientas del navegador. 
diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md
