Merge pull request #392 from maksumi/browser-events

Maksumi Murakami · web-flow · commit 0df72fced48f · 2020-10-02T14:08:39.000-05:00
Introduction to browser events
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
@@ -7,13 +7,13 @@
 
 <body>
 
-  <input type="button" id="hider" value="Click to hide the text" />
+  <input type="button" id="hider" value="Haz click para desaparecer el texto"/>
 
-  <div id="text">Text</div>
+  <div id="text">Texto</div>
 
   <script>
-    // Here it doesn't matter how we hide the text,
-    // could also use style.display:
+    // Aquí no importa cómo escondamos el texto
+    // podríamos usar style.display:
     document.getElementById('hider').onclick = function() {
       document.getElementById('text').hidden = true;
     }
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html
@@ -7,12 +7,12 @@
 
 <body>
 
-  <input type="button" id="hider" value="Click to hide the text" />
+  <input type="button" id="hider" value="Haz click para desaparecer el texto"/>
 
-  <div id="text">Text</div>
+  <div id="text">Texto</div>
 
   <script>
-    /* your code */
+    /* Tu código */
   </script>
 
 </body>
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md b/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md
@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Hide on click
+# Ocultar con un click
 
-Add JavaScript to the `button` to make `<div id="text">` disappear when we click it.
+Agrega JavaScript al `button` para hacer que `<div id="text">` desaparezca al clickearlo.
 
-The demo:
+El demo:
 
 [iframe border=1 src="solution" height=80]
diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
@@ -1,5 +1,5 @@
-Can use `this` in the handler to reference "the element itself" here:
+Podemos usar `this` en el handler para referenciar "al propio elemento" aquí:
 
 ```html run height=50
-<input type="button" onclick="this.hidden=true" value="Click to hide">
+<input type="button" onclick="this.hidden=true" value="Click para ocultar">
 ```
diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
@@ -2,11 +2,11 @@ importance: 5
 
 ---
 
-# Hide self
+# Ocultarse
 
-Create a button that hides itself on click.
+Crea un botón que se oculte a sí mismo al darle un click.
 
 ```online
-Like this:
-<input type="button" onclick="this.hidden=true" value="Click to hide">
+Así:
+<input type="button" onclick="this.hidden=true" value="Click para esconder">
 ```
diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
@@ -1,8 +1,8 @@
-The answer: `1` and `2`.
+La respuesta: `1` y `2`.
 
-The first handler triggers, because it's not removed by `removeEventListener`. To remove the handler we need to pass exactly the function that was assigned. And in the code a new function is passed, that looks the same, but is still another function.
+El primer handler se activa porque no es removido por `removeEventListener`. Para remover el handler necesitamos pasar exactamente la función que fue asignada. Y en el código se pasa una función que luce igual pero es otra función.
 
-To remove a function object, we need to store a reference to it, like this:
+Para remover un objeto de función necesitamos almacenar una referencia a él, así:
 
 ```js
 function handler() {
@@ -13,4 +13,4 @@ button.addEventListener("click", handler);
 button.removeEventListener("click", handler);
 ```
 
-The handler `button.onclick` works independently and in addition to `addEventListener`.
+El handler `button.onclick` funciona independientemente y en adición a `addEventListener`.
diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
@@ -2,11 +2,11 @@ importance: 5
 
 ---
 
-# Which handlers run?
+# ¿Qué handlers se ejecutan?
 
-There's a button in the variable. There are no handlers on it.
+Hay un botón en la variable. No hay handlers en él.
 
-Which handlers run on click after the following code? Which alerts show up?
+¿Qué handlers se ejecutan con el click después del siguiente código? ¿Qué alertas se muestran?
 
 ```js no-beautify
 button.addEventListener("click", () => alert("1"));
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
@@ -1,11 +1,11 @@
 
-First we need to choose a method of positioning the ball.
+Primero necesitamos elegir un método para posicionar el balón.
 
-We can't use `position:fixed` for it, because scrolling the page would move the ball from the field.
+No podemos usar `position:fixed` para ello, porque al desplazar la página se movería el balón del campo.
 
-So we should use `position:absolute` and, to make the positioning really solid, make `field` itself positioned.
+Así que deberíamos usar `position:absolute` y, para que el posicionamiento sea realmente sólido, hacer que `field` sea posicione a sí mismo.
 
-Then the ball will be positioned relatively to the field:
+Entonces el balón se posicionará en relación al campo:
 
 ```css
 #field {
@@ -16,36 +16,36 @@ Then the ball will be positioned relatively to the field:
 
 #ball {
   position: absolute;
-  left: 0; /* relative to the closest positioned ancestor (field) */
+  left: 0; /* relativo al predecesor más cercano (field) */
   top: 0;
-  transition: 1s all; /* CSS animation for left/top makes the ball fly */
+  transition: 1s all; /* Animación CSS para que left/top hagan al balón volar  */
 }
 ```
 
-Next we need to assign the correct `ball.style.left/top`. They contain field-relative coordinates now.
+Lo siguiente es asignar el `ball.style.left/top` correcto. Ahora contienen coordenadas relativas al campo.
 
-Here's the picture:
+Aquí está la imagen:
 
 ![](move-ball-coords.svg)
 
-We have `event.clientX/clientY` -- window-relative coordinates of the click.
+Tenemos `event.clientX/clientY`, las cuales son las coordenadas del click relativas a la ventana.
 
-To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width:
+Para obtener la coordenada `left` del click relativa al campo necesitamos restar el limite izquierdo del campo y el ancho del borde:
 
 ```js
 let left = event.clientX - fieldCoords.left - field.clientLeft;
 ```
 
-Normally, `ball.style.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge, not center, would be under the mouse cursor.
+Normalmente `ball.style.left` significa el "borde izquierdo del elemento" (el balón). Por lo que si asignamos ese `left`, entonces el borde del balón, no el centro, es el que se encontraría debajo del cursor del mouse.
 
-We need to move the ball half-width left and half-height up to make it center.
+Necesitamos mover la mitad del ancho del balón a la izquierda y la mitad del alto hacia arriba para que quede en el centro.
 
-So the final `left` would be:
+Por lo que el `left` final debería ser:
 
 ```js
 let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;
 ```
 
-The vertical coordinate is calculated using the same logic.
+La coordenada vertical es calculada usando la misma lógica.
 
-Please note that the ball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS.
+Por favor, nota que el ancho/alto del balón se debe conocer al momento que accedemos a `ball.offsetWidth`. Se debe especificar en HTML o CSS.
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html
@@ -27,7 +27,7 @@
 
 <body style="height:2000px">
 
-  Click on a field to move the ball there.
+  Haz click en un lugar del campo para mover el balón allí.
   <br>
 
 
