Form properties and methods

2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md

@@ -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>` 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.

2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md

@@ -1,16 +1,16 @@
-importance: 5
+importancia: 5
 
 ---
 
-# Slider
+# Barra de desplazamiento
 
-Create a slider:
+Crea una barra de desplazamiento:
 
 [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 arriba o debajo de la barra de desplazamiento. Ésta seguirá funcionando (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.

2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md

@@ -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.

2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md

@@ -1,20 +1,20 @@
-importance: 5
+importancia: 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 no horizontal scroll (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 desplazamiento horizontal (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"]

2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md

@@ -1,4 +1,4 @@
-The solution, step by step:
+La solución, paso a paso:
 
 ```html run
 <select id="genres">

2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md

@@ -1,10 +1,10 @@
-importance: 5
+importancia: 5
 
 ---
 
-# Add an option to select
+# Añade una opción al select
 
-There's a `<select>`:
+Tenemos un `<select>`:
 
 ```html
 <select id="genres">
@@ -13,10 +13,10 @@ There's a `<select>`:
 </select>
 ```
 
-Use JavaScript to:
+Utiliza JavaScript para:
 
-1. Show the value and the text of the selected option.
-2. Add an option: `<option value="classic">Classic</option>`.
-3. Make it selected.
+1. Mosrar el valor y el texto del option seleccionado.
+2. Añadir un option: `<option value="classic">Classic</option>`.
+3. Seleccionarlo.
 
-Note, if you've done everything right, your alert should show `blues`.
+Nota, si haz hecho todo bien, tu alert debería mostrar `blues`.