gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i18n,curriculum): update translations (#43493)

Browse Source
This commit is contained in:
camperbot
2021-09-19 12:11:53 -07:00
committed by GitHub
parent cce4419a9a
commit 3337f48586
16 changed files with 153 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md
View File

@ -8,11 +8,11 @@ dashedName: build-a-25--5-clock
# --description--
**Objetivo:** Construye una aplicación funcional [CodePen.io](https://codepen.io) similar a esta: <https://codepen.io/freeCodeCamp/full/XpKrrW>.
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/XpKrrW>.
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
Puedes utilizar una combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debes usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de incidencias que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debes usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su uso corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
**Historia de usuario #1:** Puedo ver un elemento con `id="break-label"` que contiene una cadena (por ejemplo: "Break Length").
@ -70,9 +70,9 @@ Puedes utilizar una combinación de HTML, JavaScript, CSS, Bootstrap, SASS, Reac
**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`.
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> 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`
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> 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`
Una vez que hayas terminado, envía la URL de tu proyecto con todos los tests pasados.
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
# --solutions--

6
curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
View File

@ -12,7 +12,7 @@ dashedName: build-a-drum-machine
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debe usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su uso corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz codificación!
Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debe usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su uso corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
**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.
@ -28,9 +28,9 @@ Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS
**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).
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. O puedes usar este enlace CDN(Red de distribución de contenidos) para ejecutar las pruebas en cualquier entorno de tu preferencia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> 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`
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas aprobadas.
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
# --solutions--

26
curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
View File

@ -10,27 +10,27 @@ dashedName: build-a-javascript-calculator
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/wgGVVX>.
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que se aprueben todas las pruebas. Dale tu propio estilo personal.
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
Puede utilizar cualquier mezcla de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debe usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales a las indicadas anteriormente, su uso 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 arreglar todos los informes de incidencias que utilicen la pila de tecnología sugerida para este proyecto. ¡Feliz codificación!
Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debes usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
**Historia de usuario #1:** Mi calculadora debe contener un elemento cliqueable que contenga un `=` (signo igual) con un correspondiente `id="equals"`.
**Historia de usuario #1:** Mi calculadora debe contener un elemento en el que se pueda hacer clic que contenga un `=` (signo igual) con un correspondiente `id="equals"`.
**Historia de usuario #2:** Mi calculadora debe contener 10 elementos que contienen un número cada uno de 0-9 con los siguientes IDs correspondientes: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`.
**Historia de usuario #2:** Mi calculadora debe contener 10 elementos que puedan hacer clic, que contengan un número cada uno de 0-9, con los siguientes ID correspondientes: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, y `id="nine"`.
**Historia de usuario #3:** Mi calculadora debe contener 4 elementos que contengan uno de los 4 operadores matemáticos primarios con los siguientes identificadores correspondientes: `id="add"` `id="subtract"`, `id="multiply"`, `id="divide"`.
**Historia de usuario #3:** Mi calculadora debe contener 4 elementos que se puedan hacer clic que contengan uno de los 4 operadores matemáticos primarios con los siguientes identificadores correspondientes: `id="add"` `id="subtract"`, `id="multiply"`, `id="divide"`.
**Historia de usuario #4:** Mi calculadora debe contener un elemento cliqueable que contenga un `.` (punto decimal) símbolo con el correspondiente `id="decimal"`.
**Historia de usuario #4:** Mi calculadora debe contener un elemento que se pueda hacer clic que contenga un `.` (punto decimal) símbolo con el correspondiente `id="decimal"`.
**Historia de usuario #5:** Mi calculadora debe contener un elemento cliqueable con un `id="clear"`.
**Historia de usuario #5:** Mi calculadora debe contener un elemento que se pueda hacer clic con un `id="clear"`.
**Historia de usuario #6:** Mi calculadora debe contener un elemento para mostrar valores con un correspondiente `id="display"`.
**Historia de usuario #7:** En cualquier momento, pulsando el botón `clear` elimina los valores de entrada y salida. Luego devuelve la calculadora a su estado inicial; debe mostrar 0 en el elemento con el id de `display`.
**Historia de usuario #7:** En cualquier momento, pulsando el botón `clear` elimina los valores de entrada y salida. Luego devuelve la calculadora a su estado inicial; debe mostrar 0 en el elemento con el id `display`.
**Historia de usuario #8:** Al introducir números, Debe ser capaz de ver mi entrada en el elemento con el id de `display`.
**Historia de usuario #8:** Al introducir números, debo ser capaz de ver mi entrada en el elemento con el id `display`.
**Historia de usuario #9:** En cualquier orden, debe poder añadir, restar, multiplicar y dividir una cadena de números de cualquier longitud. Además cuando presione `=`, el resultado correcto debe mostrarse en el elemento con el id de `display`.
**Historia de usuario #9:** En cualquier orden, debo poder añadir, restar, multiplicar y dividir una cadena de números de cualquier longitud. Además cuando presione `=`, el resultado correcto debe mostrarse en el elemento con el id de `display`.
**Historia de usuario #10:** Al introducir números, mi calculadora no debe permitir que un número comience con varios ceros.
@ -44,16 +44,16 @@ Puede utilizar cualquier mezcla de HTML, JavaScript, CSS, Bootstrap, SASS, React
**Historia de usuario #15:** Mi calculadora debe tener varios decimales de precisión a la hora de redondear (tenga en cuenta que no hay un estándar exacto, pero debe ser capaz de manejar cálculos como `2 / 7` con una precisión razonable de al menos 4 decimales.
**Nota sobre la lógica de la calculadora:** Debe tener en cuenta que hay dos escuelas principales de pensamiento sobre la lógica de entrada de las calculadoras: <dfn>lógica de ejecución inmediata</dfn> y <dfn>lógica de la fórmula</dfn>. Nuestro ejemplo utiliza lógica de la fórmula. Observa el orden de precedencia de la operación, la ejecución inmediata no lo hace. Ambas son aceptables, pero ten en cuenta que dependiendo de cuál elijas, tu calculadora puede producir resultados diferentes a los nuestros para ciertas ecuaciones (ver ejemplo a continuación). Mientras sus matemáticas puedan ser verificadas por otra calculadora de producción, por favor no considere esto un error.
**Nota sobre la lógica de la calculadora:** Debe tener en cuenta que hay dos escuelas principales de pensamiento sobre la lógica de entrada de las calculadoras: <dfn>lógica de ejecución inmediata</dfn> y <dfn>lógica de la fórmula</dfn>. Nuestro ejemplo utiliza lógica de la fórmula. Observa el orden de precedencia de la operación, la ejecución inmediata no lo hace. Ambas son aceptables, pero ten en cuenta que dependiendo de cuál elijas, tu calculadora puede producir resultados diferentes a los nuestros para ciertas ecuaciones (ver ejemplo a continuación). Mientras tus matemáticas puedan ser verificadas por otra calculadora de producción, por favor no consideres esto un error.
**EXAMPLE:** `3 + 5 x 6 - 2 / 4 =`
- **Lógica de ejecución inmediata:** `11.5`
- **Fórmula/Expresión lógica:** `32.5`
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla de CodePen</a> y haciendo clic en `Save` para crear tu propio borrador. O puedes utilizar este enlace CDN(Red de distribución de contenidos) para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> 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`
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todos los tests aprobados.
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
# --solutions--

22
curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md
View File

@ -10,27 +10,27 @@ dashedName: build-a-markdown-previewer
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/GrZVVO>.
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.
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
Puede utilizar cualquier mezcla de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, y jQuery para completar este proyecto. Debe usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales a las indicadas anteriormente, su uso 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 arreglar todos los informes de incidencias que utilicen la pila de tecnología sugerida para este proyecto. ¡Feliz codificación!
Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debes usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
**User Story #1:** Debe ver un elemento `textarea` con el correspondiente `id="editor"`.
**Historia de usuario #1:** Debo ver un elemento `textarea` con el correspondiente `id="editor"`.
**User Story #2:** Debe ver un elemento con el correspondiente `id="preview"`.
**Historia de usuario #2:** Debo ver un elemento con el correspondiente `id="preview"`.
**User Story #3** Cuando introduzco texto dentro del elemento `#editor`, el elemento `#preview` se actualiza mientras escribo, para mostrar el contenido del textarea.
**Historia de usuario #3** Cuando introduzco texto dentro del elemento `#editor`, el elemento `#preview` se actualiza mientras escribo, para mostrar el contenido del textarea.
**Historia de usuario #4:** Cuando introduzco markdown con sabor a GitHub en el elemento `#editor`, el texto es renderizado como HTML en el elemento `#preview` mientras escribo (PISTA: No necesitas analizar markdown tú mismo - puedes importar la biblioteca marcada <https://cdnjs.com/libraries/marked>).
**Historia de usuario #4:** Cuando introduzco markdown tipo GitHub en el elemento `#editor`, el texto es renderizado como HTML en el elemento `#preview` mientras escribo (PISTA: No necesitas analizar markdown tú mismo: puedes importar la librería "Marked" <https://cdnjs.com/libraries/marked>).
**Historia de usuario #5:** Cuando mi previsualizador de markdown se carga, el texto por defecto en el campo `#editor` debe contener un markdown válido que represente al menos uno de los siguientes elementos: un encabezado (tamaño H1), un subencabezado (tamaño H2), un enlace, código en línea, un bloque de código, un elemento de lista, una cita de bloques(blockquote), una imagen y texto en negrita.
**Historia de usuario #5:** Cuando mi previsualizador de markdown se carga, el texto por defecto en el campo `#editor` debe contener un markdown válido que represente al menos uno de los siguientes elementos: un encabezado (tamaño H1), un subencabezado (tamaño H2), un enlace, código en línea, un bloque de código, un elemento de lista, una cita de bloques (blockquote), una imagen y texto en negrita.
**User Story #6:** Cuando mi previsualizador de markdown se carga, el markdown predeterminado en el campo `#editor` debe ser renderizado como HTML en el elemento `#preview`.
**Historia de usuario #6:** Cuando mi previsualizador de markdown se carga, el markdown predeterminado en el campo `#editor` debe ser renderizado como HTML en el elemento `#preview`.
**Bonus opcional (No necesitas hacer esto para pasar esta prueba):** Mi previsualizador de markdown interpreta las devoluciones de carro y las renderiza como elementos `br` (salto de línea).
**Bonus opcional (No necesitas hacer esto para pasar esta prueba):** Mi previsualizador de markdown interpreta los retornos de carro y las renderiza como elementos `br` (salto de línea).
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. O puedes usar este enlace CDN(Red de distribución de contenidos) para ejecutar las pruebas en cualquier entorno de tu preferencia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> 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`
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas aprobadas.
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
# --solutions--

24
curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md
View File

@ -1,6 +1,6 @@
---
id: bd7158d8c442eddfaeb5bd13
title: Construye una máquina de citas al azar
title: Construye una máquina de frases aleatorias
challengeType: 3
forumTopicId: 301374
dashedName: build-a-random-quote-machine
@ -8,11 +8,11 @@ dashedName: build-a-random-quote-machine
# --description--
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcione de manera similar a esta: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
Rellena las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que todas las pruebas pasen. Dale tu propio estilo personal.
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
Puedes usar cualquier mezcla de HTML, Javascript, CSS, Bootstrap, SASS, React, Redux, y jQuery para completar este proyecto. Puedes usar un framework de frontend (como React por ejemplo) porque esta sección trata sobre el aprendizaje de frameworks de frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo su propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de incidencias que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debes usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
**Historia de usuario #1:** Puedo ver un elemento contenedor con un archivo `id="quote-box"`.
@ -24,21 +24,21 @@ Puedes usar cualquier mezcla de HTML, Javascript, CSS, Bootstrap, SASS, React, R
**Historia de usuario #5:** Dentro de `#quote-box`, puedo ver un elemento clickeable `a` con su correspondiente `id="tweet-quote"`.
**Historia de usuario #6:** En el primer cargado, mi máquina de cotizaciones muestra una cita aleatoria en el elemento con `id="text"`.
**Historia de usuario #6:** En la primer carga, mi máquina de frases muestra una frase aleatoria en el elemento con `id="text"`.
**Historia de usuario #7:**En el primer cargado, mi máquina de cotizaciones muestra al autor de la cita aleatoria en el elemento con `id="author"`.
**Historia de usuario #7:**En el primer cargado, mi máquina de frases muestra al autor de la frase aleatoria en el elemento con `id="author"`.
**Historia de usuario #8:** Cuando se hace clic en el botón `#new-quote`, mi máquina de cotizaciones debería buscar una nueva cita y mostrarla en el elemento `#text`.
**Historia de usuario #8:** Cuando se hace clic en el botón `#new-quote`, mi máquina de frases debe buscar una nueva frase y mostrarla en el elemento `#text`.
**Historia de usuario #9:** Mi máquina de cotizaciones debería buscar al autor de la nueva cita cuando se hace click en el botón `#new-quote` y mostrarlo en el elemento `#author`.
**Historia de usuario #9:** Mi máquina de frases debe buscar al autor de la nueva frase cuando se hace clic en el botón `#new-quote` y mostrarlo en el elemento `#author`.
**Historia de usuario #10:** Puedo tuitear la cita actual haciendo clic en `#tweet-quote` del elemento `a`. Este elemento `a` debe incluir la ruta `"twitter.com/intent/tweet"` en su atributo `href` para tuitear la cita actual.
**Historia de usuario #10:** Puedo tuitear la frase actual haciendo clic en `#tweet-quote` del elemento `a`. Este elemento `a` debe incluir la ruta `"twitter.com/intent/tweet"` en su atributo `href` para tuitear la frase actual.
**Historia de usuario #11:**El elemento contenedor `#quote-box` debe estar centrado horizontalmente. Ejecuta las pruebas con el nivel de zoom del navegador al 100% y la página maximizada.
**Historia de usuario #11:** El elemento contenedor `#quote-box` debe estar centrado horizontalmente. Ejecuta las pruebas con el nivel de zoom del navegador al 100% y la página maximizada.
Puedes crear tu proyecto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>utilizando la plantilla de CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. O puedes utilizar este enlace CDN para ejecutar cualquier prueba en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> 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`
Una vez que hayas terminado, envía la URL a tu proyecto de trabajo con todas sus pruebas verificadas.
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
**Nota:** Twitter no permite que se carguen enlaces en un iframe. Intenta usar el atributo `target="_blank"` o `target="_top"` en el elemento `#tweet-quote` si tu tweet no se carga. `target="_top"` reemplazará la pestaña actual, así que asegúrate de que tu trabajo esté guardado.

6
curriculum/challenges/espanol/03-front-end-development-libraries/react/review-using-props-with-stateless-functional-components.md
View File

@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d403616f
title: Revisa el uso de props con componentes funcionales sin estado
title: Revisa el uso de "props" con componentes funcionales sin estado
challengeType: 6
forumTopicId: 301411
dashedName: review-using-props-with-stateless-functional-components
@ -8,11 +8,11 @@ dashedName: review-using-props-with-stateless-functional-components
# --description--
Excepto por el último desafío, has estado pasando props a componentes funcionales sin estado. Estos componentes actúan como funciones puras. Aceptan props como entrada y devuelven la misma vista cada vez que se les pasa el mismo props. Tal vez te estes preguntando que es estado, y el próximo desafío lo cubrirá con más detalle. Antes de eso, aquí hay una revisión de la terminología de los componentes.
Excepto por el último desafío, has estado pasando props a componentes funcionales sin estado. Estos componentes actúan como funciones puras. Aceptan props como entrada y devuelven la misma vista cada vez que se les pasa el mismo props. Tal vez te estes preguntando qué es estado, y el próximo desafío lo cubrirá con más detalle. Antes de eso, aquí hay una revisión de la terminología de los componentes.
Un *componente funcional sin estado*, es cualquier función que escribas que acepte props y devuelva JSX. Un *componente sin estado*, por otra parte, es una clase que extiende `React.Component`, pero no usa el estado interno (que será cubierto en el siguiente desafío). Finalmente, un *componente con estado* es un componente de clase que mantiene su propio estado interno. Puedes ver componentes con estado referidos simplemente como componentes de React.
Un patrón común es intentar minimizar el estado y crear componentes funcionales sin estado siempre que sea posible. Esto ayuda a contener tu administración de estado a un área específica de tu aplicación. A su vez, esto mejora el desarrollo y el mantenimiento de tu aplicación, haciendo más fácil seguir cómo los cambios en el estado afectan su comportamiento.
Un patrón común es intentar minimizar el estado y crear componentes funcionales sin estado siempre que sea posible. Esto ayuda a contener tu administración de estado a un área específica de tu aplicación. A su vez, esto mejora el desarrollo y el mantenimiento de tu aplicación al facilitar el seguimiento de cómo los cambios de estado afectan a su comportamiento.
# --instructions--

2
curriculum/challenges/espanol/03-front-end-development-libraries/react/set-state-with-this.setstate.md
View File

@ -41,7 +41,7 @@ assert(
assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1);
```
El encabezado `h1` renderizado debe contener texto renderizado desde el estado del componente.
El encabezado `h1` renderizado debe contener texto renderizado desde el state del componente.
```js
async () => {

2
curriculum/challenges/espanol/03-front-end-development-libraries/react/use--for-a-more-concise-conditional.md
View File

@ -8,7 +8,7 @@ dashedName: use--for-a-more-concise-conditional
# --description--
Las sentencias `if/else` funcionaron en el último desafío, pero hay una manera más concisa de lograr el mismo resultado. Imagina que estás rastreando varias condiciones en un componente y deseas que diferentes elementos se rendericen dependiendo de cada una de estas condiciones. Si escribes un montón de sentencias `else if` para devolver UIs ligeramente diferentes, puedes repetir código que deja espacio para el error. En su lugar, puedes usar el operador lógico `&&` para realizar lógica condicional de una manera más concisa. Esto es posible porque quieres comprobar si una condición es `true`, y si es así, devuelve algún código. Aquí hay un ejemplo:
Las sentencias `if/else` funcionaron en el último desafío, pero hay una manera más concisa de lograr el mismo resultado. Imagina que estás rastreando varias condiciones en un componente y deseas que diferentes elementos se rendericen dependiendo de cada una de estas condiciones. Si escribes un montón de sentencias `else if` para devolver UIs ligeramente diferentes, puedes repetir código que deja espacio para el error. En su lugar, puedes usar el operador lógico `&&` para realizar lógica condicional de una manera más concisa. Esto es posible porque quieres comprobar si una condición es `true`, y si es así, devuelve algún código. A continuación un ejemplo:
```jsx
{condition && <p>markup</p>}

2
curriculum/challenges/espanol/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md
View File

@ -16,7 +16,7 @@ Por ejemplo, crea una aplicación simple "To Do List". Como programador, no tien
El editor de código tiene la mayoría del componente `MyToDoList` configurado. Parte de este código debería parecer familiar si completaste el desafío de formulario controlado. Vas a notar un `textarea` y un `button`, junto con un par de métodos que rastrean sus estados, pero aún no se muestra nada a la página.
Dentro del `constructor`, crea un objeto `this.state` y define dos estados: `userInput` que debe inicializarse como una cadena vacía, y `toDoList` que debe inicializarse como un arreglo vacío. Luego, elimina el comentario junto a la variable `items` del método `render()`. En su lugar, utiliza la función map() para recorrer el arreglo `toDoList` almacenado en el internal state del componente y renderizar un `li` por cada item. Intenta introducir la cadena `eat, code, sleep, repeat` dentro del `textarea`, haz clic en el botón y ve qué sucede.
Dentro del `constructor`, crea un objeto `this.state` y define dos estados: `userInput` que debe inicializarse como una cadena vacía, y `toDoList` que debe inicializarse como un arreglo vacío. Luego, elimina el comentario junto a la variable `items` del método `render()`. En su lugar, utiliza la función map() para recorrer el arreglo `toDoList` almacenado en el estado interno del componente y renderizar un `li` por cada artículo. Intenta introducir la cadena `eat, code, sleep, repeat` dentro del `textarea`, haz clic en el botón y ve qué sucede.
**Nota:** Puede que sepas que todos los elementos hijos hermanos creados por una operación map como ésta necesitan poseer un atributo `key` único. No te preocupes, este es el tema de nuestro próximo desafío.

2
curriculum/challenges/espanol/03-front-end-development-libraries/react/use-state-to-toggle-an-element.md
View File

@ -8,7 +8,7 @@ dashedName: use-state-to-toggle-an-element
# --description--
A veces puedes necesitar conocer el estado anterior al actualizar el estado. Sin embargo, las actualizaciones del estado pueden ser asíncronas - esto significa que React puede procesar múltiples llamadas a `setState()` en una sola actualización. Esto significa que no puedes confiar en el valor anterior de `this.state` o `this.props` al calcular el siguiente valor. Por lo tanto, no debes usar código como este:
A veces puedes necesitar conocer el estado anterior al actualizar el estado. Sin embargo, las actualizaciones del estado pueden ser asíncronas: esto significa que React puede procesar múltiples llamadas a `setState()` en una sola actualización. Esto significa que no puedes confiar en el valor anterior de `this.state` o `this.props` al calcular el siguiente valor. Por lo tanto, no debes usar código como este:
```jsx
this.setState({

4
curriculum/challenges/espanol/03-front-end-development-libraries/react/write-a-simple-counter.md
View File

@ -12,7 +12,7 @@ Puedes diseñar un componente con un estado más complejo combinando los concept
# --instructions--
El componente `Counter` mantiene un seguimiento de un valor `count` en el `state`. Hay dos botones que llaman a métodos `increment()` y `decrement()`. Escribe estos métodos para que el valor del contador sea incrementado o decrementado por 1 cuando se haga clic en el botón apropiado. También, crea un método `reset()` para que cuando se haga clic en el botón reset, el contador se establezca a 0.
El componente `Counter` mantiene un seguimiento de un valor `count` en el `state`. Hay dos botones que llaman a métodos `increment()` y `decrement()`. Escribe estos métodos para que el valor del contador sea incrementado o disminuyendo por 1 cuando se haga clic en el botón apropiado. También, crea un método `reset()` para que cuando se haga clic en el botón reset, el contador se establezca a 0.
**Nota:** Asegúrate de no modificar el `className`de los botones. Además, recuerda agregar en el constructor los enlaces necesarios para los métodos recién creados.
@ -48,7 +48,7 @@ mockedComponent.find('.inc').simulate('click');
assert(mockedComponent.find('h1').text() === 'Current Count: 1');
```
Al hacer clic en el botón de disminuir se reducirá el contador en `1`.
Al hacer clic en el botón de disminuir se disminuirá el contador en `1`.
```js
const mockedComponent = Enzyme.mount(React.createElement(Counter));

38
curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
View File

@ -1,6 +1,6 @@
---
id: bd7168d8c242eddfaeb5bd13
title: Visualiza datos con un gráfico de barras
title: Visualiza datos con una gráfica de barras
challengeType: 3
forumTopicId: 301464
dashedName: visualize-data-with-a-bar-chart
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-bar-chart
# --description--
**Objetivo:** Crea una aplicación en [CodePen.io](https://codepen.io) que sea funcionalmente similar a esta: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue pasar todas las pruebas. Dale tu estilo personal.
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
Puedes utilizar HTML, JavaScript, CSS y la librería de visualización basada en svg D3. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas D3, ya que sus posiciones se utilizan para determinar la alineación de los elementos gráficos. Encontrarás información sobre cómo generar ejes en <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas D3, ya que sus posiciones se utilizan para determinar la alineación de los elementos gráficos. Encontrarás información sobre cómo generar ejes en <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
**Historia de Usuario #1:** Mi gráfico debe tener un título con su correspondiente `id="title"`.
**Historia de usuario #1:** Mi gráfica debe tener un título con su correspondiente `id="title"`.
**Historia de Usuario #2:** Mi gráfico debe tener un elemento `g` en el eje-x con su correspondiente `id="x-axis"`.
**Historia de usuario #2:** Mi gráfica debe tener un elemento `g` en el eje-x con su correspondiente `id="x-axis"`.
**Historia de Usuario #3:** Mi gráfico debe tener un elemento `g` en el eje-y con su correspondiente `id="y-axis"`.
**Historia de usuario #3:** Mi gráfica debe tener un elemento `g` en el eje-y con su correspondiente `id="y-axis"`.
**Historia de Usuario #4:** Ambos ejes debe contener múltiples etiquetas de marca, cada uno con su correspondiente `class="tick"`.
**Historia de usuario #4:** Ambos ejes debe contener múltiples etiquetas de marca, cada uno con su correspondiente `class="tick"`.
**Historia de Usuario #5:** Mi gráfico debe tener un elemento `rect` por cada punto de datos con su correspondiente `class="bar"` mostrando los datos.
**Historia de usuario #5:** Mi gráfica debe tener un elemento `rect` por cada punto de datos con su correspondiente `class="bar"` mostrando los datos.
**Historia de Usuario #6:** Cada barra debe tener la propiedad `data-date` y `data-gdp` conteniendo los valores `date` y `GDP`.
**Historia de usuario #6:** Cada barra debe tener la propiedad `data-date` y `data-gdp` conteniendo los valores `date` y `GDP`.
**Historia de Usuario #7:** Las propiedades `data-date` de los elementos de la barra deben coincidir con el orden de los datos proporcionados.
**Historia de usuario #7:** Las propiedades `data-date` de los elementos de la barra deben coincidir con el orden de los datos proporcionados.
**Historia de Usuario #8:** Las propiedades `data-gdp` de los elementos de la barra deben coincidir con el orden de los datos proporcionados.
**Historia de usuario #8:** Las propiedades `data-gdp` de los elementos de la barra deben coincidir con el orden de los datos proporcionados.
**Historia de Usuario #9:** La altura de cada elemento de barra debe representar con exactitud el `GDP` correspondiente a los datos.
**Historia de usuario #9:** La altura de cada elemento de barra debe representar con exactitud el `GDP` correspondiente a los datos.
**Historia de Usuario #10:** El atributo `data-date` y su correspondiente elemento de barra deben alinearse con el valor correspondiente en el eje-x.
**Historia de usuario #10:** El atributo `data-date` y su correspondiente elemento de barra deben alinearse con el valor correspondiente en el eje-x.
**Historia de Usuario #11:** El atributo `data-gdp` y su correspondiente elemento de barra deben alinearse con el valor correspondiente en el eje-y.
**Historia de usuario #11:** El atributo `data-gdp` y su correspondiente elemento de barra deben alinearse con el valor correspondiente en el eje-y.
**Historia de Usuario #12:** Puedo pasar el ratón por encima de un área y ver una descripción con su correspondiente `id="tooltip"` que muestra más información acerca del área.
**Historia de usuario #12:** Puedo pasar el ratón por encima de un área y ver un cuadro emergente con su correspondiente `id="tooltip"` que muestra más información acerca del área.
**Historia de Usuario #13:** Mi descripción debe tener una propiedad `data-date` que corresponda con el `data-date` del área activa.
**Historia de usuario #13:** Mi cuadro emergente debe tener una propiedad `data-date` que corresponda con el `data-date` del área activa.
Aquí está el conjunto de datos que necesitarás para completar este proyecto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
Puedes crear tu proyecto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>utilizando esta plantilla de CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. 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`.
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> 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`.
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas aprobadas.
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
# --solutions--

34
curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
View File

@ -8,42 +8,42 @@ dashedName: visualize-data-with-a-choropleth-map
# --description--
**Objetivo:** Crea una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/EZKqza>.
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/EZKqza>.
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue pasar todas las pruebas. Dale tu estilo personal.
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
Puedes utilizar HTML, JavaScript, CSS y la librería de visualización basada en svg D3. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
**Historia de Usuario #1:** Mi coroplético debe tener un título con su correspondiente `id="title"`.
**Historia de usuario #1:** Mi coroplético debe tener un título con su correspondiente `id="title"`.
**Historia de Usuario #2:** Mi coroplético debe tener una descripción con su correspondiente `id="description"`.
**Historia de usuario #2:** Mi coroplético debe tener una descripción con su correspondiente `id="description"`.
**Historia de Usuario #3:** Mi coroplético debe tener condados con su correspondiente `class="county"` que represente el dato.
**Historia de usuario #3:** Mi coroplético debe tener condados con su correspondiente `class="county"` que represente el dato.
**Historia de Usuario #4:** Debe haber al menos 4 colores de relleno diferentes para los condados.
**Historia de usuario #4:** Debe haber al menos 4 colores de relleno diferentes para los condados.
**Historia de Usuario #5:** Cada uno de mis condados debe tener las propiedades `data-fips` y `data-education` que contengan sus correspondientes valores de `fips` y `education`.
**Historia de usuario #5:** Cada uno de mis condados debe tener las propiedades `data-fips` y `data-education` que contengan sus correspondientes valores de `fips` y `education`.
**Historia de Usuario #6:** Mi coroplético debe tener un condado por cada uno de los puntos proporcionados.
**Historia de usuario #6:** Mi coroplético debe tener un condado por cada uno de los puntos proporcionados.
**Historia de Usuario #7:** Los condados deben tener los valores de `data-fips` y `data-education` que coincidan con los datos de ejemplo.
**Historia de usuario #7:** Los condados deben tener los valores de `data-fips` y `data-education` que coincidan con los datos de ejemplo.
**Historia de Usuario #8:** Mi coroplético debe tener una leyenda con su correspondiente `id="legend"`.
**Historia de usuario #8:** Mi coroplético debe tener una leyenda con su correspondiente `id="legend"`.
**Historia de Usuario #9:** Debe haber al menos 4 colores de relleno usados para la leyenda.
**Historia de usuario #9:** Debe haber al menos 4 colores de relleno usados para la leyenda.
**Historia de Usuario #10:** Puedo pasar el ratón por encima de un área y ver una descripción con su correspondiente `id="tooltip"` que muestre más información sobre el área.
**Historia de usuario #10:** Puedo pasar el ratón por encima de un área y ver un cuadro emergente con su correspondiente `id="tooltip"` que muestre más información acerca del área.
**Historia de Usuario #11:** Mi descripción debe tener una propiedad de `data-education` que corresponda con el `data-education` del área activa.
**Historia de usuario #11:** Mi cuadro emergente debe tener una propiedad de `data-education` que corresponda con el `data-education` del área activa.
Aquí están los conjuntos de datos que necesitarás para completar este proyecto:
- **Datos de Educación de Estados Unidos: **`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
- **Datos de educación de Estados Unidos: **`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
- **Datos de condados de Estados Unidos: **`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
Puedes crear tu proyecto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'> usando esta plantilla de CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. O puedes utilizar este enlace de CDN para ejecutar los tests en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> 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`
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas aprobadas.
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
# --solutions--

44
curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
View File

@ -8,51 +8,51 @@ dashedName: visualize-data-with-a-heat-map
# --description--
**Objetivo:** Crea una aplicación en [CodePen.io](https://codepen.io) que sea funcionalmente similar a esta: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue pasar todas las pruebas. Dale tu estilo personal.
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
Puedes utilizar HTML, JavaScript, CSS y la librería de visualización basada en svg D3. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
**Historia de Usuario #1:** Mi mapa de calor debe tener un título con su correspondiente `id="title"`.
**Historia de usuario #1:** Mi mapa de calor debe tener un título con su correspondiente `id="title"`.
**Historia de Usuario #2:** Mi mapa de calor debe tener una descripción con su correspondiente `id="description"`.
**Historia de usuario #2:** Mi mapa de calor debe tener una descripción con su correspondiente `id="description"`.
**Historia de Usuario #3:** Mi mapa de calor debe tener un eje-x con su correspondiente `id="x-axis"`.
**Historia de usuario #3:** Mi mapa de calor debe tener un eje-x con su correspondiente `id="x-axis"`.
**Historia de Usuario #4:** Mi mapa de calor debe tener un eje-y con su correspondiente `id="y-axis"`.
**Historia de usuario #4:** Mi mapa de calor debe tener un eje-y con su correspondiente `id="y-axis"`.
**Historia de Usuario #5:** Mi mapa de calor debe tener elementos `rect` con una `class="cell"` que representen los datos.
**Historia de usuario #5:** Mi mapa de calor debe tener elementos `rect` con una `class="cell"` que representen los datos.
**Historia de Usuario #6:** Debe haber al menos 4 colores de relleno usados para las celdas.
**Historia de usuario #6:** Debe haber al menos 4 colores de relleno usados para las celdas.
**Historia de Usuario #7:** Cada celda tendrá las propiedades de `data-month`, `data-year` y `data-temp` que contengan sus correspondientes valores de `month`, `year`, y `temperature`.
**Historia de usuario #7:** Cada celda tendrá las propiedades de `data-month`, `data-year` y `data-temp` que contengan sus correspondientes valores de `month`, `year`, y `temperature`.
**Historia de Usuario #8:** Los `data-month`, `data-year` de cada celda deben estar dentro del rango de los datos.
**Historia de usuario #8:** Los `data-month`, `data-year` de cada celda deben estar dentro del rango de los datos.
**Historia de Usuario #9:** Mi mapa de calor debe tener celdas que se alineen con el mes correspondiente sobre el eje-y.
**Historia de usuario #9:** Mi mapa de calor debe tener celdas que se alineen con el mes correspondiente sobre el eje-y.
**Historia de Usuario #10:** Mi mapa de calor debe tener celdas que se alineen con el año correspondiente sobre el eje-x.
**Historia de usuario #10:** Mi mapa de calor debe tener celdas que se alineen con el año correspondiente sobre el eje-x.
**Historia de Usuario #11:** Mi mapa de calor debe tener varias etiquetas de marca sobre el eje-y con los nombres completos de los meses.
**Historia de usuario #11:** Mi mapa de calor debe tener varias etiquetas de marca sobre el eje-y con los nombres completos de los meses.
**Historia de Usuario #12:** Mi mapa de calor debe tener varias etiquetas de marca sobre el eje-x con los años entre 1754 y 2015.
**Historia de usuario #12:** Mi mapa de calor debe tener varias etiquetas de marca sobre el eje-x con los años entre 1754 y 2015.
**Historia de Usuario #13:** Mi mapa de calor debe tener una leyenda con su correspondiente `id="legend"`.
**Historia de usuario #13:** Mi mapa de calor debe tener una leyenda con su correspondiente `id="legend"`.
**Historia de Usuario #14:** Mi leyenda debe contener el elemento `rect`.
**Historia de usuario #14:** Mi leyenda debe contener el elemento `rect`.
**Historia de Usuario #15:** El elemento `rect` de la leyenda debe usar al menos 4 diferentes colores de relleno.
**Historia de usuario #15:** El elemento `rect` de la leyenda debe usar al menos 4 diferentes colores de relleno.
**Historia de Usuario #16:** Puedo pasar el ratón por encima de un área y ver una descripción con su correspondiente `id="tooltip"` que muestra más información acerca del área.
**Historia de usuario #16:** Puedo pasar el ratón por encima de un área y ver un cuadro emergente con su correspondiente `id="tooltip"` que muestra más información acerca del área.
**Historia de Usuario #17:** Mi descripción debe tener una propiedad `data-year` que corresponda con el `data-year` del área activa.
**Historia de usuario #17:** Mi cuadro emergente debe tener una propiedad `data-year` que corresponda con el `data-year` del área activa.
Aquí está el conjunto de datos que necesitarás para completar este proyecto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
Puedes crear tu proyecto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>utilizando esta plantilla de CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. 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`
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> 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`
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas aprobadas.
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
# --solutions--

44
curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
View File

@ -1,6 +1,6 @@
---
id: bd7178d8c242eddfaeb5bd13
title: Visualize Data with a Scatterplot Graph
title: Visualiza datos con una gráfica de diagrama de dispersión
challengeType: 3
forumTopicId: 301467
dashedName: visualize-data-with-a-scatterplot-graph
@ -8,47 +8,47 @@ dashedName: visualize-data-with-a-scatterplot-graph
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
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 pasen todas las pruebas. Dale tu propio estilo personal.
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas de D3, ya que sus posiciones se utilizan para determinar el alineamiento de los elementos gráficos. Encontrarás información sobre cómo generar ejes en <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Los elementos DOM requeridos (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
**User Story #1:** I can see a title element that has a corresponding `id="title"`.
**Historia de usuario #1:** Puedo ver un elemento titular que tiene un `id="title"`.
**User Story #2:** I can see an x-axis that has a corresponding `id="x-axis"`.
**Historia de usuario #2:** Puedo ver un eje-x que tiene un correspondiente `id="x-axis"`.
**User Story #3:** I can see a y-axis that has a corresponding `id="y-axis"`.
**Historia de usuario #3:** Puedo ver un eje-y que tiene un correspondiente `id="y-axis"`.
**User Story #4:** I can see dots, that each have a class of `dot`, which represent the data being plotted.
**Historia de usuario #4:** Puedo ver los puntos, que cada uno tiene una clase `dot`, que representa los datos que están siendo graficados.
**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding `x` and `y` values.
**Historia de usuario #5:** Cada punto debe tener las propiedades `data-xvalue` y `data-yvalue` con sus valores correspondientes `x` y `y`.
**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or `Date` objects are acceptable for test evaluation. For `data-yvalue` (minutes), use `Date` objects.
**Historia de usuario #6:** Los atributos `data-xvalue` y `data-yvalue` de cada punto deben estar dentro del rango de los datos reales y en el formato de datos correcto. Para `data-xvalue`, los objetos enteros (años completos) o `Date` son aceptables para la evaluación de la prueba. Para `data-yvalue` (minutos), usa objetos `Date`.
**User Story #7:** The `data-xvalue` and its corresponding dot should align with the corresponding point/value on the x-axis.
**Historia de usuario #7:** El atributo `data-xvalue` y su correspondiente punto deben alinearse con el punto/valor correspondiente en el eje-x.
**User Story #8:** The `data-yvalue` and its corresponding dot should align with the corresponding point/value on the y-axis.
**Historia de usuario #8:** El atributo `data-yvalue` y su correspondiente punto deben alinearse con el punto/valor correspondiente en el eje-y.
**User Story #9:** I can see multiple tick labels on the y-axis with `%M:%S` time format.
**Historia de usuario #9:** Puedo ver varias etiquetas de marca en el eje-y con el formato de tiempo `%M:%S`.
**User Story #10:** I can see multiple tick labels on the x-axis that show the year.
**Historia de usuario #10:** Puedo ver varias etiquetas de marca en el eje-x mostrando el año.
**User Story #11:** I can see that the range of the x-axis labels are within the range of the actual x-axis data.
**Historia de usuario #11:** Puedo ver que el rango de las etiquetas del eje-x está dentro del rango de los datos reales del eje-x.
**User Story #12:** I can see that the range of the y-axis labels are within the range of the actual y-axis data.
**Historia de usuario #12:** Puedo ver que el rango de las etiquetas del eje-y está dentro del rango de los datos reales del eje-y.
**User Story #13:** I can see a legend containing descriptive text that has `id="legend"`.
**Historia de usuario #13:** Puedo ver una leyenda con un texto descriptivo con su correspondiente `id="legend"`.
**User Story #14:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
**Historia de usuario #14:** Puedo pasar el ratón por encima de un área y ver un cuadro emergente con su correspondiente `id="tooltip"` que muestra más información acerca del área.
**User Story #15:** My tooltip should have a `data-year` property that corresponds to the `data-xvalue` of the active area.
**Historia de usuario #15:** Mi cuadro emergente debe tener una propiedad `data-year` que corresponda con el `data-xvalue` del área activa.
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
Aquí está el conjunto de datos que necesitarás para completar este proyecto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. 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 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> 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 pasadas.
# --solutions--

42
curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
View File

@ -1,6 +1,6 @@
---
id: 587d7fa6367417b2b2512bc0
title: Visualize Data with a Treemap Diagram
title: Visualiza datos con un diagrama de mapa de árbol
challengeType: 3
forumTopicId: 301468
dashedName: visualize-data-with-a-treemap-diagram
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-treemap-diagram
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
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 pasen todas las pruebas. Dale tu propio estilo personal.
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas de D3, ya que sus posiciones se utilizan para determinar el alineamiento de los elementos gráficos. Encontrarás información sobre cómo generar ejes en <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Los elementos DOM requeridos (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
**User Story #1:** My tree map should have a title with a corresponding `id="title"`.
**Historia de usuario #1:** Mi mapa de árbol debe tener un título con su correspondiente `id="title"`.
**User Story #2:** My tree map should have a description with a corresponding `id="description"`.
**Historia de usuario #2:** Mi mapa de árbol debe tener una descripción con su correspondiente `id="description"`.
**User Story #3:** My tree map should have `rect` elements with a corresponding `class="tile"` that represent the data.
**Historia de usuario #3:** Mi mapa de árbol debe tener elementos `rect` con una `class="tile"` que representen los datos.
**User Story #4:** There should be at least 2 different fill colors used for the tiles.
**Historia de usuario #4:** Debe haber al menos 2 colores de relleno diferentes para los baldosas.
**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding `name`, `category`, and `value`.
**Historia de usuario #5:** Cada baldosa debe tener las propiedades `data-name`, `data-category`, y`data-value` conteniendo sus correspondientes `name`, `category`, y`value`.
**User Story #6:** The area of each tile should correspond to the `data-value` amount: tiles with a larger `data-value` should have a bigger area.
**Historia de usuario #6:** El área de cada baldosa debe corresponder a la cantidad de `data-value`: las baldosas con un `data-value` mayor deben tener un área más grande.
**User Story #7:** My tree map should have a legend with corresponding `id="legend"`.
**Historia de usuario #7:** Mi mapa de árbol debe tener una leyenda con su correspondiente `id="legend"`.
**User Story #8:** My legend should have `rect` elements with a corresponding `class="legend-item"`.
**Historia de usuario #8:** Mi leyenda debe tener elementos `rect` con su correspondiente `class="legend-item"`.
**User Story #9:** The `rect` elements in the legend should use at least 2 different fill colors.
**Historia de usuario #9:** El elemento `rect` de la leyenda debe usar al menos 2 diferentes colores de relleno.
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
**Historia de usuario #10:** Puedo pasar el ratón por encima de un área y ver un cuadro emergente con su correspondiente `id="tooltip"` que muestra más información acerca del área.
**User Story #11:** My tooltip should have a `data-value` property that corresponds to the `data-value` of the active area.
**Historia de usuario #11:** Mi cuadro emergente debe tener una propiedad `data-value` que corresponda con el `data-value` del área activa.
For this project you can use any of the following datasets:
Para este proyecto puede utilizar cualquiera de los siguientes conjuntos de datos:
- **Kickstarter Pledges:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
- **Movie Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
- **Video Game Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
- **Compromisos de Kickstarter:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
- **Ventas de películas:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
- **Ventas de videojuegos:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. 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 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> 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 pasadas.
# --solutions--