Event delegation

2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Hide messages with delegation
+# Ocultar mensajes con delegación
 
-There's a list of messages with removal buttons `[x]`. Make the buttons work.
+Hay una lista de mensajes con botones para borrarlos `[x]`. Haz que funcionen.
 
-Like this:
+Como esto:
 
 [iframe src="solution" height=420]
 
-P.S. Should be only one event listener on the container, use event delegation.
+P.D. Debe haber solamente un _event lintener_ en el contenedor, usa delegación de eventos.

2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md

@@ -1,4 +1,4 @@
-The solution has two parts.
+La solución tiene dos partes.
 
-1. Wrap every tree node title into `<span>`. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `<span>` width is exactly the text width (unlike without it).
-2. Set a handler to the `tree` root node and handle clicks on that `<span>` titles.
+1. Envuelve cada nodo de título del árbol dentro de `<span>`. Luego podemos aplicarles CSS-style en `:hover` y manejar los clics exactamente sobre el texto, porque el ancho de `<span>` es exactamente el ancho del texto (no lo será si no lo tiene).
+2. Establece el manejador al nodo raíz del `tree` y maneja los clics en aquellos títulos `<span>`.

2-ui/2-events/03-event-delegation/2-sliding-tree/task.md

@@ -2,13 +2,13 @@ importance: 5
 
 ---
 
-# Tree menu
+# Menú de árbol
 
-Create a tree that shows/hides node children on click:
+Crea un árbol que muestre y oculte nodos hijos con clics:
 
 [iframe border=1 src="solution"]
 
-Requirements:
+Requerimientos:
 
-- Only one event handler (use delegation)
-- A click outside the node title (on an empty space) should not do anything.
+- Solamente un manejador de eventos (usa delegación)
+- Un clic fuera de los nodos de títulos (en un espacio vacío) no debe hacer nada.

2-ui/2-events/03-event-delegation/3-sortable-table/task.md

@@ -2,11 +2,11 @@ importance: 4
 
 ---
 
-# Sortable table
+# Tabla ordenable
 
-Make the table sortable: clicks on `<th>` elements should sort it by corresponding column.
+Haz que la tabla se pueda ordenar: los clics en elementos `<th>` deberían ordenarla por la columna correspondiente.
 
-Each `<th>` has the type in the attribute, like this:
+Cada `<th>` tiene su tipo de datos en el atributo, como esto:
 
 ```html
 <table id="grid">
@@ -32,12 +32,12 @@ Each `<th>` has the type in the attribute, like this:
 </table>
 ```
 
-In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
+En el ejemplo anterior la primera columna tiene números y la segunda cadenas. La función de ordenamiento debe manejar el orden de acuerdo al tipo de dato.
 
-Only `"string"` and `"number"` types should be supported.
+Solamente los tipos `"string"` y `"number"` deben ser soportados.
 
-The working example:
+Ejemplo en funcionamiento:
 
 [iframe border=1 src="solution" height=190]
 
-P.S. The table can be big, with any number of rows and columns.
+P.D. La tabla puede ser grande, con cualquier cantidad de filas y columnas.

2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md

@@ -2,37 +2,37 @@ importance: 5
 
 ---
 
-# Tooltip behavior
+# Comportamiento: Tooltip
 
-Create JS-code for the tooltip behavior.
+Crea código JS para el comportamiento "tooltip".
 
-When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide.
+Cuando un mouse pasa sobre un elemento con `data-tooltip`, el tooltip debe aparecer sobre él, y ocultarse cuando se va.
 
-An example of annotated HTML:
+Un ejemplo en HTML comentado:
 ```html
 <button data-tooltip="the tooltip is longer than the element">Short button</button>
 <button data-tooltip="HTML<br>tooltip">One more button</button>
 ```
 
-Should work like this:
+Debe funcionar así:
 
 [iframe src="solution" height=200 border=1]
 
-In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags (yet).
+En esta tarea suponemos que todos los elementos con `data-tooltip` solo tienen texto dentro. Sin tags anidados (todavía).
 
-Details:
+Detalles:
 
-- The distance between the element and the tooltip should be `5px`.
-- The tooltip should be centered relative to the element, if possible.
-- The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it.
-- The tooltip content is given in the `data-tooltip` attribute. It can be arbitrary HTML.
+- La distancia entre el elemento y el tooltip debe ser `5px`.
+- El tooltip debe ser centrado relativo al elemento si es posible.
+- El tooltip no debe cruzar los bordes de la ventana. Normalmente debería estar sobre el elemento, pero si el elemento está en la parte superior de la página y no hay espacio para el tooltip, entonces debajo de él.
+- El contenido del tooltip está dado en el atributo `data-tooltip`. Este puede ser HTML arbitrario.
 
-You'll need two events here:
-- `mouseover` triggers when a pointer comes over an element.
-- `mouseout` triggers when a pointer leaves an element.
+Necesitarás dos eventos aquí:
+- `mouseover` se dispara cuando el puntero pasa sobre el elemento.
+- `mouseout` se dispara cuando el puntero deja el elemento.
 
-Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there.
+Usa delegación de eventos:  prepare dos manejadores en el `document` para rastrear todos los "overs" y "outs" de los elementos con `data-tooltip` y administra los tooltips desde allí.
 
-After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.
+Después de implementar el comportamiento, incluso gente no familiarizada con JavaScript puede agregar elementos anotados.
 
-P.S. Only one tooltip may show up at a time.
+P.D. Solamente un tooltip puede mostrarse a la vez.