You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,20 +2,20 @@ importance: 5
2
2
3
3
---
4
4
5
-
# Deposit calculator
5
+
# Calculadora de depósito
6
6
7
-
Create an interface that allows to enter a sum of bank deposit and percentage, then calculates how much it will be after given periods of time.
7
+
Crea una interfaz que permita ingresar una suma de depósito bancario y porcentaje, luego calcula cuánto será después de un periodo de tiempo determinado.
8
8
9
-
Here's the demo:
9
+
Acá una demostración:
10
10
11
11
[iframe src="solution" height="350" border="1"]
12
12
13
-
Any input change should be processed immediately.
13
+
Cualquier modificación debe ser procesada de inmediato.
14
14
15
-
The formula is:
15
+
La fórmula es:
16
16
```js
17
-
// initial: the initial money sum
18
-
// interest: e.g. 0.05 means 5% per year
19
-
// years: how many years to wait
17
+
// initial: la suma inicial de dinero
18
+
// interest: e.g. 0.05 significa 5% anual
19
+
// years: cuántos años esperar
20
20
let result =Math.round(initial * (1+ interest * years));
Let's cover various events that accompany data updates.
3
+
Veamos varios eventos que acompañan la actualización de datos.
4
4
5
-
## Event: change
5
+
## Evento: change
6
6
7
-
The `change`event triggers when the element has finished changing.
7
+
El evento `change`se activa cuando el elemento finaliza un cambio.
8
8
9
-
For text inputs that means that the event occurs when it loses focus.
9
+
Para ingreso de texto significa que el evento ocurre cuando se pierde foco en el elemento.
10
10
11
-
For instance, while we are typing in the text field below -- there's no event. But when we move the focus somewhere else, for instance, click on a button -- there will be a `change` event:
11
+
Por ejemplo, mientras estamos escribiendo en el siguiente cuadro de texto -- no hay evento. Pero cuando movemos el focus (enfoque) a otro lado, por ejemplo hacemos click en un botón, entonces ocurre el evento `change`:
12
12
13
13
```html autorun height=40 run
14
14
<inputtype="text"onchange="alert(this.value)">
15
15
<inputtype="button"value="Button">
16
16
```
17
17
18
-
For other elements: `select`, `input type=checkbox/radio`it triggers right after the selection changes:
18
+
Para otros elementos: `select`, `input type=checkbox/radio`ocurre justo después de cambiar la opción seleccionada:
19
19
20
20
```html autorun height=40 run
21
21
<selectonchange="alert(this.value)">
@@ -27,13 +27,13 @@ For other elements: `select`, `input type=checkbox/radio` it triggers right afte
27
27
```
28
28
29
29
30
-
## Event: input
30
+
## Evento: input
31
31
32
-
The `input`event triggers every time after a value is modified by the user.
32
+
El evento `input`ocurre cada vez que un valor es modificado por el ususario.
33
33
34
-
Unlike keyboard events, it triggers on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.
34
+
A diferencia de los eventos de teclado, ocurre con el cambio a cualquier valor, incluso aquellos no que involucran acciones de teclado: copiar/pegar con el mouse o usar reconocimiento de voz para dictar texto.
If we want to handle every modification of an `<input>`then this event is the best choice.
47
+
Si queremos manejar cualquier modificación en un `<input>`entonces este evento es la mejor opción.
48
48
49
-
On the other hand, `input`event doesn't trigger on keyboard input and other actions that do not involve value change, e.g. pressing arrow keys `key:⇦``key:⇨`while in the input.
49
+
Por otro lado, el evento `input`no se activa con entradas del teclado u otras acciones que no involucren modificar un valor, e.g presionar las flechas de dirección `key:⇦``key:⇨`mientras se está en el input.
The `input`event occurs after the value is modified.
51
+
```smart header="No se puede evitar nada en`oninput`"
52
+
El evento `input`ocurre después de que el valor es modificado.
53
53
54
-
So we can't use `event.preventDefault()`there -- it's just too late, there would be no effect.
54
+
Por lo tanto no podemos usar `event.preventDefault()`para evitar modificaciones, en este caso ya es demasiado tarde por lo que no habría efecto.
55
55
```
56
56
57
-
## Events: cut, copy, paste
57
+
## Eventos: cut, copy, paste
58
58
59
-
These events occur on cutting/copying/pasting a value.
59
+
Estos eventos ocurren al cortar/copiar/pegar un valor.
60
60
61
-
They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is copied/pasted.
61
+
Estos pertenecen a la clase [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) y dan acceso a los datos copiados/pegados.
62
62
63
-
We also can use `event.preventDefault()` to abort the action, then nothing gets copied/pasted.
63
+
También podemos usar `event.preventDefault()` para cancelar la acción y que nada sea copiado/pegado.
64
+
Por ejemplo, el siguiente código evita tales eventos y muestra qué es los que estamos intentando cortar/copiar/pegar:
64
65
65
-
For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste:
66
66
67
67
```html autorun height=40 run
68
68
<input type="text" id="input">
@@ -74,20 +74,20 @@ For instance, the code below prevents all such events and shows what we are tryi
74
74
</script>
75
75
```
76
76
77
-
Please note, that it's possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it.
77
+
Por favor ten en cuenta que no solo es posible copiar/pegar texto, sino cualquier cosa. Por ejemplo, podemos copiar un archivo en el gestor de archivos del SO y pegarlo.
78
78
79
-
There's a list of methods [in the specification](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer)that can work with different data types including files, read/write to the clipboard.
79
+
Hay una lista de métodos [en la especificación](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer)que puede funcionar con diferentes tipos de datos incluyendo archivos, leer/escribir del portapapeles.
80
80
81
-
But please note that clipboard is a "global" OS-level thing. Most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety, e.g. in `onclick` event handlers.
81
+
Pero ten en cuenta que el portapapeles es algo a nivel "global" del SO. La mayoría de los navegadores dan acceso a leer/escribir del portapapeles dentro del alcance del usuario por cuestiones de seguridad, e.g. al manejar eventos `onclick`.
82
82
83
-
Also it's forbidden to generate "custom" clipboard events with`dispatchEvent`in all browsers except Firefox.
83
+
Además está prohibido generar eventos "personalizados" del portapapeles con`dispatchEvent`en todos los navegadores excepto Firefox.
84
84
85
-
## Summary
85
+
## Resumen
86
86
87
-
Data change events:
87
+
Eventos de modificación de datos:
88
88
89
-
|Event|Description|Specials|
89
+
|Evento|Descripción|Especiales|
90
90
|---------|----------|-------------|
91
-
|`change`|A value was changed. |For text inputs triggers on focus loss.|
92
-
|`input`|For text inputs on every change. | Triggers immediately unlike`change`. |
93
-
|`cut/copy/paste`|Cut/copy/paste actions. | The action can be prevented. The `event.clipboardData`property gives read/write access to the clipboard. |
91
+
|`change`|Un valor fue cambiado. |Para ingreso de texto, ocurre al perderse el enfoque|
92
+
|`input`|Para entrada de texto en cada cambio | Ocurre inmediatamente a diferencia de`change`. |
93
+
|`cut/copy/paste`|Acciones cortar/copiar/pegar | La acción puede ser cancelada. La propiedad `event.clipboardData`brinda acceso a leer/escribir del portapeles. |
0 commit comments