From 0596e2749abb2c71ea05495ca027504218d1c07d Mon Sep 17 00:00:00 2001 From: camperbot Date: Sat, 15 May 2021 21:31:37 +0530 Subject: [PATCH] chore(i18n,curriculum): update translations (#42147) --- .../add-methods-after-inheritance.md | 4 +- ...-design-with-bootstrap-fluid-containers.md | 26 +++---- ...strap-grid-to-put-elements-side-by-side.md | 22 +++--- ...s-of-a-dangerous-action-with-btn-danger.md | 16 ++--- .../build-a-25-5-clock.md | 68 +++++++++---------- .../build-a-drum-machine.md | 26 +++---- 6 files changed, 82 insertions(+), 80 deletions(-) diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md index bde8125fc5..f989482b74 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md @@ -58,10 +58,10 @@ assert(typeof Animal.prototype.bark == 'undefined'); assert(typeof Dog.prototype.eat == 'function'); ``` -`Dog` debe tener el método `bark()` como una propiedad propia `own`. +El prototipo `Dog` debe tener un método `bark()`. ```js -assert(Dog.prototype.hasOwnProperty('bark')); +assert('bark' in Dog.prototype); ``` `beagle` debe ser una instancia de (`instanceof`) `Animal`. diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md index 7de266b099..dd13fab9e8 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9acde08712 -title: Use Responsive Design with Bootstrap Fluid Containers +title: Utiliza diseño responsivo con contenedores de fluido Bootstrap challengeType: 0 forumTopicId: 18362 dashedName: use-responsive-design-with-bootstrap-fluid-containers @@ -8,29 +8,31 @@ dashedName: use-responsive-design-with-bootstrap-fluid-containers # --description-- -In the HTML5 and CSS section of freeCodeCamp we built a Cat Photo App. Now let's go back to it. This time, we'll style it using the popular Bootstrap responsive CSS framework. +En la sección de freeCodeCamp de HTML5 y CSS, creamos una aplicación de fotos de gatito. Ahora vamos de vuelta a la aplicación. Esta vez, lo estilizaremos usando el popular framework CSS responsivo de Bootstrap. -Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name responsive design. +Bootstap averiguará la anchura de tu pantalla y responderá redimensionando los elementos HTML, de aquí el nombre diseño responsivo. -With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width. +Con diseño responsivo, no hay necesidad de diseñar una versión móvil de tu sitio web. Se verá bien en dispositivos con pantallas de cualquier anchura. -You can add Bootstrap to any app by adding the following code to the top of your HTML: +Puedes añadir Bootstrap a cualquier aplicación al agregar el siguiente código encima de tu HTML: -`` +```html + +``` -In this case, we've already added it for you to this page behind the scenes. Note that using either `>` or `/>` to close the `link` tag is acceptable. +En este caso, ya lo añadimos a esta página. Ten en cuenta que para cerrar la etiqueta `link` puedes utilizar `>` o `/>`. -To get started, we should nest all of our HTML (except the `link` tag and the `style` element) in a `div` element with the class `container-fluid`. +Para comenzar, debemos anidar todo nuestro HTML (menos la etiqueta `link` y el elemento `style`) en un elemento `div` con la clase `container-fluid`. # --hints-- -Your `div` element should have the class `container-fluid`. +Tu elemento `div` debe tener la clase `container-fluid`. ```js assert($('div').hasClass('container-fluid')); ``` -Your `div` element should have a closing tag. +Tu elemento `div` debe tener una etiqueta de cierre. ```js assert( @@ -40,10 +42,10 @@ assert( ); ``` -All HTML elements after the closing `style` tag should be nested in `.container-fluid`. +Todos los elementos HTML después de la etiqueta de cierre `style` deben anidarse en `.container-fluid`. ```js -assert($('.container-fluid').children().length >= 8); +assert($('.container-fluid').children().length >= 8 && !$('.container-fluid').has("style").length && !$('.container-fluid').has("link").length); ``` # --seed-- diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md index 17f0f4c146..aca365379f 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md @@ -1,6 +1,6 @@ --- id: bad88fee1348ce8acef08815 -title: Use the Bootstrap Grid to Put Elements Side By Side +title: Utiliza la cuadrilla (grid) Bootstrap para poner elemento de lado a lado challengeType: 0 forumTopicId: 18371 dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side @@ -8,33 +8,33 @@ dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side # --description-- -Bootstrap uses a responsive 12-column grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a `div` element. +Bootstrap utiliza un sistema responsivo de cuadrilla de 12 columnas, el cual hace que sea fácil poner elementos en dos filas y especificar la anchura relativa de cada elemento. La mayoría de las clases de Bootstrap pueden ser aplicadas a un elemento `div`. -Bootstrap has different column width attributes that it uses depending on how wide the user's screen is. For example, phones have narrow screens, and laptops have wider screens. +Bootstrap tiene diferentes atributos de anchura de columna que utiliza con respecto a la anchura de la pantalla del usuario. Por ejemplo, los teléfonos tienen pantallas más angostas y las computadoras portátiles tienen pantallas más anchas. -Take for example Bootstrap's `col-md-*` class. Here, `md` means medium, and `*` is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified. +Ten como ejemplo la clase de Bootstrap `col-md-*`. Aquí, `md` significa mediano y `*` es un número que especifica cuántas columnas de ancho deben tener los elementos. En este caso, se especifica el ancho de la columna de un elemento en una pantalla de tamaño mediano, como un portátil. -In the Cat Photo App that we're building, we'll use `col-xs-*`, where `xs` means extra small (like an extra-small mobile phone screen), and `*` is the number of columns specifying how many columns wide the element should be. +En la aplicación de fotos de gatitos que estamos creando, utilizaremos `col-xs-*`, donde `xs` significa extra pequeño (como una pantalla de teléfono celular extra pequeña) y `*` es el número de columnas que especifica cuántas columnas de ancho debe tener un elemento. -Put the `Like`, `Info` and `Delete` buttons side-by-side by nesting all three of them within one `
` element, then each of them within a `
` element. +Pon los botones `Like`, `Info` y `Delete` de lado a lado anidando los tres dentro de un elemento `
`, luego cada uno de ellos dentro de un elemento `
`. -The `row` class is applied to a `div`, and the buttons themselves can be nested within it. +La clase `row` se aplica a un `div` y los mismos botones pueden anidarse dentro de ella. # --hints-- -Your buttons should all be nested within the same `div` element with the class `row`. +Todos los botones deben estar anidados dentro del mismo elemento `div` con la clase `row`. ```js assert($('div.row:has(button)').length > 0); ``` -Each of your Bootstrap buttons should be nested within its own `div` element with the class `col-xs-4`. +Cada uno de los botones de Bootstap debe anidarse dentro de su propio elemento `div` con la clase `col-xs-4`. ```js assert($('div.col-xs-4:has(button)').length > 2); ``` -Each of your `button` elements should have a closing tag. +Cada uno de los elementos `button` debe tener una etiqueta de cierre. ```js assert( @@ -44,7 +44,7 @@ assert( ); ``` -Each of your `div` elements should have a closing tag. +Cada uno de loselementos `div` debe tener una etiqueta de cierre. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md index fa35d89a56..316584051a 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md @@ -1,6 +1,6 @@ --- id: bad87fee1348ce8acef08814 -title: Warn Your Users of a Dangerous Action with btn-danger +title: Advierte a tus usuarios de una acción peligrosa con btn-danger challengeType: 0 forumTopicId: 18375 dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger @@ -8,33 +8,33 @@ dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger # --description-- -Bootstrap comes with several pre-defined colors for buttons. The `btn-danger` class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo. +Bootstrap viene con diferentes colores predefinidos para botones. La clase `btn-danger` es el color del botón que usarás para notificar a los usuarios que el botón realiza una acción destructiva, como eliminar una foto de gato. -Create a button with the text "Delete" and give it the class `btn-danger`. +Crea un botón con el texto `Delete` y dale la clase `btn-danger`. -Note that these buttons still need the `btn` and `btn-block` classes. +Ten en cuenta que estos botones todavía necesitan las clases `btn` y `btn-block`. # --hints-- -You should create a new `button` element with the text "Delete". +Debes crear un nuevo elemento `button` con el texto `Delete`. ```js assert(new RegExp('Delete', 'gi').test($('button').text())); ``` -All of your Bootstrap buttons should have the `btn` and `btn-block` classes. +Todos tus botones de Bootstrap deben tener clases `btn` y `btn-block`. ```js assert($('button.btn-block.btn').length > 2); ``` -Your new button should have the class `btn-danger`. +Tu nuevo botón debe tener la clase `btn-danger`. ```js assert($('button').hasClass('btn-danger')); ``` -All of your `button` elements should have closing tags. +Todos los elementos `button` deben tener etiquetas de cierre. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/front-end-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/espanol/03-front-end-libraries/front-end-libraries-projects/build-a-25-5-clock.md index 0a332ee2b3..fb6a4356f4 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/front-end-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/front-end-libraries-projects/build-a-25-5-clock.md @@ -1,6 +1,6 @@ --- id: bd7158d8c442eddfaeb5bd0f -title: Build a 25 + 5 Clock +title: Construye un reloj 25 + 5 challengeType: 3 forumTopicId: 301373 dashedName: build-a-25--5-clock @@ -8,71 +8,71 @@ dashedName: build-a-25--5-clock # --description-- -**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: . +**Objetivo:** Construye una aplicación funcional [CodePen.io](https://codepen.io) similar a esta: . -Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style. +Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue pasar todas las pruebas. Dale tu propio estilo personal. -You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! +Puedes utilizar una mezcla de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Deberías utilizar un framework frontend (como React por ejemplo) porque esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales a las indicadas anteriormente, su utilización corre bajo su propio riesgo. Estamos considerando apoyar otros frameworks frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos solucionar todos los informes de incidencias que utilicen el conjunto de tecnologías sugeridas para este proyecto. ¡Feliz programación! -**User Story #1:** I can see an element with `id="break-label"` that contains a string (e.g. "Break Length"). +**Historia de usuario #1:** Puedo ver un elemento con `id="break-label"` que contiene una cadena (por ejemplo: "Break Length"). -**User Story #2:** I can see an element with `id="session-label"` that contains a string (e.g. "Session Length"). +**Historia de usuario #2:** Puedo ver un elemento con `id="session-label"` que contiene una cadena (p.ej "Session Length"). -**User Story #3:** I can see two clickable elements with corresponding IDs: `id="break-decrement"` and `id="session-decrement"`. +**Historia de usuario #3:** Puedo ver dos elementos cliqueables con los siguientes IDs: `id="break-decrement"` y `id="session-decrement"`. -**User Story #4:** I can see two clickable elements with corresponding IDs: `id="break-increment"` and `id="session-increment"`. +**Historia de usuario #4:** Puedo ver dos elemento cliqueables con los siguientes IDs: `id="break-increment"` y `id="session-increment"`. -**User Story #5:** I can see an element with a corresponding `id="break-length"`, which by default (on load) displays a value of 5. +**Historia de usuario #5:** Puedo ver un elemento con el correspondiente `id="break-length"` que por defecto (al cargarse) muestra el valor 5. -**User Story #6:** I can see an element with a corresponding `id="session-length"`, which by default displays a value of 25. +**Historia de usuario #6:** Puedo ver un elemento con el correspondiente `id="session-length"`, que por defecto muestra el valor 25. -**User Story #7:** I can see an element with a corresponding `id="timer-label"`, that contains a string indicating a session is initialized (e.g. "Session"). +**Historia de usuario #7:** Puedo ver un elemento con el correspondiente `id="timer-label"`, que contiene una cadena indicando si la sesión esta inicializada (p.ej. "Session"). -**User Story #8:** I can see an element with corresponding `id="time-left"`. NOTE: Paused or running, the value in this field should always be displayed in `mm:ss` format (i.e. 25:00). +**Historia de usuario #8:** Puedo ver un elemento con el correspondiente `id="time-left"`. NOTA: En pausa o en ejecución, el valor en este campo debe mostrarse siempre en formato `mm:ss` (es decir: 25:00). -**User Story #9:** I can see a clickable element with a corresponding `id="start_stop"`. +**User Story #9:** Puedo ver un elemento cliqueable con el correspondiente `id="start_stop"`. -**User Story #10:** I can see a clickable element with a corresponding `id="reset"`. +**User Story #10:** Puedo ver un elemento cliqueable con el correspondiente `id="reset"`. -**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to it's default state. +**Historia de usuario #11:** Cuando hago clic en el elemento con el id: `reset`, cualquier temporizador en ejecución debe detenerse. El valor en el `id="break-length"` debe regresar a `5`, el valor en el `id="session-length"` debe regresar a 25 y el elemento con `id="time-left"` debe reiniciarse a su estado predeterminado. -**User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value. +**Historia de usuario #12:** Cuando hago clic en el elemento con id: `break-decrement`, el valor en `id="break-length"` se reduce en 1, y puedo ver el valor actualizado. -**User Story #13:** When I click the element with the id of `break-increment`, the value within `id="break-length"` increments by a value of 1, and I can see the updated value. +**Historia de usuario #13:** Cuando hago clic en el elemento con id: `break-increment`, el valor en `id="break-length"` se incrementa en 1 y puedo ver el valor actualizado. -**User Story #14:** When I click the element with the id of `session-decrement`, the value within `id="session-length"` decrements by a value of 1, and I can see the updated value. +**Historia de usuario #14:** Cuando hago clic en el elemento con id: `session-decrement`, el valor en `id="session-length"` se reduce en 1 y puedo ver el valor actualizado. -**User Story #15:** When I click the element with the id of `session-increment`, the value within `id="session-length"` increments by a value of 1, and I can see the updated value. +**Historia de usuario #15:** Cuando hago clic en el elemento con id: `session-increment`, el valor en `id="session-length"` se incrementa en 1 y puedo ver el valor actualizado. -**User Story #16:** I should not be able to set a session or break length to <= 0. +**Historia de usuario #16:** No debo ser capaz de establecer una duración de la sesión o pausa <= 0. -**User Story #17:** I should not be able to set a session or break length to > 60. +**Historia de usuario #17:** No debería poder establecer una duración de la sesión o pausa > 60. -**User Story #18:** When I first click the element with `id="start_stop"`, the timer should begin running from the value currently displayed in `id="session-length"`, even if the value has been incremented or decremented from the original value of 25. +**Historia de usuario #18:** Cuando hago clic por primera vez en el elemento con el correspondiente `id="start_stop"`, el temporizador debe comenzar a correr desde el valor mostrado actualmente en `id="session-length"`, incluso si el valor se incrementó o se redujo respecto al valor original 25. -**User Story #19:** If the timer is running, the element with the id of `time-left` should display the remaining time in `mm:ss` format (decrementing by a value of 1 and updating the display every 1000ms). +**Historia de usuario #19:** Si el temporizador se está ejecutando, el elemento con el id: `time-left` debería mostrar el tiempo restante en formato `mm:ss` (reduciendo 1 y actualizando el valor mostrado cada 1000ms). -**User Story #20:** If the timer is running and I click the element with `id="start_stop"`, the countdown should pause. +**Historia de usuario #20:** Si el temporizador se está ejecutando y hago clic en el elemento `id="start_stop"`, la cuenta atrás debería pausarse. -**User Story #21:** If the timer is paused and I click the element with `id="start_stop"`, the countdown should resume running from the point at which it was paused. +**Historia de usuario #21:** Si el temporizador está pausado y hago clic en el elemento `id="start_stop"`, la cuenta atrás debe reanudarse desde el punto en el que fue pausada. -**User Story #22:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a break has begun. +**Historia de usuario #22:** Cuando la cuenta atrás de la sesión llega a cero (NOTA: temporizador DEBE llegar a 00:00) y una nueva cuenta atrás comienza, el elemento cuyo id es `timer-label` debería mostrar una cadena en la que se indica que el descanso (break) ha comenzado. -**User Story #23:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the `id="break-length"` element. +**Historia de usuario #23:** Cuando la cuenta atrás de la sesión llega a cero (NOTA: temporizador DEBE llegar a 00:00), una nueva cuenta atrás comienza para el periodo de descanso (break) y se inicia desde el valor mostrado actualmente por el elemento `id="break-length"`. -**User Story #24:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a session has begun. +**Historia de usuario #24:** Cuando la cuenta atrás en el periodo de descanso (break) llega a cero (NOTA: temporizador DEBE llegar a 00:00) y una nueva cuenta atrás debe comenzar, el elemento cuyo id es `timer-label` debe mostrar una cadena en la que se indica que la sesión ha comenzado. -**User Story #25:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the `id="session-length"` element. +**Historia de usuario #25:** Cuando la cuenta atrás en el periodo de descanso (break) llega a cero (NOTA: temporizador DEBE llegar a 00:00), una nueva cuenta atrás debe comenzar para la sesión, la cual se inicia desde el valor mostrado actualmente por el elemento `id="session-length"`. -**User Story #26:** When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 `audio` tag and have a corresponding `id="beep"`. +**Historia de usuario #26:** Cuando una cuenta atrás llega a cero (NOTA: temporizador DEBE llegar a 00:00), debe reproducirse un sonido que indica que el tiempo se ha agotado. Se debe utilizar una etiqueta HTML5 `audio` y tener un `id="beep"`. -**User Story #27:** The audio element with `id="beep"` must be 1 second or longer. +**Historia de usuario #27:** El elemento de audio `id="beep"` debe ser de 1 segundo o mayor. -**User Story #28:** The audio element with id of `beep` must stop playing and be rewound to the beginning when the element with the id of `reset` is clicked. +**Historia de usuario #28:** El elemento de audio con id: `beep` dejará de reproducirse y se reiniciará al hacer clic en el elemento con id: `reset`. -You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +Puedes construir tu proyecto con usando esta plantilla CodePen y haciendo clic en `Save` para crear tu propio Pen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Once you're done, submit the URL to your working project with all its tests passing. +Una vez que hayas terminado, envía la URL de tu proyecto con todos los tests pasados. # --solutions-- diff --git a/curriculum/challenges/espanol/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/espanol/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md index add89ca96a..16892d8c92 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md @@ -1,6 +1,6 @@ --- id: 587d7dbc367417b2b2512bae -title: Build a Drum Machine +title: Crea una batería electrónica challengeType: 3 forumTopicId: 301370 dashedName: build-a-drum-machine @@ -8,29 +8,29 @@ dashedName: build-a-drum-machine # --description-- -**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: . +**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: . -Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style. +Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que se aprueben todas las pruebas. Dale tu estilo personal. -You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! +Puede utilizar cualquier mezcla de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, y jQuery para completar este proyecto. Debe usar un framework de frontend (como React por ejemplo). Porque esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales a las indicadas anteriormente, su utilización, corre bajo tu propio riesgo. Estamos buscando dar soporte a otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos solucionar todos los informes de incidencias que utilicen el conjunto de tecnologías sugeridas para este proyecto. ¡Feliz programación! -**User Story #1:** I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements. +**Historia de usuario #1:** Debe ser capaz de ver un contenedor externo con un correspondiente `id="drum-machine"` que contiene todos los demás elementos. -**User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`. +**Historia de usuario #2:** Dentro de `#drum-machine` Puedo ver un elemento con un `id="display"` correspondiente. -**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order. +**Historia de usuario #3:** Dentro de `#drum-machine` Puedo ver 9 elementos del panel de tambores clickables, cada una con un nombre de clase de `drum-pad`, un identificador único que describe el clip de audio que el pad de tambor será configurado para activar, y un texto interno que corresponde a una de las siguientes teclas del teclado: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Los pads de la batería DEBEN estar en este orden. -**User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). +**Historia de usuario #4:** Dentro de cada `.drum-pad`, debe haber un elemento HTML5 `audio` que tenga un atributo `src` apuntando a un clip de audio, un nombre de clase `clip`, y un id correspondiente al texto interno de su padre `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.). -**User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered. +**Historia de usuario #5:** Cuando hago clic en `.drum-pad` elemento, el clip de audio contenido en su elemento hijo `audio` debe ser activado. -**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string "Q", pressing the W key should trigger the drum pad which contains the string "W", etc.). +**Historia de usuario #6:** Cuando presione la tecla de activación asociada con cada `.drum-pad`, el clip de audio contenido en su elemento hijo `audio` debe ser activado (p. ej. pulsando la tecla `Q` debería activar el tambor que contiene la cadena `Q`, pulsando la tecla `W` debería activar la tecla Tambor que contiene la cadena `W`, etc.). -**User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique). +**Historia de usuario #7:** Cuando es un `.drum-pad` es activado, una cadena que describe el clip de audio asociado se muestra como el texto interior del elemento `#display` (cada cadena debe ser única). -You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` +Puedes construir tu proyecto usando esta plantilla CodePen y haciendo clic en `Save` para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` -Once you're done, submit the URL to your working project with all its tests passing. +Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas aprobadas. # --solutions--