Dec 17, 2020 · Oct 20, 2020 · Oct 20, 2020 · Oct 22, 2020 · Oct 22, 2020 · Oct 22, 2020
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md
 As we can see from HTML/CSS,the slider is a`<div>`with a colored background, that contains a runner -- another`<div>`with `position:relative`.
 Como podemos ver en el HTML/CSS,la barra de desplazamiento es un`<div>`con un fondo de color, que contiene un pasador: otro`<div>`con `position:relative`.

 To position the runner we use`position:relative`,to provide the coordinates relative to its parent, here it's more convenient here than `position:absolute`.
 Para posicionar el pasador usamos`position:relative`,para proveer las coordenadas relativas a su padre, aquí es más conveniente que `position:absolute`.

 Then we implement horizontal-only Drag'n'Drop with limitation by width.
 En este caso implementamos un Arrastrar y Soltar horizontal limitado por el ancho.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md

 ---

 #Slider
 #Control deslizante

 Create a slider:
 Crea un control deslizante:

 [iframe src="solution" height=60 border=1]

 Drag the blue thumb with the mouse and move it.
 Arrastra el pasador azul con el ratón y muévelo.

 Important details:
 Detalles importantes:

 -When the mouse button is pressed, during the dragging the mouse may go over or below the slider. The slider will still work (convenient for the user).
 -If the mouse moves very fast to the left or to the right, the thumb should stop exactly at the edge.
 -Cuando el botón del ratón es presionado, durante el arrastrado del ratón puedes ir por arriba o debajo de la barra deslizante. Ésta seguirá funcionando (es lo conveniente para el usuario).
 -Si el ratón se mueve muy rápido hacia la izquierda o la derecha, el pasador se detiene exactamente en el borde.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md
 To drag the element we can use`position:fixed`,it makes coordinates easier to manage. At the end we should switch it back to`position:absolute`to lay the element into the document.
 Para arrastrar el elemento podemos usar`position:fixed`,esto hace las coordenadas más fáciles de manejar. Al final deberíamos devolverla a`position:absolute`para fijar el elemento en el documento.

 When coordinates are at window top/bottom, we use`window.scrollTo`to scroll it.
 Cuando las coordinadas están en el tope/fondo de la ventana, usamos`window.scrollTo`para desplazarla.

 More details in the code, in comments.
 Más detalles en el código, en los comentarios.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md

 ---

 #Drag superheroes around the field
 #Arrastrar super héroes por el campo

 This task can help you to check understanding of several aspects of Drag'n'Drop and DOM.
 Esta tarea te puede ayudar a comprobar tu entendimiento de varios aspectos de Arrastrar y Soltar, y del DOM.

 Make all elements with class`draggable`-- draggable. Like a ball in the chapter.
 Hacer que todos los elementos con clase`draggable`sean arrastrables. Como la pelota de este capítulo.

 Requirements:
 Requerimientos:

 -Use event delegation to track drag start: a single event handler on`document`for `mousedown`.
 -If elements are dragged to top/bottom window edges -- the page scrolls up/down to allow further dragging.
 -There is nohorizontalscroll (this makes the task a bit simpler, adding it is easy).
 -Draggable elements or their parts should never leave the window, even after swift mouse moves.
 -Usa delegación de eventos para detectar el inicio del arrastrado: un solo manejador de eventos en el`document`para `mousedown`.
 -Si los elementos son arrastrados a los bordes superior/inferior de la ventana: la página se desliza hacia arriba/abajo para permitir dicho arrastre.
 -Sin desplazamientohorizontal(esto hace la tarea un poco más simple, añadirlo es fácil).
 -Los elementos arrastrables o sus partes nunca deben dejar la ventana, incluso después de movimientos rápidos del ratón.

 The demo is too big to fit it here, so here's the link.
 La demostración es demasiado grande para caber aquí, así que aquí está el enlace.

 [demo src="solution"]
diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
 The solution, step by step:
 La solución, paso a paso:

 ```html run
 <select id="genres">
diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md

 ---

 #Add an option to select
 #Añade una opción al select

 There's a `<select>`:
 Tenemos un `<select>`:

 ```html
 <select id="genres">
 </select>
 ```

 Use JavaScriptto:
 Utiliza JavaScriptpara:

 1.Show the value and the text of the selectedoption.
 2.Add an option: `<option value="classic">Classic</option>`.
 3.Make it selected.
 1.Mosrar el valor y el texto deloption seleccionado.
 2.Añadir un option: `<option value="classic">Classic</option>`.
 3.Seleccionarlo.

 Note, if you've done everything right, your alertshould show `blues`.
 Nota, si haz hecho todo bien, tu alertdebería mostrar `blues`.
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		As we can see from HTML/CSS,the slider is a`<div>`with a colored background, that contains a runner -- another`<div>`with `position:relative`.
		Como podemos ver en el HTML/CSS,la barra de desplazamiento es un`<div>`con un fondo de color, que contiene un pasador: otro`<div>`con `position:relative`.

		To position the runner we use`position:relative`,to provide the coordinates relative to its parent, here it's more convenient here than `position:absolute`.
		Para posicionar el pasador usamos`position:relative`,para proveer las coordenadas relativas a su padre, aquí es más conveniente que `position:absolute`.

		Then we implement horizontal-only Drag'n'Drop with limitation by width.
		En este caso implementamos un Arrastrar y Soltar horizontal limitado por el ancho.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,15 +2,15 @@ importance: 5

		---

		#Slider
		#Control deslizante

		Create a slider:
		Crea un control deslizante:

		[iframe src="solution" height=60 border=1]

		Drag the blue thumb with the mouse and move it.
		Arrastra el pasador azul con el ratón y muévelo.

		Important details:
		Detalles importantes:

		-When the mouse button is pressed, during the dragging the mouse may go over or below the slider. The slider will still work (convenient for the user).
		-If the mouse moves very fast to the left or to the right, the thumb should stop exactly at the edge.
		-Cuando el botón del ratón es presionado, durante el arrastrado del ratón puedes ir por arriba o debajo de la barra deslizante. Ésta seguirá funcionando (es lo conveniente para el usuario).
		-Si el ratón se mueve muy rápido hacia la izquierda o la derecha, el pasador se detiene exactamente en el borde.
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		To drag the element we can use`position:fixed`,it makes coordinates easier to manage. At the end we should switch it back to`position:absolute`to lay the element into the document.
		Para arrastrar el elemento podemos usar`position:fixed`,esto hace las coordenadas más fáciles de manejar. Al final deberíamos devolverla a`position:absolute`para fijar el elemento en el documento.

		When coordinates are at window top/bottom, we use`window.scrollTo`to scroll it.
		Cuando las coordinadas están en el tope/fondo de la ventana, usamos`window.scrollTo`para desplazarla.

		More details in the code, in comments.
		Más detalles en el código, en los comentarios.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,19 +2,19 @@ importance: 5

		---

		#Drag superheroes around the field
		#Arrastrar super héroes por el campo

		This task can help you to check understanding of several aspects of Drag'n'Drop and DOM.
		Esta tarea te puede ayudar a comprobar tu entendimiento de varios aspectos de Arrastrar y Soltar, y del DOM.

		Make all elements with class`draggable`-- draggable. Like a ball in the chapter.
		Hacer que todos los elementos con clase`draggable`sean arrastrables. Como la pelota de este capítulo.

		Requirements:
		Requerimientos:

		-Use event delegation to track drag start: a single event handler on`document`for `mousedown`.
		-If elements are dragged to top/bottom window edges -- the page scrolls up/down to allow further dragging.
		-There is nohorizontalscroll (this makes the task a bit simpler, adding it is easy).
		-Draggable elements or their parts should never leave the window, even after swift mouse moves.
		-Usa delegación de eventos para detectar el inicio del arrastrado: un solo manejador de eventos en el`document`para `mousedown`.
		-Si los elementos son arrastrados a los bordes superior/inferior de la ventana: la página se desliza hacia arriba/abajo para permitir dicho arrastre.
		-Sin desplazamientohorizontal(esto hace la tarea un poco más simple, añadirlo es fácil).
		-Los elementos arrastrables o sus partes nunca deben dejar la ventana, incluso después de movimientos rápidos del ratón.

		The demo is too big to fit it here, so here's the link.
		La demostración es demasiado grande para caber aquí, así que aquí está el enlace.

		[demo src="solution"]
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		The solution, step by step:
		La solución, paso a paso:

		```html run
		<select id="genres">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,9 +2,9 @@ importance: 5

		---

		#Add an option to select
		#Añade una opción al select

		There's a `<select>`:
		Tenemos un `<select>`:

		```html
		<select id="genres">
Expand All		@@ -13,10 +13,10 @@ There's a `<select>`:
		</select>
		```

		Use JavaScriptto:
		Utiliza JavaScriptpara:

		1.Show the value and the text of the selectedoption.
		2.Add an option: `<option value="classic">Classic</option>`.
		3.Make it selected.
		1.Mosrar el valor y el texto deloption seleccionado.
		2.Añadir un option: `<option value="classic">Classic</option>`.
		3.Seleccionarlo.

		Note, if you've done everything right, your alertshould show `blues`.
		Nota, si haz hecho todo bien, tu alertdebería mostrar `blues`.