Sep 20, 2020 · Aug 21, 2020 · Aug 28, 2020 · Aug 29, 2020 · Aug 29, 2020 · Aug 29, 2020
diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md

 ---

 #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.
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md
 The solution has two parts.
 La solución tiene dos partes.

 1.Wrap every tree node title into`<span>`.Then we can CSS-stylethem 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-styleen`: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>`.
diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md

 ---

 #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.
diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md

 ---

 #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">
 </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.
diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md

 ---

 #Tooltip behavior
 #Comportamiento: Tooltip

 Create JS-code for the tooltip behavior.
 Crea código JS para el comportamiento "tooltip".

 When a mousecomes over an element with `data-tooltip`,the tooltipshould appear over it, and when it's gone then hide.
 Cuando un mousepasa sobre un elemento con `data-tooltip`,el tooltipdebe aparecer sobre él, y ocultarse cuando se va.

 An example of annotatedHTML:
 Un ejemplo enHTML 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 nestedtags(yet).
 En esta tarea suponemos que todos los elementos con `data-tooltip`solo tienen texto dentro. Sintagsanidados (todavía).

 Details:
 Detalles:

 -The distance between the element and the tooltipshould be `5px`.
 -The tooltipshould be centered relative to the element, if possible.
 -The tooltipshould not cross window edges. Normally it should be above the element, but if the element is at the page top and there'snospace for thetooltip,then below it.
 -Thetooltipcontent is given in the `data-tooltip` attribute. It can be arbitraryHTML.
 -La distancia entre el elemento y el tooltipdebe ser `5px`.
 -El tooltipdebe ser centrado relativo al elemento si es posible.
 -El tooltipno 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 ynohay espacio para eltooltip,entonces debajo de él.
 -El contenido deltooltipestá dado en el atributo `data-tooltip`. Este puede serHTML 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 managetooltipsfrom 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 lostooltipsdesde allí.

 After the behavior is implemented, even people unfamiliar withJavaScriptcan add annotated elements.
 Después de implementar el comportamiento, incluso gente no familiarizada conJavaScriptpuede agregar elementos anotados.

 P.S. Only one tooltipmay show up at a time.
 P.D. Solamente un tooltippuede mostrarse a la vez.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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.
Original file line number	Diff line number	Diff line change
		@@ -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-stylethem 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-styleen`: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).
vplentinax marked this conversation as resolved. Show resolvedHide resolved
		2.Establece el manejador al nodo raíz del`tree`y maneja los clics en aquellos títulos`<span>`.
vplentinax marked this conversation as resolved. Show resolvedHide resolved
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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.
vplentinax marked this conversation as resolved. Show resolvedHide resolved

		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">
Expand All		@@ -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.