Skip to content

Form properties and methods #431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Dec 17, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
a8373c3
Form elements traducido
Oct 20, 2020
f7fdcad
Corregida línea 243: Parámetros
Oct 20, 2020
5c50ce2
Fix pueden -> puede 2-ui/4-forms-controls/1-form-elements/article.md
Oct 22, 2020
47d4be7
Update 2-ui/4-forms-controls/1-form-elements/article.md
Oct 22, 2020
d4242d9
Update 2-ui/4-forms-controls/1-form-elements/article.md
Oct 22, 2020
6b6b22e
Merge branch 'master' into kenliten
joaquinelio Nov 13, 2020
9a2f74a
Translated solution.md
Nov 27, 2020
746fa76
Translated task.md
Nov 27, 2020
ca7814e
Update solution.md
Nov 27, 2020
ee2fe5b
Update task.md
Nov 27, 2020
338935b
Update solution.md
Nov 27, 2020
5fe2e4b
Update task.md
Nov 27, 2020
ff3ab4b
Update 2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md
vplentinax Dec 17, 2020
99e7d5a
Update 2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
vplentinax Dec 17, 2020
da43698
Update 2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
vplentinax Dec 17, 2020
b0670f7
Update 2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
vplentinax Dec 17, 2020
e582735
Update 2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
vplentinax Dec 17, 2020
bcea94e
Update 2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md
vplentinax Dec 17, 2020
7cebc17
Update 2-ui/4-forms-controls/1-form-elements/article.md
vplentinax Dec 17, 2020
ef50315
Update 2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
vplentinax Dec 17, 2020
f49cc00
Update 2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
vplentinax Dec 17, 2020
7ed125f
Update 2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
vplentinax Dec 17, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.
12 changes: 6 additions & 6 deletions 2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
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.
18 changes: 9 additions & 9 deletions 2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
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 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"]
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 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`.
Loading