Merge pull request #494 from joaquinelio/modidocu

Modifying the document

Author: joaquinelio

2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md

@@ -1,8 +1,8 @@
-Answer: **1 and 3**.
+Respuesta: **1 y 3**.
 
-Both commands result in adding the `text` "as text" into the `elem`.
+Ambos comandos agregan `text` "como texto" dentro de `elem`.
 
-Here's an example:
+Aquí el ejemplo:
 
 ```html run height=80
 <div id="elem1"></div>

2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md

@@ -4,9 +4,9 @@ importance: 5
 
 # createTextNode vs innerHTML vs textContent
 
-We have an empty DOM element `elem` and a string `text`.
+Tenemos un elemento DOM vacio `elem` y un string `text`.
 
-Which of these 3 commands will do exactly the same?
+¿Cuáles de estos 3 comandos harán exactamente lo mismo?
 
 1. `elem.append(document.createTextNode(text))`
 2. `elem.innerHTML = text`

2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md

@@ -1,16 +1,16 @@
-First, let's make HTML/CSS.
+Primero escribamos HTML/CSS.
 
-Each component of the time would look great in its own `<span>`:
+Cada componente de la hora se verá muy bien dentro de su propio `<span>`:
 
 ```html
 <div id="clock">
   <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
 </div>
 ```
 
-Also we'll need CSS to color them.
+También necesitamos CSS para colorearlos.
 
-The `update` function will refresh the clock, to be called by `setInterval` every second:
+La función `update` que refrescará el reloj será llamada por `setInterval` una vez por segundo:
 
 ```js
 function update() {
@@ -32,15 +32,15 @@ function update() {
 }
 ```
 
-In the line `(*)` we every time check the current date. The calls to `setInterval` are not reliable: they may happen with delays.
+En la línea `(*)` verificamos la hora cada vez. Las llamadas a `setInterval` no son confiables: pueden ocurrir con demoras.
 
-The clock-managing functions:
+Las funciones que manejan el reloj:
 
 ```js
 let timerId;
 
-function clockStart() { // run the clock  
-  if (!timerId) { // only set a new interval if the clock is not running
+function clockStart() { // ejecuta el reloj  
+  if (!timerId) { // solo establece un nuevo intervalo si el reloj no está corriendo
     timerId = setInterval(update, 1000);
   }
   update(); // (*)
@@ -52,6 +52,6 @@ function clockStop() {
 }
 ```
 
-Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then.
+Nota que la llamada a `update()` no solo está agendada en `clockStart()`, también la ejecuta inmediatamente en la línea `(*)`. De otro modo el visitante tendría que esperar hasta la primera ejecución de `setInterval`. Y el reloj estaría vacío hasta entonces.
 
-Also it is important to set a new interval in `clockStart()` only when the clock is not running. Otherways clicking the start button several times would set multiple concurrent intervals. Even worse - we would only keep the `timerID` of the last interval, losing references to all others. Then we wouldn't be able to stop the clock ever again! Note that we need to clear the `timerID` when the clock is stopped in the line `(**)`, so that it can be started again by running `clockStart()`.
+También es importante establecer un nuevo intervalo en `clockStart()` solamente cuando el reloj no está corriendo. De otra forma al cliquear el botón de inicio varias veces se establecerían múltiples intervalos concurrentes. Peor aún, solo mantendríamos el `timerID` del último intervalo, perdiendo referencia a todos los demás. ¡No podríamos detener el reloj nunca más! Nota que necesitamos limpiar `timerID` cuando el reloj es detenido en la línea `(**)`, así puede ser reiniciado corriendo `clockStart()`.

2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html

@@ -43,26 +43,26 @@
     }
 
     function clockStart() {
-      // set a new interval only if the clock is stopped
-      // otherwise we would rewrite the timerID reference to the running interval and wouldn't be able to stop the clock ever again
+      // establece un nuevo intervalo solo si el reloj está detenido
+      // de otro modo sobreescribiríamos la referencia timerID del intervalo en ejecución y no podríamos detener el reloj nunca más
       if (!timerId) { 
         timerId = setInterval(update, 1000);
       }
-      update(); // <--  start right now, don't wait 1 second till the first setInterval works
+      update(); // <--  inicia ahora mismo, no espera 1 second hasta el primer intervalo
     }
 
     function clockStop() {
       clearInterval(timerId);
-      timerId = null; // <-- clear timerID to indicate that the clock has been stopped, so that it is possible to start it again in clockStart()
+      timerId = null; // <-- borra timerID para indicar que el reloj fue detenido, haciendo posible iniciarlo de nuevo en clockStart()
     }
 
     clockStart();
   </script>
 
-  <!-- click on this button calls clockStart() -->
+  <!-- cliquear este botón llama a clockStart() -->
   <input type="button" onclick="clockStart()" value="Start">
 
-  <!-- click on this button calls clockStop() -->
+  <!-- cliquear este botón llama a clockStop() -->
   <input type="button" onclick="clockStop()" value="Stop">
 
 </body>

2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html

@@ -2,10 +2,10 @@
 <html>
 <body>
 
-  <!-- click on this button calls clockStart() -->
+  <!-- cliquear en este botón llama a clockStart() -->
   <input type="button" onclick="clockStart()" value="Start">
 
-  <!-- click on this button calls clockStop() -->
+  <!-- cliquear en este botón llama a clockStop() -->
   <input type="button" onclick="clockStop()" value="Stop">
 
 </body>

2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md

@@ -2,10 +2,10 @@ importance: 4
 
 ---
 
-# Colored clock with setInterval
+# Reloj coloreado con setInterval
 
-Create a colored clock like here:
+Crea un reloj coloreado como aquí:
 
 [iframe src="solution" height=60]
 
-Use HTML/CSS for the styling, JavaScript only updates time in elements.
+Usa HTML/CSS para el estilo, JavaScript solamente actualiza la hora en elements.

2-ui/1-document/07-modifying-document/11-append-to-list/solution.md

@@ -1,7 +1,7 @@
 
-When we need to insert a piece of HTML somewhere, `insertAdjacentHTML` is the best fit.
+Cuando necesitamos insertar una pieza de HTML en algún lugar, `insertAdjacentHTML` es lo más adecuado.
 
-The solution:
+La solución:
 
 ```js
 one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');

2-ui/1-document/07-modifying-document/11-append-to-list/task.md

@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Insert the HTML in the list
+# Inserta el  HTML en la lista
 
-Write the code to insert `<li>2</li><li>3</li>` between two `<li>` here:
+Escribe el código para insertar  `<li>2</li><li>3</li>` entre dos `<li>` aquí:
 
 ```html
 <ul id="ul">

2-ui/1-document/07-modifying-document/12-sort-table/solution.md

@@ -1,4 +1,4 @@
-The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:
+La solución es corta, pero puede verse algo dificultosa así que brindamos comentarios extendidos:
 
 ```js
 let sortedRows = Array.from(table.tBodies[0].rows) // 1
@@ -7,12 +7,12 @@ let sortedRows = Array.from(table.tBodies[0].rows) // 1
 table.tBodies[0].append(...sortedRows); // (3)
 ```
 
-The step-by-step algorthm:
+El algoritmo paso a paso:
 
-1. Get all `<tr>`, from `<tbody>`.
-2. Then sort them comparing by the content of the first `<td>` (the name field).
-3. Now insert nodes in the right order by `.append(...sortedRows)`.
+1. Obtener todos los `<tr>` de `<tbody>`.
+2. Entonces ordenarlos comparando por el contenido de su primer `<td>` (el campo nombre).
+3. Ahora insertar nodos en el orden correcto con `.append(...sortedRows)`.
 
-We don't have to remove row elements, just "re-insert", they leave the old place automatically.
+No necesitamos quitar los elementos row, simplemente "reinsertarlos", ellos dejan el viejo lugar automáticamente.
 
-P.S. In our case, there's an explicit `<tbody>` in the table, but even if HTML table doesn't have `<tbody>`, the DOM structure always has it.
+P.S. En nuestro caso, hay un `<tbody>` explícito en la tabla, pero incluso si la tabla HTML no tiene `<tbody>`, la estructura DOM siempre lo tiene.

2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html

@@ -23,5 +23,5 @@
 </table>
 
 <script>
-  // ... your code ...
+  // ... tu código ...
 </script>