@@ -39,29 +39,29 @@
   <script>
     field.onclick = function(event) {
 
-      // window-relative field coordinates
+      // Coordenadas del campo relativas a la ventana
       let fieldCoords = this.getBoundingClientRect();
 
-      // the ball has position:absolute, the field: position:relative
-      // so ball coordinates are relative to the field inner left-upper corner
+      // El balón tiene position:absolute, el campo: position:relative
+      // por lo que las coordenadas de la bola son relativas a la esquina superior izquierda interna del campo
       let ballCoords = {
         top: event.clientY - fieldCoords.top - field.clientTop - ball.clientHeight / 2,
         left: event.clientX - fieldCoords.left - field.clientLeft - ball.clientWidth / 2
       };
 
-      // prevent crossing the top field boundary
+      // previniendo el cruce del limite superior del campo
       if (ballCoords.top < 0) ballCoords.top = 0;
 
-      // prevent crossing the left field boundary
+      // previniendo el cruce del limite izquierdo del campo
       if (ballCoords.left < 0) ballCoords.left = 0;
 
 
-      // // prevent crossing the right field boundary
+      // // previniendo el cruce del limite derecho del campo
       if (ballCoords.left + ball.clientWidth > field.clientWidth) {
         ballCoords.left = field.clientWidth - ball.clientWidth;
       }
 
-      // prevent crossing the bottom field boundary
+      // previniendo el cruce del limite inferior del campo
       if (ballCoords.top + ball.clientHeight > field.clientHeight) {
         ballCoords.top = field.clientHeight - ball.clientHeight;
       }
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html
@@ -16,8 +16,8 @@
 
 <body style="height:2000px">
 
-  Click on a field to move the ball there.
-  <br> The ball should never leave the field.
+  Haz click en un lugar del campo para mover el balón allí.
+  <br> El balón nunca debe abandonar el campo.
 
 
   <div id="field">
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md
@@ -2,20 +2,20 @@ importance: 5
 
 ---
 
-# Move the ball across the field
+# Mueve el balón por el campo
 
-Move the ball across the field to a click. Like this:
+Mueve el balón por el campo con un click. Así:
 
 [iframe src="solution" height="260" link]
 
-Requirements:
+Requerimientos:
 
-- The ball center should come exactly under the pointer on click (if possible without crossing the field edge).
-- CSS-animation is welcome.
-- The ball must not cross field boundaries.
-- When the page is scrolled, nothing should break.
+- El centro del balón debe quedar exactamente bajo el cursor al hacer click (sin atravesar el borde del campo si es posible).
+- Las animaciones CSS son bienvenidas.
+- El balón no debe cruzar los límites del campo.
+- Cuando la página se desplace nada se debe romper.
 
-Notes:
+Notas:
 
-- The code should also work with different ball and field sizes, not be bound to any fixed values.
-- Use properties `event.clientX/event.clientY` for click coordinates.
+- El código también debe funcionar con medidas diferentes de campo y balón, no debe estar asociado a ningún valor fijo.
+- Usa las propiedades `event.clientX/event.clientY` para las coordenadas del click.
diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md
@@ -1,12 +1,12 @@
 
 # HTML/CSS
-First let's create HTML/CSS.
+Primero hay que crear el HTML y CSS.
 
-A menu is a standalone graphical component on the page, so it's better to put it into a single DOM element.
+Un menú es un componente gráfico independiente en la página, por lo que es mejor colocarlo en un solo elemento del DOM.
 
-A list of menu items can be laid out as a list `ul/li`.
+Una lista de elementos del menú se puede diseñar como una lista `ul/li`.
 
-Here's the example structure:
+Aquí está la estructura de ejemplo:
 
 ```html
 <div class="menu">
@@ -19,29 +19,29 @@ Here's the example structure:
 </div>
 ```
 
-We use `<span>` for the title, because `<div>` has an implicit `display:block` on it, and it will occupy 100% of the horizontal width.
+Usamos `<span>` para el título, porque `<div>` tiene un `display:block` implícito en él, y va a ocupar 100% del ancho horizontal.
 
-Like this:
+Así:
 
 ```html autorun height=50
 <div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>
 ```
 
-So if we set `onclick` on it, then it will catch clicks to the right of the text.
+Entonces si establecemos `onclick` en él, detectará los clics a la derecha del texto.
 
-As `<span>` has an implicit `display: inline`, it occupies exactly enough place to fit all the text:
+Como `<span>` tiene un `display: inline` implícito, ocupa exactamente el lugar suficiente para que quepa todo el texto:
 
 ```html autorun height=50
 <span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>
 ```
 
-# Toggling the menu
+# Alternar el menú
 
-Toggling the menu should change the arrow and show/hide the menu list.
+Alternar el menú debería cambiar la flecha y mostrar/ocultar la lista del menú.
 
-All these changes are perfectly handled by CSS. In JavaScript we should label the current state of the menu by adding/removing the class `.open`.
+Todos estos cambios son perfectamente controlados con CSS. En JavaScript debemos etiquetar el estado actual del menú agregando/eliminando la clase `.open`.
 
-Without it, the menu will be closed:
+Sin él, el menú se cerrará:
 
 ```css
 .menu ul {
@@ -58,7 +58,7 @@ Without it, the menu will be closed:
 }
 ```
 
-...And with `.open` the arrow changes and the list shows up:
+...Y con `.open` la flecha cambia y aparece la lista:
 
 ```css
 .menu.open .title::before {
diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md
@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Create a sliding menu
+# Crear un menú deslizante
 
-Create a menu that opens/collapses on click:
+Crea un menú que se abra/colapse al hacer click:
 
 [iframe border=1 height=100 src="solution"]
 
-P.S. HTML/CSS of the source document is to be modified.
+P.D. El HTML/CSS del documento fuente se debe modificar.
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md
@@ -1,12 +1,12 @@
 
-To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours.
+Para agregar el botón podemos usar cualquiera de las opciones `position:absolute` (y hacer el panel `position:relative`) o `float:right`. El `float:right` tiene la ventaja de que el botón no se encima con el texto, pero  `position:absolute` da más libertad. Entonces la elección es tuya.
 
-Then for each pane the code can be like:
+Luego, para cada panel, el código puede ser así:
 ```js
 pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
 ```
 
-Then the `<button>` becomes `pane.firstChild`, so we can add a handler to it like this:
+Luego el `<button>` se convierte en `pane.firstChild`, por lo que podemos agregarle un controlador como este:
 
 ```js
 pane.firstChild.onclick = () => pane.remove();
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html
@@ -30,7 +30,7 @@ <h3>Cat</h3>
 
     for(let pane of panes) {
       pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
-      // button becomes the first child of pane
+      // button debe convertirse en el primer child de pane
       pane.firstChild.onclick = () => pane.remove();
     }
   </script>
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Add a closing button
+# Agregar un botón de cierre
 
-There's a list of messages.
+Hay una lista de mensajes.
 
-Use JavaScript to add a closing button to the right-upper corner of each message.
+Usa JavaScript para agregar un botón de cierre en la esquina superior derecha de cada mensaje.
 
-The result should look like this:
+El resultado debería verse algo así:
 
 [iframe src="solution" height=450]
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/style.css b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/style.css
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md
diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
