diff --git a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html index 4850b2ca9..271850ef0 100644 --- a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html +++ b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html @@ -23,33 +23,33 @@ - Deposit calculator. + Calculadora de depósito.
- + - + - + @@ -62,8 +62,8 @@
Initial depositDepósito inicial
How many months?¿Cuántos meses?
Interest per year?¿Interés anual?
- - + + diff --git a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html index 7f464020d..cf0ed7af3 100644 --- a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html +++ b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html @@ -23,33 +23,33 @@ - Deposit calculator. + Calculadora de depósito.
Was:Becomes:Inicial:Final:
- + - + - + @@ -62,8 +62,8 @@
Initial depositDepósito inicial
How many months?¿Cuántos meses?
Interest per year?¿Interés anual?
- - + + diff --git a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md index e324577a9..ce56913d7 100644 --- a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md +++ b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md @@ -2,20 +2,20 @@ importance: 5 --- -# Deposit calculator +# Calculadora de depósito -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. +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. -Here's the demo: +Acá una demostración: [iframe src="solution" height="350" border="1"] -Any input change should be processed immediately. +Cualquier modificación debe ser procesada de inmediato. -The formula is: +La fórmula es: ```js -// initial: the initial money sum -// interest: e.g. 0.05 means 5% per year -// years: how many years to wait +// initial: la suma inicial de dinero +// interest: e.g. 0.05 significa 5% anual +// years: cuántos años esperar let result = Math.round(initial * (1 + interest * years)); ``` diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index b43a305b3..69e862a13 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -1,21 +1,21 @@ -# Events: change, input, cut, copy, paste +# Eventos: change, input, cut, copy, paste -Let's cover various events that accompany data updates. +Veamos varios eventos que acompañan la actualización de datos. -## Event: change +## Evento: change -The `change` event triggers when the element has finished changing. +El evento `change` se activa cuando el elemento finaliza un cambio. -For text inputs that means that the event occurs when it loses focus. +Para ingreso de texto significa que el evento ocurre cuando se pierde foco en el elemento. -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: +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`: ```html autorun height=40 run ``` -For other elements: `select`, `input type=checkbox/radio` it triggers right after the selection changes: +Para otros elementos: `select`, `input type=checkbox/radio` ocurre justo después de cambiar la opción seleccionada: ```html autorun height=40 run oninput: @@ -44,25 +44,25 @@ For instance: ``` -If we want to handle every modification of an `` then this event is the best choice. +Si queremos manejar cualquier modificación en un `` entonces este evento es la mejor opción. -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. +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. -```smart header="Can't prevent anything in `oninput`" -The `input` event occurs after the value is modified. +```smart header="No se puede evitar nada en `oninput`" +El evento `input` ocurre después de que el valor es modificado. -So we can't use `event.preventDefault()` there -- it's just too late, there would be no effect. +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. ``` -## Events: cut, copy, paste +## Eventos: cut, copy, paste -These events occur on cutting/copying/pasting a value. +Estos eventos ocurren al cortar/copiar/pegar un valor. -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. +Estos pertenecen a la clase [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) y dan acceso a los datos copiados/pegados. -We also can use `event.preventDefault()` to abort the action, then nothing gets copied/pasted. +También podemos usar `event.preventDefault()` para cancelar la acción y que nada sea copiado/pegado. +Por ejemplo, el siguiente código evita tales eventos y muestra qué es los que estamos intentando cortar/copiar/pegar: -For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste: ```html autorun height=40 run @@ -74,20 +74,20 @@ For instance, the code below prevents all such events and shows what we are tryi ``` -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. +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. -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. +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. -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. +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`. -Also it's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox. +Además está prohibido generar eventos "personalizados" del portapapeles con `dispatchEvent` en todos los navegadores excepto Firefox. -## Summary +## Resumen -Data change events: +Eventos de modificación de datos: -| Event | Description | Specials | +| Evento | Descripción | Especiales | |---------|----------|-------------| -| `change`| A value was changed. | For text inputs triggers on focus loss. | -| `input` | For text inputs on every change. | Triggers immediately unlike `change`. | -| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipboardData` property gives read/write access to the clipboard. | +| `change`| Un valor fue cambiado. | Para ingreso de texto, ocurre al perderse el enfoque | +| `input` | Para entrada de texto en cada cambio | Ocurre inmediatamente a diferencia de `change`. | +| `cut/copy/paste` | Acciones cortar/copiar/pegar | La acción puede ser cancelada. La propiedad `event.clipboardData` brinda acceso a leer/escribir del portapeles. |
Was:Becomes:Inicial:Final: