fix(spanish-md): Address some formatting issues for Spanish md

This commit is contained in:
Bouncey
2018-10-09 20:28:15 +01:00
committed by mrugesh mohapatra
parent ee9f6b2d72
commit c2a45b58be
281 changed files with 3413 additions and 3402 deletions

View File

@ -8,16 +8,16 @@ guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-alt-text-to-a
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Es probable que haya visto un atributo <code>alt</code> en una etiqueta <code>img</code> en otros desafíos. <code>Alt</code> texto alternativo describe el contenido de la imagen y proporciona una alternativa de texto. Esto ayuda en caso de que la imagen no se cargue o no pueda ser vista por un usuario. También es utilizado por los motores de búsqueda para comprender qué contiene una imagen para incluirla en los resultados de búsqueda. Aquí hay un ejemplo: Es probable que haya visto un atributo <code>alt</code> en una etiqueta <code>img</code> en otros desafíos. <code>Alt</code> texto alternativo describe el contenido de la imagen y proporciona una alternativa de texto. Esto ayuda en caso de que la imagen no se cargue o no pueda ser vista por un usuario. También es utilizado por los motores de búsqueda para comprender qué contiene una imagen para incluirla en los resultados de búsqueda. Aquí hay un ejemplo:
<code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code> <code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code>
personas con discapacidades visuales confían en los lectores de pantalla para convertir el contenido web a una interfaz de audio. No obtendrán información si solo se presenta visualmente. Para las imágenes, los lectores de pantalla pueden acceder al atributo <code>alt</code> y leer su contenido para entregar información clave. personas con discapacidades visuales confían en los lectores de pantalla para convertir el contenido web a una interfaz de audio. No obtendrán información si solo se presenta visualmente. Para las imágenes, los lectores de pantalla pueden acceder al atributo <code>alt</code> y leer su contenido para entregar información clave.
buen texto <code>alt</code> es breve pero descriptivo, y está pensado para transmitir brevemente el significado de la imagen. Siempre debes incluir un atributo <code>alt</code> en tu imagen. Por especificación de HTML5, esto ahora se considera obligatorio. buen texto <code>alt</code> es breve pero descriptivo, y está pensado para transmitir brevemente el significado de la imagen. Siempre debes incluir un atributo <code>alt</code> en tu imagen. Por especificación de HTML5, esto ahora se considera obligatorio.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Camper Cat es tanto un ninja codificador como un ninja real, y está construyendo un sitio web para compartir sus conocimientos. La imagen de perfil que desea usar muestra sus habilidades y debe ser apreciada por todos los visitantes del sitio. Agregue un atributo <code>alt</code> en la etiqueta <code>img</code> , que explica que Camper Cat está haciendo karate. (La imagen <code>src</code> no se vincula a un archivo real, por lo que debería ver el texto <code>alt</code> en la pantalla). Camper Cat es tanto un ninja codificador como un ninja real, y está construyendo un sitio web para compartir sus conocimientos. La imagen de perfil que desea usar muestra sus habilidades y debe ser apreciada por todos los visitantes del sitio. Agregue un atributo <code>alt</code> en la etiqueta <code>img</code> , que explica que Camper Cat está haciendo karate. (La imagen <code>src</code> no se vincula a un archivo real, por lo que debería ver el texto <code>alt</code> en la pantalla).
</section> </section>
## Tests ## Tests
@ -25,7 +25,7 @@ Camper Cat es tanto un ninja codificador como un ninja real, y está construyend
```yml ```yml
tests: tests:
- text: &#39;Su etiqueta <code>img</code> debe tener un atributo <code>alt</code> , y no debe estar vacío&#39;. - text: 'Su etiqueta <code>img</code> debe tener un atributo <code>alt</code> , y no debe estar vacío'
testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");' testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");'
``` ```

View File

@ -7,15 +7,15 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Continuando con el tema de la fecha, HTML5 también introdujo el elemento de <code>time</code> junto con un atributo de <code>datetime</code> y <code>datetime</code> para estandarizar los tiempos. Este es un elemento en línea que puede ajustar una fecha u hora en una página. Un formato válido de esa fecha se mantiene en el atributo <code>datetime</code> . Este es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar confusiones al indicar una versión estandarizada de un tiempo, incluso si está escrito de manera informal o coloquial en el texto. Continuando con el tema de la fecha, HTML5 también introdujo el elemento de <code>time</code> junto con un atributo de <code>datetime</code> y <code>datetime</code> para estandarizar los tiempos. Este es un elemento en línea que puede ajustar una fecha u hora en una página. Un formato válido de esa fecha se mantiene en el atributo <code>datetime</code> . Este es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar confusiones al indicar una versión estandarizada de un tiempo, incluso si está escrito de manera informal o coloquial en el texto.
Aquí hay un ejemplo: Aquí hay un ejemplo:
<code>&lt;p&gt;Master Camper Cat officiated the cage match between Goro and Scorpion &lt;time datetime=&quot;2013-02-13&quot;&gt;last Wednesday&lt;/time&gt;, which ended in a draw.&lt;/p&gt;</code> <code>&lt;p&gt;Master Camper Cat officiated the cage match between Goro and Scorpion &lt;time datetime=&quot;2013-02-13&quot;&gt;last Wednesday&lt;/time&gt;, which ended in a draw.&lt;/p&gt;</code>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
encuentran los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelva una etiqueta de <code>time</code> alrededor del texto &quot;Jueves, 15 de septiembre &lt;sup&gt; th &lt;/sup&gt;&quot; y agregue un atributo de <code>datetime</code> y <code>datetime</code> establecido en &quot;2016-09-15&quot;. encuentran los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelva una etiqueta de <code>time</code> alrededor del texto &quot;Jueves, 15 de septiembre &lt;sup&gt; th &lt;/sup&gt;&quot; y agregue un atributo de <code>datetime</code> y <code>datetime</code> establecido en &quot;2016-09-15&quot;.
</section> </section>
## Tests ## Tests
@ -23,7 +23,7 @@ encuentran los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelv
```yml ```yml
tests: tests:
- text: &#39;Sus etiquetas de <code>time</code> deben rodear el texto &quot;Jueves 15 de septiembre &lt;sup&gt; th &lt;/sup&gt;&quot;.&#39; - text: 'Sus etiquetas de <code>time</code> deben rodear el texto &quot;Jueves 15 de septiembre &lt;sup&gt; th &lt;/sup&gt;&quot;.'
testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your <code>time</code> tags should wrap around the text "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;".");' testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your <code>time</code> tags should wrap around the text "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;".");'
- text: Su etiqueta de <code>time</code> debe tener un atributo de <code>datetime</code> y <code>datetime</code> que no esté vacío. - text: Su etiqueta de <code>time</code> debe tener un atributo de <code>datetime</code> y <code>datetime</code> que no esté vacío.
testString: 'assert($("time").attr("datetime"), "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.");' testString: 'assert($("time").attr("datetime"), "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.");'

View File

@ -7,17 +7,17 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
En lugar de ajustar el fondo general o el color del texto para que el primer plano sea fácil de leer, puede agregar un <code>background-color</code> al elemento que contiene el texto que desea enfatizar. Este desafío utiliza <code>rgba()</code> lugar de códigos <code>hex</code> o <code>rgb()</code> normal. En lugar de ajustar el fondo general o el color del texto para que el primer plano sea fácil de leer, puede agregar un <code>background-color</code> al elemento que contiene el texto que desea enfatizar. Este desafío utiliza <code>rgba()</code> lugar de códigos <code>hex</code> o <code>rgb()</code> normal.
<blockquote>rgba stands for:<br>&nbsp;&nbsp;r = red<br>&nbsp;&nbsp;g = green<br>&nbsp;&nbsp;b = blue<br>&nbsp;&nbsp;a = alpha/level of opacity</blockquote> <blockquote>rgba stands for:<br>&nbsp;&nbsp;r = red<br>&nbsp;&nbsp;g = green<br>&nbsp;&nbsp;b = blue<br>&nbsp;&nbsp;a = alpha/level of opacity</blockquote>
Los valores RGB pueden variar de 0 a 255. El valor alfa puede variar de 1, que es totalmente opaco o de color sólido, a 0, que es completamente transparente o claro. <code>rgba()</code> es excelente para usar en este caso, ya que le permite ajustar la opacidad. Esto significa que no tienes que bloquear completamente el fondo. Los valores RGB pueden variar de 0 a 255. El valor alfa puede variar de 1, que es totalmente opaco o de color sólido, a 0, que es completamente transparente o claro. <code>rgba()</code> es excelente para usar en este caso, ya que le permite ajustar la opacidad. Esto significa que no tienes que bloquear completamente el fondo.
<code>background-color: rgba(45, 45, 45, 0.1)</code> para este desafío. Produce un color gris oscuro que es casi transparente dado el bajo valor de opacidad de 0.1. <code>background-color: rgba(45, 45, 45, 0.1)</code> para este desafío. Produce un color gris oscuro que es casi transparente dado el bajo valor de opacidad de 0.1.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Para hacer que el texto destaque más, ajuste el <code>background-color</code> de <code>background-color</code> del elemento <code>h4</code> al valor <code>rgba()</code> dado. Para hacer que el texto destaque más, ajuste el <code>background-color</code> de <code>background-color</code> del elemento <code>h4</code> al valor <code>rgba()</code> dado.
También para el <code>h4</code> , elimine la propiedad de <code>height</code> y agregue <code>padding</code> de 10px. También para el <code>h4</code> , elimine la propiedad de <code>height</code> y agregue <code>padding</code> de 10px.
</section> </section>
## Tests ## Tests
@ -25,7 +25,7 @@ También para el <code>h4</code> , elimine la propiedad de <code>height</code> y
```yml ```yml
tests: tests:
- text: &#39;Su código debe agregar una propiedad de <code>background-color</code> al conjunto de elementos <code>h4</code> en <code>rgba(45, 45, 45, 0.1)</code> .&#39; - text: 'Su código debe agregar una propiedad de <code>background-color</code> al conjunto de elementos <code>h4</code> en <code>rgba(45, 45, 45, 0.1)</code> .'
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), "Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.");' testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), "Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.");'
- text: Su código debe agregar una propiedad de <code>padding</code> al elemento <code>h4</code> y establecerlo en 10 píxeles. - text: Su código debe agregar una propiedad de <code>padding</code> al elemento <code>h4</code> y establecerlo en 10 píxeles.
testString: 'assert($("h4").css("padding-top") == "10px" && $("h4").css("padding-right") == "10px" && $("h4").css("padding-bottom") == "10px" && $("h4").css("padding-left") == "10px", "Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.");' testString: 'assert($("h4").css("padding-top") == "10px" && $("h4").css("padding-right") == "10px" && $("h4").css("padding-bottom") == "10px" && $("h4").css("padding-left") == "10px", "Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.");'

View File

@ -7,13 +7,13 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
El desafío de los colores complementarios mostró que los colores opuestos en la rueda de colores pueden hacer que cada uno se vea más vibrante cuando se colocan lado a lado. Sin embargo, el fuerte contraste visual puede ser discordante si se usa en exceso en un sitio web, y algunas veces puede hacer que el texto sea más difícil de leer si se coloca sobre un fondo de color complementario. En la práctica, uno de los colores suele ser dominante y el complemento se utiliza para atraer la atención visual a cierto contenido de la página. El desafío de los colores complementarios mostró que los colores opuestos en la rueda de colores pueden hacer que cada uno se vea más vibrante cuando se colocan lado a lado. Sin embargo, el fuerte contraste visual puede ser discordante si se usa en exceso en un sitio web, y algunas veces puede hacer que el texto sea más difícil de leer si se coloca sobre un fondo de color complementario. En la práctica, uno de los colores suele ser dominante y el complemento se utiliza para atraer la atención visual a cierto contenido de la página.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Esta página utilizará un tono de verde azulado ( <code>#09A7A1</code> ) como color dominante, y su complemento naranja ( <code>#FF790E</code> ) para resaltar visualmente los botones de <code>#FF790E</code> . Cambie el <code>background-color</code> de <code>background-color</code> del <code>header</code> y del <code>footer</code> de <code>footer</code> de negro al color verde azulado. Luego cambia el <code>color</code> texto <code>h2</code> a teal también. Finalmente, cambie el <code>background-color</code> de <code>background-color</code> del <code>button</code> al color naranja. Esta página utilizará un tono de verde azulado ( <code>#09A7A1</code> ) como color dominante, y su complemento naranja ( <code>#FF790E</code> ) para resaltar visualmente los botones de <code>#FF790E</code> . Cambie el <code>background-color</code> de <code>background-color</code> del <code>header</code> y del <code>footer</code> de <code>footer</code> de negro al color verde azulado. Luego cambia el <code>color</code> texto <code>h2</code> a teal también. Finalmente, cambie el <code>background-color</code> de <code>background-color</code> del <code>button</code> al color naranja.
</section> </section>
## Tests ## Tests
@ -21,13 +21,13 @@ Esta página utilizará un tono de verde azulado ( <code>#09A7A1</code> ) como c
```yml ```yml
tests: tests:
- text: &#39;El elemento del <code>header</code> debe tener un <code>background-color</code> de <code>background-color</code> de # 09A7A1.&#39; - text: 'El elemento del <code>header</code> debe tener un <code>background-color</code> de <code>background-color</code> de # 09A7A1.'
testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.");' testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.");'
- text: &#39;El elemento de <code>footer</code> debe tener un <code>background-color</code> de <code>background-color</code> de # 09A7A1.&#39; - text: 'El elemento de <code>footer</code> debe tener un <code>background-color</code> de <code>background-color</code> de # 09A7A1.'
testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.");' testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.");'
- text: &#39;El elemento <code>h2</code> debe tener un <code>color</code> de # 09A7A1.&#39; - text: 'El elemento <code>h2</code> debe tener un <code>color</code> de # 09A7A1.'
testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The <code>h2</code> element should have a <code>color</code> of #09A7A1.");' testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The <code>h2</code> element should have a <code>color</code> of #09A7A1.");'
- text: &#39;El elemento del <code>button</code> debe tener un <code>background-color</code> de <code>background-color</code> de # FF790E.&#39; - text: 'El elemento del <code>button</code> debe tener un <code>background-color</code> de <code>background-color</code> de # FF790E.'
testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The <code>button</code> element should have a <code>background-color</code> of #FF790E.");' testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The <code>button</code> element should have a <code>background-color</code> of #FF790E.");'
``` ```

View File

@ -7,15 +7,15 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Este reto tocará el uso de pseudo-clases. Una pseudo-clase es una palabra clave que se puede agregar a los selectores para seleccionar un estado específico del elemento. Este reto tocará el uso de pseudo-clases. Una pseudo-clase es una palabra clave que se puede agregar a los selectores para seleccionar un estado específico del elemento.
Por ejemplo, el estilo de una etiqueta de anclaje se puede cambiar para su estado de activación mediante el uso del selector de pseudo-clase <code>:hover</code> . Aquí está el CSS para cambiar el <code>color</code> de la etiqueta de anclaje a rojo durante su estado de desplazamiento: Por ejemplo, el estilo de una etiqueta de anclaje se puede cambiar para su estado de activación mediante el uso del selector de pseudo-clase <code>:hover</code> . Aquí está el CSS para cambiar el <code>color</code> de la etiqueta de anclaje a rojo durante su estado de desplazamiento:
<blockquote>a:hover {<br>&nbsp;&nbsp;color: red;<br>}</blockquote> <blockquote>a:hover {<br>&nbsp;&nbsp;color: red;<br>}</blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
El editor de código tiene una regla CSS para el estilo de todo <code>a</code> negro etiquetas. Añadir una regla de modo que cuando el usuario se desplaza sobre la <code>a</code> etiqueta, el <code>color</code> es de color azul. El editor de código tiene una regla CSS para el estilo de todo <code>a</code> negro etiquetas. Añadir una regla de modo que cuando el usuario se desplaza sobre la <code>a</code> etiqueta, el <code>color</code> es de color azul.
</section> </section>
## Tests ## Tests
@ -23,7 +23,7 @@ El editor de código tiene una regla CSS para el estilo de todo <code>a</code> n
```yml ```yml
tests: tests:
- text: &#39;El <code>color</code> etiqueta de anclaje debe permanecer en negro, solo agregue reglas CSS para el <code>:hover</code> estado de <code>:hover</code> &#39;. - text: 'El <code>color</code> etiqueta de anclaje debe permanecer en negro, solo agregue reglas CSS para el <code>:hover</code> estado de <code>:hover</code> '
testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.");' testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.");'
- text: La etiqueta de anclaje debe tener un <code>color</code> azul en el hover. - text: La etiqueta de anclaje debe tener un <code>color</code> azul en el hover.
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a <code>color</code> of blue on hover.");' testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a <code>color</code> of blue on hover.");'

View File

@ -7,16 +7,16 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Al manipular diferentes selectores y propiedades, puedes hacer formas interesantes. Uno de los más fáciles de probar es una forma de luna creciente. Para este desafío, necesitas trabajar con la propiedad <code>box-shadow</code> que establece la sombra de un elemento, junto con la propiedad <code>border-radius</code> que controla la redondez de las esquinas del elemento. Al manipular diferentes selectores y propiedades, puedes hacer formas interesantes. Uno de los más fáciles de probar es una forma de luna creciente. Para este desafío, necesitas trabajar con la propiedad <code>box-shadow</code> que establece la sombra de un elemento, junto con la propiedad <code>border-radius</code> que controla la redondez de las esquinas del elemento.
Creará un objeto redondo y transparente con una sombra nítida que está ligeramente desplazada hacia el lado: la sombra realmente será la forma de la luna que ve. Creará un objeto redondo y transparente con una sombra nítida que está ligeramente desplazada hacia el lado: la sombra realmente será la forma de la luna que ve.
Para crear un objeto redondo, la propiedad <code>border-radius</code> debe establecerse en un valor de 50%. Para crear un objeto redondo, la propiedad <code>border-radius</code> debe establecerse en un valor de 50%.
Puede recordar de un desafío anterior que la propiedad <code>box-shadow</code> toma valores para <code>offset-x</code> , <code>offset-y</code> , <code>blur-radius</code> , <code>spread-radius</code> y un valor de color en ese orden. Los valores de <code>spread-radius</code> <code>blur-radius</code> <code>spread-radius</code> son opcionales. Puede recordar de un desafío anterior que la propiedad <code>box-shadow</code> toma valores para <code>offset-x</code> , <code>offset-y</code> , <code>blur-radius</code> , <code>spread-radius</code> y un valor de color en ese orden. Los valores de <code>spread-radius</code> <code>blur-radius</code> <code>spread-radius</code> son opcionales.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Manipule el elemento cuadrado en el editor para crear la forma de la luna. Primero, cambie el <code>background-color</code> a transparente, luego establezca la propiedad de <code>border-radius</code> en 50% para hacer la forma circular. Finalmente, cambie la propiedad <code>box-shadow</code> para establecer <code>offset-x</code> en 25px, <code>offset-y</code> en 10px, <code>blur-radius</code> en 0, <code>spread-radius</code> en 0 y color en azul. Manipule el elemento cuadrado en el editor para crear la forma de la luna. Primero, cambie el <code>background-color</code> a transparente, luego establezca la propiedad de <code>border-radius</code> en 50% para hacer la forma circular. Finalmente, cambie la propiedad <code>box-shadow</code> para establecer <code>offset-x</code> en 25px, <code>offset-y</code> en 10px, <code>blur-radius</code> en 0, <code>spread-radius</code> en 0 y color en azul.
</section> </section>
## Tests ## Tests
@ -28,7 +28,7 @@ tests:
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the <code>background-color</code> property should be set to <code>transparent</code>.");' testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the <code>background-color</code> property should be set to <code>transparent</code>.");'
- text: El valor de la propiedad <code>border-radius</code> debe establecer en <code>50%</code> . - text: El valor de la propiedad <code>border-radius</code> debe establecer en <code>50%</code> .
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the <code>border-radius</code> property should be set to <code>50%</code>.");' testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the <code>border-radius</code> property should be set to <code>50%</code>.");'
- text: &#39;El valor de la propiedad <code>box-shadow</code> debe establecerse en 25px para <code>offset-x</code> , 10px para <code>offset-y</code> , 0 para <code>blur-radius</code> de <code>blur-radius</code> , 0 para <code>spread-radius</code> de <code>spread-radius</code> y finalmente azul para el color.&#39; - text: 'El valor de la propiedad <code>box-shadow</code> debe establecerse en 25px para <code>offset-x</code> , 10px para <code>offset-y</code> , 0 para <code>blur-radius</code> de <code>blur-radius</code> , 0 para <code>spread-radius</code> de <code>spread-radius</code> y finalmente azul para el color.'
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.");' testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.");'
``` ```

View File

@ -7,18 +7,18 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Una de las formas más populares del mundo es la forma de corazón, y en este desafío creará una utilizando CSS puro. Pero primero, debe comprender los elementos pseudoelementos <code>::before</code> y <code>::after</code> . Estos pseudo-elementos se usan para agregar algo antes o después de un elemento seleccionado. En el siguiente ejemplo, un <code>::before</code> pseudo-elemento se usa para agregar un rectángulo a un elemento con el <code>heart</code> la clase: Una de las formas más populares del mundo es la forma de corazón, y en este desafío creará una utilizando CSS puro. Pero primero, debe comprender los elementos pseudoelementos <code>::before</code> y <code>::after</code> . Estos pseudo-elementos se usan para agregar algo antes o después de un elemento seleccionado. En el siguiente ejemplo, un <code>::before</code> pseudo-elemento se usa para agregar un rectángulo a un elemento con el <code>heart</code> la clase:
<blockquote>.heart::before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;border-radius: 25%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;height: 50px;<br>&nbsp;&nbsp;width: 70px;<br>&nbsp;&nbsp;top: -50px;<br>&nbsp;&nbsp;left: 5px;<br>}</blockquote> <blockquote>.heart::before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;border-radius: 25%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;height: 50px;<br>&nbsp;&nbsp;width: 70px;<br>&nbsp;&nbsp;top: -50px;<br>&nbsp;&nbsp;left: 5px;<br>}</blockquote>
Para que los elementos de pseudo-elementos <code>::before</code> y <code>::after</code> funcionen correctamente, deben tener una propiedad de <code>content</code> definida. Esta propiedad se usa generalmente para agregar elementos como una foto o texto al elemento seleccionado. Cuando los pseudo-elementos <code>::before</code> y <code>::after</code> se usan para hacer formas, la propiedad de <code>content</code> sigue siendo necesaria, pero se establece en una cadena vacía. Para que los elementos de pseudo-elementos <code>::before</code> y <code>::after</code> funcionen correctamente, deben tener una propiedad de <code>content</code> definida. Esta propiedad se usa generalmente para agregar elementos como una foto o texto al elemento seleccionado. Cuando los pseudo-elementos <code>::before</code> y <code>::after</code> se usan para hacer formas, la propiedad de <code>content</code> sigue siendo necesaria, pero se establece en una cadena vacía.
En el ejemplo anterior, el elemento con la clase de <code>heart</code> tiene un pseudoelemento <code>::before</code> del que produce un rectángulo amarillo con <code>height</code> y <code>width</code> de 50 px y 70 px, respectivamente. Este rectángulo tiene esquinas redondeadas debido a su radio de borde del 25% y está posicionado absolutamente a 5px desde la <code>left</code> y 50px por encima de la <code>top</code> del elemento. En el ejemplo anterior, el elemento con la clase de <code>heart</code> tiene un pseudoelemento <code>::before</code> del que produce un rectángulo amarillo con <code>height</code> y <code>width</code> de 50 px y 70 px, respectivamente. Este rectángulo tiene esquinas redondeadas debido a su radio de borde del 25% y está posicionado absolutamente a 5px desde la <code>left</code> y 50px por encima de la <code>top</code> del elemento.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Transforma el elemento en la pantalla a un corazón. En el <code>heart::after</code> selector, cambie el <code>background-color</code> a rosa y el <code>border-radius</code> del <code>border-radius</code> a 50%. Transforma el elemento en la pantalla a un corazón. En el <code>heart::after</code> selector, cambie el <code>background-color</code> a rosa y el <code>border-radius</code> del <code>border-radius</code> a 50%.
A continuación, apunte el elemento con el <code>heart</code> la clase (solo el <code>heart</code> ) y complete la propiedad de <code>transform</code> . Utilice la función <code>rotate()</code> con -45 grados. ( <code>rotate()</code> funciona de la misma manera que <code>skewX()</code> y <code>skewY()</code> hacen). A continuación, apunte el elemento con el <code>heart</code> la clase (solo el <code>heart</code> ) y complete la propiedad de <code>transform</code> . Utilice la función <code>rotate()</code> con -45 grados. ( <code>rotate()</code> funciona de la misma manera que <code>skewX()</code> y <code>skewY()</code> hacen).
Finalmente, en el <code>heart::before</code> selector, establece su propiedad de <code>content</code> en una cadena vacía. Finalmente, en el <code>heart::before</code> selector, establece su propiedad de <code>content</code> en una cadena vacía.
</section> </section>
## Tests ## Tests
@ -26,13 +26,13 @@ Finalmente, en el <code>heart::before</code> selector, establece su propiedad de
```yml ```yml
tests: tests:
- text: &#39;La propiedad de <code>background-color</code> de fondo del <code>heart::after</code> selector debe ser rosa.&#39; - text: 'La propiedad de <code>background-color</code> de fondo del <code>heart::after</code> selector debe ser rosa.'
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");' testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");'
- text: &#39;El <code>border-radius</code> del <code>border-radius</code> del <code>heart::after</code> selector debe ser del 50%.&#39; - text: 'El <code>border-radius</code> del <code>border-radius</code> del <code>heart::after</code> selector debe ser del 50%.'
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");' testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");'
- text: La propiedad de <code>transform</code> para la clase de <code>heart</code> debe usar una función <code>rotate()</code> establecida en -45 grados. - text: La propiedad de <code>transform</code> para la clase de <code>heart</code> debe usar una función <code>rotate()</code> establecida en -45 grados.
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");' testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");'
- text: &#39;El <code>content</code> del <code>heart::before</code> selector debe ser una cadena vacía.&#39; - text: 'El <code>content</code> del <code>heart::before</code> selector debe ser una cadena vacía.'
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");' testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");'
``` ```

View File

@ -7,14 +7,14 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
La siguiente opción para la propiedad de <code>position</code> CSS es <code>absolute</code> , que bloquea el elemento en su lugar en relación con su contenedor principal. A diferencia de la posición <code>relative</code> , esto elimina el elemento del flujo normal del documento, por lo que los elementos circundantes lo ignoran. Las propiedades de desplazamiento de CSS (superior o inferior e izquierda o derecha) se utilizan para ajustar la posición. La siguiente opción para la propiedad de <code>position</code> CSS es <code>absolute</code> , que bloquea el elemento en su lugar en relación con su contenedor principal. A diferencia de la posición <code>relative</code> , esto elimina el elemento del flujo normal del documento, por lo que los elementos circundantes lo ignoran. Las propiedades de desplazamiento de CSS (superior o inferior e izquierda o derecha) se utilizan para ajustar la posición.
Un matiz con posicionamiento absoluto es que se bloqueará en relación con su antepasado <em>posicionado</em> más cercano. Si olvida agregar una regla de posición al elemento principal, (esto generalmente se hace usando <code>position: relative;</code> ), el navegador seguirá buscando la cadena y, por último, usará la etiqueta del cuerpo de forma predeterminada. Un matiz con posicionamiento absoluto es que se bloqueará en relación con su antepasado <em>posicionado</em> más cercano. Si olvida agregar una regla de posición al elemento principal, (esto generalmente se hace usando <code>position: relative;</code> ), el navegador seguirá buscando la cadena y, por último, usará la etiqueta del cuerpo de forma predeterminada.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Bloquee el elemento <code>#searchbar</code> en la parte superior derecha de su <code>section</code> principal declarando su <code>position</code> como <code>absolute</code> . Dale las compensaciones <code>top</code> y <code>right</code> de 50 píxeles cada una. Bloquee el elemento <code>#searchbar</code> en la parte superior derecha de su <code>section</code> principal declarando su <code>position</code> como <code>absolute</code> . Dale las compensaciones <code>top</code> y <code>right</code> de 50 píxeles cada una.
</section> </section>
## Tests ## Tests
@ -22,11 +22,11 @@ Bloquee el elemento <code>#searchbar</code> en la parte superior derecha de su <
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#searchbar</code> debería tener una <code>position</code> establecida en <code>absolute</code> .&#39; - text: 'El elemento <code>#searchbar</code> debería tener una <code>position</code> establecida en <code>absolute</code> .'
testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");' testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");'
- text: &#39;Su código debe usar el desplazamiento de CSS <code>top</code> de 50 píxeles en el elemento <code>#searchbar</code> &#39;. - text: 'Su código debe usar el desplazamiento de CSS <code>top</code> de 50 píxeles en el elemento <code>#searchbar</code> '
testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");' testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
- text: &#39;Su código debe usar el desplazamiento de CSS <code>right</code> de 50 píxeles en el elemento <code>#searchbar</code> &#39;. - text: 'Su código debe usar el desplazamiento de CSS <code>right</code> de 50 píxeles en el elemento <code>#searchbar</code> '
testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");' testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
``` ```

View File

@ -7,14 +7,14 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
El siguiente esquema de diseño que ofrece CSS es la posición <code>fixed</code> , que es un tipo de posicionamiento absoluto que bloquea un elemento relativo a la ventana del navegador. Similar al posicionamiento absoluto, se usa con las propiedades de desplazamiento de CSS y también elimina el elemento del flujo normal del documento. Otros elementos ya no se &quot;dan cuenta&quot; de dónde se coloca, lo que puede requerir algunos ajustes de diseño en otros lugares. El siguiente esquema de diseño que ofrece CSS es la posición <code>fixed</code> , que es un tipo de posicionamiento absoluto que bloquea un elemento relativo a la ventana del navegador. Similar al posicionamiento absoluto, se usa con las propiedades de desplazamiento de CSS y también elimina el elemento del flujo normal del documento. Otros elementos ya no se &quot;dan cuenta&quot; de dónde se coloca, lo que puede requerir algunos ajustes de diseño en otros lugares.
Una diferencia clave entre las posiciones <code>fixed</code> y <code>absolute</code> es que un elemento con una posición fija no se moverá cuando el usuario se desplace. Una diferencia clave entre las posiciones <code>fixed</code> y <code>absolute</code> es que un elemento con una posición fija no se moverá cuando el usuario se desplace.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
La barra de navegación en el código está etiquetada con un ID de <code>navbar</code> de <code>navbar</code> . Cambie su <code>position</code> a <code>fixed</code> , y desplace 0 píxeles desde la <code>top</code> y 0 píxeles desde la <code>left</code> . Observe el (falta de) impacto en la posición <code>h1</code> , no se ha empujado hacia abajo para acomodar la barra de navegación y debería ajustarse por separado. La barra de navegación en el código está etiquetada con un ID de <code>navbar</code> de <code>navbar</code> . Cambie su <code>position</code> a <code>fixed</code> , y desplace 0 píxeles desde la <code>top</code> y 0 píxeles desde la <code>left</code> . Observe el (falta de) impacto en la posición <code>h1</code> , no se ha empujado hacia abajo para acomodar la barra de navegación y debería ajustarse por separado.
</section> </section>
## Tests ## Tests
@ -22,11 +22,11 @@ La barra de navegación en el código está etiquetada con un ID de <code>navbar
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#navbar</code> debería tener una <code>position</code> establecida como <code>fixed</code> .&#39; - text: 'El elemento <code>#navbar</code> debería tener una <code>position</code> establecida como <code>fixed</code> .'
testString: 'assert($("#navbar").css("position") == "fixed", "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.");' testString: 'assert($("#navbar").css("position") == "fixed", "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.");'
- text: &#39;Su código debe usar el desplazamiento de CSS <code>top</code> de 0 píxeles en el elemento <code>#navbar</code> &#39;. - text: 'Su código debe usar el desplazamiento de CSS <code>top</code> de 0 píxeles en el elemento <code>#navbar</code> '
testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");' testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
- text: &#39;Tu código debe usar el desplazamiento de CSS <code>left</code> de 0 píxeles en el elemento <code>#navbar</code> &#39;. - text: 'Tu código debe usar el desplazamiento de CSS <code>left</code> de 0 píxeles en el elemento <code>#navbar</code> '
testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");' testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
``` ```

View File

@ -7,17 +7,17 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Este desafío anima un elemento para replicar el movimiento de una bola que se hace malabarismo. Los desafíos anteriores cubrieron las curvas Bezier cúbicas <code>linear</code> y de <code>ease-out</code> desahogo, sin embargo, ninguno de ellos describe con precisión el movimiento de los malabares. Necesitas personalizar una curva Bezier para esto. Este desafío anima un elemento para replicar el movimiento de una bola que se hace malabarismo. Los desafíos anteriores cubrieron las curvas Bezier cúbicas <code>linear</code> y de <code>ease-out</code> desahogo, sin embargo, ninguno de ellos describe con precisión el movimiento de los malabares. Necesitas personalizar una curva Bezier para esto.
La <code>animation-timing-function</code> automáticamente en cada fotograma clave cuando el <code>animation-iteration-count</code> se establece en infinito. Dado que hay una regla de fotogramas clave establecida en la mitad de la duración de la animación (al <code>50%</code> ), produce dos progresiones de animación idénticas en el movimiento ascendente y descendente de la bola. La <code>animation-timing-function</code> automáticamente en cada fotograma clave cuando el <code>animation-iteration-count</code> se establece en infinito. Dado que hay una regla de fotogramas clave establecida en la mitad de la duración de la animación (al <code>50%</code> ), produce dos progresiones de animación idénticas en el movimiento ascendente y descendente de la bola.
La siguiente curva de Bezier cúbica simula un movimiento de malabarismo: La siguiente curva de Bezier cúbica simula un movimiento de malabarismo:
<code>cubic-bezier(0.3, 0.4, 0.5, 1.6);</code> <code>cubic-bezier(0.3, 0.4, 0.5, 1.6);</code>
Observe que el valor de y2 es mayor que 1. Aunque la curva de Bézier cúbica se asigna en un sistema de coordenadas 1 por 1, y solo puede aceptar valores de x de 1 a 1, el valor de y se puede configurar en números mayores que uno . Esto resulta en un movimiento de rebote que es ideal para simular la bola de malabarismo. Observe que el valor de y2 es mayor que 1. Aunque la curva de Bézier cúbica se asigna en un sistema de coordenadas 1 por 1, y solo puede aceptar valores de x de 1 a 1, el valor de y se puede configurar en números mayores que uno . Esto resulta en un movimiento de rebote que es ideal para simular la bola de malabarismo.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Cambie el valor de la <code>animation-timing-function</code> de <code>animation-timing-function</code> del elemento con el id de <code>green</code> a una función <code>cubic-bezier</code> con x1, y1, x2, y2 valores establecidos respectivamente en 0.311, 0.441, 0.444, 1.649. Cambie el valor de la <code>animation-timing-function</code> de <code>animation-timing-function</code> del elemento con el id de <code>green</code> a una función <code>cubic-bezier</code> con x1, y1, x2, y2 valores establecidos respectivamente en 0.311, 0.441, 0.444, 1.649.
</section> </section>
## Tests ## Tests
@ -25,7 +25,7 @@ Cambie el valor de la <code>animation-timing-function</code> de <code>animation-
```yml ```yml
tests: tests:
- text: &#39;El valor de la propiedad <code>animation-timing-function</code> para el elemento con el id <code>green</code> debe ser una función de <code>cubic-bezier</code> con los valores de x1, y1, x2, y2 según lo especificado.&#39; - text: 'El valor de la propiedad <code>animation-timing-function</code> para el elemento con el id <code>green</code> debe ser una función de <code>cubic-bezier</code> con los valores de x1, y1, x2, y2 según lo especificado.'
testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.' testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'
``` ```

View File

@ -7,15 +7,15 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Eso es genial, pero no funciona bien todavía. Observe cómo se restablece la animación después de que hayan transcurrido <code>500ms</code> , lo que hace que el botón vuelva al color original. Desea que el botón quede resaltado. Eso es genial, pero no funciona bien todavía. Observe cómo se restablece la animación después de que hayan transcurrido <code>500ms</code> , lo que hace que el botón vuelva al color original. Desea que el botón quede resaltado.
Esto se puede hacer configurando la propiedad de <code>animation-fill-mode</code> en <code>forwards</code> . La <code>animation-fill-mode</code> especifica el estilo aplicado a un elemento cuando la animación ha finalizado. Puedes configurarlo así: Esto se puede hacer configurando la propiedad de <code>animation-fill-mode</code> en <code>forwards</code> . La <code>animation-fill-mode</code> especifica el estilo aplicado a un elemento cuando la animación ha finalizado. Puedes configurarlo así:
<code>animation-fill-mode: forwards;</code> <code>animation-fill-mode: forwards;</code>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Establezca la propiedad de <code>animation-fill-mode</code> del <code>button:hover</code> hacia <code>forwards</code> para que el botón permanezca resaltado cuando un usuario se desplace sobre él. Establezca la propiedad de <code>animation-fill-mode</code> del <code>button:hover</code> hacia <code>forwards</code> para que el botón permanezca resaltado cuando un usuario se desplace sobre él.
</section> </section>
## Tests ## Tests
@ -23,7 +23,7 @@ Establezca la propiedad de <code>animation-fill-mode</code> del <code>button:hov
```yml ```yml
tests: tests:
- text: &#39; <code>button:hover</code> debería tener una propiedad de <code>animation-fill-mode</code> con un valor de <code>forwards</code> .&#39; - text: ' <code>button:hover</code> debería tener una propiedad de <code>animation-fill-mode</code> con un valor de <code>forwards</code> .'
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.");' testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.");'
``` ```

View File

@ -7,12 +7,12 @@ videoUrl: ''
--- ---
## Description ## Description
<html><section id='description'> <html><section id='description'>
Las compensaciones de CSS de la <code>top</code> o <code>bottom</code> , y de la <code>left</code> o la <code>right</code> indican al navegador la distancia a la que se debe desplazar un elemento en relación con el lugar donde se ubicaría en el flujo normal del documento. Está desplazando un elemento lejos de un punto dado, lo que lo aleja del lado al que se hace referencia (efectivamente, en la dirección opuesta). Como viste en el último desafío, usando el desplazamiento superior movió el <code>h2</code> hacia abajo. Del mismo modo, utilizando un desplazamiento a la izquierda mueve un elemento a la derecha. <code>0</code> Las compensaciones de CSS de la <code>top</code> o <code>bottom</code> , y de la <code>left</code> o la <code>right</code> indican al navegador la distancia a la que se debe desplazar un elemento en relación con el lugar donde se ubicaría en el flujo normal del documento. Está desplazando un elemento lejos de un punto dado, lo que lo aleja del lado al que se hace referencia (efectivamente, en la dirección opuesta). Como viste en el último desafío, usando el desplazamiento superior movió el <code>h2</code> hacia abajo. Del mismo modo, utilizando un desplazamiento a la izquierda mueve un elemento a la derecha. <code>0</code>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Use las compensaciones de CSS para mover el <code>h2</code> 15 píxeles a la derecha y 10 píxeles hacia arriba. Use las compensaciones de CSS para mover el <code>h2</code> 15 píxeles a la derecha y 10 píxeles hacia arriba.
</section> </section>
## Tests ## Tests
@ -20,9 +20,9 @@ Use las compensaciones de CSS para mover el <code>h2</code> 15 píxeles a la der
```yml ```yml
tests: tests:
- text: &#39;Su código debe usar un desplazamiento de CSS para posicionar relativamente el <code>h2</code> 10px hacia arriba. En otras palabras, aléjelo 10px de la <code>bottom</code> de donde normalmente se sienta. &#39; - text: 'Su código debe usar un desplazamiento de CSS para posicionar relativamente el <code>h2</code> 10px hacia arriba. En otras palabras, aléjelo 10px de la <code>bottom</code> de donde normalmente se sienta. '
testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");'
- text: &#39;Su código debe usar un desplazamiento de CSS para posicionar relativamente el <code>h2</code> 15px hacia la derecha. En otras palabras, aléjelo a 15px de la <code>left</code> de donde normalmente se encuentra. - text: 'Su código debe usar un desplazamiento de CSS para posicionar relativamente el <code>h2</code> 15px hacia la derecha. En otras palabras, aléjelo a 15px de la <code>left</code> de donde normalmente se encuentra.
testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'
``` ```

View File

@ -7,16 +7,16 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Un desafío anterior discutió la palabra clave de <code>ease-out</code> que describe un cambio de animación que se acelera primero y luego se ralentiza al final de la animación. A la derecha, se muestra la diferencia entre la palabra clave de <code>ease-out</code> (para el elemento azul) y <code>linear</code> palabra clave <code>linear</code> (para el elemento rojo). Se pueden lograr progresiones de animación similares a la palabra clave de <code>ease-out</code> de uso utilizando una función de curva Bezier cúbica personalizada. Un desafío anterior discutió la palabra clave de <code>ease-out</code> que describe un cambio de animación que se acelera primero y luego se ralentiza al final de la animación. A la derecha, se muestra la diferencia entre la palabra clave de <code>ease-out</code> (para el elemento azul) y <code>linear</code> palabra clave <code>linear</code> (para el elemento rojo). Se pueden lograr progresiones de animación similares a la palabra clave de <code>ease-out</code> de uso utilizando una función de curva Bezier cúbica personalizada.
En general, el cambio de los puntos de anclaje <code>p1</code> y <code>p2</code> impulsa la creación de diferentes curvas Bezier, que controlan cómo avanza la animación a través del tiempo. Este es un ejemplo de una curva de Bezier que utiliza valores para imitar el estilo de relajación: En general, el cambio de los puntos de anclaje <code>p1</code> y <code>p2</code> impulsa la creación de diferentes curvas Bezier, que controlan cómo avanza la animación a través del tiempo. Este es un ejemplo de una curva de Bezier que utiliza valores para imitar el estilo de relajación:
<code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code> <code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code>
Recuerde que todas <code>cubic-bezier</code> funciones de <code>cubic-bezier</code> comienzan con <code>p0</code> en (0, 0) y terminan con <code>p3</code> en (1, 1). En este ejemplo, la curva se mueve más rápido a través del eje Y (comienza en 0, va a <code>p1</code> y el valor de 0, luego va a <code>p2</code> y el valor de 1) que se mueve a través del eje X (0 para comenzar, luego 0 para <code>p1</code> , hasta 0.58 para <code>p2</code> ). Como resultado, el cambio en el elemento animado progresa más rápido que el tiempo de la animación para ese segmento. Hacia el final de la curva, la relación entre el cambio en los valores de x e y se invierte: el valor de y se mueve de 1 a 1 (sin cambio), y los valores de x se mueven de 0.58 a 1, lo que hace que los cambios de animación progresen más lentamente en comparación La duración de la animación. Recuerde que todas <code>cubic-bezier</code> funciones de <code>cubic-bezier</code> comienzan con <code>p0</code> en (0, 0) y terminan con <code>p3</code> en (1, 1). En este ejemplo, la curva se mueve más rápido a través del eje Y (comienza en 0, va a <code>p1</code> y el valor de 0, luego va a <code>p2</code> y el valor de 1) que se mueve a través del eje X (0 para comenzar, luego 0 para <code>p1</code> , hasta 0.58 para <code>p2</code> ). Como resultado, el cambio en el elemento animado progresa más rápido que el tiempo de la animación para ese segmento. Hacia el final de la curva, la relación entre el cambio en los valores de x e y se invierte: el valor de y se mueve de 1 a 1 (sin cambio), y los valores de x se mueven de 0.58 a 1, lo que hace que los cambios de animación progresen más lentamente en comparación La duración de la animación.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Para ver el efecto de esta curva de Bezier en acción, cambie la <code>animation-timing-function</code> de <code>animation-timing-function</code> del elemento con id de <code>red</code> a una función de <code>cubic-bezier</code> con x1, y1, x2, y2 valores establecidos respectivamente en 0, 0, 0.58, 1. Esto hará que ambos elementos progresen a través de la animación de manera similar. Para ver el efecto de esta curva de Bezier en acción, cambie la <code>animation-timing-function</code> de <code>animation-timing-function</code> del elemento con id de <code>red</code> a una función de <code>cubic-bezier</code> con x1, y1, x2, y2 valores establecidos respectivamente en 0, 0, 0.58, 1. Esto hará que ambos elementos progresen a través de la animación de manera similar.
</section> </section>
## Tests ## Tests
@ -24,7 +24,7 @@ Para ver el efecto de esta curva de Bezier en acción, cambie la <code>animation
```yml ```yml
tests: tests:
- text: &#39;El valor de la propiedad <code>animation-timing-function</code> del elemento con el id <code>red</code> debe ser una función de <code>cubic-bezier</code> con x1, y1, x2, y2 valores establecidos respectivamente en 0, 0, 0.58, 1.&#39; - text: 'El valor de la propiedad <code>animation-timing-function</code> del elemento con el id <code>red</code> debe ser una función de <code>cubic-bezier</code> con x1, y1, x2, y2 valores establecidos respectivamente en 0, 0, 0.58, 1.'
testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");' testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
- text: El elemento con el ID <code>red</code> ya no debería tener la propiedad de <code>animation-timing-function</code> lineal. - text: El elemento con el ID <code>red</code> ya no debería tener la propiedad de <code>animation-timing-function</code> lineal.
testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.");' testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.");'

View File

@ -7,14 +7,14 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Para cambiar la escala de un elemento, CSS tiene la propiedad de <code>transform</code> , junto con su función <code>scale()</code> . El siguiente ejemplo de código duplica el tamaño de todos los elementos de párrafo en la página: Para cambiar la escala de un elemento, CSS tiene la propiedad de <code>transform</code> , junto con su función <code>scale()</code> . El siguiente ejemplo de código duplica el tamaño de todos los elementos de párrafo en la página:
<blockquote>p {<br>&nbsp;&nbsp;transform:scale(2);<br>}</blockquote> <blockquote>p {<br>&nbsp;&nbsp;transform:scale(2);<br>}</blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Aumente el tamaño del elemento con el id de <code>ball2</code> a 1.5 veces su tamaño original. Aumente el tamaño del elemento con el id de <code>ball2</code> a 1.5 veces su tamaño original.
</section> </section>
## Tests ## Tests
@ -22,7 +22,7 @@ Aumente el tamaño del elemento con el id de <code>ball2</code> a 1.5 veces su t
```yml ```yml
tests: tests:
- text: &#39;Establezca la propiedad de <code>transform</code> para <code>#ball2</code> para escalarla 1.5 veces su tamaño.&#39; - text: 'Establezca la propiedad de <code>transform</code> para <code>#ball2</code> para escalarla 1.5 veces su tamaño.'
testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.");' testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.");'
``` ```

View File

@ -7,13 +7,13 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Para tachar el texto, que es cuando una línea horizontal corta los caracteres, puede usar la etiqueta <code>s</code> . Muestra que una sección de texto ya no es válida. Con la etiqueta <code>s</code> , el navegador aplica el CSS de <code>text-decoration: line-through;</code> al elemento. Para tachar el texto, que es cuando una línea horizontal corta los caracteres, puede usar la etiqueta <code>s</code> . Muestra que una sección de texto ya no es válida. Con la etiqueta <code>s</code> , el navegador aplica el CSS de <code>text-decoration: line-through;</code> al elemento.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Envuelva la etiqueta <code>s</code> alrededor de &quot;Google&quot; dentro de la etiqueta <code>h4</code> y luego agregue la palabra Alfabeto a su lado, que no debería tener el formato tachado. Envuelva la etiqueta <code>s</code> alrededor de &quot;Google&quot; dentro de la etiqueta <code>h4</code> y luego agregue la palabra Alfabeto a su lado, que no debería tener el formato tachado.
</section> </section>
## Tests ## Tests
@ -25,7 +25,7 @@ tests:
testString: 'assert($("s").length == 1, "Your code should add one <code>s</code> tag to the markup.");' testString: 'assert($("s").length == 1, "Your code should add one <code>s</code> tag to the markup.");'
- text: La etiqueta <code>s</code> debe envolver el texto de Google en la etiqueta <code>h4</code> . No debe contener la palabra Alfabeto. - text: La etiqueta <code>s</code> debe envolver el texto de Google en la etiqueta <code>h4</code> . No debe contener la palabra Alfabeto.
testString: 'assert($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.");' testString: 'assert($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.");'
- text: &#39;Incluya la palabra Alfabeto en la etiqueta <code>h4</code> , sin tachar el formato.&#39; - text: 'Incluya la palabra Alfabeto en la etiqueta <code>h4</code> , sin tachar el formato.'
testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.");' testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.");'
``` ```

View File

@ -8,14 +8,14 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Tu foto de gato tiene actualmente esquinas afiladas. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code> . Tu foto de gato tiene actualmente esquinas afiladas. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code> .
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Puede especificar un <code>border-radius</code> con píxeles. Dale a tu foto de gato un <code>border-radius</code> de <code>10px</code> de <code>10px</code> . Puede especificar un <code>border-radius</code> con píxeles. Dale a tu foto de gato un <code>border-radius</code> de <code>10px</code> de <code>10px</code> .
Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede agregar <code>border-radius</code> <code>.thick-green-border</code> clase <code>.thick-green-border</code> o a la clase <code>.smaller-image</code> . Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede agregar <code>border-radius</code> <code>.thick-green-border</code> clase <code>.thick-green-border</code> o a la clase <code>.smaller-image</code> .
</section> </section>
## Tests ## Tests
@ -23,7 +23,7 @@ Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede a
```yml ```yml
tests: tests:
- text: El elemento de su imagen debe tener la clase "borde verde grueso". - text: El elemento de su imagen debe tener la clase "borde verde grueso."
testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");' testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");'
- text: Su imagen debe tener un radio de borde de <code clase = "notranslate"> 10px </code> - text: Su imagen debe tener un radio de borde de <code clase = "notranslate"> 10px </code>
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of <code>10px</code>");' testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of <code>10px</code>");'

View File

@ -7,15 +7,15 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Cuando crea una variable, queda disponible para que la use dentro del elemento en el que la creó. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como <dfn>cascada</dfn> . Cuando crea una variable, queda disponible para que la use dentro del elemento en el que la creó. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como <dfn>cascada</dfn> .
Debido a la cascada, las variables CSS a menudo se definen en el elemento <dfn>: raíz</dfn> . Debido a la cascada, las variables CSS a menudo se definen en el elemento <dfn>: raíz</dfn> .
<code>:root</code> es un selector de <dfn>pseudo-clase</dfn> que coincide con el elemento raíz del documento, generalmente el <html> elemento. Al crear sus variables en <code>:root</code> , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo. <code>:root</code> es un selector de <dfn>pseudo-clase</dfn> que coincide con el elemento raíz del documento, generalmente el <html> elemento. Al crear sus variables en <code>:root</code> , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Defina una variable llamada <code>--penguin-belly</code> en el selector de <code>:root</code> y déle el valor de <code>pink</code> . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable. Defina una variable llamada <code>--penguin-belly</code> en el selector de <code>:root</code> y déle el valor de <code>pink</code> . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable.
</section> </section>
## Tests ## Tests
@ -23,7 +23,7 @@ Defina una variable llamada <code>--penguin-belly</code> en el selector de <code
```yml ```yml
tests: tests:
- text: &#39;declara la variable <code>--penguin-belly</code> en la <code>:root</code> y <code>--penguin-belly</code> a <code>pink</code> &#39;. - text: 'declara la variable <code>--penguin-belly</code> en la <code>:root</code> y <code>--penguin-belly</code> a <code>pink</code> '
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");' testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");'
``` ```

View File

@ -7,14 +7,14 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
El tamaño de fuente se controla mediante la propiedad CSS de <code>font-size</code> , como esta: El tamaño de fuente se controla mediante la propiedad CSS de <code>font-size</code> , como esta:
<blockquote>h1 {<br>&nbsp;&nbsp;font-size: 30px;<br>}</blockquote> <blockquote>h1 {<br>&nbsp;&nbsp;font-size: 30px;<br>}</blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Dentro de la misma etiqueta <code>&lt;style&gt;</code> que contiene su clase de <code>red-text</code> , cree una entrada para los elementos <code>p</code> y establezca el <code>font-size</code> en 16 píxeles ( <code>16px</code> ). Dentro de la misma etiqueta <code>&lt;style&gt;</code> que contiene su clase de <code>red-text</code> , cree una entrada para los elementos <code>p</code> y establezca el <code>font-size</code> en 16 píxeles ( <code>16px</code> ).
</section> </section>
## Tests ## Tests
@ -22,7 +22,7 @@ Dentro de la misma etiqueta <code>&lt;style&gt;</code> que contiene su clase de
```yml ```yml
tests: tests:
- text: &#39;Entre las etiquetas de <code>style</code> , <code>16px</code> elementos <code>p</code> <code>font-size</code> de <code>font-size</code> de <code>16px</code> . El navegador y el zoom de texto deben estar al 100% &quot;. - text: 'Entre las etiquetas de <code>style</code> , <code>16px</code> elementos <code>p</code> <code>font-size</code> de <code>font-size</code> de <code>16px</code> . El navegador y el zoom de texto deben estar al 100% &quot;.
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.");' testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.");'
``` ```

View File

@ -7,18 +7,18 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Yay! Acabamos de demostrar que los estilos en línea anularán todas las declaraciones de CSS en su elemento de <code>style</code> . Yay! Acabamos de demostrar que los estilos en línea anularán todas las declaraciones de CSS en su elemento de <code>style</code> .
Pero espera. Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, hablemos de por qué querría anular CSS. Pero espera. Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, hablemos de por qué querría anular CSS.
En muchas situaciones, usarás bibliotecas CSS. Estos pueden anular accidentalmente su propio CSS. Entonces, cuando necesite estar absolutamente seguro de que un elemento tiene un CSS específico, puede usar <code>!important</code> En muchas situaciones, usarás bibliotecas CSS. Estos pueden anular accidentalmente su propio CSS. Entonces, cuando necesite estar absolutamente seguro de que un elemento tiene un CSS específico, puede usar <code>!important</code>
Volvamos a nuestra declaración de clase de <code>pink-text</code> . Recuerde que nuestra clase de <code>pink-text</code> fue anulada por las siguientes declaraciones de clase, declaraciones de id y estilos en línea. Volvamos a nuestra declaración de clase de <code>pink-text</code> . Recuerde que nuestra clase de <code>pink-text</code> fue anulada por las siguientes declaraciones de clase, declaraciones de id y estilos en línea.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
¡Agreguemos la palabra clave <code>!important</code> para la declaración de color de su elemento de texto rosado para asegurarnos al 100% de que su elemento <code>h1</code> será rosa. ¡Agreguemos la palabra clave <code>!important</code> para la declaración de color de su elemento de texto rosado para asegurarnos al 100% de que su elemento <code>h1</code> será rosa.
Un ejemplo de cómo hacer esto es: Un ejemplo de cómo hacer esto es:
<code>color: red !important;</code> <code>color: red !important;</code>
</section> </section>
## Tests ## Tests
@ -32,7 +32,7 @@ tests:
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");' testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Su elemento <code>h1</code> debe tener el ID de <code>orange-text</code> . - text: Su elemento <code>h1</code> debe tener el ID de <code>orange-text</code> .
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");' testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
- text: &#39;Su elemento <code>h1</code> debe tener el estilo de <code>color: white</code> &#39;. - text: 'Su elemento <code>h1</code> debe tener el estilo de <code>color: white</code> '
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), "Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.");' testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), "Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.");'
- text: Su declaración de clase de <code>pink-text</code> debe tener la palabra clave <code>!important</code> para anular todas las demás declaraciones. - text: Su declaración de clase de <code>pink-text</code> debe tener la palabra clave <code>!important</code> para anular todas las demás declaraciones.
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.");' testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.");'

View File

@ -7,16 +7,16 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí. A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí.
Por ejemplo, su elemento <code>h1</code> no puede ser verde y rosa al mismo tiempo. Por ejemplo, su elemento <code>h1</code> no puede ser verde y rosa al mismo tiempo.
Veamos qué sucede cuando creamos una clase que hace que el texto sea rosa, luego lo aplicamos a un elemento. ¿Nuestra clase <em>anulará</em> el <code>color: green;</code> del elemento del <code>body</code> <code>color: green;</code> Propiedad CSS? Veamos qué sucede cuando creamos una clase que hace que el texto sea rosa, luego lo aplicamos a un elemento. ¿Nuestra clase <em>anulará</em> el <code>color: green;</code> del elemento del <code>body</code> <code>color: green;</code> Propiedad CSS?
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Crea una clase CSS llamada <code>pink-text</code> que le da a un elemento el color rosa. Crea una clase CSS llamada <code>pink-text</code> que le da a un elemento el color rosa.
Dale a tu elemento <code>h1</code> la clase de <code>pink-text</code> . Dale a tu elemento <code>h1</code> la clase de <code>pink-text</code> .
</section> </section>
## Tests ## Tests
@ -26,7 +26,7 @@ Dale a tu elemento <code>h1</code> la clase de <code>pink-text</code> .
tests: tests:
- text: Su elemento <code>h1</code> debe tener la clase <code>pink-text</code> . - text: Su elemento <code>h1</code> debe tener la clase <code>pink-text</code> .
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");' testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: &#39;Tu <code>&lt;style&gt;</code> debe tener una clase de CSS de <code>pink-text</code> que cambie el <code>color</code> .&#39; - text: 'Tu <code>&lt;style&gt;</code> debe tener una clase de CSS de <code>pink-text</code> que cambie el <code>color</code> .'
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.");' testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.");'
- text: Tu elemento <code>h1</code> debe ser rosa. - text: Tu elemento <code>h1</code> debe ser rosa.
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");' testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'

View File

@ -7,19 +7,19 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Hay varias fuentes predeterminadas que están disponibles en todos los navegadores. Estas familias de fuentes genéricas incluyen <code>monospace</code> , <code>serif</code> y <code>sans-serif</code> Hay varias fuentes predeterminadas que están disponibles en todos los navegadores. Estas familias de fuentes genéricas incluyen <code>monospace</code> , <code>serif</code> y <code>sans-serif</code>
Cuando una fuente no está disponible, puede indicar al navegador que se &quot;degrade&quot; a otra fuente. Cuando una fuente no está disponible, puede indicar al navegador que se &quot;degrade&quot; a otra fuente.
Por ejemplo, si deseaba que un elemento usara la fuente <code>Helvetica</code> , pero se degradara a la <code>sans-serif</code> cuando <code>Helvetica</code> no estaba disponible, la especificará de la siguiente manera: Por ejemplo, si deseaba que un elemento usara la fuente <code>Helvetica</code> , pero se degradara a la <code>sans-serif</code> cuando <code>Helvetica</code> no estaba disponible, la especificará de la siguiente manera:
<blockquote>p {<br>&nbsp;&nbsp;font-family: Helvetica, sans-serif;<br>}</blockquote> <blockquote>p {<br>&nbsp;&nbsp;font-family: Helvetica, sans-serif;<br>}</blockquote>
Los nombres genéricos de familia de fuentes no distinguen entre mayúsculas y minúsculas. Además, no necesitan comillas porque son palabras clave CSS. Los nombres genéricos de familia de fuentes no distinguen entre mayúsculas y minúsculas. Además, no necesitan comillas porque son palabras clave CSS.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Para empezar, aplique la fuente <code>monospace</code> al elemento <code>h2</code> , de modo que ahora tenga dos fuentes: <code>Lobster</code> y <code>monospace</code> . Para empezar, aplique la fuente <code>monospace</code> al elemento <code>h2</code> , de modo que ahora tenga dos fuentes: <code>Lobster</code> y <code>monospace</code> .
En el último desafío, importó la fuente <code>Lobster</code> usando la etiqueta de <code>link</code> . Ahora comente la importación de la fuente <code>Lobster</code> (utilizando los comentarios HTML que aprendió anteriormente) de Google Fonts para que ya no esté disponible. Observe cómo su elemento <code>h2</code> se degrada a la fuente <code>monospace</code> . En el último desafío, importó la fuente <code>Lobster</code> usando la etiqueta de <code>link</code> . Ahora comente la importación de la fuente <code>Lobster</code> (utilizando los comentarios HTML que aprendió anteriormente) de Google Fonts para que ya no esté disponible. Observe cómo su elemento <code>h2</code> se degrada a la fuente <code>monospace</code> .
<strong>Nota</strong> <br> Si tiene la fuente Lobster instalada en su computadora, no verá la degradación porque su navegador puede encontrar la fuente. <strong>Nota</strong> <br> Si tiene la fuente Lobster instalada en su computadora, no verá la degradación porque su navegador puede encontrar la fuente.
</section> </section>
## Tests ## Tests
@ -31,9 +31,9 @@ tests:
testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), "Your h2 element should use the font <code>Lobster</code>.");' testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), "Your h2 element should use the font <code>Lobster</code>.");'
- text: Su elemento h2 debería degradarse a la fuente <code>monospace</code> cuando <code>Lobster</code> no está disponible. - text: Su elemento h2 debería degradarse a la fuente <code>monospace</code> cuando <code>Lobster</code> no está disponible.
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?,\s*monospace\s*;\s*\}/gi.test(code), "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.");' testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?,\s*monospace\s*;\s*\}/gi.test(code), "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.");'
- text: Comente su llamada a Google para la fuente <code>Lobster</code> colocando <code>&lt;!--</code> delante de ella. &#39; - text: Comente su llamada a Google para la fuente <code>Lobster</code> colocando <code>&lt;!--</code> delante de ella. '
testString: 'assert(new RegExp("<!--[^fc]", "gi").test(code), "Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.");' testString: 'assert(new RegExp("<!--[^fc]", "gi").test(code), "Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.");'
- text: &#39;Asegúrate de cerrar tu comentario agregando <code>--&gt;</code> .&#39; - text: 'Asegúrate de cerrar tu comentario agregando <code>--&gt;</code> .'
testString: 'assert(new RegExp("[^fc]-->", "gi").test(code), "Be sure to close your comment by adding <code>--&#62;</code>.");' testString: 'assert(new RegExp("[^fc]-->", "gi").test(code), "Be sure to close your comment by adding <code>--&#62;</code>.");'
``` ```

View File

@ -7,20 +7,20 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Las clases son estilos reutilizables que se pueden agregar a elementos HTML. Las clases son estilos reutilizables que se pueden agregar a elementos HTML.
Aquí hay un ejemplo de declaración de clase CSS: Aquí hay un ejemplo de declaración de clase CSS:
<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.blue-text {<br>&nbsp;&nbsp;&nbsp;&nbsp;color: blue;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote> <blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.blue-text {<br>&nbsp;&nbsp;&nbsp;&nbsp;color: blue;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>
Puede ver que hemos creado una clase CSS llamada <code>blue-text</code> dentro de la etiqueta <code>&lt;style&gt;</code> . Puede ver que hemos creado una clase CSS llamada <code>blue-text</code> dentro de la etiqueta <code>&lt;style&gt;</code> .
Puede aplicar una clase a un elemento HTML como este: Puede aplicar una clase a un elemento HTML como este:
<code>&lt;h2 class=&quot;blue-text&quot;&gt;CatPhotoApp&lt;/h2&gt;</code> <code>&lt;h2 class=&quot;blue-text&quot;&gt;CatPhotoApp&lt;/h2&gt;</code>
Tenga en cuenta que en su elemento de <code>style</code> CSS, los nombres de clase comienzan con un punto. En el atributo de clase de los elementos HTML, el nombre de la clase no incluye el período. Tenga en cuenta que en su elemento de <code>style</code> CSS, los nombres de clase comienzan con un punto. En el atributo de clase de los elementos HTML, el nombre de la clase no incluye el período.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Dentro de su elemento de <code>style</code> , cambie el selector <code>h2</code> a <code>.red-text</code> y actualice el valor del <code>blue</code> de <code>blue</code> a <code>red</code> . Dentro de su elemento de <code>style</code> , cambie el selector <code>h2</code> a <code>.red-text</code> y actualice el valor del <code>blue</code> de <code>blue</code> a <code>red</code> .
Asigne a su elemento <code>h2</code> el atributo de <code>class</code> con un valor de <code>&#39;red-text&#39;</code> . Asigne a su elemento <code>h2</code> el atributo de <code>class</code> con un valor de <code>&#39;red-text&#39;</code> .
</section> </section>
## Tests ## Tests
@ -34,7 +34,7 @@ tests:
testString: 'assert($("h2").hasClass("red-text"), "Your <code>h2</code> element should have the class <code>red-text</code>.");' testString: 'assert($("h2").hasClass("red-text"), "Your <code>h2</code> element should have the class <code>red-text</code>.");'
- text: Su hoja de estilo debe declarar una clase de <code>red-text</code> y tener su color establecido en rojo. - text: Su hoja de estilo debe declarar una clase de <code>red-text</code> y tener su color establecido en rojo.
testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), "Your stylesheet should declare a <code>red-text</code> class and have its color set to red.");' testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), "Your stylesheet should declare a <code>red-text</code> class and have its color set to red.");'
- text: &#39;No utilice declaraciones de estilo en línea como <code>style=&quot;color: red&quot;</code> en su elemento <code>h2</code> .&#39; - text: 'No utilice declaraciones de estilo en línea como <code>style=&quot;color: red&quot;</code> en su elemento <code>h2</code> .'
testString: 'assert($("h2").attr("style") === undefined, "Do not use inline style declarations like <code>style="color&#58; red"</code> in your <code>h2</code> element.");' testString: 'assert($("h2").attr("style") === undefined, "Do not use inline style declarations like <code>style="color&#58; red"</code> in your <code>h2</code> element.");'
``` ```

View File

@ -7,14 +7,14 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Las variables CSS pueden simplificar la forma en que utiliza las consultas de medios. Las variables CSS pueden simplificar la forma en que utiliza las consultas de medios.
Por ejemplo, cuando su pantalla es más pequeña o más grande que el punto de interrupción de su consulta de medios, puede cambiar el valor de una variable y aplicará su estilo donde sea que se use. Por ejemplo, cuando su pantalla es más pequeña o más grande que el punto de interrupción de su consulta de medios, puede cambiar el valor de una variable y aplicará su estilo donde sea que se use.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
En el <code>:root</code> selector de <code>:root</code> de la <code>media query</code> , cámbielo para que <code>--penguin-size</code> se redefina y se le dé un valor de <code>200px</code> . Además, redefine <code>--penguin-skin</code> y dale un valor de <code>black</code> . Luego cambie el tamaño de la vista previa para ver este cambio en acción. En el <code>:root</code> selector de <code>:root</code> de la <code>media query</code> , cámbielo para que <code>--penguin-size</code> se redefina y se le dé un valor de <code>200px</code> . Además, redefine <code>--penguin-skin</code> y dale un valor de <code>black</code> . Luego cambie el tamaño de la vista previa para ver este cambio en acción.
</section> </section>
## Tests ## Tests
@ -22,9 +22,9 @@ En el <code>:root</code> selector de <code>:root</code> de la <code>media query<
```yml ```yml
tests: tests:
- text: &#39; <code>:root</code> debe reasignar la variable <code>--penguin-size</code> a <code>200px</code> .&#39; - text: ' <code>:root</code> debe reasignar la variable <code>--penguin-size</code> a <code>200px</code> .'
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), "<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.");' testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), "<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.");'
- text: &#39; <code>:root</code> debería reasignar la variable <code>--penguin-skin</code> a <code>black</code> &#39;. - text: ' <code>:root</code> debería reasignar la variable <code>--penguin-skin</code> a <code>black</code> '
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), "<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.");' testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), "<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.");'
``` ```

View File

@ -7,16 +7,16 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Muchas personas se sienten abrumadas por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente, puedes acortarlo. Muchas personas se sienten abrumadas por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente, puedes acortarlo.
Por ejemplo, el código hexadecimal de rojo <code>#FF0000</code> se puede acortar a <code>#F00</code> . Esta forma abreviada proporciona un dígito para el rojo, un dígito para el verde y un dígito para el azul. Por ejemplo, el código hexadecimal de rojo <code>#FF0000</code> se puede acortar a <code>#F00</code> . Esta forma abreviada proporciona un dígito para el rojo, un dígito para el verde y un dígito para el azul.
Esto reduce el número total de colores posibles a alrededor de 4.000. Pero los navegadores interpretarán <code>#FF0000</code> y <code>#F00</code> como exactamente del mismo color. Esto reduce el número total de colores posibles a alrededor de 4.000. Pero los navegadores interpretarán <code>#FF0000</code> y <code>#F00</code> como exactamente del mismo color.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Adelante, intente usar los códigos hexadecimales abreviados para colorear los elementos correctos. Adelante, intente usar los códigos hexadecimales abreviados para colorear los elementos correctos.
<table class='table table-striped'><tr><th> Color </th><th> Código hexadecimal corto </th></tr><tr><td> Cian </td><td> <code>#0FF</code> </td> </tr><tr><td> Verde </td><td> <code>#0F0</code> </td> </tr><tr><td> rojo </td><td> <code>#F00</code> </td> </tr><tr><td> Fucsia </td><td> <code>#F0F</code> </td> </tr></table> <table class='table table-striped'><tr><th> Color </th><th> Código hexadecimal corto </th></tr><tr><td> Cian </td><td> <code>#0FF</code> </td> </tr><tr><td> Verde </td><td> <code>#0F0</code> </td> </tr><tr><td> rojo </td><td> <code>#F00</code> </td> </tr><tr><td> Fucsia </td><td> <code>#F0F</code> </td> </tr></table>
</section> </section>
## Tests ## Tests
@ -26,19 +26,19 @@ Adelante, intente usar los códigos hexadecimales abreviados para colorear los e
tests: tests:
- text: ¡Da tu elemento <code>h1</code> con el texto <code>I am red!</code> El <code>color</code> rojo. - text: ¡Da tu elemento <code>h1</code> con el texto <code>I am red!</code> El <code>color</code> rojo.
testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.");' testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.");'
- text: &#39;Use el <code>hex code</code> abreviado para el color rojo en lugar del código hexadecimal <code>#FF0000</code> .&#39; - text: 'Use el <code>hex code</code> abreviado para el color rojo en lugar del código hexadecimal <code>#FF0000</code> .'
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), "Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.");' testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), "Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.");'
- text: ¡Da tu elemento <code>h1</code> con el texto <code>I am green!</code> El <code>color</code> verde. - text: ¡Da tu elemento <code>h1</code> con el texto <code>I am green!</code> El <code>color</code> verde.
testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.");' testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.");'
- text: &#39;Use el <code>hex code</code> abreviado para el color verde en lugar del código hexadecimal <code>#00FF00</code> .&#39; - text: 'Use el <code>hex code</code> abreviado para el color verde en lugar del código hexadecimal <code>#00FF00</code> .'
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.");' testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.");'
- text: ¡Da tu elemento <code>h1</code> con el texto <code>I am cyan!</code> El <code>color</code> cian. - text: ¡Da tu elemento <code>h1</code> con el texto <code>I am cyan!</code> El <code>color</code> cian.
testString: 'assert($(".cyan-text").css("color") === "rgb(0, 255, 255)", "Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.");' testString: 'assert($(".cyan-text").css("color") === "rgb(0, 255, 255)", "Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.");'
- text: &#39;Use el <code>hex code</code> abreviado para el color cian en lugar del código hexadecimal <code>#00FFFF</code> &#39;. - text: 'Use el <code>hex code</code> abreviado para el color cian en lugar del código hexadecimal <code>#00FFFF</code> '
testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.");' testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.");'
- text: ¡Da tu elemento <code>h1</code> con el texto <code>I am fuchsia!</code> El <code>color</code> fucsia. - text: ¡Da tu elemento <code>h1</code> con el texto <code>I am fuchsia!</code> El <code>color</code> fucsia.
testString: 'assert($(".fuchsia-text").css("color") === "rgb(255, 0, 255)", "Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.");' testString: 'assert($(".fuchsia-text").css("color") === "rgb(255, 0, 255)", "Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.");'
- text: &#39;Use el <code>hex code</code> abreviado para el color fucsia en lugar del código hexadecimal <code>#FF00FF</code> &#39;. - text: 'Use el <code>hex code</code> abreviado para el color fucsia en lugar del código hexadecimal <code>#FF00FF</code> '
testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.");' testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.");'
``` ```

View File

@ -8,15 +8,15 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Agreguemos un botón de <code>submit</code> a su formulario. Al hacer clic en este botón, los datos de su formulario se enviarán a la URL que especificó con el atributo de <code>action</code> su formulario. Agreguemos un botón de <code>submit</code> a su formulario. Al hacer clic en este botón, los datos de su formulario se enviarán a la URL que especificó con el atributo de <code>action</code> su formulario.
Aquí hay un ejemplo de botón de envío: Aquí hay un ejemplo de botón de envío:
<code>&lt;button type=&quot;submit&quot;&gt;this button submits the form&lt;/button&gt;</code> <code>&lt;button type=&quot;submit&quot;&gt;this button submits the form&lt;/button&gt;</code>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Agregue un botón como el último elemento de su elemento de <code>form</code> con un tipo de <code>submit</code> y &quot;Enviar&quot; como texto. Agregue un botón como el último elemento de su elemento de <code>form</code> con un tipo de <code>submit</code> y &quot;Enviar&quot; como texto.
</section> </section>
## Tests ## Tests
@ -28,7 +28,7 @@ tests:
testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");' testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");'
- text: El botón de envío debe tener el atributo <code class = "notranslate"> type </code> establecido en <code class = "notranslate"> submit </code>. - text: El botón de envío debe tener el atributo <code class = "notranslate"> type </code> establecido en <code class = "notranslate"> submit </code>.
testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.");' testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.");'
- text: Su botón de enviar solo debe tener el texto "Enviar". - text: Su botón de enviar solo debe tener el texto "Enviar."
testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");' testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");'
- text: Asegúrese de que su elemento <code class = "notranslate"> button </code> tenga una etiqueta de cierre. - text: Asegúrese de que su elemento <code class = "notranslate"> button </code> tenga una etiqueta de cierre.
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure your <code>button</code> element has a closing tag.");' testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure your <code>button</code> element has a closing tag.");'

View File

@ -7,14 +7,14 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Recuerde que para iniciar un comentario, debe usar <code>&lt;!--</code> y para finalizar un comentario, debe usar <code>--&gt;</code> Recuerde que para iniciar un comentario, debe usar <code>&lt;!--</code> y para finalizar un comentario, debe usar <code>--&gt;</code>
Aquí deberá finalizar el comentario antes de que comience su elemento <code>h2</code> . Aquí deberá finalizar el comentario antes de que comience su elemento <code>h2</code> .
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Comente su elemento <code>h1</code> y su elemento <code>p</code> , pero no su elemento <code>h2</code> . Comente su elemento <code>h1</code> y su elemento <code>p</code> , pero no su elemento <code>h2</code> .
</section> </section>
## Tests ## Tests
@ -28,7 +28,7 @@ tests:
testString: 'assert(($("h2").length > 0), "Leave your <code>h2</code> element uncommented so that it is visible on your page.");' testString: 'assert(($("h2").length > 0), "Leave your <code>h2</code> element uncommented so that it is visible on your page.");'
- text: Comenta tu elemento <code>p</code> para que no se vea en tu página. - text: Comenta tu elemento <code>p</code> para que no se vea en tu página.
testString: 'assert(($("p").length === 0), "Comment out your <code>p</code> element so that it is not visible on your page.");' testString: 'assert(($("p").length === 0), "Comment out your <code>p</code> element so that it is not visible on your page.");'
- text: &#39;Asegúrese de cerrar cada uno de sus comentarios con <code>--&gt;</code> .&#39; - text: 'Asegúrese de cerrar cada uno de sus comentarios con <code>--&gt;</code> .'
testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with <code>--&#62;</code>.");' testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with <code>--&#62;</code>.");'
- text: No cambie el orden de <code>h1</code> <code>h2</code> o <code>p</code> en el código. - text: No cambie el orden de <code>h1</code> <code>h2</code> o <code>p</code> en el código.
testString: 'assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") , "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.");' testString: 'assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") , "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.");'

View File

@ -7,17 +7,17 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Puede usar elementos de <code>anchor</code> para vincular contenido fuera de su página web. Puede usar elementos de <code>anchor</code> para vincular contenido fuera de su página web.
elementos de <code>anchor</code> elementos de <code>anchor</code>
necesitan una dirección web de destino denominada atributo <code>href</code> . También necesitan texto de anclaje. Aquí hay un ejemplo: necesitan una dirección web de destino denominada atributo <code>href</code> . También necesitan texto de anclaje. Aquí hay un ejemplo:
<code>&lt;a href=&quot;https://freecodecamp.org&quot;&gt;this links to freecodecamp.org&lt;/a&gt;</code> <code>&lt;a href=&quot;https://freecodecamp.org&quot;&gt;this links to freecodecamp.org&lt;/a&gt;</code>
Entonces su navegador mostrará el texto <strong>&quot;esto enlaza a freecodecamp.org&quot;</strong> como un enlace que puede hacer clic. Y ese enlace lo llevará a la dirección web <strong>https://spanish.freecodecamp.org</strong> . Entonces su navegador mostrará el texto <strong>&quot;esto enlaza a freecodecamp.org&quot;</strong> como un enlace que puede hacer clic. Y ese enlace lo llevará a la dirección web <strong>https://spanish.freecodecamp.org</strong> .
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Crear una <code>a</code> elemento que une a <code>http://freecatphotoapp.com</code> y tiene &quot;fotos del gato&quot; como su <code>anchor text</code> . Crear una <code>a</code> elemento que une a <code>http://freecatphotoapp.com</code> y tiene &quot;fotos del gato&quot; como su <code>anchor text</code> .
</section> </section>
## Tests ## Tests
@ -27,7 +27,7 @@ Crear una <code>a</code> elemento que une a <code>http://freecatphotoapp.com</co
tests: tests:
- text: Su <code>a</code> elemento debe tener el <code>anchor text</code> de fotos &quot;gato&quot;. - text: Su <code>a</code> elemento debe tener el <code>anchor text</code> de fotos &quot;gato&quot;.
testString: 'assert((/cat photos/gi).test($("a").text()), "Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".");' testString: 'assert((/cat photos/gi).test($("a").text()), "Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".");'
- text: &#39;Es necesario un <code>a</code> elemento que une a <code>http://freecatphotoapp .com</code> &#39; - text: 'Es necesario un <code>a</code> elemento que une a <code>http://freecatphotoapp .com</code> '
testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), "You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>");' testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), "You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>");'
- text: Asegúrese de que su <code>a</code> elemento tiene una etiqueta de cierre. - text: Asegúrese de que su <code>a</code> elemento tiene una etiqueta de cierre.
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure your <code>a</code> element has a closing tag.");' testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure your <code>a</code> element has a closing tag.");'

View File

@ -7,19 +7,19 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Los elementos de anclaje también se pueden usar para crear enlaces internos para saltar a diferentes secciones dentro de una página web. Los elementos de anclaje también se pueden usar para crear enlaces internos para saltar a diferentes secciones dentro de una página web.
Para crear un enlace interno, asigna el atributo <code>href</code> un enlace a un símbolo de hash <code>#</code> más el valor del atributo <code>id</code> para el elemento al que desea enlazar internamente, generalmente más abajo en la página. A continuación, deberá agregar el mismo atributo de <code>id</code> al elemento al que se está vinculando. Un <code>id</code> es un atributo que describe de forma única un elemento. Para crear un enlace interno, asigna el atributo <code>href</code> un enlace a un símbolo de hash <code>#</code> más el valor del atributo <code>id</code> para el elemento al que desea enlazar internamente, generalmente más abajo en la página. A continuación, deberá agregar el mismo atributo de <code>id</code> al elemento al que se está vinculando. Un <code>id</code> es un atributo que describe de forma única un elemento.
A continuación se muestra un ejemplo de un enlace de anclaje interno y su elemento de destino: A continuación se muestra un ejemplo de un enlace de anclaje interno y su elemento de destino:
<blockquote>&lt;a href="#contacts-header"&gt;Contacts&lt;/a&gt;<br>...<br>&lt;h2 id="contacts-header"&gt;Contacts&lt;/h2&gt;</blockquote> <blockquote>&lt;a href="#contacts-header"&gt;Contacts&lt;/a&gt;<br>...<br>&lt;h2 id="contacts-header"&gt;Contacts&lt;/h2&gt;</blockquote>
Cuando los usuarios hacen clic en el enlace de Contactos, serán llevados a la sección de la página web con el elemento del encabezado de <b>Contactos</b> . Cuando los usuarios hacen clic en el enlace de Contactos, serán llevados a la sección de la página web con el elemento del encabezado de <b>Contactos</b> .
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Cambie su enlace externo a un enlace interno cambiando el atributo <code>href</code> a &quot;# footer&quot; y el texto de &quot;fotos del gato&quot; a &quot;Saltar a la parte inferior&quot;. Cambie su enlace externo a un enlace interno cambiando el atributo <code>href</code> a &quot;# footer&quot; y el texto de &quot;fotos del gato&quot; a &quot;Saltar a la parte inferior&quot;.
Elimine el atributo <code>target=&quot;_blank&quot;</code> de la etiqueta de anclaje ya que esto hace que el documento vinculado se abra en una nueva pestaña de ventana. Elimine el atributo <code>target=&quot;_blank&quot;</code> de la etiqueta de anclaje ya que esto hace que el documento vinculado se abra en una nueva pestaña de ventana.
Luego agregue un atributo <code>id</code> con un valor de &quot;pie de página&quot; al elemento <code>&lt;footer&gt;</code> en la parte inferior de la página. Luego agregue un atributo <code>id</code> con un valor de &quot;pie de página&quot; al elemento <code>&lt;footer&gt;</code> en la parte inferior de la página.
</section> </section>
## Tests ## Tests
@ -35,9 +35,9 @@ tests:
testString: 'assert($("a").eq(0).attr("href") == "#footer", "The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".");' testString: 'assert($("a").eq(0).attr("href") == "#footer", "The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".");'
- text: La etiqueta <code class = "notranslate"> a </code> no debe tener el atributo <code class = "notranslate"> target </code> - text: La etiqueta <code class = "notranslate"> a </code> no debe tener el atributo <code class = "notranslate"> target </code>
testString: 'assert(typeof $("a").eq(0).attr("target") == typeof undefined || $("a").eq(0).attr("target") == true, "The <code>a</code> tag should not have a <code>target</code> attribute");' testString: 'assert(typeof $("a").eq(0).attr("target") == typeof undefined || $("a").eq(0).attr("target") == true, "The <code>a</code> tag should not have a <code>target</code> attribute");'
- text: El <code class = "notranslate"> un texto </code> debe ser "Jump to Bottom". - text: El <code class = "notranslate"> un texto </code> debe ser "Jump to Bottom."
testString: 'assert($("a").eq(0).text().match(/Jump to Bottom/gi), "The <code>a</code> text should be "Jump to Bottom".");' testString: 'assert($("a").eq(0).text().match(/Jump to Bottom/gi), "The <code>a</code> text should be "Jump to Bottom".");'
- text: La etiqueta <code class = "notranslate"> footer </code> debe tener un atributo <code class = "notranslate"> id </code> establecido en "footer". - text: La etiqueta <code class = "notranslate"> footer </code> debe tener un atributo <code class = "notranslate"> id </code> establecido en "footer."
testString: 'assert($("footer").eq(0).attr("id") == "footer", "The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".");' testString: 'assert($("footer").eq(0).attr("id") == "footer", "The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".");'
``` ```

View File

@ -7,15 +7,15 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
veces que desea agregar <code>a</code> los elementos a su sitio web antes de saber donde van a unir. veces que desea agregar <code>a</code> los elementos a su sitio web antes de saber donde van a unir.
Esto también es útil cuando está cambiando el comportamiento de un enlace usando <code>JavaScript</code> , que conoceremos más adelante. Esto también es útil cuando está cambiando el comportamiento de un enlace usando <code>JavaScript</code> , que conoceremos más adelante.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
El valor actual del atributo <code>href</code> es un enlace que apunta a &quot;http://freecatphotoapp.com&quot;. Reemplace el valor del atributo <code>href</code> con un <code>#</code> , también conocido como símbolo de hash, para crear un enlace muerto. El valor actual del atributo <code>href</code> es un enlace que apunta a &quot;http://freecatphotoapp.com&quot;. Reemplace el valor del atributo <code>href</code> con un <code>#</code> , también conocido como símbolo de hash, para crear un enlace muerto.
Por ejemplo: <code>href=&quot;#&quot;</code> Por ejemplo: <code>href=&quot;#&quot;</code>
</section> </section>
## Tests ## Tests
@ -23,7 +23,7 @@ Por ejemplo: <code>href=&quot;#&quot;</code>
```yml ```yml
tests: tests:
- text: &#39;Su <code>a</code> elemento debe ser un vínculo roto con el valor de la <code>href</code> atributo establecido en &#39;#&#39;.&#39; - text: 'Su <code>a</code> elemento debe ser un vínculo roto con el valor de la <code>href</code> atributo establecido en &#39;#&#39;.'
testString: 'assert($("a").attr("href") === "#", "Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".");' testString: 'assert($("a").attr("href") === "#", "Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".");'
``` ```

View File

@ -7,21 +7,21 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Puede anidar enlaces dentro de otros elementos de texto. Puede anidar enlaces dentro de otros elementos de texto.
<blockquote>&#60;p&#62;<br> Here's a &#60;a target="_blank" href="http://freecodecamp.org"&#62; link to freecodecamp.org&#60;/a&#62; for you to follow.<br>&#60;/p&#62;</blockquote> <blockquote>&#60;p&#62;<br> Here's a &#60;a target="_blank" href="http://freecodecamp.org"&#62; link to freecodecamp.org&#60;/a&#62; for you to follow.<br>&#60;/p&#62;</blockquote>
Desglosemos el ejemplo: Desglosemos el ejemplo:
El texto normal se ajusta en el elemento <code>p</code> : <br> <code>&lt;p&gt; Here&#39;s a ... for you to follow. &lt;/p&gt;</code> El texto normal se ajusta en el elemento <code>p</code> : <br> <code>&lt;p&gt; Here&#39;s a ... for you to follow. &lt;/p&gt;</code>
siguiente es el elemento de <code>anchor</code> <code>&lt;a&gt;</code> (que requiere una etiqueta de cierre <code>&lt;/a&gt;</code> ): <br> <code>&lt;a&gt; ... &lt;/a&gt;</code> siguiente es el elemento de <code>anchor</code> <code>&lt;a&gt;</code> (que requiere una etiqueta de cierre <code>&lt;/a&gt;</code> ): <br> <code>&lt;a&gt; ... &lt;/a&gt;</code>
<code>target</code> es un atributo de etiqueta de anclaje que especifica dónde abrir el enlace y el valor <code>&quot;_blank&quot;</code> especifica que se abra el enlace en una nueva pestaña <code>target</code> es un atributo de etiqueta de anclaje que especifica dónde abrir el enlace y el valor <code>&quot;_blank&quot;</code> especifica que se abra el enlace en una nueva pestaña
<code>href</code> es un atributo de etiqueta de anclaje que contiene la URL Dirección del enlace: <br> <code>&lt;a href=&quot;http://freecodecamp.org&quot;&gt; ... &lt;/a&gt;</code> <code>href</code> es un atributo de etiqueta de anclaje que contiene la URL Dirección del enlace: <br> <code>&lt;a href=&quot;http://freecodecamp.org&quot;&gt; ... &lt;/a&gt;</code>
El texto, <strong>&quot;link to freecodecamp.org&quot;</strong> , dentro del elemento de <code>anchor text</code> llamado <code>anchor text</code> , mostrará un enlace para hacer clic: <br> <code>&lt;a href=&quot; ... &quot;&gt;link to freecodecamp.org&lt;/a&gt;</code> El texto, <strong>&quot;link to freecodecamp.org&quot;</strong> , dentro del elemento de <code>anchor text</code> llamado <code>anchor text</code> , mostrará un enlace para hacer clic: <br> <code>&lt;a href=&quot; ... &quot;&gt;link to freecodecamp.org&lt;/a&gt;</code>
La salida final del ejemplo se verá así: <br><p> Aquí hay un <a target="_blank" href="http://freecodecamp.org">enlace a freecodecamp.org</a> para que lo sigas. </p> La salida final del ejemplo se verá así: <br><p> Aquí hay un <a target="_blank" href="http://freecodecamp.org">enlace a freecodecamp.org</a> para que lo sigas. </p>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Ahora nido de su actual <code>a</code> elemento dentro de un nuevo <code>p</code> elemento (justo a continuación de la <code>main</code> elemento). El nuevo párrafo debe tener un texto que diga &quot;Ver más fotos de gatos&quot;, donde &quot;fotos de gatos&quot; es un enlace, y el resto del texto es texto sin formato. Ahora nido de su actual <code>a</code> elemento dentro de un nuevo <code>p</code> elemento (justo a continuación de la <code>main</code> elemento). El nuevo párrafo debe tener un texto que diga &quot;Ver más fotos de gatos&quot;, donde &quot;fotos de gatos&quot; es un enlace, y el resto del texto es texto sin formato.
</section> </section>
## Tests ## Tests
@ -29,7 +29,7 @@ Ahora nido de su actual <code>a</code> elemento dentro de un nuevo <code>p</code
```yml ```yml
tests: tests:
- text: &#39;Es necesario un <code>a</code> elemento que une a &#39;http://freecatphotoapp.com&#39;.&#39; - text: 'Es necesario un <code>a</code> elemento que une a &#39;http://freecatphotoapp.com&#39;.'
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0), "You need an <code>a</code> element that links to "http://freecatphotoapp.com".");' testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0), "You need an <code>a</code> element that links to "http://freecatphotoapp.com".");'
- text: Su <code>a</code> elemento debe tener el texto de anclaje de fotos &quot;gato&quot; - text: Su <code>a</code> elemento debe tener el texto de anclaje de fotos &quot;gato&quot;
testString: 'assert($("a").text().match(/cat\sphotos/gi), "Your <code>a</code> element should have the anchor text of "cat photos"");' testString: 'assert($("a").text().match(/cat\sphotos/gi), "Your <code>a</code> element should have the anchor text of "cat photos"");'

View File

@ -7,17 +7,17 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Se puede hacer elementos en enlaces anidando dentro de un <code>a</code> elemento. Se puede hacer elementos en enlaces anidando dentro de un <code>a</code> elemento.
Nido de su imagen dentro de un <code>a</code> elemento. Aquí hay un ejemplo: Nido de su imagen dentro de un <code>a</code> elemento. Aquí hay un ejemplo:
<code>&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://bit.ly/fcc-running-cats&quot; alt=&quot;Three kittens running towards the camera.&quot;&gt;&lt;/a&gt;</code> <code>&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://bit.ly/fcc-running-cats&quot; alt=&quot;Three kittens running towards the camera.&quot;&gt;&lt;/a&gt;</code>
Recuerda usar <code>#</code> como la propiedad <code>href</code> <code>a</code> elemento para convertirlo en un enlace muerto. Recuerda usar <code>#</code> como la propiedad <code>href</code> <code>a</code> elemento para convertirlo en un enlace muerto.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Coloque el elemento de imagen existente dentro de un elemento de anclaje. Coloque el elemento de imagen existente dentro de un elemento de anclaje.
Una vez que hayas hecho esto, desplázate sobre tu imagen con el cursor. El puntero normal de su cursor debe convertirse en el enlace que hace clic en el puntero. La foto es ahora un enlace. Una vez que hayas hecho esto, desplázate sobre tu imagen con el cursor. El puntero normal de su cursor debe convertirse en el enlace que hace clic en el puntero. La foto es ahora un enlace.
</section> </section>
## Tests ## Tests
@ -27,7 +27,7 @@ Una vez que hayas hecho esto, desplázate sobre tu imagen con el cursor. El punt
tests: tests:
- text: Nido el vigente <code>img</code> elemento dentro de un <code>a</code> elemento. - text: Nido el vigente <code>img</code> elemento dentro de un <code>a</code> elemento.
testString: 'assert($("a").children("img").length > 0, "Nest the existing <code>img</code> element within an <code>a</code> element.");' testString: 'assert($("a").children("img").length > 0, "Nest the existing <code>img</code> element within an <code>a</code> element.");'
- text: &#39;Su <code>a</code> elemento debe ser un vínculo roto con un <code>href</code> atributo establecido en <code>#</code> .&#39; - text: 'Su <code>a</code> elemento debe ser un vínculo roto con un <code>href</code> atributo establecido en <code>#</code> .'
testString: 'assert(new RegExp("#").test($("a").children("img").parent().attr("href")), "Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.");' testString: 'assert(new RegExp("#").test($("a").children("img").parent().attr("href")), "Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.");'
- text: Asegúrese de que cada uno de sus <code>a</code> elementos tiene una etiqueta de cierre. - text: Asegúrese de que cada uno de sus <code>a</code> elementos tiene una etiqueta de cierre.
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");' testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'

View File

@ -7,15 +7,15 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
comentarios son una forma en la que puede dejar comentarios para otros desarrolladores dentro de su código sin afectar el resultado resultante que se muestra al usuario final. comentarios son una forma en la que puede dejar comentarios para otros desarrolladores dentro de su código sin afectar el resultado resultante que se muestra al usuario final.
comentarios también son una forma conveniente de desactivar el código sin tener que eliminarlo por completo. comentarios también son una forma conveniente de desactivar el código sin tener que eliminarlo por completo.
comentarios en HTML comienzan con <code>&lt;!--</code> , y terminan con un <code>--&gt;</code> comentarios en HTML comienzan con <code>&lt;!--</code> , y terminan con un <code>--&gt;</code>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Descomenta tus elementos <code>h1</code> , <code>h2</code> <code>p</code> . Descomenta tus elementos <code>h1</code> , <code>h2</code> <code>p</code> .
</section> </section>
## Tests ## Tests
@ -29,7 +29,7 @@ tests:
testString: 'assert($("h2").length > 0, "Make your <code>h2</code> element visible on your page by uncommenting it.");' testString: 'assert($("h2").length > 0, "Make your <code>h2</code> element visible on your page by uncommenting it.");'
- text: Haz que tu elemento <code>p</code> visible en tu página descomprimiéndolo. - text: Haz que tu elemento <code>p</code> visible en tu página descomprimiéndolo.
testString: 'assert($("p").length > 0, "Make your <code>p</code> element visible on your page by uncommenting it.");' testString: 'assert($("p").length > 0, "Make your <code>p</code> element visible on your page by uncommenting it.");'
- text: &#39;Asegúrese de eliminar todas las etiquetas de comentarios finales, es decir, <code>--&gt;</code> .&#39; - text: 'Asegúrese de eliminar todas las etiquetas de comentarios finales, es decir, <code>--&gt;</code> .'
testString: 'assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,"")), "Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>.");' testString: 'assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,"")), "Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>.");'
``` ```

View File

@ -7,18 +7,18 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
La propiedad <code>align-items</code> es similar a <code>justify-content</code> . Recuerde que la propiedad justify <code>justify-content</code> alineaba elementos flexibles a lo largo del eje principal. Para las filas, el eje principal es una línea horizontal y para las columnas es una línea vertical. La propiedad <code>align-items</code> es similar a <code>justify-content</code> . Recuerde que la propiedad justify <code>justify-content</code> alineaba elementos flexibles a lo largo del eje principal. Para las filas, el eje principal es una línea horizontal y para las columnas es una línea vertical.
Los contenedores Flex también tienen un <strong>eje transversal</strong> que es el opuesto al eje principal. Para las filas, el eje transversal es vertical y para las columnas, el eje transversal es horizontal. Los contenedores Flex también tienen un <strong>eje transversal</strong> que es el opuesto al eje principal. Para las filas, el eje transversal es vertical y para las columnas, el eje transversal es horizontal.
CSS ofrece la propiedad <code>align-items</code> para alinear elementos flexibles a lo largo del eje transversal. Para una fila, le dice a CSS cómo empujar los elementos en toda la fila hacia arriba o hacia abajo dentro del contenedor. Y para una columna, cómo empujar todos los elementos a la izquierda o derecha dentro del contenedor. CSS ofrece la propiedad <code>align-items</code> para alinear elementos flexibles a lo largo del eje transversal. Para una fila, le dice a CSS cómo empujar los elementos en toda la fila hacia arriba o hacia abajo dentro del contenedor. Y para una columna, cómo empujar todos los elementos a la izquierda o derecha dentro del contenedor.
Los diferentes valores disponibles para <code>align-items</code> de <code>align-items</code> incluyen: Los diferentes valores disponibles para <code>align-items</code> de <code>align-items</code> incluyen:
<ul><li> <code>flex-start</code> : alinea los elementos con el inicio del contenedor flexible. Para las filas, esto alinea los elementos con la parte superior del contenedor. Para las columnas, esto alinea los elementos a la izquierda del contenedor. </li><li> <code>flex-end</code> : alinea los elementos con el extremo del contenedor flexible. Para las filas, esto alinea los elementos con la parte inferior del contenedor. Para las columnas, esto alinea los elementos a la derecha del contenedor. </li><li> <code>center</code> : alinea los elementos al centro. Para las filas, esto alinea los elementos verticalmente (espacio igual por encima y por debajo de los elementos). Para las columnas, esto los alinea horizontalmente (espacio igual a la izquierda y derecha de los elementos). </li><li> <code>stretch</code> : estirar los elementos para llenar el contenedor flexible. Por ejemplo, los elementos de las filas se estiran para llenar el contenedor flexible de arriba a abajo. </li><li> <code>baseline</code> : alinear los elementos a sus líneas de base. La línea de base es un concepto de texto, piénselo como la línea en la que se encuentran las letras. </li></ul> <ul><li> <code>flex-start</code> : alinea los elementos con el inicio del contenedor flexible. Para las filas, esto alinea los elementos con la parte superior del contenedor. Para las columnas, esto alinea los elementos a la izquierda del contenedor. </li><li> <code>flex-end</code> : alinea los elementos con el extremo del contenedor flexible. Para las filas, esto alinea los elementos con la parte inferior del contenedor. Para las columnas, esto alinea los elementos a la derecha del contenedor. </li><li> <code>center</code> : alinea los elementos al centro. Para las filas, esto alinea los elementos verticalmente (espacio igual por encima y por debajo de los elementos). Para las columnas, esto los alinea horizontalmente (espacio igual a la izquierda y derecha de los elementos). </li><li> <code>stretch</code> : estirar los elementos para llenar el contenedor flexible. Por ejemplo, los elementos de las filas se estiran para llenar el contenedor flexible de arriba a abajo. </li><li> <code>baseline</code> : alinear los elementos a sus líneas de base. La línea de base es un concepto de texto, piénselo como la línea en la que se encuentran las letras. </li></ul>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Un ejemplo ayuda a mostrar esta propiedad en acción. Agregue la propiedad CSS <code>align-items</code> al <code>align-items</code> <code>#box-container</code> y asígnele un valor de center. Un ejemplo ayuda a mostrar esta propiedad en acción. Agregue la propiedad CSS <code>align-items</code> al <code>align-items</code> <code>#box-container</code> y asígnele un valor de center.
<strong>Bonus</strong> <br> Pruebe las otras opciones para la propiedad <code>align-items</code> en el editor de código para ver sus diferencias. Pero tenga en cuenta que un valor de centro es el único que pasará este desafío. <strong>Bonus</strong> <br> Pruebe las otras opciones para la propiedad <code>align-items</code> en el editor de código para ver sus diferencias. Pero tenga en cuenta que un valor de centro es el único que pasará este desafío.
</section> </section>
## Tests ## Tests
@ -26,7 +26,7 @@ Un ejemplo ayuda a mostrar esta propiedad en acción. Agregue la propiedad CSS <
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#box-container</code> debería tener una propiedad <code>align-items</code> establecida en un valor de center.&#39; - text: 'El elemento <code>#box-container</code> debería tener una propiedad <code>align-items</code> establecida en un valor de center.'
testString: 'assert($("#box-container").css("align-items") == "center", "The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.");' testString: 'assert($("#box-container").css("align-items") == "center", "The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.");'
``` ```

View File

@ -7,18 +7,18 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
A veces, los elementos flexibles dentro de un contenedor flexible no llenan todo el espacio en el contenedor. Es común querer decirle a CSS cómo alinear y espaciar los elementos flexibles de una determinada manera. Afortunadamente, la propiedad <code>justify-content</code> tiene varias opciones para hacer esto. Pero primero, hay una terminología importante que entender antes de revisar esas opciones. A veces, los elementos flexibles dentro de un contenedor flexible no llenan todo el espacio en el contenedor. Es común querer decirle a CSS cómo alinear y espaciar los elementos flexibles de una determinada manera. Afortunadamente, la propiedad <code>justify-content</code> tiene varias opciones para hacer esto. Pero primero, hay una terminología importante que entender antes de revisar esas opciones.
<a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">Aquí hay una imagen útil que muestra una fila para ilustrar los conceptos a continuación.</a> <a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">Aquí hay una imagen útil que muestra una fila para ilustrar los conceptos a continuación.</a>
Recuerde que la configuración de un contenedor flexible como una fila coloca los elementos flexibles uno al lado del otro de izquierda a derecha. Un contenedor flexible configurado como una columna coloca los elementos flexibles en una pila vertical de arriba a abajo. Para cada uno, la dirección en la que se disponen los elementos flexibles se denomina <strong>eje principal</strong> . Para una fila, esta es una línea horizontal que corta cada elemento. Y para una columna, el eje principal es una línea vertical a través de los elementos. Recuerde que la configuración de un contenedor flexible como una fila coloca los elementos flexibles uno al lado del otro de izquierda a derecha. Un contenedor flexible configurado como una columna coloca los elementos flexibles en una pila vertical de arriba a abajo. Para cada uno, la dirección en la que se disponen los elementos flexibles se denomina <strong>eje principal</strong> . Para una fila, esta es una línea horizontal que corta cada elemento. Y para una columna, el eje principal es una línea vertical a través de los elementos.
Hay varias opciones sobre cómo espaciar los elementos flexibles a lo largo de la línea que es el eje principal. Uno de los más utilizados es <code>justify-content: center;</code> , que alinea todos los elementos flexibles con el centro dentro del contenedor flexible. Otras opciones incluyen: Hay varias opciones sobre cómo espaciar los elementos flexibles a lo largo de la línea que es el eje principal. Uno de los más utilizados es <code>justify-content: center;</code> , que alinea todos los elementos flexibles con el centro dentro del contenedor flexible. Otras opciones incluyen:
<ul><li> <code>flex-start</code> : alinea los elementos con el inicio del contenedor flexible. Para una fila, esto empuja los artículos a la izquierda del contenedor. Para una columna, esto empuja los elementos a la parte superior del contenedor. </li><li> <code>flex-end</code> : alinea los elementos con el extremo del contenedor flexible. Para una fila, esto empuja los artículos a la derecha del contenedor. Para una columna, esto empuja los artículos a la parte inferior del contenedor. </li><li> <code>space-between</code> : alinea elementos al centro del eje principal, con espacio adicional colocado entre los elementos. Los primeros y últimos elementos se empujan hasta el borde del contenedor flexible. Por ejemplo, en una fila, el primer elemento está contra el lado izquierdo del contenedor, el último elemento está contra el lado derecho del contenedor, luego los otros elementos entre ellos están espaciados uniformemente. </li><li> <code>space-around</code> : similar al <code>space-between</code> pero los elementos primero y último no están bloqueados en los bordes del contenedor, el espacio se distribuye alrededor de todos los elementos </li></ul> <ul><li> <code>flex-start</code> : alinea los elementos con el inicio del contenedor flexible. Para una fila, esto empuja los artículos a la izquierda del contenedor. Para una columna, esto empuja los elementos a la parte superior del contenedor. </li><li> <code>flex-end</code> : alinea los elementos con el extremo del contenedor flexible. Para una fila, esto empuja los artículos a la derecha del contenedor. Para una columna, esto empuja los artículos a la parte inferior del contenedor. </li><li> <code>space-between</code> : alinea elementos al centro del eje principal, con espacio adicional colocado entre los elementos. Los primeros y últimos elementos se empujan hasta el borde del contenedor flexible. Por ejemplo, en una fila, el primer elemento está contra el lado izquierdo del contenedor, el último elemento está contra el lado derecho del contenedor, luego los otros elementos entre ellos están espaciados uniformemente. </li><li> <code>space-around</code> : similar al <code>space-between</code> pero los elementos primero y último no están bloqueados en los bordes del contenedor, el espacio se distribuye alrededor de todos los elementos </li></ul>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Un ejemplo ayuda a mostrar esta propiedad en acción. Agregue la propiedad CSS <code>justify-content</code> al elemento <code>#box-container</code> y asígnele un valor de center. Un ejemplo ayuda a mostrar esta propiedad en acción. Agregue la propiedad CSS <code>justify-content</code> al elemento <code>#box-container</code> y asígnele un valor de center.
<strong>Bonus</strong> <br> Pruebe las otras opciones para la propiedad <code>justify-content</code> en el editor de código para ver sus diferencias. Pero tenga en cuenta que un valor de centro es el único que pasará este desafío. <strong>Bonus</strong> <br> Pruebe las otras opciones para la propiedad <code>justify-content</code> en el editor de código para ver sus diferencias. Pero tenga en cuenta que un valor de centro es el único que pasará este desafío.
</section> </section>
## Tests ## Tests
@ -26,7 +26,7 @@ Un ejemplo ayuda a mostrar esta propiedad en acción. Agregue la propiedad CSS <
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#box-container</code> debería tener una propiedad <code>justify-content</code> establecida en un valor de center&#39;. - text: 'El elemento <code>#box-container</code> debería tener una propiedad <code>justify-content</code> establecida en un valor de center'
testString: 'assert($("#box-container").css("justify-content") == "center", "The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.");' testString: 'assert($("#box-container").css("justify-content") == "center", "The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.");'
``` ```

View File

@ -7,14 +7,14 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Esta sección utiliza estilos de desafío alternativos para mostrar cómo usar CSS para posicionar elementos de una manera flexible. Primero, un desafío explicará la teoría, luego un desafío práctico utilizando un componente de tweet simple aplicará el concepto flexbox. Esta sección utiliza estilos de desafío alternativos para mostrar cómo usar CSS para posicionar elementos de una manera flexible. Primero, un desafío explicará la teoría, luego un desafío práctico utilizando un componente de tweet simple aplicará el concepto flexbox.
Colocación de la <code>display: flex;</code> propiedades CSS <code>display: flex;</code> en un elemento le permite usar otras propiedades de flexión para construir una página receptiva. Colocación de la <code>display: flex;</code> propiedades CSS <code>display: flex;</code> en un elemento le permite usar otras propiedades de flexión para construir una página receptiva.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Agregue la <code>display</code> propiedades CSS a <code>#box-container</code> y establezca su valor en flex. Agregue la <code>display</code> propiedades CSS a <code>#box-container</code> y establezca su valor en flex.
</section> </section>
## Tests ## Tests
@ -22,7 +22,7 @@ Agregue la <code>display</code> propiedades CSS a <code>#box-container</code> y
```yml ```yml
tests: tests:
- text: &#39; <code>#box-container</code> debería tener la propiedad de <code>display</code> establecida en un valor de flex&#39;. - text: ' <code>#box-container</code> debería tener la propiedad de <code>display</code> establecida en un valor de flex'
testString: 'assert($("#box-container").css("display") == "flex", "<code>#box-container</code> should have the <code>display</code> property set to a value of flex.");' testString: 'assert($("#box-container").css("display") == "flex", "<code>#box-container</code> should have the <code>display</code> property set to a value of flex.");'
``` ```

View File

@ -7,14 +7,14 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
La propiedad final para elementos flexibles es <code>align-self</code> . Esta propiedad le permite ajustar la alineación de cada elemento individualmente, en lugar de configurarlos todos a la vez. Esto es útil ya que otras técnicas de ajuste comunes que utilizan las propiedades CSS <code>float</code> , <code>clear</code> y <code>vertical-align</code> no funcionan en elementos flexibles. La propiedad final para elementos flexibles es <code>align-self</code> . Esta propiedad le permite ajustar la alineación de cada elemento individualmente, en lugar de configurarlos todos a la vez. Esto es útil ya que otras técnicas de ajuste comunes que utilizan las propiedades CSS <code>float</code> , <code>clear</code> y <code>vertical-align</code> no funcionan en elementos flexibles.
<code>align-self</code> acepta los mismos valores que <code>align-items</code> y anulará cualquier valor establecido por la propiedad <code>align-items</code> . <code>align-self</code> acepta los mismos valores que <code>align-items</code> y anulará cualquier valor establecido por la propiedad <code>align-items</code> .
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Agregue la propiedad CSS <code>align-self</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de centro y a <code>#box-2</code> un valor de flex-end. Agregue la propiedad CSS <code>align-self</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de centro y a <code>#box-2</code> un valor de flex-end.
</section> </section>
## Tests ## Tests
@ -22,9 +22,9 @@ Agregue la propiedad CSS <code>align-self</code> a <code>#box-1</code> y <code>#
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#box-1</code> debe tener la propiedad <code>align-self</code> establecida en un valor de center.&#39; - text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>align-self</code> establecida en un valor de center.'
testString: 'assert($("#box-1").css("align-self") == "center", "The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.");' testString: 'assert($("#box-1").css("align-self") == "center", "The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.");'
- text: &#39;El elemento <code>#box-2</code> debe tener la propiedad <code>align-self</code> establecida en un valor de flex-end.&#39; - text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>align-self</code> establecida en un valor de flex-end.'
testString: 'assert($("#box-2").css("align-self") == "flex-end", "The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.");' testString: 'assert($("#box-2").css("align-self") == "flex-end", "The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.");'
``` ```

View File

@ -7,14 +7,14 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
La propiedad de <code>flex-basis</code> especifica el tamaño inicial del elemento antes de que CSS realice ajustes con <code>flex-shrink</code> o <code>flex-grow</code> . La propiedad de <code>flex-basis</code> especifica el tamaño inicial del elemento antes de que CSS realice ajustes con <code>flex-shrink</code> o <code>flex-grow</code> .
Las unidades utilizadas por la propiedad de <code>flex-basis</code> son las mismas que otras propiedades de tamaño ( <code>px</code> , <code>em</code> , <code>%</code> , etc.). El valor <code>auto</code> dimensiona los elementos en función del contenido. Las unidades utilizadas por la propiedad de <code>flex-basis</code> son las mismas que otras propiedades de tamaño ( <code>px</code> , <code>em</code> , <code>%</code> , etc.). El valor <code>auto</code> dimensiona los elementos en función del contenido.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Establezca el tamaño inicial de las cajas utilizando <code>flex-basis</code> . Agregue la propiedad CSS <code>flex-basis</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de <code>10em</code> y <code>#box-2</code> un valor de <code>20em</code> . Establezca el tamaño inicial de las cajas utilizando <code>flex-basis</code> . Agregue la propiedad CSS <code>flex-basis</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de <code>10em</code> y <code>#box-2</code> un valor de <code>20em</code> .
</section> </section>
## Tests ## Tests
@ -22,13 +22,13 @@ Establezca el tamaño inicial de las cajas utilizando <code>flex-basis</code> .
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#box-1</code> debería tener una propiedad de <code>flex-basis</code> .&#39; - text: 'El elemento <code>#box-1</code> debería tener una propiedad de <code>flex-basis</code> .'
testString: 'assert($("#box-1").css("flex-basis") != "auto", "The <code>#box-1</code> element should have a <code>flex-basis</code> property.");' testString: 'assert($("#box-1").css("flex-basis") != "auto", "The <code>#box-1</code> element should have a <code>flex-basis</code> property.");'
- text: &#39;El elemento <code>#box-1</code> debe tener un valor de <code>flex-basis</code> de <code>10em</code> &#39;. - text: 'El elemento <code>#box-1</code> debe tener un valor de <code>flex-basis</code> de <code>10em</code> '
testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), "The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.");' testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), "The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.");'
- text: &#39;El elemento <code>#box-2</code> debería tener la propiedad de <code>flex-basis</code> .&#39; - text: 'El elemento <code>#box-2</code> debería tener la propiedad de <code>flex-basis</code> .'
testString: 'assert($("#box-2").css("flex-basis") != "auto", "The <code>#box-2</code> element should have the <code>flex-basis</code> property.");' testString: 'assert($("#box-2").css("flex-basis") != "auto", "The <code>#box-2</code> element should have the <code>flex-basis</code> property.");'
- text: &#39;El elemento <code>#box-2</code> debe tener un valor de <code>flex-basis</code> de <code>20em</code> &#39;. - text: 'El elemento <code>#box-2</code> debe tener un valor de <code>flex-basis</code> de <code>20em</code> '
testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), "The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.");' testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), "The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.");'
``` ```

View File

@ -7,13 +7,13 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Los dos últimos desafíos utilizaron la propiedad de <code>flex-direction</code> establecida en fila. Esta propiedad también puede crear una columna apilando verticalmente los hijos de un contenedor flexible. Los dos últimos desafíos utilizaron la propiedad de <code>flex-direction</code> establecida en fila. Esta propiedad también puede crear una columna apilando verticalmente los hijos de un contenedor flexible.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>#box-container</code> y asígnele un valor de columna. Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>#box-container</code> y asígnele un valor de columna.
</section> </section>
## Tests ## Tests
@ -21,7 +21,7 @@ Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>#box-cont
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#box-container</code> debería tener una propiedad de <code>flex-direction</code> configurada en columna.&#39; - text: 'El elemento <code>#box-container</code> debería tener una propiedad de <code>flex-direction</code> configurada en columna.'
testString: 'assert($("#box-container").css("flex-direction") == "column", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.");' testString: 'assert($("#box-container").css("flex-direction") == "column", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.");'
``` ```

View File

@ -7,15 +7,15 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Agregar <code>display: flex</code> a un elemento lo convierte en un contenedor flexible. Esto hace posible alinear cualquier elemento secundario de ese elemento en filas o columnas. Para ello, agregue la propiedad de <code>flex-direction</code> al elemento principal y configúrelo en fila o columna. La creación de una fila alineará a los hijos horizontalmente, y la creación de una columna alineará a los hijos verticalmente. Agregar <code>display: flex</code> a un elemento lo convierte en un contenedor flexible. Esto hace posible alinear cualquier elemento secundario de ese elemento en filas o columnas. Para ello, agregue la propiedad de <code>flex-direction</code> al elemento principal y configúrelo en fila o columna. La creación de una fila alineará a los hijos horizontalmente, y la creación de una columna alineará a los hijos verticalmente.
Otras opciones para <code>flex-direction</code> son la fila-reversa y la columna-reversa. Otras opciones para <code>flex-direction</code> son la fila-reversa y la columna-reversa.
<strong>Nota</strong> <br> El valor predeterminado para la propiedad de <code>flex-direction</code> es fila. <strong>Nota</strong> <br> El valor predeterminado para la propiedad de <code>flex-direction</code> es fila.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>#box-container</code> y asígnele un valor de fila-reversa. Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>#box-container</code> y asígnele un valor de fila-reversa.
</section> </section>
## Tests ## Tests
@ -23,7 +23,7 @@ Agregue la propiedad CSS <code>flex-direction</code> al elemento <code>#box-cont
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#box-container</code> debería tener una propiedad de <code>flex-direction</code> configurada para invertir la fila.&#39; - text: 'El elemento <code>#box-container</code> debería tener una propiedad de <code>flex-direction</code> configurada para invertir la fila.'
testString: 'assert($("#box-container").css("flex-direction") == "row-reverse", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.");' testString: 'assert($("#box-container").css("flex-direction") == "row-reverse", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.");'
``` ```

View File

@ -7,14 +7,14 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Lo opuesto a <code>flex-shrink</code> es la propiedad de <code>flex-grow</code> . Recuerde que <code>flex-shrink</code> controla el tamaño de los elementos cuando el contenedor se reduce. La propiedad <code>flex-grow</code> controla el tamaño de los elementos cuando el contenedor principal se expande. Lo opuesto a <code>flex-shrink</code> es la propiedad de <code>flex-grow</code> . Recuerde que <code>flex-shrink</code> controla el tamaño de los elementos cuando el contenedor se reduce. La propiedad <code>flex-grow</code> controla el tamaño de los elementos cuando el contenedor principal se expande.
Usando un ejemplo similar del último desafío, si un elemento tiene un valor de <code>flex-grow</code> de 1 y el otro tiene un valor de <code>flex-grow</code> de 3, el valor de 3 crecerá tres veces más que el otro. Usando un ejemplo similar del último desafío, si un elemento tiene un valor de <code>flex-grow</code> de 1 y el otro tiene un valor de <code>flex-grow</code> de 3, el valor de 3 crecerá tres veces más que el otro.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Agregue la propiedad CSS <code>flex-grow</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de 1 y <code>#box-2</code> un valor de 2. Agregue la propiedad CSS <code>flex-grow</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de 1 y <code>#box-2</code> un valor de 2.
</section> </section>
## Tests ## Tests
@ -22,9 +22,9 @@ Agregue la propiedad CSS <code>flex-grow</code> a <code>#box-1</code> y <code>#b
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#box-1</code> debe tener la propiedad <code>flex-grow</code> establecida en un valor de 1.&#39; - text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>flex-grow</code> establecida en un valor de 1.'
testString: 'assert($("#box-1").css("flex-grow") == "1", "The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.");' testString: 'assert($("#box-1").css("flex-grow") == "1", "The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.");'
- text: &#39;El elemento <code>#box-2</code> debe tener la propiedad <code>flex-grow</code> establecida en un valor de 2.&#39; - text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>flex-grow</code> establecida en un valor de 2.'
testString: 'assert($("#box-2").css("flex-grow") == "2", "The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.");' testString: 'assert($("#box-2").css("flex-grow") == "2", "The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.");'
``` ```

View File

@ -7,16 +7,16 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Hay un acceso directo disponible para configurar varias propiedades de flexión a la vez. Las propiedades <code>flex-grow</code> , <code>flex-shrink</code> y <code>flex-basis</code> pueden establecerse mediante el uso de la propiedad <code>flex</code> . Hay un acceso directo disponible para configurar varias propiedades de flexión a la vez. Las propiedades <code>flex-grow</code> , <code>flex-shrink</code> y <code>flex-basis</code> pueden establecerse mediante el uso de la propiedad <code>flex</code> .
Por ejemplo, <code>flex: 1 0 10px;</code> establecerá el elemento para <code>flex-grow: 1;</code> , <code>flex-shrink: 0;</code> , y <code>flex-basis: 10px;</code> . Por ejemplo, <code>flex: 1 0 10px;</code> establecerá el elemento para <code>flex-grow: 1;</code> , <code>flex-shrink: 0;</code> , y <code>flex-basis: 10px;</code> .
La configuración predeterminada de las propiedades es <code>flex: 0 1 auto;</code> . La configuración predeterminada de las propiedades es <code>flex: 0 1 auto;</code> .
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Agregue la propiedad CSS <code>flex</code> tanto a <code>#box-1</code> como <code>#box-2</code> . Dé a <code>#box-1</code> los valores para que su <code>flex-grow</code> sea 2, <code>flex-shrink</code> sea 2, y su <code>flex-basis</code> sea 150px. Dé a <code>#box-2</code> los valores para que su <code>flex-grow</code> sea 1, <code>flex-shrink</code> sea 1, y su <code>flex-basis</code> sea 150px. Agregue la propiedad CSS <code>flex</code> tanto a <code>#box-1</code> como <code>#box-2</code> . Dé a <code>#box-1</code> los valores para que su <code>flex-grow</code> sea 2, <code>flex-shrink</code> sea 2, y su <code>flex-basis</code> sea 150px. Dé a <code>#box-2</code> los valores para que su <code>flex-grow</code> sea 1, <code>flex-shrink</code> sea 1, y su <code>flex-basis</code> sea 150px.
Estos valores harán que <code>#box-1</code> crezca para llenar el espacio adicional al doble de la tasa de <code>#box-2</code> cuando el contenedor es mayor que 300px y se contraerá al doble de la tasa de <code>#box-2</code> cuando el contenedor sea menor de 300px . 300px es el tamaño combinado de los valores de <code>flex-basis</code> de las dos cajas. Estos valores harán que <code>#box-1</code> crezca para llenar el espacio adicional al doble de la tasa de <code>#box-2</code> cuando el contenedor es mayor que 300px y se contraerá al doble de la tasa de <code>#box-2</code> cuando el contenedor sea menor de 300px . 300px es el tamaño combinado de los valores de <code>flex-basis</code> de las dos cajas.
</section> </section>
## Tests ## Tests
@ -24,11 +24,11 @@ Estos valores harán que <code>#box-1</code> crezca para llenar el espacio adici
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#box-1</code> debe tener la propiedad <code>flex</code> establecida en un valor de 2 2 150px.&#39; - text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>flex</code> establecida en un valor de 2 2 150px.'
testString: 'assert($("#box-1").css("flex-grow") == "2" && $("#box-1").css("flex-shrink") == "2" && $("#box-1").css("flex-basis") == "150px", "The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.");' testString: 'assert($("#box-1").css("flex-grow") == "2" && $("#box-1").css("flex-shrink") == "2" && $("#box-1").css("flex-basis") == "150px", "The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.");'
- text: &#39;El elemento <code>#box-2</code> debe tener la propiedad <code>flex</code> establecida en un valor de 1 1 150px.&#39; - text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>flex</code> establecida en un valor de 1 1 150px.'
testString: 'assert($("#box-2").css("flex-grow") == "1" && $("#box-2").css("flex-shrink") == "1" && $("#box-2").css("flex-basis") == "150px", "The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.");' testString: 'assert($("#box-2").css("flex-grow") == "1" && $("#box-2").css("flex-shrink") == "1" && $("#box-2").css("flex-basis") == "150px", "The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.");'
- text: &#39;Su código debe usar la propiedad <code>flex</code> para <code>#box-1</code> y <code>#box-2</code> .&#39; - text: 'Su código debe usar la propiedad <code>flex</code> para <code>#box-1</code> y <code>#box-2</code> .'
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.");' testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.");'
``` ```

View File

@ -7,15 +7,15 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Hasta ahora, todas las propiedades en los desafíos se aplican al contenedor de flexión (el elemento principal de los elementos de flexión). Sin embargo, hay varias propiedades útiles para los elementos flexibles. Hasta ahora, todas las propiedades en los desafíos se aplican al contenedor de flexión (el elemento principal de los elementos de flexión). Sin embargo, hay varias propiedades útiles para los elementos flexibles.
La primera es la propiedad <code>flex-shrink</code> . Cuando se usa, permite que un elemento se encoja si el contenedor flexible es demasiado pequeño. Los elementos se reducen cuando el ancho del contenedor principal es menor que el ancho combinado de todos los elementos flexibles dentro de él. La primera es la propiedad <code>flex-shrink</code> . Cuando se usa, permite que un elemento se encoja si el contenedor flexible es demasiado pequeño. Los elementos se reducen cuando el ancho del contenedor principal es menor que el ancho combinado de todos los elementos flexibles dentro de él.
La propiedad <code>flex-shrink</code> toma números como valores. Cuanto mayor sea el número, más se reducirá en comparación con los otros elementos del contenedor. Por ejemplo, si un elemento tiene un valor de <code>flex-shrink</code> de 1 y el otro tiene un valor de <code>flex-shrink</code> de 3, el valor de 3 se contraerá tres veces más que el otro. La propiedad <code>flex-shrink</code> toma números como valores. Cuanto mayor sea el número, más se reducirá en comparación con los otros elementos del contenedor. Por ejemplo, si un elemento tiene un valor de <code>flex-shrink</code> de 1 y el otro tiene un valor de <code>flex-shrink</code> de 3, el valor de 3 se contraerá tres veces más que el otro.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Agregue la propiedad CSS <code>flex-shrink</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de 1 y <code>#box-2</code> un valor de 2. Agregue la propiedad CSS <code>flex-shrink</code> a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de 1 y <code>#box-2</code> un valor de 2.
</section> </section>
## Tests ## Tests
@ -23,9 +23,9 @@ Agregue la propiedad CSS <code>flex-shrink</code> a <code>#box-1</code> y <code>
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#box-1</code> debe tener la propiedad <code>flex-shrink</code> establecida en un valor de 1&#39;. - text: 'El elemento <code>#box-1</code> debe tener la propiedad <code>flex-shrink</code> establecida en un valor de 1'
testString: 'assert($("#box-1").css("flex-shrink") == "1", "The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.");' testString: 'assert($("#box-1").css("flex-shrink") == "1", "The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.");'
- text: &#39;El elemento <code>#box-2</code> debe tener la propiedad <code>flex-shrink</code> establecida en un valor de 2&#39;. - text: 'El elemento <code>#box-2</code> debe tener la propiedad <code>flex-shrink</code> establecida en un valor de 2'
testString: 'assert($("#box-2").css("flex-shrink") == "2", "The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.");' testString: 'assert($("#box-2").css("flex-shrink") == "2", "The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.");'
``` ```

View File

@ -7,16 +7,16 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
CSS flexbox tiene una función para dividir un elemento flexible en varias filas (o columnas). Por defecto, un contenedor flexible encajará todos los elementos flexibles juntos. Por ejemplo, una fila estará en una sola línea. CSS flexbox tiene una función para dividir un elemento flexible en varias filas (o columnas). Por defecto, un contenedor flexible encajará todos los elementos flexibles juntos. Por ejemplo, una fila estará en una sola línea.
Sin embargo, al usar la propiedad <code>flex-wrap</code> , le dice a CSS que envuelva los elementos. Esto significa que los elementos adicionales se mueven a una nueva fila o columna. El punto de ruptura de donde ocurre la envoltura depende del tamaño de los artículos y del tamaño del contenedor. Sin embargo, al usar la propiedad <code>flex-wrap</code> , le dice a CSS que envuelva los elementos. Esto significa que los elementos adicionales se mueven a una nueva fila o columna. El punto de ruptura de donde ocurre la envoltura depende del tamaño de los artículos y del tamaño del contenedor.
CSS también tiene opciones para la dirección de la envoltura: CSS también tiene opciones para la dirección de la envoltura:
<ul><li> <code>nowrap</code> : esta es la configuración predeterminada y no envuelve los elementos. </li><li> <code>wrap</code> : envuelve los elementos de izquierda a derecha si están en una fila, o de arriba a abajo si están en una columna. </li><li> <code>wrap-reverse</code> : envuelve los elementos de abajo a arriba si están en una fila, o de derecha a izquierda si están en una columna. </li></ul> <ul><li> <code>nowrap</code> : esta es la configuración predeterminada y no envuelve los elementos. </li><li> <code>wrap</code> : envuelve los elementos de izquierda a derecha si están en una fila, o de arriba a abajo si están en una columna. </li><li> <code>wrap-reverse</code> : envuelve los elementos de abajo a arriba si están en una fila, o de derecha a izquierda si están en una columna. </li></ul>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
El diseño actual tiene demasiados cuadros para una fila. Agregue la propiedad CSS <code>flex-wrap</code> al elemento <code>#box-container</code> y asígnele un valor de wrap. El diseño actual tiene demasiados cuadros para una fila. Agregue la propiedad CSS <code>flex-wrap</code> al elemento <code>#box-container</code> y asígnele un valor de wrap.
</section> </section>
## Tests ## Tests
@ -24,7 +24,7 @@ El diseño actual tiene demasiados cuadros para una fila. Agregue la propiedad C
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#box-container</code> debería tener la propiedad <code>flex-wrap</code> establecida en un valor de wrap.&#39; - text: 'El elemento <code>#box-container</code> debería tener la propiedad <code>flex-wrap</code> establecida en un valor de wrap.'
testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.");' testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.");'
``` ```

View File

@ -7,13 +7,13 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
El último desafío mostró un ejemplo de la propiedad <code>justify-content</code> . Para la inserción de tweets, esta propiedad se puede aplicar para alinear los elementos en el elemento <code>.profile-name</code> . El último desafío mostró un ejemplo de la propiedad <code>justify-content</code> . Para la inserción de tweets, esta propiedad se puede aplicar para alinear los elementos en el elemento <code>.profile-name</code> .
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Añadir la propiedad CSS <code>justify-content</code> de la cabecera del <code>.profile-name</code> del elemento y establezca el valor en cualquiera de las opciones desde el último desafío. Añadir la propiedad CSS <code>justify-content</code> de la cabecera del <code>.profile-name</code> del elemento y establezca el valor en cualquiera de las opciones desde el último desafío.
</section> </section>
## Tests ## Tests
@ -21,7 +21,7 @@ Añadir la propiedad CSS <code>justify-content</code> de la cabecera del <code>.
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>.profile-name</code> debe tener la propiedad <code>.profile-name</code> <code>justify-content</code> establecida en cualquiera de estos valores: centro, inicio flexible, extremo flexible, espacio intermedio o espacio-alrededor.&#39; - text: 'El elemento <code>.profile-name</code> debe tener la propiedad <code>.profile-name</code> <code>justify-content</code> establecida en cualquiera de estos valores: centro, inicio flexible, extremo flexible, espacio intermedio o espacio-alrededor.'
testString: 'assert(code.match(/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around)\s*;/g), "The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.");' testString: 'assert(code.match(/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around)\s*;/g), "The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.");'
``` ```

View File

@ -7,13 +7,13 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
La propiedad <code>order</code> se usa para decirle a CSS el orden en que aparecen los elementos flexibles en el contenedor flex. De forma predeterminada, los elementos aparecerán en el mismo orden en que vienen en el código fuente HTML. La propiedad toma números como valores y se pueden usar números negativos. La propiedad <code>order</code> se usa para decirle a CSS el orden en que aparecen los elementos flexibles en el contenedor flex. De forma predeterminada, los elementos aparecerán en el mismo orden en que vienen en el código fuente HTML. La propiedad toma números como valores y se pueden usar números negativos.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Agregue el <code>order</code> propiedades CSS a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de 2 y a <code>#box-2</code> un valor de 1. Agregue el <code>order</code> propiedades CSS a <code>#box-1</code> y <code>#box-2</code> . Dé a <code>#box-1</code> un valor de 2 y a <code>#box-2</code> un valor de 1.
</section> </section>
## Tests ## Tests
@ -21,9 +21,9 @@ Agregue el <code>order</code> propiedades CSS a <code>#box-1</code> y <code>#box
```yml ```yml
tests: tests:
- text: &#39;El elemento <code>#box-1</code> debe tener la propiedad de <code>order</code> establecida en un valor de 2.&#39; - text: 'El elemento <code>#box-1</code> debe tener la propiedad de <code>order</code> establecida en un valor de 2.'
testString: 'assert($("#box-1").css("order") == "2", "The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.");' testString: 'assert($("#box-1").css("order") == "2", "The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.");'
- text: &#39;El elemento <code>#box-2</code> debe tener la propiedad de <code>order</code> establecida en un valor de 1.&#39; - text: 'El elemento <code>#box-2</code> debe tener la propiedad de <code>order</code> establecida en un valor de 1.'
testString: 'assert($("#box-2").css("order") == "1", "The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.");' testString: 'assert($("#box-2").css("order") == "1", "The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.");'
``` ```

View File

@ -7,19 +7,19 @@ videoUrl: ''
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Puede usar unidades absolutas y relativas como <code>px</code> y <code>em</code> en CSS Grid para definir el tamaño de las filas y columnas. También puede usar estos: Puede usar unidades absolutas y relativas como <code>px</code> y <code>em</code> en CSS Grid para definir el tamaño de las filas y columnas. También puede usar estos:
<code>fr</code> : establece la columna o fila a una fracción del espacio disponible, <code>fr</code> : establece la columna o fila a una fracción del espacio disponible,
<code>auto</code> : establece la columna o fila al ancho o alto de su contenido automáticamente, <code>auto</code> : establece la columna o fila al ancho o alto de su contenido automáticamente,
<code>%</code> : ajusta la columna o fila a El porcentaje de ancho de su contenedor. <code>%</code> : ajusta la columna o fila a El porcentaje de ancho de su contenedor.
Aquí está el código que genera el resultado en la vista previa: Aquí está el código que genera el resultado en la vista previa:
<blockquote>grid-template-columns: auto 50px 10% 2fr 1fr;</blockquote> <blockquote>grid-template-columns: auto 50px 10% 2fr 1fr;</blockquote>
Este fragmento crea cinco columnas. La primera columna es tan ancha como su contenido, la segunda columna es 50px, la tercera columna es el 10% de su contenedor, y para las dos últimas columnas; El espacio restante se divide en tres secciones, dos se asignan para la cuarta columna y una para la quinta. Este fragmento crea cinco columnas. La primera columna es tan ancha como su contenido, la segunda columna es 50px, la tercera columna es el 10% de su contenedor, y para las dos últimas columnas; El espacio restante se divide en tres secciones, dos se asignan para la cuarta columna y una para la quinta.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Haz una cuadrícula con tres columnas cuyos anchos sean los siguientes: 1fr, 100px y 2fr. Haz una cuadrícula con tres columnas cuyos anchos sean los siguientes: 1fr, 100px y 2fr.
</section> </section>
## Tests ## Tests
@ -27,7 +27,7 @@ Haz una cuadrícula con tres columnas cuyos anchos sean los siguientes: 1fr, 100
```yml ```yml
tests: tests:
- text: &#39;la clase <code>container</code> debe tener una propiedad de <code>grid-template-columns</code> que tenga tres columnas con los siguientes anchos: <code>1fr, 100px, and 2fr</code> &#39;. - text: 'la clase <code>container</code> debe tener una propiedad de <code>grid-template-columns</code> que tenga tres columnas con los siguientes anchos: <code>1fr, 100px, and 2fr</code> '
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.");'
``` ```

View File

@ -7,14 +7,14 @@ challengeType: 5
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Compruebe si un valor está clasificado como un primitivo booleano. Devuelve verdadero o falso. Compruebe si un valor está clasificado como un primitivo booleano. Devuelve verdadero o falso.
Los primitivos booleanos son verdaderos y falsos. Los primitivos booleanos son verdaderos y falsos.
Recuerda usar <a href='http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te atascas. Trate de emparejar el programa. Escribe tu propio código. Recuerda usar <a href='http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te atascas. Trate de emparejar el programa. Escribe tu propio código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -27,11 +27,11 @@ tests:
testString: 'assert.strictEqual(booWho(true), true, "<code>booWho(true)</code> should return true.");' testString: 'assert.strictEqual(booWho(true), true, "<code>booWho(true)</code> should return true.");'
- text: <code>booWho(false)</code> debe devolver verdadero. - text: <code>booWho(false)</code> debe devolver verdadero.
testString: 'assert.strictEqual(booWho(false), true, "<code>booWho(false)</code> should return true.");' testString: 'assert.strictEqual(booWho(false), true, "<code>booWho(false)</code> should return true.");'
- text: &#39; <code>booWho([1, 2, 3])</code> debe devolver falso.&#39; - text: ' <code>booWho([1, 2, 3])</code> debe devolver falso.'
testString: 'assert.strictEqual(booWho([1, 2, 3]), false, "<code>booWho([1, 2, 3])</code> should return false.");' testString: 'assert.strictEqual(booWho([1, 2, 3]), false, "<code>booWho([1, 2, 3])</code> should return false.");'
- text: &#39; <code>booWho([].slice)</code> debe devolver falso.&#39; - text: ' <code>booWho([].slice)</code> debe devolver falso.'
testString: 'assert.strictEqual(booWho([].slice), false, "<code>booWho([].slice)</code> should return false.");' testString: 'assert.strictEqual(booWho([].slice), false, "<code>booWho([].slice)</code> should return false.");'
- text: &#39; <code>booWho({ &quot;a&quot;: 1 })</code> debe devolver falso.&#39; - text: ' <code>booWho({ &quot;a&quot;: 1 })</code> debe devolver falso.'
testString: 'assert.strictEqual(booWho({ "a": 1 }), false, "<code>booWho({ "a": 1 })</code> should return false.");' testString: 'assert.strictEqual(booWho({ "a": 1 }), false, "<code>booWho({ "a": 1 })</code> should return false.");'
- text: <code>booWho(1)</code> debe devolver falso. - text: <code>booWho(1)</code> debe devolver falso.
testString: 'assert.strictEqual(booWho(1), false, "<code>booWho(1)</code> should return false.");' testString: 'assert.strictEqual(booWho(1), false, "<code>booWho(1)</code> should return false.");'

View File

@ -7,13 +7,13 @@ challengeType: 5
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Escriba una función que divida una matriz (primer argumento) en grupos de la longitud del <code>size</code> (segundo argumento) y los devuelva como una matriz bidimensional. Escriba una función que divida una matriz (primer argumento) en grupos de la longitud del <code>size</code> (segundo argumento) y los devuelva como una matriz bidimensional.
Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código. Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -22,19 +22,19 @@ Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-
```yml ```yml
tests: tests:
- text: &#39; <code>chunkArrayInGroups([&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;], 2)</code> debe devolver <code>[[&quot;a&quot;, &quot;b&quot;], [&quot;c&quot;, &quot;d&quot;]]</code> .&#39; - text: ' <code>chunkArrayInGroups([&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;], 2)</code> debe devolver <code>[[&quot;a&quot;, &quot;b&quot;], [&quot;c&quot;, &quot;d&quot;]]</code> .'
testString: 'assert.deepEqual(chunkArrayInGroups(["a", "b", "c", "d"], 2), [["a", "b"], ["c", "d"]], "<code>chunkArrayInGroups(["a", "b", "c", "d"], 2)</code> should return <code>[["a", "b"], ["c", "d"]]</code>.");' testString: 'assert.deepEqual(chunkArrayInGroups(["a", "b", "c", "d"], 2), [["a", "b"], ["c", "d"]], "<code>chunkArrayInGroups(["a", "b", "c", "d"], 2)</code> should return <code>[["a", "b"], ["c", "d"]]</code>.");'
- text: &#39; <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)</code> debe devolver <code>[[0, 1, 2], [3, 4, 5]]</code> .&#39; - text: ' <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)</code> debe devolver <code>[[0, 1, 2], [3, 4, 5]]</code> .'
testString: 'assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5]]</code>.");' testString: 'assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5]]</code>.");'
- text: &#39; <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)</code> debe devolver <code>[[0, 1], [2, 3], [4, 5]]</code> .&#39; - text: ' <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)</code> debe devolver <code>[[0, 1], [2, 3], [4, 5]]</code> .'
testString: 'assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [[0, 1], [2, 3], [4, 5]], "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5]]</code>.");' testString: 'assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [[0, 1], [2, 3], [4, 5]], "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5]]</code>.");'
- text: &#39; <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)</code> debe devolver <code>[[0, 1, 2, 3], [4, 5]]</code> .&#39; - text: ' <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)</code> debe devolver <code>[[0, 1, 2, 3], [4, 5]]</code> .'
testString: 'assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5]]</code>.");' testString: 'assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5]]</code>.");'
- text: &#39; <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)</code> debe devolver <code>[[0, 1, 2], [3, 4, 5], [6]]</code> .&#39; - text: ' <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)</code> debe devolver <code>[[0, 1, 2], [3, 4, 5], [6]]</code> .'
testString: 'assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [[0, 1, 2], [3, 4, 5], [6]], "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5], [6]]</code>.");' testString: 'assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [[0, 1, 2], [3, 4, 5], [6]], "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5], [6]]</code>.");'
- text: &#39; <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)</code> debe devolver <code>[[0, 1, 2, 3], [4, 5, 6, 7], [8]]</code> . &#39; - text: ' <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)</code> debe devolver <code>[[0, 1, 2, 3], [4, 5, 6, 7], [8]]</code> . '
testString: 'assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [[0, 1, 2, 3], [4, 5, 6, 7], [8]], "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5, 6, 7], [8]]</code>.");' testString: 'assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [[0, 1, 2, 3], [4, 5, 6, 7], [8]], "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5, 6, 7], [8]]</code>.");'
- text: &#39; <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)</code> debe devolver <code>[[0, 1], [2, 3], [4, 5], [6, 7], [8]]</code> . - text: ' <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)</code> debe devolver <code>[[0, 1], [2, 3], [4, 5], [6, 7], [8]]</code> .
testString: 'assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [[0, 1], [2, 3], [4, 5], [6, 7], [8]], "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5], [6, 7], [8]]</code>.");' testString: 'assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [[0, 1], [2, 3], [4, 5], [6, 7], [8]], "<code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5], [6, 7], [8]]</code>.");'
``` ```

View File

@ -7,14 +7,14 @@ challengeType: 5
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Compruebe si una cadena (primer argumento, <code>str</code> ) termina con la cadena de destino dada (segundo argumento, <code>target</code> ). Compruebe si una cadena (primer argumento, <code>str</code> ) termina con la cadena de destino dada (segundo argumento, <code>target</code> ).
Este desafío <em>se</em> puede resolver con el método <code>.endsWith()</code> , que se introdujo en ES2015. Pero para el propósito de este desafío, nos gustaría que utilices uno de los métodos de subcadena de JavaScript. Este desafío <em>se</em> puede resolver con el método <code>.endsWith()</code> , que se introdujo en ES2015. Pero para el propósito de este desafío, nos gustaría que utilices uno de los métodos de subcadena de JavaScript.
Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código. Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -23,25 +23,25 @@ Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-
```yml ```yml
tests: tests:
- text: &#39; <code>confirmEnding(&quot;Bastian&quot;, &quot;n&quot;)</code> debe devolver verdadero.&#39; - text: ' <code>confirmEnding(&quot;Bastian&quot;, &quot;n&quot;)</code> debe devolver verdadero.'
testString: 'assert(confirmEnding("Bastian", "n") === true, "<code>confirmEnding("Bastian", "n")</code> should return true.");' testString: 'assert(confirmEnding("Bastian", "n") === true, "<code>confirmEnding("Bastian", "n")</code> should return true.");'
- text: &#39; <code>confirmEnding(&quot;Congratulation&quot;, &quot;on&quot;)</code> debe devolver verdadero.&#39; - text: ' <code>confirmEnding(&quot;Congratulation&quot;, &quot;on&quot;)</code> debe devolver verdadero.'
testString: 'assert(confirmEnding("Congratulation", "on") === true, "<code>confirmEnding("Congratulation", "on")</code> should return true.");' testString: 'assert(confirmEnding("Congratulation", "on") === true, "<code>confirmEnding("Congratulation", "on")</code> should return true.");'
- text: &#39; <code>confirmEnding(&quot;Connor&quot;, &quot;n&quot;)</code> debe devolver falso.&#39; - text: ' <code>confirmEnding(&quot;Connor&quot;, &quot;n&quot;)</code> debe devolver falso.'
testString: 'assert(confirmEnding("Connor", "n") === false, "<code>confirmEnding("Connor", "n")</code> should return false.");' testString: 'assert(confirmEnding("Connor", "n") === false, "<code>confirmEnding("Connor", "n")</code> should return false.");'
- text: &#39; <code>confirmEnding(&quot;Walking on water and developing software from a specification are easy if both are frozen&quot;, &quot;specification&quot;)</code> debe devolver falso. - text: ' <code>confirmEnding(&quot;Walking on water and developing software from a specification are easy if both are frozen&quot;, &quot;specification&quot;)</code> debe devolver falso.
testString: 'assert(confirmEnding("Walking on water and developing software from a specification are easy if both are frozen", "specification") === false, "<code>confirmEnding("Walking on water and developing software from a specification are easy if both are frozen"&#44; "specification"&#41;</code> should return false.");' testString: 'assert(confirmEnding("Walking on water and developing software from a specification are easy if both are frozen", "specification") === false, "<code>confirmEnding("Walking on water and developing software from a specification are easy if both are frozen"&#44; "specification"&#41;</code> should return false.");'
- text: &#39; <code>confirmEnding(&quot;He has to give me a new name&quot;, &quot;name&quot;)</code> debe devolver verdadero.&#39; - text: ' <code>confirmEnding(&quot;He has to give me a new name&quot;, &quot;name&quot;)</code> debe devolver verdadero.'
testString: 'assert(confirmEnding("He has to give me a new name", "name") === true, "<code>confirmEnding("He has to give me a new name", "name")</code> should return true.");' testString: 'assert(confirmEnding("He has to give me a new name", "name") === true, "<code>confirmEnding("He has to give me a new name", "name")</code> should return true.");'
- text: &#39; <code>confirmEnding(&quot;Open sesame&quot;, &quot;same&quot;)</code> debe devolver verdadero.&#39; - text: ' <code>confirmEnding(&quot;Open sesame&quot;, &quot;same&quot;)</code> debe devolver verdadero.'
testString: 'assert(confirmEnding("Open sesame", "same") === true, "<code>confirmEnding("Open sesame", "same")</code> should return true.");' testString: 'assert(confirmEnding("Open sesame", "same") === true, "<code>confirmEnding("Open sesame", "same")</code> should return true.");'
- text: &#39; <code>confirmEnding(&quot;Open sesame&quot;, &quot;pen&quot;)</code> debe devolver falso. - text: ' <code>confirmEnding(&quot;Open sesame&quot;, &quot;pen&quot;)</code> debe devolver falso.
testString: 'assert(confirmEnding("Open sesame", "pen") === false, "<code>confirmEnding("Open sesame", "pen")</code> should return false.");' testString: 'assert(confirmEnding("Open sesame", "pen") === false, "<code>confirmEnding("Open sesame", "pen")</code> should return false.");'
- text: &#39; <code>confirmEnding(&quot;Open sesame&quot;, &quot;game&quot;)</code> debe devolver falso. - text: ' <code>confirmEnding(&quot;Open sesame&quot;, &quot;game&quot;)</code> debe devolver falso.
testString: 'assert(confirmEnding("Open sesame", "game") === false, "<code>confirmEnding("Open sesame", "game")</code> should return false.");' testString: 'assert(confirmEnding("Open sesame", "game") === false, "<code>confirmEnding("Open sesame", "game")</code> should return false.");'
- text: &#39; <code>confirmEnding(&quot;If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing&quot;, &quot;mountain&quot;)</code> debería devolver el valor falso &quot;. - text: ' <code>confirmEnding(&quot;If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing&quot;, &quot;mountain&quot;)</code> debería devolver el valor falso &quot;.
testString: 'assert(confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain") === false, "<code>confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain")</code> should return false.");' testString: 'assert(confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain") === false, "<code>confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain")</code> should return false.");'
- text: &#39; <code>confirmEnding(&quot;Abstraction&quot;, &quot;action&quot;)</code> debe devolver verdadero.&#39; - text: ' <code>confirmEnding(&quot;Abstraction&quot;, &quot;action&quot;)</code> debe devolver verdadero.'
testString: 'assert(confirmEnding("Abstraction", "action") === true, "<code>confirmEnding("Abstraction", "action")</code> should return true.");' testString: 'assert(confirmEnding("Abstraction", "action") === true, "<code>confirmEnding("Abstraction", "action")</code> should return true.");'
- text: No use el método <code>.endsWith()</code> para resolver el desafío. - text: No use el método <code>.endsWith()</code> para resolver el desafío.
testString: 'assert(!(/\.endsWith\(.*?\)\s*?;?/.test(code)) && !(/\["endsWith"\]/.test(code)), "Do not use the built-in method <code>.endsWith()</code> to solve the challenge.");' testString: 'assert(!(/\.endsWith\(.*?\)\s*?;?/.test(code)) && !(/\["endsWith"\]/.test(code)), "Do not use the built-in method <code>.endsWith()</code> to solve the challenge.");'

View File

@ -7,15 +7,15 @@ challengeType: 5
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Eliminar todos los valores falsos de una matriz. Eliminar todos los valores falsos de una matriz.
valores de <code>false</code> en JavaScript son <code>false</code> , <code>null</code> , <code>0</code> , <code>&quot;&quot;</code> , <code>undefined</code> y <code>NaN</code> . valores de <code>false</code> en JavaScript son <code>false</code> , <code>null</code> , <code>0</code> , <code>&quot;&quot;</code> , <code>undefined</code> y <code>NaN</code> .
Sugerencia: intente convertir cada valor a un booleano. Sugerencia: intente convertir cada valor a un booleano.
Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código. Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -24,13 +24,13 @@ Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-
```yml ```yml
tests: tests:
- text: &#39; <code>bouncer([7, &quot;ate&quot;, &quot;&quot;, false, 9])</code> debe devolver <code>[7, &quot;ate&quot;, 9]</code> .&#39; - text: ' <code>bouncer([7, &quot;ate&quot;, &quot;&quot;, false, 9])</code> debe devolver <code>[7, &quot;ate&quot;, 9]</code> .'
testString: 'assert.deepEqual(bouncer([7, "ate", "", false, 9]), [7, "ate", 9], "<code>bouncer([7, "ate", "", false, 9])</code> should return <code>[7, "ate", 9]</code>.");' testString: 'assert.deepEqual(bouncer([7, "ate", "", false, 9]), [7, "ate", 9], "<code>bouncer([7, "ate", "", false, 9])</code> should return <code>[7, "ate", 9]</code>.");'
- text: &#39; <code>bouncer([&quot;a&quot;, &quot;b&quot;, &quot;c&quot;])</code> debe devolver <code>[&quot;a&quot;, &quot;b&quot;, &quot;c&quot;]</code> .&#39; - text: ' <code>bouncer([&quot;a&quot;, &quot;b&quot;, &quot;c&quot;])</code> debe devolver <code>[&quot;a&quot;, &quot;b&quot;, &quot;c&quot;]</code> .'
testString: 'assert.deepEqual(bouncer(["a", "b", "c"]), ["a", "b", "c"], "<code>bouncer(["a", "b", "c"])</code> should return <code>["a", "b", "c"]</code>.");' testString: 'assert.deepEqual(bouncer(["a", "b", "c"]), ["a", "b", "c"], "<code>bouncer(["a", "b", "c"])</code> should return <code>["a", "b", "c"]</code>.");'
- text: &#39; <code>bouncer([false, null, 0, NaN, undefined, &quot;&quot;])</code> debe devolver <code>[]</code> .&#39; - text: ' <code>bouncer([false, null, 0, NaN, undefined, &quot;&quot;])</code> debe devolver <code>[]</code> .'
testString: 'assert.deepEqual(bouncer([false, null, 0, NaN, undefined, ""]), [], "<code>bouncer([false, null, 0, NaN, undefined, ""])</code> should return <code>[]</code>.");' testString: 'assert.deepEqual(bouncer([false, null, 0, NaN, undefined, ""]), [], "<code>bouncer([false, null, 0, NaN, undefined, ""])</code> should return <code>[]</code>.");'
- text: &#39; <code>bouncer([1, null, NaN, 2, undefined])</code> debe devolver <code>[1, 2]</code> .&#39; - text: ' <code>bouncer([1, null, NaN, 2, undefined])</code> debe devolver <code>[1, 2]</code> .'
testString: 'assert.deepEqual(bouncer([1, null, NaN, 2, undefined]), [1, 2], "<code>bouncer([1, null, NaN, 2, undefined])</code> should return <code>[1, 2]</code>.");' testString: 'assert.deepEqual(bouncer([1, null, NaN, 2, undefined]), [1, 2], "<code>bouncer([1, null, NaN, 2, undefined])</code> should return <code>[1, 2]</code>.");'
``` ```

View File

@ -7,13 +7,13 @@ challengeType: 5
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Cree una función que examine una matriz (primer argumento) y devuelva el primer elemento de la matriz que pase una prueba de verdad (segundo argumento). Si ningún elemento pasa la prueba, devuelva indefinido. Cree una función que examine una matriz (primer argumento) y devuelva el primer elemento de la matriz que pase una prueba de verdad (segundo argumento). Si ningún elemento pasa la prueba, devuelva indefinido.
Recuerda usar <a href='http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te atascas. Trate de emparejar el programa. Escribe tu propio código. Recuerda usar <a href='http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te atascas. Trate de emparejar el programa. Escribe tu propio código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -22,9 +22,9 @@ Recuerda usar <a href='http://forum.freecodecamp.org/t/how-to-get-help-when-you-
```yml ```yml
tests: tests:
- text: &#39; <code>findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })</code> debe devolver 8.&#39; - text: ' <code>findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })</code> debe devolver 8.'
testString: 'assert.strictEqual(findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; }), 8, "<code>findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })</code> should return 8.");' testString: 'assert.strictEqual(findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; }), 8, "<code>findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })</code> should return 8.");'
- text: &#39; <code>findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })</code> debe devolver undefined.&#39; - text: ' <code>findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })</code> debe devolver undefined.'
testString: 'assert.strictEqual(findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; }), undefined, "<code>findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })</code> should return undefined.");' testString: 'assert.strictEqual(findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; }), undefined, "<code>findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })</code> should return undefined.");'
``` ```

View File

@ -7,16 +7,16 @@ challengeType: 5
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Devuelva verdadero si la cadena en el primer elemento de la matriz contiene todas las letras de la cadena en el segundo elemento de la matriz. Devuelva verdadero si la cadena en el primer elemento de la matriz contiene todas las letras de la cadena en el segundo elemento de la matriz.
Por ejemplo, <code>[&quot;hello&quot;, &quot;Hello&quot;]</code> , debería devolver verdadero porque todas las letras en la segunda cadena están presentes en el primer caso, ignorando el caso. Por ejemplo, <code>[&quot;hello&quot;, &quot;Hello&quot;]</code> , debería devolver verdadero porque todas las letras en la segunda cadena están presentes en el primer caso, ignorando el caso.
Los argumentos <code>[&quot;hello&quot;, &quot;hey&quot;]</code> deben devolver falso porque la cadena &quot;hola&quot; no contiene una &quot;y&quot;. Los argumentos <code>[&quot;hello&quot;, &quot;hey&quot;]</code> deben devolver falso porque la cadena &quot;hola&quot; no contiene una &quot;y&quot;.
Por último, <code>[&quot;Alien&quot;, &quot;line&quot;]</code> , debe devolver verdadero porque todas las letras en &quot;line&quot; están presentes en &quot;Alien&quot;. Por último, <code>[&quot;Alien&quot;, &quot;line&quot;]</code> , debe devolver verdadero porque todas las letras en &quot;line&quot; están presentes en &quot;Alien&quot;.
Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código. Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -25,23 +25,23 @@ Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-
```yml ```yml
tests: tests:
- text: &#39; <code>mutation([&quot;hello&quot;, &quot;hey&quot;])</code> debe devolver falso.&#39; - text: ' <code>mutation([&quot;hello&quot;, &quot;hey&quot;])</code> debe devolver falso.'
testString: 'assert(mutation(["hello", "hey"]) === false, "<code>mutation(["hello", "hey"])</code> should return false.");' testString: 'assert(mutation(["hello", "hey"]) === false, "<code>mutation(["hello", "hey"])</code> should return false.");'
- text: &#39; <code>mutation([&quot;hello&quot;, &quot;Hello&quot;])</code> debe devolver verdadero.&#39; - text: ' <code>mutation([&quot;hello&quot;, &quot;Hello&quot;])</code> debe devolver verdadero.'
testString: 'assert(mutation(["hello", "Hello"]) === true, "<code>mutation(["hello", "Hello"])</code> should return true.");' testString: 'assert(mutation(["hello", "Hello"]) === true, "<code>mutation(["hello", "Hello"])</code> should return true.");'
- text: &#39; <code>mutation([&quot;zyxwvutsrqponmlkjihgfedcba&quot;, &quot;qrstu&quot;])</code> debe devolver verdadero.&#39; - text: ' <code>mutation([&quot;zyxwvutsrqponmlkjihgfedcba&quot;, &quot;qrstu&quot;])</code> debe devolver verdadero.'
testString: 'assert(mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"]) === true, "<code>mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"])</code> should return true.");' testString: 'assert(mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"]) === true, "<code>mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"])</code> should return true.");'
- text: &#39;la <code>mutation([&quot;Mary&quot;, &quot;Army&quot;])</code> debería devolver la verdad.&#39; - text: 'la <code>mutation([&quot;Mary&quot;, &quot;Army&quot;])</code> debería devolver la verdad.'
testString: 'assert(mutation(["Mary", "Army"]) === true, "<code>mutation(["Mary", "Army"])</code> should return true.");' testString: 'assert(mutation(["Mary", "Army"]) === true, "<code>mutation(["Mary", "Army"])</code> should return true.");'
- text: &#39;la <code>mutation([&quot;Mary&quot;, &quot;Aarmy&quot;])</code> debe devolver la verdad.&#39; - text: 'la <code>mutation([&quot;Mary&quot;, &quot;Aarmy&quot;])</code> debe devolver la verdad.'
testString: 'assert(mutation(["Mary", "Aarmy"]) === true, "<code>mutation(["Mary", "Aarmy"])</code> should return true.");' testString: 'assert(mutation(["Mary", "Aarmy"]) === true, "<code>mutation(["Mary", "Aarmy"])</code> should return true.");'
- text: &#39; <code>mutation([&quot;Alien&quot;, &quot;line&quot;])</code> debe devolver true.&#39; - text: ' <code>mutation([&quot;Alien&quot;, &quot;line&quot;])</code> debe devolver true.'
testString: 'assert(mutation(["Alien", "line"]) === true, "<code>mutation(["Alien", "line"])</code> should return true.");' testString: 'assert(mutation(["Alien", "line"]) === true, "<code>mutation(["Alien", "line"])</code> should return true.");'
- text: &#39; <code>mutation([&quot;floor&quot;, &quot;for&quot;])</code> debe devolver verdadero.&#39; - text: ' <code>mutation([&quot;floor&quot;, &quot;for&quot;])</code> debe devolver verdadero.'
testString: 'assert(mutation(["floor", "for"]) === true, "<code>mutation(["floor", "for"])</code> should return true.");' testString: 'assert(mutation(["floor", "for"]) === true, "<code>mutation(["floor", "for"])</code> should return true.");'
- text: &#39; <code>mutation([&quot;hello&quot;, &quot;neo&quot;])</code> debe devolver falso.&#39; - text: ' <code>mutation([&quot;hello&quot;, &quot;neo&quot;])</code> debe devolver falso.'
testString: 'assert(mutation(["hello", "neo"]) === false, "<code>mutation(["hello", "neo"])</code> should return false.");' testString: 'assert(mutation(["hello", "neo"]) === false, "<code>mutation(["hello", "neo"])</code> should return false.");'
- text: &#39; <code>mutation([&quot;voodoo&quot;, &quot;no&quot;])</code> debe devolver falso.&#39; - text: ' <code>mutation([&quot;voodoo&quot;, &quot;no&quot;])</code> debe devolver falso.'
testString: 'assert(mutation(["voodoo", "no"]) === false, "<code>mutation(["voodoo", "no"])</code> should return false.");' testString: 'assert(mutation(["voodoo", "no"]) === false, "<code>mutation(["voodoo", "no"])</code> should return false.");'
``` ```

View File

@ -7,13 +7,13 @@ challengeType: 5
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Repetir una determinada cadena <code>str</code> (primer argumento) para <code>num</code> veces (segundo argumento). Devuelve una cadena vacía si <code>num</code> no es un número positivo. Repetir una determinada cadena <code>str</code> (primer argumento) para <code>num</code> veces (segundo argumento). Devuelve una cadena vacía si <code>num</code> no es un número positivo.
Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código. Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -22,17 +22,17 @@ Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-
```yml ```yml
tests: tests:
- text: &#39; <code>repeatStringNumTimes(&quot;*&quot;, 3)</code> debe devolver <code>&quot;***&quot;</code> .&#39; - text: ' <code>repeatStringNumTimes(&quot;*&quot;, 3)</code> debe devolver <code>&quot;***&quot;</code> .'
testString: 'assert(repeatStringNumTimes("*", 3) === "***", "<code>repeatStringNumTimes("*", 3)</code> should return <code>"***"</code>.");' testString: 'assert(repeatStringNumTimes("*", 3) === "***", "<code>repeatStringNumTimes("*", 3)</code> should return <code>"***"</code>.");'
- text: &#39; <code>repeatStringNumTimes(&quot;abc&quot;, 3)</code> debe devolver <code>&quot;abcabcabc&quot;</code> .&#39; - text: ' <code>repeatStringNumTimes(&quot;abc&quot;, 3)</code> debe devolver <code>&quot;abcabcabc&quot;</code> .'
testString: 'assert(repeatStringNumTimes("abc", 3) === "abcabcabc", "<code>repeatStringNumTimes("abc", 3)</code> should return <code>"abcabcabc"</code>.");' testString: 'assert(repeatStringNumTimes("abc", 3) === "abcabcabc", "<code>repeatStringNumTimes("abc", 3)</code> should return <code>"abcabcabc"</code>.");'
- text: &#39; <code>repeatStringNumTimes(&quot;abc&quot;, 4)</code> debe devolver <code>&quot;abcabcabcabc&quot;</code> .&#39; - text: ' <code>repeatStringNumTimes(&quot;abc&quot;, 4)</code> debe devolver <code>&quot;abcabcabcabc&quot;</code> .'
testString: 'assert(repeatStringNumTimes("abc", 4) === "abcabcabcabc", "<code>repeatStringNumTimes("abc", 4)</code> should return <code>"abcabcabcabc"</code>.");' testString: 'assert(repeatStringNumTimes("abc", 4) === "abcabcabcabc", "<code>repeatStringNumTimes("abc", 4)</code> should return <code>"abcabcabcabc"</code>.");'
- text: &#39; <code>repeatStringNumTimes(&quot;abc&quot;, 1)</code> debe devolver <code>&quot;abc&quot;</code> .&#39; - text: ' <code>repeatStringNumTimes(&quot;abc&quot;, 1)</code> debe devolver <code>&quot;abc&quot;</code> .'
testString: 'assert(repeatStringNumTimes("abc", 1) === "abc", "<code>repeatStringNumTimes("abc", 1)</code> should return <code>"abc"</code>.");' testString: 'assert(repeatStringNumTimes("abc", 1) === "abc", "<code>repeatStringNumTimes("abc", 1)</code> should return <code>"abc"</code>.");'
- text: &#39; <code>repeatStringNumTimes(&quot;*&quot;, 8)</code> debe devolver <code>&quot;********&quot;</code> .&#39; - text: ' <code>repeatStringNumTimes(&quot;*&quot;, 8)</code> debe devolver <code>&quot;********&quot;</code> .'
testString: 'assert(repeatStringNumTimes("*", 8) === "********", "<code>repeatStringNumTimes("*", 8)</code> should return <code>"********"</code>.");' testString: 'assert(repeatStringNumTimes("*", 8) === "********", "<code>repeatStringNumTimes("*", 8)</code> should return <code>"********"</code>.");'
- text: &#39; <code>repeatStringNumTimes(&quot;abc&quot;, -2)</code> debe devolver <code>&quot;&quot;</code> .&#39; - text: ' <code>repeatStringNumTimes(&quot;abc&quot;, -2)</code> debe devolver <code>&quot;&quot;</code> .'
testString: 'assert(repeatStringNumTimes("abc", -2) === "", "<code>repeatStringNumTimes("abc", -2)</code> should return <code>""</code>.");' testString: 'assert(repeatStringNumTimes("abc", -2) === "", "<code>repeatStringNumTimes("abc", -2)</code> should return <code>""</code>.");'
- text: El método <code>repeat()</code> incorporado no debe utilizarse - text: El método <code>repeat()</code> incorporado no debe utilizarse
testString: 'assert(!/\.repeat/g.test(code), "The built-in <code>repeat()</code>-method should not be used");' testString: 'assert(!/\.repeat/g.test(code), "The built-in <code>repeat()</code>-method should not be used");'

View File

@ -7,14 +7,14 @@ challengeType: 5
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Devolver una matriz que consiste en el número más grande de cada sub-matriz proporcionada. Por simplicidad, la matriz provista contendrá exactamente 4 sub-matrices. Devolver una matriz que consiste en el número más grande de cada sub-matriz proporcionada. Por simplicidad, la matriz provista contendrá exactamente 4 sub-matrices.
Recuerde, puede recorrer una matriz con un simple bucle for, y acceder a cada miembro con sintaxis de matriz <code>arr[i]</code> . Recuerde, puede recorrer una matriz con un simple bucle for, y acceder a cada miembro con sintaxis de matriz <code>arr[i]</code> .
Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código. Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -23,13 +23,13 @@ Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-
```yml ```yml
tests: tests:
- text: &#39; <code>largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> debe devolver una matriz. &#39; - text: ' <code>largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> debe devolver una matriz. '
testString: 'assert(largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]).constructor === Array, "<code>largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return an array.");' testString: 'assert(largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]).constructor === Array, "<code>largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return an array.");'
- text: &#39; <code>largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> debe devolver <code>[27, 5, 39, 1001]</code> . - text: ' <code>largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> debe devolver <code>[27, 5, 39, 1001]</code> .
testString: 'assert.deepEqual(largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]]), [27, 5, 39, 1001], "<code>largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return <code>[27, 5, 39, 1001]</code>.");' testString: 'assert.deepEqual(largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]]), [27, 5, 39, 1001], "<code>largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return <code>[27, 5, 39, 1001]</code>.");'
- text: &#39; <code>largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])</code> debe devolver <code>[9, 35, 97, 1000000]</code> . - text: ' <code>largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])</code> debe devolver <code>[9, 35, 97, 1000000]</code> .
testString: 'assert.deepEqual(largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]), [9, 35, 97, 1000000], "<code>largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])</code> should return <code>[9, 35, 97, 1000000]</code>.");' testString: 'assert.deepEqual(largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]), [9, 35, 97, 1000000], "<code>largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])</code> should return <code>[9, 35, 97, 1000000]</code>.");'
- text: &#39; <code>largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])</code> debe devolver <code>[25, 48, 21, -3]</code> . &#39; - text: ' <code>largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])</code> debe devolver <code>[25, 48, 21, -3]</code> . '
testString: 'assert.deepEqual(largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]]), [25, 48, 21, -3], "<code>largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])</code> should return <code>[25, 48, 21, -3]</code>.");' testString: 'assert.deepEqual(largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]]), [25, 48, 21, -3], "<code>largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])</code> should return <code>[25, 48, 21, -3]</code>.");'
``` ```

View File

@ -8,16 +8,16 @@ challengeType: 5
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Te dan dos matrices y un índice. Te dan dos matrices y un índice.
Utilice la matriz métodos <code>slice</code> y <code>splice</code> para copiar cada elemento de la primera matriz en la segunda matriz, en orden. Utilice la matriz métodos <code>slice</code> y <code>splice</code> para copiar cada elemento de la primera matriz en la segunda matriz, en orden.
Comenzar a insertar elementos en el índice <code>n</code> de la segunda matriz. Comenzar a insertar elementos en el índice <code>n</code> de la segunda matriz.
Devuelve la matriz resultante. Las matrices de entrada deben permanecer iguales después de que se ejecute la función. Devuelve la matriz resultante. Las matrices de entrada deben permanecer iguales después de que se ejecute la función.
Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código. Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -26,11 +26,11 @@ Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-
```yml ```yml
tests: tests:
- text: &#39; <code>frankenSplice([1, 2, 3], [4, 5], 1)</code> debe devolver <code>[4, 1, 2, 3, 5]</code> .&#39; - text: ' <code>frankenSplice([1, 2, 3], [4, 5], 1)</code> debe devolver <code>[4, 1, 2, 3, 5]</code> .'
testString: 'assert.deepEqual(frankenSplice([1, 2, 3], [4, 5], 1), [4, 1, 2, 3, 5], "<code>frankenSplice([1, 2, 3], [4, 5], 1)</code> should return <code>[4, 1, 2, 3, 5]</code>.");' testString: 'assert.deepEqual(frankenSplice([1, 2, 3], [4, 5], 1), [4, 1, 2, 3, 5], "<code>frankenSplice([1, 2, 3], [4, 5], 1)</code> should return <code>[4, 1, 2, 3, 5]</code>.");'
- text: &#39; <code>frankenSplice([1, 2], [&quot;a&quot;, &quot;b&quot;], 1)</code> debe devolver <code>[&quot;a&quot;, 1, 2, &quot;b&quot;]</code> .&#39; - text: ' <code>frankenSplice([1, 2], [&quot;a&quot;, &quot;b&quot;], 1)</code> debe devolver <code>[&quot;a&quot;, 1, 2, &quot;b&quot;]</code> .'
testString: 'assert.deepEqual(frankenSplice(testArr1, testArr2, 1), ["a", 1, 2, "b"], "<code>frankenSplice([1, 2], ["a", "b"], 1)</code> should return <code>["a", 1, 2, "b"]</code>.");' testString: 'assert.deepEqual(frankenSplice(testArr1, testArr2, 1), ["a", 1, 2, "b"], "<code>frankenSplice([1, 2], ["a", "b"], 1)</code> should return <code>["a", 1, 2, "b"]</code>.");'
- text: &#39; <code>frankenSplice([&quot;claw&quot;, &quot;tentacle&quot;], [&quot;head&quot;, &quot;shoulders&quot;, &quot;knees&quot;, &quot;toes&quot;], 2)</code> debe devolver <code>[&quot;head&quot;, &quot;shoulders&quot;, &quot;claw&quot;, &quot;tentacle&quot;, &quot;knees&quot;, &quot;toes&quot;]</code> . &#39; - text: ' <code>frankenSplice([&quot;claw&quot;, &quot;tentacle&quot;], [&quot;head&quot;, &quot;shoulders&quot;, &quot;knees&quot;, &quot;toes&quot;], 2)</code> debe devolver <code>[&quot;head&quot;, &quot;shoulders&quot;, &quot;claw&quot;, &quot;tentacle&quot;, &quot;knees&quot;, &quot;toes&quot;]</code> . '
testString: 'assert.deepEqual(frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2), ["head", "shoulders", "claw", "tentacle", "knees", "toes"], "<code>frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2)</code> should return <code>["head", "shoulders", "claw", "tentacle", "knees", "toes"]</code>.");' testString: 'assert.deepEqual(frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2), ["head", "shoulders", "claw", "tentacle", "knees", "toes"], "<code>frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2)</code> should return <code>["head", "shoulders", "claw", "tentacle", "knees", "toes"]</code>.");'
- text: Todos los elementos de la primera matriz se deben agregar a la segunda matriz en su orden original. - text: Todos los elementos de la primera matriz se deben agregar a la segunda matriz en su orden original.
testString: 'assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4], "All elements from the first array should be added to the second array in their original order.");' testString: 'assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4], "All elements from the first array should be added to the second array in their original order.");'

View File

@ -7,14 +7,14 @@ challengeType: 5
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Devuelva la cadena provista con la primera letra de cada palabra en mayúscula. Asegúrese de que el resto de la palabra esté en minúscula. Devuelva la cadena provista con la primera letra de cada palabra en mayúscula. Asegúrese de que el resto de la palabra esté en minúscula.
A los efectos de este ejercicio, también debe poner mayúsculas en las palabras de conexión como &quot;el&quot; y &quot;de&quot;. A los efectos de este ejercicio, también debe poner mayúsculas en las palabras de conexión como &quot;el&quot; y &quot;de&quot;.
Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código. Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -23,9 +23,9 @@ Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-
```yml ```yml
tests: tests:
- text: &#39; <code>titleCase(&quot;I&#39;m a little tea pot&quot;)</code> debería devolver una cadena.&#39; - text: ' <code>titleCase(&quot;I&#39;m a little tea pot&quot;)</code> debería devolver una cadena.'
testString: 'assert(typeof titleCase("I"m a little tea pot") === "string", "<code>titleCase("I&#39;m a little tea pot")</code> should return a string.");' testString: 'assert(typeof titleCase("I"m a little tea pot") === "string", "<code>titleCase("I&#39;m a little tea pot")</code> should return a string.");'
- text: &#39; <code>titleCase(&quot;I&#39;m a little tea pot&quot;)</code> debería devolver <code>I&#39;m A Little Tea Pot</code> &#39;. - text: ' <code>titleCase(&quot;I&#39;m a little tea pot&quot;)</code> debería devolver <code>I&#39;m A Little Tea Pot</code> '
testString: 'assert(titleCase("I"m a little tea pot") === "I"m A Little Tea Pot", "<code>titleCase("I&#39;m a little tea pot")</code> should return <code>I&#39;m A Little Tea Pot</code>.");' testString: 'assert(titleCase("I"m a little tea pot") === "I"m A Little Tea Pot", "<code>titleCase("I&#39;m a little tea pot")</code> should return <code>I&#39;m A Little Tea Pot</code>.");'
- text: <code>titleCase(&quot;sHoRt AnD sToUt&quot;)</code> debe devolver <code>Short And Stout</code> . - text: <code>titleCase(&quot;sHoRt AnD sToUt&quot;)</code> debe devolver <code>Short And Stout</code> .
testString: 'assert(titleCase("sHoRt AnD sToUt") === "Short And Stout", "<code>titleCase("sHoRt AnD sToUt")</code> should return <code>Short And Stout</code>.");' testString: 'assert(titleCase("sHoRt AnD sToUt") === "Short And Stout", "<code>titleCase("sHoRt AnD sToUt")</code> should return <code>Short And Stout</code>.");'

View File

@ -7,13 +7,13 @@ challengeType: 5
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Truncar una cadena (primer argumento) si es más larga que la longitud de cadena máxima dada (segundo argumento). Devuelve la cadena truncada con un <code>...</code> final. Truncar una cadena (primer argumento) si es más larga que la longitud de cadena máxima dada (segundo argumento). Devuelve la cadena truncada con un <code>...</code> final.
Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código. Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -22,17 +22,17 @@ Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-
```yml ```yml
tests: tests:
- text: &#39; <code>truncateString(&quot;A-tisket a-tasket A green and yellow basket&quot;, 8)</code> debe devolver &quot;A-tisket ...&quot;.&#39; - text: ' <code>truncateString(&quot;A-tisket a-tasket A green and yellow basket&quot;, 8)</code> debe devolver &quot;A-tisket ...&quot;.'
testString: 'assert(truncateString("A-tisket a-tasket A green and yellow basket", 8) === "A-tisket...", "<code>truncateString("A-tisket a-tasket A green and yellow basket", 8)</code> should return "A-tisket...".");' testString: 'assert(truncateString("A-tisket a-tasket A green and yellow basket", 8) === "A-tisket...", "<code>truncateString("A-tisket a-tasket A green and yellow basket", 8)</code> should return "A-tisket...".");'
- text: &#39; <code>truncateString(&quot;Peter Piper picked a peck of pickled peppers&quot;, 11)</code> debería devolver &quot;Peter Piper ...&quot;. - text: ' <code>truncateString(&quot;Peter Piper picked a peck of pickled peppers&quot;, 11)</code> debería devolver &quot;Peter Piper ...&quot;.
testString: 'assert(truncateString("Peter Piper picked a peck of pickled peppers", 11) === "Peter Piper...", "<code>truncateString("Peter Piper picked a peck of pickled peppers", 11)</code> should return "Peter Piper...".");' testString: 'assert(truncateString("Peter Piper picked a peck of pickled peppers", 11) === "Peter Piper...", "<code>truncateString("Peter Piper picked a peck of pickled peppers", 11)</code> should return "Peter Piper...".");'
- text: &#39; <code>truncateString(&quot;A-tisket a-tasket A green and yellow basket&quot;, &quot;A-tisket a-tasket A green and yellow basket&quot;.length)</code> debe devolver &quot;A-tisket a-tasket Una canasta verde y amarilla&quot;.&#39; - text: ' <code>truncateString(&quot;A-tisket a-tasket A green and yellow basket&quot;, &quot;A-tisket a-tasket A green and yellow basket&quot;.length)</code> debe devolver &quot;A-tisket a-tasket Una canasta verde y amarilla&quot;.'
testString: 'assert(truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length) === "A-tisket a-tasket A green and yellow basket", "<code>truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length)</code> should return "A-tisket a-tasket A green and yellow basket".");' testString: 'assert(truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length) === "A-tisket a-tasket A green and yellow basket", "<code>truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length)</code> should return "A-tisket a-tasket A green and yellow basket".");'
- text: &#39; <code>truncateString(&quot;A-tisket a-tasket A green and yellow basket&quot;, &quot;A-tisket a-tasket A green and yellow basket&quot;.length + 2)</code> debe devolver &quot;A-tisket a-tasket Una canasta verde y amarilla&quot; . - text: ' <code>truncateString(&quot;A-tisket a-tasket A green and yellow basket&quot;, &quot;A-tisket a-tasket A green and yellow basket&quot;.length + 2)</code> debe devolver &quot;A-tisket a-tasket Una canasta verde y amarilla&quot; .
testString: 'assert(truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2) === "A-tisket a-tasket A green and yellow basket", "<code>truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2)</code> should return "A-tisket a-tasket A green and yellow basket".");' testString: 'assert(truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2) === "A-tisket a-tasket A green and yellow basket", "<code>truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2)</code> should return "A-tisket a-tasket A green and yellow basket".");'
- text: &#39; <code>truncateString(&quot;A-&quot;, 1)</code> debe devolver &quot;A ...&quot;.&#39; - text: ' <code>truncateString(&quot;A-&quot;, 1)</code> debe devolver &quot;A ...&quot;.'
testString: 'assert(truncateString("A-", 1) === "A...", "<code>truncateString("A-", 1)</code> should return "A...".");' testString: 'assert(truncateString("A-", 1) === "A...", "<code>truncateString("A-", 1)</code> should return "A...".");'
- text: &#39; <code>truncateString(&quot;Absolutely Longer&quot;, 2)</code> debe devolver &quot;Ab ...&quot;.&#39; - text: ' <code>truncateString(&quot;Absolutely Longer&quot;, 2)</code> debe devolver &quot;Ab ...&quot;.'
testString: 'assert(truncateString("Absolutely Longer", 2) === "Ab...", "<code>truncateString("Absolutely Longer", 2)</code> should return "Ab...".");' testString: 'assert(truncateString("Absolutely Longer", 2) === "Ab...", "<code>truncateString("Absolutely Longer", 2)</code> should return "Ab...".");'
``` ```

View File

@ -7,15 +7,15 @@ challengeType: 5
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Devuelva el índice más bajo en el que se debe insertar un valor (segundo argumento) en una matriz (primer argumento) una vez que se haya ordenado. El valor devuelto debe ser un número. Devuelva el índice más bajo en el que se debe insertar un valor (segundo argumento) en una matriz (primer argumento) una vez que se haya ordenado. El valor devuelto debe ser un número.
Por ejemplo, <code>getIndexToIns([1,2,3,4], 1.5)</code> debe devolver <code>1</code> porque es mayor que <code>1</code> (índice 0), pero menor que <code>2</code> (índice 1). Por ejemplo, <code>getIndexToIns([1,2,3,4], 1.5)</code> debe devolver <code>1</code> porque es mayor que <code>1</code> (índice 0), pero menor que <code>2</code> (índice 1).
Del mismo modo, <code>getIndexToIns([20,3,5], 19)</code> debe devolver <code>2</code> porque una vez que se ha ordenado la matriz se verá como <code>[3,5,20]</code> y <code>19</code> es menor que <code>20</code> (índice 2) y mayor que <code>5</code> (índice 1). Del mismo modo, <code>getIndexToIns([20,3,5], 19)</code> debe devolver <code>2</code> porque una vez que se ha ordenado la matriz se verá como <code>[3,5,20]</code> y <code>19</code> es menor que <code>20</code> (índice 2) y mayor que <code>5</code> (índice 1).
Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código. Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> si te atascas. Escribe tu propio código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -24,37 +24,37 @@ Recuerda usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-
```yml ```yml
tests: tests:
- text: &#39; <code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> debe devolver <code>3</code> &#39; - text: ' <code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> debe devolver <code>3</code> '
testString: 'assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3, "<code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return <code>3</code>.");' testString: 'assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3, "<code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return <code>3</code>.");'
- text: &#39; <code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> debe devolver un número&#39;. - text: ' <code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> debe devolver un número'
testString: 'assert(typeof(getIndexToIns([10, 20, 30, 40, 50], 35)) === "number", "<code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return a number.");' testString: 'assert(typeof(getIndexToIns([10, 20, 30, 40, 50], 35)) === "number", "<code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return a number.");'
- text: &#39; <code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> debe devolver <code>2</code> &#39; - text: ' <code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> debe devolver <code>2</code> '
testString: 'assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2, "<code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return <code>2</code>.");' testString: 'assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2, "<code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return <code>2</code>.");'
- text: &#39; <code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> debe devolver un número&#39;. - text: ' <code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> debe devolver un número'
testString: 'assert(typeof(getIndexToIns([10, 20, 30, 40, 50], 30)) === "number", "<code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return a number.");' testString: 'assert(typeof(getIndexToIns([10, 20, 30, 40, 50], 30)) === "number", "<code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return a number.");'
- text: &#39; <code>getIndexToIns([40, 60], 50)</code> debe devolver <code>1</code> &#39; - text: ' <code>getIndexToIns([40, 60], 50)</code> debe devolver <code>1</code> '
testString: 'assert(getIndexToIns([40, 60], 50) === 1, "<code>getIndexToIns([40, 60], 50)</code> should return <code>1</code>.");' testString: 'assert(getIndexToIns([40, 60], 50) === 1, "<code>getIndexToIns([40, 60], 50)</code> should return <code>1</code>.");'
- text: &#39; <code>getIndexToIns([40, 60], 50)</code> debe devolver un número.&#39; - text: ' <code>getIndexToIns([40, 60], 50)</code> debe devolver un número.'
testString: 'assert(typeof(getIndexToIns([40, 60], 50)) === "number", "<code>getIndexToIns([40, 60], 50)</code> should return a number.");' testString: 'assert(typeof(getIndexToIns([40, 60], 50)) === "number", "<code>getIndexToIns([40, 60], 50)</code> should return a number.");'
- text: &#39; <code>getIndexToIns([3, 10, 5], 3)</code> debe devolver <code>0</code> &#39; - text: ' <code>getIndexToIns([3, 10, 5], 3)</code> debe devolver <code>0</code> '
testString: 'assert(getIndexToIns([3, 10, 5], 3) === 0, "<code>getIndexToIns([3, 10, 5], 3)</code> should return <code>0</code>.");' testString: 'assert(getIndexToIns([3, 10, 5], 3) === 0, "<code>getIndexToIns([3, 10, 5], 3)</code> should return <code>0</code>.");'
- text: &#39; <code>getIndexToIns([3, 10, 5], 3)</code> debe devolver un número&#39;. - text: ' <code>getIndexToIns([3, 10, 5], 3)</code> debe devolver un número'
testString: 'assert(typeof(getIndexToIns([3, 10, 5], 3)) === "number", "<code>getIndexToIns([3, 10, 5], 3)</code> should return a number.");' testString: 'assert(typeof(getIndexToIns([3, 10, 5], 3)) === "number", "<code>getIndexToIns([3, 10, 5], 3)</code> should return a number.");'
- text: &#39; <code>getIndexToIns([5, 3, 20, 3], 5)</code> debe devolver <code>2</code> &#39; - text: ' <code>getIndexToIns([5, 3, 20, 3], 5)</code> debe devolver <code>2</code> '
testString: 'assert(getIndexToIns([5, 3, 20, 3], 5) === 2, "<code>getIndexToIns([5, 3, 20, 3], 5)</code> should return <code>2</code>.");' testString: 'assert(getIndexToIns([5, 3, 20, 3], 5) === 2, "<code>getIndexToIns([5, 3, 20, 3], 5)</code> should return <code>2</code>.");'
- text: &#39; <code>getIndexToIns([5, 3, 20, 3], 5)</code> debe devolver un número&#39;. - text: ' <code>getIndexToIns([5, 3, 20, 3], 5)</code> debe devolver un número'
testString: 'assert(typeof(getIndexToIns([5, 3, 20, 3], 5)) === "number", "<code>getIndexToIns([5, 3, 20, 3], 5)</code> should return a number.");' testString: 'assert(typeof(getIndexToIns([5, 3, 20, 3], 5)) === "number", "<code>getIndexToIns([5, 3, 20, 3], 5)</code> should return a number.");'
- text: &#39; <code>getIndexToIns([2, 20, 10], 19)</code> debe devolver <code>2</code> &#39; - text: ' <code>getIndexToIns([2, 20, 10], 19)</code> debe devolver <code>2</code> '
testString: 'assert(getIndexToIns([2, 20, 10], 19) === 2, "<code>getIndexToIns([2, 20, 10], 19)</code> should return <code>2</code>.");' testString: 'assert(getIndexToIns([2, 20, 10], 19) === 2, "<code>getIndexToIns([2, 20, 10], 19)</code> should return <code>2</code>.");'
- text: &#39; <code>getIndexToIns([2, 20, 10], 19)</code> debe devolver un número&#39;. - text: ' <code>getIndexToIns([2, 20, 10], 19)</code> debe devolver un número'
testString: 'assert(typeof(getIndexToIns([2, 20, 10], 19)) === "number", "<code>getIndexToIns([2, 20, 10], 19)</code> should return a number.");' testString: 'assert(typeof(getIndexToIns([2, 20, 10], 19)) === "number", "<code>getIndexToIns([2, 20, 10], 19)</code> should return a number.");'
- text: &#39; <code>getIndexToIns([2, 5, 10], 15)</code> debe devolver <code>3</code> &#39; - text: ' <code>getIndexToIns([2, 5, 10], 15)</code> debe devolver <code>3</code> '
testString: 'assert(getIndexToIns([2, 5, 10], 15) === 3, "<code>getIndexToIns([2, 5, 10], 15)</code> should return <code>3</code>.");' testString: 'assert(getIndexToIns([2, 5, 10], 15) === 3, "<code>getIndexToIns([2, 5, 10], 15)</code> should return <code>3</code>.");'
- text: &#39; <code>getIndexToIns([2, 5, 10], 15)</code> debe devolver un número&#39;. - text: ' <code>getIndexToIns([2, 5, 10], 15)</code> debe devolver un número'
testString: 'assert(typeof(getIndexToIns([2, 5, 10], 15)) === "number", "<code>getIndexToIns([2, 5, 10], 15)</code> should return a number.");' testString: 'assert(typeof(getIndexToIns([2, 5, 10], 15)) === "number", "<code>getIndexToIns([2, 5, 10], 15)</code> should return a number.");'
- text: &#39; <code>getIndexToIns([], 1)</code> debe devolver <code>0</code> &#39; - text: ' <code>getIndexToIns([], 1)</code> debe devolver <code>0</code> '
testString: 'assert(getIndexToIns([], 1) === 0, "<code>getIndexToIns([], 1)</code> should return <code>0</code>.");' testString: 'assert(getIndexToIns([], 1) === 0, "<code>getIndexToIns([], 1)</code> should return <code>0</code>.");'
- text: &#39; <code>getIndexToIns([], 1)</code> debe devolver un número.&#39; - text: ' <code>getIndexToIns([], 1)</code> debe devolver un número.'
testString: 'assert(typeof(getIndexToIns([], 1)) === "number", "<code>getIndexToIns([], 1)</code> should return a number.");' testString: 'assert(typeof(getIndexToIns([], 1)) === "number", "<code>getIndexToIns([], 1)</code> should return a number.");'
``` ```

View File

@ -6,22 +6,22 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
La característica fundamental de cualquier estructura de datos es, por supuesto, la capacidad no solo de almacenar datos, sino también de poder recuperar esos datos en el comando. Entonces, ahora que hemos aprendido cómo crear una matriz, comencemos a pensar cómo podemos acceder a la información de esa matriz. La característica fundamental de cualquier estructura de datos es, por supuesto, la capacidad no solo de almacenar datos, sino también de poder recuperar esos datos en el comando. Entonces, ahora que hemos aprendido cómo crear una matriz, comencemos a pensar cómo podemos acceder a la información de esa matriz.
Cuando definimos una matriz simple como se ve a continuación, hay 3 elementos en ella: Cuando definimos una matriz simple como se ve a continuación, hay 3 elementos en ella:
<blockquote>let ourArray = ["a", "b", "c"];</blockquote> <blockquote>let ourArray = ["a", "b", "c"];</blockquote>
En una matriz, cada elemento de la matriz tiene un <dfn>índice</dfn> . Este índice se duplica como la posición de ese elemento en la matriz y cómo se hace referencia a él. Sin embargo, es importante tener en cuenta que las matrices de JavaScript tienen <dfn>un índice de cero</dfn> , lo que significa que el primer elemento de una matriz está en realidad en la posición <em><strong>cero</strong></em> , no en el primero. En una matriz, cada elemento de la matriz tiene un <dfn>índice</dfn> . Este índice se duplica como la posición de ese elemento en la matriz y cómo se hace referencia a él. Sin embargo, es importante tener en cuenta que las matrices de JavaScript tienen <dfn>un índice de cero</dfn> , lo que significa que el primer elemento de una matriz está en realidad en la posición <em><strong>cero</strong></em> , no en el primero.
Para recuperar un elemento de una matriz, podemos encerrar un índice entre paréntesis y agregarlo al final de una matriz, o más comúnmente, a una variable que hace referencia a un objeto de matriz. Esto se conoce como <dfn>notación de corchete</dfn> . Para recuperar un elemento de una matriz, podemos encerrar un índice entre paréntesis y agregarlo al final de una matriz, o más comúnmente, a una variable que hace referencia a un objeto de matriz. Esto se conoce como <dfn>notación de corchete</dfn> .
Por ejemplo, si queremos recuperar la <code>&quot;a&quot;</code> de <code>ourArray</code> y asignarla a una variable, podemos hacerlo con el siguiente código: Por ejemplo, si queremos recuperar la <code>&quot;a&quot;</code> de <code>ourArray</code> y asignarla a una variable, podemos hacerlo con el siguiente código:
<blockquote>let ourVariable = ourArray[0];<br>// ourVariable equals "a"</blockquote> <blockquote>let ourVariable = ourArray[0];<br>// ourVariable equals "a"</blockquote>
Además de acceder al valor asociado a un índice, también puede <em>establecer</em> un índice en un valor usando la misma notación: Además de acceder al valor asociado a un índice, también puede <em>establecer</em> un índice en un valor usando la misma notación:
<blockquote>ourArray[1] = "not b anymore";<br>// ourArray now equals ["a", "not b anymore", "c"];</blockquote> <blockquote>ourArray[1] = "not b anymore";<br>// ourArray now equals ["a", "not b anymore", "c"];</blockquote>
Usando la notación de corchetes, ahora hemos restablecido el elemento en el índice 1 de <code>&quot;b&quot;</code> , a <code>&quot;not b anymore&quot;</code> . Usando la notación de corchetes, ahora hemos restablecido el elemento en el índice 1 de <code>&quot;b&quot;</code> , a <code>&quot;not b anymore&quot;</code> .
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Para completar este desafío, establezca la segunda posición (índice <code>1</code> ) de <code>myArray</code> en cualquier cosa que desee, además de <code>&quot;b&quot;</code> . Para completar este desafío, establezca la segunda posición (índice <code>1</code> ) de <code>myArray</code> en cualquier cosa que desee, además de <code>&quot;b&quot;</code> .
</section> </section>
## Tests ## Tests
@ -29,13 +29,13 @@ Para completar este desafío, establezca la segunda posición (índice <code>1</
```yml ```yml
tests: tests:
- text: &#39; <code>myArray[0]</code> es igual a <code>&quot;a&quot;</code> &#39; - text: ' <code>myArray[0]</code> es igual a <code>&quot;a&quot;</code> '
testString: 'assert.strictEqual(myArray[0], "a", "<code>myArray[0]</code> is equal to <code>"a"</code>");' testString: 'assert.strictEqual(myArray[0], "a", "<code>myArray[0]</code> is equal to <code>"a"</code>");'
- text: &#39; <code>myArray[1]</code> ya no está configurado en <code>&quot;b&quot;</code> &#39; - text: ' <code>myArray[1]</code> ya no está configurado en <code>&quot;b&quot;</code> '
testString: 'assert.notStrictEqual(myArray[1], "b", "<code>myArray[1]</code> is no longer set to <code>"b"</code>");' testString: 'assert.notStrictEqual(myArray[1], "b", "<code>myArray[1]</code> is no longer set to <code>"b"</code>");'
- text: &#39; <code>myArray[2]</code> es igual a <code>&quot;c&quot;</code> &#39; - text: ' <code>myArray[2]</code> es igual a <code>&quot;c&quot;</code> '
testString: 'assert.strictEqual(myArray[2], "c", "<code>myArray[2]</code> is equal to <code>"c"</code>");' testString: 'assert.strictEqual(myArray[2], "c", "<code>myArray[2]</code> is equal to <code>"c"</code>");'
- text: &#39; <code>myArray[3]</code> es igual a <code>&quot;d&quot;</code> &#39; - text: ' <code>myArray[3]</code> es igual a <code>&quot;d&quot;</code> '
testString: 'assert.strictEqual(myArray[3], "d", "<code>myArray[3]</code> is equal to <code>"d"</code>");' testString: 'assert.strictEqual(myArray[3], "d", "<code>myArray[3]</code> is equal to <code>"d"</code>");'
``` ```

View File

@ -6,15 +6,15 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
En el primer desafío de objetos mencionamos el uso de la notación de corchetes como una forma de acceder a los valores de las propiedades mediante la evaluación de una variable. Por ejemplo, imagine que nuestro objeto de <code>foods</code> se está utilizando en un programa para una caja registradora de un supermercado. Tenemos alguna función que configura los <code>foods</code> <code>selectedFood</code> y queremos verificar el objeto de nuestros <code>foods</code> para detectar la presencia de ese alimento. Esto podría parecer: En el primer desafío de objetos mencionamos el uso de la notación de corchetes como una forma de acceder a los valores de las propiedades mediante la evaluación de una variable. Por ejemplo, imagine que nuestro objeto de <code>foods</code> se está utilizando en un programa para una caja registradora de un supermercado. Tenemos alguna función que configura los <code>foods</code> <code>selectedFood</code> y queremos verificar el objeto de nuestros <code>foods</code> para detectar la presencia de ese alimento. Esto podría parecer:
<blockquote>let selectedFood = getCurrentFood(scannedItem);<br>let inventory = foods[selectedFood];</blockquote> <blockquote>let selectedFood = getCurrentFood(scannedItem);<br>let inventory = foods[selectedFood];</blockquote>
Este código evaluará el valor almacenado en la variable <code>selectedFood</code> y devolverá el valor de esa clave en el objeto de <code>foods</code> , o <code>undefined</code> si no está presente. La notación de corchetes es muy útil porque a veces las propiedades de los objetos no se conocen antes del tiempo de ejecución o necesitamos acceder a ellos de una manera más dinámica. Este código evaluará el valor almacenado en la variable <code>selectedFood</code> y devolverá el valor de esa clave en el objeto de <code>foods</code> , o <code>undefined</code> si no está presente. La notación de corchetes es muy útil porque a veces las propiedades de los objetos no se conocen antes del tiempo de ejecución o necesitamos acceder a ellos de una manera más dinámica.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Hemos definido una función, <code>checkInventory</code> , que recibe un elemento escaneado como un argumento. Devuelve el valor actual de la clave <code>scannedItem</code> en el objeto de <code>foods</code> . Puede suponer que solo se proporcionarán claves válidas como argumento para <code>checkInventory</code> . Hemos definido una función, <code>checkInventory</code> , que recibe un elemento escaneado como un argumento. Devuelve el valor actual de la clave <code>scannedItem</code> en el objeto de <code>foods</code> . Puede suponer que solo se proporcionarán claves válidas como argumento para <code>checkInventory</code> .
</section> </section>
## Tests ## Tests
@ -24,7 +24,7 @@ Hemos definido una función, <code>checkInventory</code> , que recibe un element
tests: tests:
- text: <code>checkInventory</code> es una función - text: <code>checkInventory</code> es una función
testString: 'assert.strictEqual(typeof checkInventory, "function", "<code>checkInventory</code> is a function");' testString: 'assert.strictEqual(typeof checkInventory, "function", "<code>checkInventory</code> is a function");'
- text: &#39;El objeto de <code>foods</code> debe tener solo los siguientes pares clave-valor: <code>apples: 25</code> , <code>oranges: 32</code> , <code>plums: 28</code> , <code>bananas: 13</code> , <code>grapes: 35</code> , <code>strawberries: 27</code> &#39; - text: 'El objeto de <code>foods</code> debe tener solo los siguientes pares clave-valor: <code>apples: 25</code> , <code>oranges: 32</code> , <code>plums: 28</code> , <code>bananas: 13</code> , <code>grapes: 35</code> , <code>strawberries: 27</code> '
testString: 'assert.deepEqual(foods, {apples: 25, oranges: 32, plums: 28, bananas: 13, grapes: 35, strawberries: 27}, "The <code>foods</code> object should have only the following key-value pairs: <code>apples: 25</code>, <code>oranges: 32</code>, <code>plums: 28</code>, <code>bananas: 13</code>, <code>grapes: 35</code>, <code>strawberries: 27</code>");' testString: 'assert.deepEqual(foods, {apples: 25, oranges: 32, plums: 28, bananas: 13, grapes: 35, strawberries: 27}, "The <code>foods</code> object should have only the following key-value pairs: <code>apples: 25</code>, <code>oranges: 32</code>, <code>plums: 28</code>, <code>bananas: 13</code>, <code>grapes: 35</code>, <code>strawberries: 27</code>");'
- text: <code>checkInventory(&quot;apples&quot;)</code> debe devolver <code>25</code> - text: <code>checkInventory(&quot;apples&quot;)</code> debe devolver <code>25</code>
testString: 'assert.strictEqual(checkInventory("apples"), 25, "<code>checkInventory("apples")</code> should return <code>25</code>");' testString: 'assert.strictEqual(checkInventory("apples"), 25, "<code>checkInventory("apples")</code> should return <code>25</code>");'

View File

@ -6,16 +6,16 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
La longitud de una matriz, como los tipos de datos que puede contener, no es fija. Las matrices se pueden definir con una longitud de cualquier número de elementos, y los elementos se pueden agregar o eliminar con el tiempo; en otras palabras, los arreglos son <dfn>mutables</dfn> . En este desafío, veremos dos métodos con los cuales podemos modificar mediante programación una matriz: <code>Array.push()</code> y <code>Array.unshift()</code> . La longitud de una matriz, como los tipos de datos que puede contener, no es fija. Las matrices se pueden definir con una longitud de cualquier número de elementos, y los elementos se pueden agregar o eliminar con el tiempo; en otras palabras, los arreglos son <dfn>mutables</dfn> . En este desafío, veremos dos métodos con los cuales podemos modificar mediante programación una matriz: <code>Array.push()</code> y <code>Array.unshift()</code> .
Ambos métodos toman uno o más elementos como parámetros y agregan esos elementos a la matriz en la que se está utilizando el método; el método <code>push()</code> agrega elementos al final de una matriz, y <code>unshift()</code> agrega elementos al principio. Considera lo siguiente: Ambos métodos toman uno o más elementos como parámetros y agregan esos elementos a la matriz en la que se está utilizando el método; el método <code>push()</code> agrega elementos al final de una matriz, y <code>unshift()</code> agrega elementos al principio. Considera lo siguiente:
<blockquote>let twentyThree = 'XXIII';<br>let romanNumerals = ['XXI', 'XXII'];<br><br>romanNumerals.unshift('XIX', 'XX');<br>// now equals ['XIX', 'XX', 'XXI', 'XXII']<br><br>romanNumerals.push(twentyThree);<br>// now equals ['XIX', 'XX', 'XXI', 'XXII', 'XXIII'] <blockquote>let twentyThree = 'XXIII';<br>let romanNumerals = ['XXI', 'XXII'];<br><br>romanNumerals.unshift('XIX', 'XX');<br>// now equals ['XIX', 'XX', 'XXI', 'XXII']<br><br>romanNumerals.push(twentyThree);<br>// now equals ['XIX', 'XX', 'XXI', 'XXII', 'XXIII']
Notice that we can also pass variables, which allows us even greater flexibility in dynamically modifying our array's data. Notice that we can also pass variables, which allows us even greater flexibility in dynamically modifying our array's data.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Hemos definido una función, <code>mixedNumbers</code> , a la que le estamos pasando una matriz como argumento. Modifique la función utilizando <code>push()</code> y <code>unshift()</code> para agregar <code>&#39;I&#39;, 2, &#39;three&#39;</code> al principio de la matriz y <code>7, &#39;VIII&#39;, 9</code> al final para que la matriz devuelta contenga representaciones de los números 1-9 en orden. Hemos definido una función, <code>mixedNumbers</code> , a la que le estamos pasando una matriz como argumento. Modifique la función utilizando <code>push()</code> y <code>unshift()</code> para agregar <code>&#39;I&#39;, 2, &#39;three&#39;</code> al principio de la matriz y <code>7, &#39;VIII&#39;, 9</code> al final para que la matriz devuelta contenga representaciones de los números 1-9 en orden.
</section> </section>
## Tests ## Tests
@ -23,7 +23,7 @@ Hemos definido una función, <code>mixedNumbers</code> , a la que le estamos pas
```yml ```yml
tests: tests:
- text: &#39; <code>mixedNumbers([&quot;IV&quot;, 5, &quot;six&quot;])</code> ahora debe devolver <code>[&quot;I&quot;, 2, &quot;three&quot;, &quot;IV&quot;, 5, &quot;six&quot;, 7, &quot;VIII&quot;, 9]</code> &#39; - text: ' <code>mixedNumbers([&quot;IV&quot;, 5, &quot;six&quot;])</code> ahora debe devolver <code>[&quot;I&quot;, 2, &quot;three&quot;, &quot;IV&quot;, 5, &quot;six&quot;, 7, &quot;VIII&quot;, 9]</code> '
testString: 'assert.deepEqual(mixedNumbers(["IV", 5, "six"]), ["I", 2, "three", "IV", 5, "six", 7, "VIII", 9], "<code>mixedNumbers(["IV", 5, "six"])</code> should now return <code>["I", 2, "three", "IV", 5, "six", 7, "VIII", 9]</code>");' testString: 'assert.deepEqual(mixedNumbers(["IV", 5, "six"]), ["I", 2, "three", "IV", 5, "six", 7, "VIII", 9], "<code>mixedNumbers(["IV", 5, "six"])</code> should now return <code>["I", 2, "three", "IV", 5, "six", 7, "VIII", 9]</code>");'
- text: La función <code>mixedNumbers</code> debe utilizar el método <code>push()</code> - text: La función <code>mixedNumbers</code> debe utilizar el método <code>push()</code>
testString: 'assert.notStrictEqual(mixedNumbers.toString().search(/\.push\(/), -1, "The <code>mixedNumbers</code> function should utilize the <code>push()</code> method");' testString: 'assert.notStrictEqual(mixedNumbers.toString().search(/\.push\(/), -1, "The <code>mixedNumbers</code> function should utilize the <code>push()</code> method");'

View File

@ -6,15 +6,15 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Recuerda que en el último desafío mencionamos que <code>splice()</code> puede tomar hasta tres parámetros? Bueno, podemos ir un paso más allá con <code>splice()</code> ; además de eliminar elementos, podemos usar ese tercer parámetro, que representa uno o más elementos, para <em>agregarlos</em> también. Esto puede ser increíblemente útil para cambiar rápidamente un elemento, o un conjunto de elementos, por otro. Por ejemplo, supongamos que está almacenando una combinación de colores para un conjunto de elementos DOM en una matriz, y desea cambiar dinámicamente un color en función de alguna acción: Recuerda que en el último desafío mencionamos que <code>splice()</code> puede tomar hasta tres parámetros? Bueno, podemos ir un paso más allá con <code>splice()</code> ; además de eliminar elementos, podemos usar ese tercer parámetro, que representa uno o más elementos, para <em>agregarlos</em> también. Esto puede ser increíblemente útil para cambiar rápidamente un elemento, o un conjunto de elementos, por otro. Por ejemplo, supongamos que está almacenando una combinación de colores para un conjunto de elementos DOM en una matriz, y desea cambiar dinámicamente un color en función de alguna acción:
<blockquote>function colorChange(arr, index, newColor) {<br>&nbsp;&nbsp;arr.splice(index, 1, newColor);<br>&nbsp;&nbsp;return arr;<br>}<br><br>let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf'];<br><br>colorScheme = colorChange(colorScheme, 2, '#332327');<br>// we have removed '#bb7e8c' and added '#332327' in its place<br>// colorScheme now equals ['#878787', '#a08794', '#332327', '#c9b6be', '#d1becf']</blockquote> <blockquote>function colorChange(arr, index, newColor) {<br>&nbsp;&nbsp;arr.splice(index, 1, newColor);<br>&nbsp;&nbsp;return arr;<br>}<br><br>let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf'];<br><br>colorScheme = colorChange(colorScheme, 2, '#332327');<br>// we have removed '#bb7e8c' and added '#332327' in its place<br>// colorScheme now equals ['#878787', '#a08794', '#332327', '#c9b6be', '#d1becf']</blockquote>
Esta función toma una matriz de valores hexadecimales, un índice para eliminar un elemento y el nuevo color para reemplazar el elemento eliminado. El valor de retorno es una matriz que contiene un esquema de color recién modificado. Si bien este ejemplo está un poco simplificado, podemos ver el valor que puede tener el uso de <code>splice()</code> en su potencial máximo. Esta función toma una matriz de valores hexadecimales, un índice para eliminar un elemento y el nuevo color para reemplazar el elemento eliminado. El valor de retorno es una matriz que contiene un esquema de color recién modificado. Si bien este ejemplo está un poco simplificado, podemos ver el valor que puede tener el uso de <code>splice()</code> en su potencial máximo.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Hemos definido una función, <code>htmlColorNames</code> , que toma una matriz de colores HTML como argumento. Modifique la función utilizando <code>splice()</code> para eliminar los dos primeros elementos de la matriz y agregue <code>&#39;DarkSalmon&#39;</code> y <code>&#39;BlanchedAlmond&#39;</code> en sus respectivos lugares. Hemos definido una función, <code>htmlColorNames</code> , que toma una matriz de colores HTML como argumento. Modifique la función utilizando <code>splice()</code> para eliminar los dos primeros elementos de la matriz y agregue <code>&#39;DarkSalmon&#39;</code> y <code>&#39;BlanchedAlmond&#39;</code> en sus respectivos lugares.
</section> </section>
## Tests ## Tests
@ -22,7 +22,7 @@ Hemos definido una función, <code>htmlColorNames</code> , que toma una matriz d
```yml ```yml
tests: tests:
- text: &#39; <code>htmlColorNames</code> debería devolver <code>[&quot;DarkSalmon&quot;, &quot;BlanchedAlmond&quot;, &quot;LavenderBlush&quot;, &quot;PaleTurqoise&quot;, &quot;FireBrick&quot;]</code> &#39; - text: ' <code>htmlColorNames</code> debería devolver <code>[&quot;DarkSalmon&quot;, &quot;BlanchedAlmond&quot;, &quot;LavenderBlush&quot;, &quot;PaleTurqoise&quot;, &quot;FireBrick&quot;]</code> '
testString: 'assert.deepEqual(htmlColorNames(["DarkGoldenRod", "WhiteSmoke", "LavenderBlush", "PaleTurqoise", "FireBrick"]), ["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"], "<code>htmlColorNames</code> should return <code>["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"]</code>");' testString: 'assert.deepEqual(htmlColorNames(["DarkGoldenRod", "WhiteSmoke", "LavenderBlush", "PaleTurqoise", "FireBrick"]), ["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"], "<code>htmlColorNames</code> should return <code>["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"]</code>");'
- text: La función <code>htmlColorNames</code> debe utilizar el método <code>splice()</code> - text: La función <code>htmlColorNames</code> debe utilizar el método <code>splice()</code>
testString: 'assert(/.splice/.test(code), "The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method");' testString: 'assert(/.splice/.test(code), "The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method");'

View File

@ -6,15 +6,15 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Dado que las matrices se pueden cambiar, o <em>mutar</em> , en cualquier momento, no hay ninguna garantía sobre dónde estará una determinada pieza de datos en una matriz determinada, o si ese elemento aún existe. Afortunadamente, JavaScript nos proporciona otro método <code>indexOf()</code> , <code>indexOf()</code> , que nos permite verificar rápida y fácilmente la presencia de un elemento en una matriz. <code>indexOf()</code> toma un elemento como parámetro y, cuando se le llama, devuelve la posición o el índice de ese elemento, o <code>-1</code> si el elemento no existe en la matriz. Dado que las matrices se pueden cambiar, o <em>mutar</em> , en cualquier momento, no hay ninguna garantía sobre dónde estará una determinada pieza de datos en una matriz determinada, o si ese elemento aún existe. Afortunadamente, JavaScript nos proporciona otro método <code>indexOf()</code> , <code>indexOf()</code> , que nos permite verificar rápida y fácilmente la presencia de un elemento en una matriz. <code>indexOf()</code> toma un elemento como parámetro y, cuando se le llama, devuelve la posición o el índice de ese elemento, o <code>-1</code> si el elemento no existe en la matriz.
Por ejemplo: Por ejemplo:
<blockquote>let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];<br><br>fruits.indexOf('dates') // returns -1<br>fruits.indexOf('oranges') // returns 2<br>fruits.indexOf('pears') // returns 1, the first index at which the element exists</blockquote> <blockquote>let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];<br><br>fruits.indexOf('dates') // returns -1<br>fruits.indexOf('oranges') // returns 2<br>fruits.indexOf('pears') // returns 1, the first index at which the element exists</blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
<code>indexOf()</code> puede ser increíblemente útil para verificar rápidamente la presencia de un elemento en una matriz. Hemos definido una función, <code>quickCheck</code> , que toma una matriz y un elemento como argumentos. Modifique la función utilizando <code>indexOf()</code> para que devuelva <code>true</code> si el elemento pasado existe en la matriz, y <code>false</code> si no lo hace. <code>indexOf()</code> puede ser increíblemente útil para verificar rápidamente la presencia de un elemento en una matriz. Hemos definido una función, <code>quickCheck</code> , que toma una matriz y un elemento como argumentos. Modifique la función utilizando <code>indexOf()</code> para que devuelva <code>true</code> si el elemento pasado existe en la matriz, y <code>false</code> si no lo hace.
</section> </section>
## Tests ## Tests
@ -22,13 +22,13 @@ Por ejemplo:
```yml ```yml
tests: tests:
- text: &#39; <code>quickCheck([&quot;squash&quot;, &quot;onions&quot;, &quot;shallots&quot;], &quot;mushrooms&quot;)</code> debe devolver <code>false</code> &#39; - text: ' <code>quickCheck([&quot;squash&quot;, &quot;onions&quot;, &quot;shallots&quot;], &quot;mushrooms&quot;)</code> debe devolver <code>false</code> '
testString: 'assert.strictEqual(quickCheck(["squash", "onions", "shallots"], "mushrooms"), false, "<code>quickCheck(["squash", "onions", "shallots"], "mushrooms")</code> should return <code>false</code>");' testString: 'assert.strictEqual(quickCheck(["squash", "onions", "shallots"], "mushrooms"), false, "<code>quickCheck(["squash", "onions", "shallots"], "mushrooms")</code> should return <code>false</code>");'
- text: &#39; <code>quickCheck([&quot;squash&quot;, &quot;onions&quot;, &quot;shallots&quot;], &quot;onions&quot;)</code> debe devolver <code>true</code> &quot; - text: ' <code>quickCheck([&quot;squash&quot;, &quot;onions&quot;, &quot;shallots&quot;], &quot;onions&quot;)</code> debe devolver <code>true</code> &quot;
testString: 'assert.strictEqual(quickCheck(["squash", "onions", "shallots"], "onions"), true, "<code>quickCheck(["squash", "onions", "shallots"], "onions")</code> should return <code>true</code>");' testString: 'assert.strictEqual(quickCheck(["squash", "onions", "shallots"], "onions"), true, "<code>quickCheck(["squash", "onions", "shallots"], "onions")</code> should return <code>true</code>");'
- text: &#39; <code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> debe devolver <code>true</code> &#39; - text: ' <code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> debe devolver <code>true</code> '
testString: 'assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true, "<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>");' testString: 'assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true, "<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>");'
- text: &#39; <code>quickCheck([true, false, false], undefined)</code> debe devolver <code>false</code> &#39; - text: ' <code>quickCheck([true, false, false], undefined)</code> debe devolver <code>false</code> '
testString: 'assert.strictEqual(quickCheck([true, false, false], undefined), false, "<code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>");' testString: 'assert.strictEqual(quickCheck([true, false, false], undefined), false, "<code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>");'
- text: La función <code>quickCheck</code> debe utilizar el método <code>indexOf()</code> - text: La función <code>quickCheck</code> debe utilizar el método <code>indexOf()</code>
testString: 'assert.notStrictEqual(quickCheck.toString().search(/\.indexOf\(/), -1, "The <code>quickCheck</code> function should utilize the <code>indexOf()</code> method");' testString: 'assert.notStrictEqual(quickCheck.toString().search(/\.indexOf\(/), -1, "The <code>quickCheck</code> function should utilize the <code>indexOf()</code> method");'

View File

@ -6,14 +6,14 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Ahora podemos agregar, modificar y eliminar claves de objetos. Pero, ¿y si solo quisiéramos saber si un objeto tiene una propiedad específica? JavaScript nos proporciona dos formas diferentes de hacer esto. Uno usa el método <code>hasOwnProperty()</code> y el otro usa la palabra clave <code>in</code> . Si tenemos un objeto <code>users</code> con una propiedad de <code>Alan</code> , podríamos verificar su presencia de una de las siguientes maneras: Ahora podemos agregar, modificar y eliminar claves de objetos. Pero, ¿y si solo quisiéramos saber si un objeto tiene una propiedad específica? JavaScript nos proporciona dos formas diferentes de hacer esto. Uno usa el método <code>hasOwnProperty()</code> y el otro usa la palabra clave <code>in</code> . Si tenemos un objeto <code>users</code> con una propiedad de <code>Alan</code> , podríamos verificar su presencia de una de las siguientes maneras:
<blockquote>users.hasOwnProperty('Alan');<br>'Alan' in users;<br>// both return true</blockquote> <blockquote>users.hasOwnProperty('Alan');<br>'Alan' in users;<br>// both return true</blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Hemos creado un objeto, <code>users</code> , con algunos usuarios en él y una función <code>isEveryoneHere</code> , a la que pasamos el objeto de los <code>users</code> como un argumento. Termine de escribir esta función de modo que devuelva <code>true</code> solo si el objeto de los <code>users</code> contiene los cuatro nombres, <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> , como claves, y en caso contrario, <code>false</code> . Hemos creado un objeto, <code>users</code> , con algunos usuarios en él y una función <code>isEveryoneHere</code> , a la que pasamos el objeto de los <code>users</code> como un argumento. Termine de escribir esta función de modo que devuelva <code>true</code> solo si el objeto de los <code>users</code> contiene los cuatro nombres, <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> , como claves, y en caso contrario, <code>false</code> .
</section> </section>
## Tests ## Tests
@ -21,11 +21,11 @@ Hemos creado un objeto, <code>users</code> , con algunos usuarios en él y una f
```yml ```yml
tests: tests:
- text: &#39;El objeto de los <code>users</code> solo contiene las claves <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> &#39; - text: 'El objeto de los <code>users</code> solo contiene las claves <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> '
testString: 'assert("Alan" in users && "Jeff" in users && "Sarah" in users && "Ryan" in users && Object.keys(users).length === 4, "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>");' testString: 'assert("Alan" in users && "Jeff" in users && "Sarah" in users && "Ryan" in users && Object.keys(users).length === 4, "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>");'
- text: &#39;La función <code>isEveryoneHere</code> devuelve <code>true</code> si <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> son propiedades del objeto de los <code>users</code> &#39; - text: 'La función <code>isEveryoneHere</code> devuelve <code>true</code> si <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> son propiedades del objeto de los <code>users</code> '
testString: 'assert(isEveryoneHere(users) === true, "The function <code>isEveryoneHere</code> returns <code>true</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are properties on the <code>users</code> object");' testString: 'assert(isEveryoneHere(users) === true, "The function <code>isEveryoneHere</code> returns <code>true</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are properties on the <code>users</code> object");'
- text: &#39;La función <code>isEveryoneHere</code> devuelve <code>false</code> si <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> no son propiedades del objeto de los <code>users</code> &#39; - text: 'La función <code>isEveryoneHere</code> devuelve <code>false</code> si <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> no son propiedades del objeto de los <code>users</code> '
testString: 'assert((function() { delete users.Alan; delete users.Jeff; delete users.Sarah; delete users.Ryan; return isEveryoneHere(users) })() === false, "The function <code>isEveryoneHere</code> returns <code>false</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are not properties on the <code>users</code> object");' testString: 'assert((function() { delete users.Alan; delete users.Jeff; delete users.Sarah; delete users.Ryan; return isEveryoneHere(users) })() === false, "The function <code>isEveryoneHere</code> returns <code>false</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are not properties on the <code>users</code> object");'
``` ```

View File

@ -6,15 +6,15 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Otra gran ventaja del operador de <dfn>difusión</dfn> , es la capacidad de combinar arreglos, o de insertar todos los elementos de un arreglo en otro, en cualquier índice. Con sintaxis más tradicionales, podemos concatenar matrices, pero esto solo nos permite combinar matrices al final de una y al comienzo de otra. La sintaxis de propagación hace que la siguiente operación sea extremadamente simple: Otra gran ventaja del operador de <dfn>difusión</dfn> , es la capacidad de combinar arreglos, o de insertar todos los elementos de un arreglo en otro, en cualquier índice. Con sintaxis más tradicionales, podemos concatenar matrices, pero esto solo nos permite combinar matrices al final de una y al comienzo de otra. La sintaxis de propagación hace que la siguiente operación sea extremadamente simple:
<blockquote>let thisArray = ['sage', 'rosemary', 'parsley', 'thyme'];<br><br>let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];<br>// thatArray now equals ['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']</blockquote> <blockquote>let thisArray = ['sage', 'rosemary', 'parsley', 'thyme'];<br><br>let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];<br>// thatArray now equals ['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']</blockquote>
Usando la sintaxis de propagación, acabamos de lograr una operación que hubiera sido más compleja y más detallada si hubiéramos usado métodos tradicionales. Usando la sintaxis de propagación, acabamos de lograr una operación que hubiera sido más compleja y más detallada si hubiéramos usado métodos tradicionales.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Hemos definido una función <code>spreadOut</code> que devuelve la <code>sentence</code> variable, modifique la función usando el operador de <dfn>propagación</dfn> para que devuelva la matriz <code>[&#39;learning&#39;, &#39;to&#39;, &#39;code&#39;, &#39;is&#39;, &#39;fun&#39;]</code> . Hemos definido una función <code>spreadOut</code> que devuelve la <code>sentence</code> variable, modifique la función usando el operador de <dfn>propagación</dfn> para que devuelva la matriz <code>[&#39;learning&#39;, &#39;to&#39;, &#39;code&#39;, &#39;is&#39;, &#39;fun&#39;]</code> .
</section> </section>
## Tests ## Tests
@ -22,7 +22,7 @@ Hemos definido una función <code>spreadOut</code> que devuelve la <code>sentenc
```yml ```yml
tests: tests:
- text: &#39; <code>spreadOut</code> debería devolver <code>[&quot;learning&quot;, &quot;to&quot;, &quot;code&quot;, &quot;is&quot;, &quot;fun&quot;]</code> &#39; - text: ' <code>spreadOut</code> debería devolver <code>[&quot;learning&quot;, &quot;to&quot;, &quot;code&quot;, &quot;is&quot;, &quot;fun&quot;]</code> '
testString: 'assert.deepEqual(spreadOut(), ["learning", "to", "code", "is", "fun"], "<code>spreadOut</code> should return <code>["learning", "to", "code", "is", "fun"]</code>");' testString: 'assert.deepEqual(spreadOut(), ["learning", "to", "code", "is", "fun"], "<code>spreadOut</code> should return <code>["learning", "to", "code", "is", "fun"]</code>");'
- text: La función <code>spreadOut</code> debe utilizar la sintaxis de difusión - text: La función <code>spreadOut</code> debe utilizar la sintaxis de difusión
testString: 'assert.notStrictEqual(spreadOut.toString().search(/[...]/), -1, "The <code>spreadOut</code> function should utilize spread syntax");' testString: 'assert.notStrictEqual(spreadOut.toString().search(/[...]/), -1, "The <code>spreadOut</code> function should utilize spread syntax");'

View File

@ -6,15 +6,15 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Mientras <code>slice()</code> nos permite ser selectivos sobre qué elementos de una matriz copiar, entre otras muchas tareas útiles, el nuevo <dfn>operador de difusión de</dfn> ES6 nos permite copiar fácilmente <em>todos</em> los elementos de una matriz, en orden, con una sintaxis simple y altamente legible . La sintaxis de propagación simplemente se ve así: <code>...</code> Mientras <code>slice()</code> nos permite ser selectivos sobre qué elementos de una matriz copiar, entre otras muchas tareas útiles, el nuevo <dfn>operador de difusión de</dfn> ES6 nos permite copiar fácilmente <em>todos</em> los elementos de una matriz, en orden, con una sintaxis simple y altamente legible . La sintaxis de propagación simplemente se ve así: <code>...</code>
En la práctica, podemos usar el operador de propagación para copiar una matriz de la siguiente manera: En la práctica, podemos usar el operador de propagación para copiar una matriz de la siguiente manera:
<blockquote>let thisArray = [true, true, undefined, false, null];<br>let thatArray = [...thisArray];<br>// thatArray equals [true, true, undefined, false, null]<br>// thisArray remains unchanged, and is identical to thatArray</blockquote> <blockquote>let thisArray = [true, true, undefined, false, null];<br>let thatArray = [...thisArray];<br>// thatArray equals [true, true, undefined, false, null]<br>// thisArray remains unchanged, and is identical to thatArray</blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Hemos definido una función, <code>copyMachine</code> que toma <code>arr</code> (una matriz) y <code>num</code> (un número) como argumentos. Se supone que la función devuelve una nueva matriz formada por <code>num</code> copias de <code>arr</code> . Hemos hecho la mayor parte del trabajo por usted, pero todavía no funciona del todo bien. Modifique la función utilizando la sintaxis de dispersión para que funcione correctamente (sugerencia: ¡otro método que ya hemos cubierto podría ser útil aquí!). Hemos definido una función, <code>copyMachine</code> que toma <code>arr</code> (una matriz) y <code>num</code> (un número) como argumentos. Se supone que la función devuelve una nueva matriz formada por <code>num</code> copias de <code>arr</code> . Hemos hecho la mayor parte del trabajo por usted, pero todavía no funciona del todo bien. Modifique la función utilizando la sintaxis de dispersión para que funcione correctamente (sugerencia: ¡otro método que ya hemos cubierto podría ser útil aquí!).
</section> </section>
## Tests ## Tests
@ -22,13 +22,13 @@ Hemos definido una función, <code>copyMachine</code> que toma <code>arr</code>
```yml ```yml
tests: tests:
- text: &#39; <code>copyMachine([true, false, true], 2)</code> debe devolver <code>[[true, false, true], [true, false, true]]</code> &#39; - text: ' <code>copyMachine([true, false, true], 2)</code> debe devolver <code>[[true, false, true], [true, false, true]]</code> '
testString: 'assert.deepEqual(copyMachine([true, false, true], 2), [[true, false, true], [true, false, true]], "<code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>");' testString: 'assert.deepEqual(copyMachine([true, false, true], 2), [[true, false, true], [true, false, true]], "<code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>");'
- text: &#39; <code>copyMachine([1, 2, 3], 5)</code> debe devolver <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code> &#39; - text: ' <code>copyMachine([1, 2, 3], 5)</code> debe devolver <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code> '
testString: 'assert.deepEqual(copyMachine([1, 2, 3], 5), [[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]], "<code>copyMachine([1, 2, 3], 5)</code> should return <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code>");' testString: 'assert.deepEqual(copyMachine([1, 2, 3], 5), [[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]], "<code>copyMachine([1, 2, 3], 5)</code> should return <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code>");'
- text: &#39; <code>copyMachine([true, true, null], 1)</code> debe devolver <code>[[true, true, null]]</code> &#39; - text: ' <code>copyMachine([true, true, null], 1)</code> debe devolver <code>[[true, true, null]]</code> '
testString: 'assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]], "<code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>");' testString: 'assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]], "<code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>");'
- text: &#39; <code>copyMachine([&quot;it works&quot;], 3)</code> debería devolver <code>[[&quot;it works&quot;], [&quot;it works&quot;], [&quot;it works&quot;]]</code> &#39; - text: ' <code>copyMachine([&quot;it works&quot;], 3)</code> debería devolver <code>[[&quot;it works&quot;], [&quot;it works&quot;], [&quot;it works&quot;]]</code> '
testString: 'assert.deepEqual(copyMachine(["it works"], 3), [["it works"], ["it works"], ["it works"]], "<code>copyMachine(["it works"], 3)</code> should return <code>[["it works"], ["it works"], ["it works"]]</code>");' testString: 'assert.deepEqual(copyMachine(["it works"], 3), [["it works"], ["it works"], ["it works"]], "<code>copyMachine(["it works"], 3)</code> should return <code>[["it works"], ["it works"], ["it works"]]</code>");'
- text: La función <code>copyMachine</code> debe utilizar el <code>spread operator</code> con array <code>arr</code> - text: La función <code>copyMachine</code> debe utilizar el <code>spread operator</code> con array <code>arr</code>
testString: 'assert.notStrictEqual(copyMachine.toString().indexOf(".concat(_toConsumableArray(arr))"), -1, "The <code>copyMachine</code> function should utilize the <code>spread operator</code> with array <code>arr</code>");' testString: 'assert.notStrictEqual(copyMachine.toString().indexOf(".concat(_toConsumableArray(arr))"), -1, "The <code>copyMachine</code> function should utilize the <code>spread operator</code> with array <code>arr</code>");'

View File

@ -6,15 +6,15 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
El siguiente método que cubriremos es <code>slice()</code> . <code>slice()</code> , en lugar de modificar una matriz, copia o <em>extrae</em> , un número dado de elementos a una nueva matriz, dejando la matriz a la que se llama sin tocar. <code>slice()</code> toma solo 2 parámetros: el primero es el índice para comenzar la extracción y el segundo es el índice para detener la extracción (la extracción ocurrirá hasta, pero sin incluir el elemento en este índice). Considera esto: El siguiente método que cubriremos es <code>slice()</code> . <code>slice()</code> , en lugar de modificar una matriz, copia o <em>extrae</em> , un número dado de elementos a una nueva matriz, dejando la matriz a la que se llama sin tocar. <code>slice()</code> toma solo 2 parámetros: el primero es el índice para comenzar la extracción y el segundo es el índice para detener la extracción (la extracción ocurrirá hasta, pero sin incluir el elemento en este índice). Considera esto:
<blockquote>let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];<br><br>let todaysWeather = weatherConditions.slice(1, 3);<br>// todaysWeather equals ['snow', 'sleet'];<br>// weatherConditions still equals ['rain', 'snow', 'sleet', 'hail', 'clear']<br></blockquote> <blockquote>let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];<br><br>let todaysWeather = weatherConditions.slice(1, 3);<br>// todaysWeather equals ['snow', 'sleet'];<br>// weatherConditions still equals ['rain', 'snow', 'sleet', 'hail', 'clear']<br></blockquote>
En efecto, hemos creado una nueva matriz extrayendo elementos de una matriz existente. En efecto, hemos creado una nueva matriz extrayendo elementos de una matriz existente.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Hemos definido una función, <code>forecast</code> , que toma una matriz como argumento. Modifique la función utilizando <code>slice()</code> para extraer información de la matriz de argumentos y devuelva una nueva matriz que contenga los elementos <code>&#39;warm&#39;</code> y <code>&#39;sunny&#39;</code> . Hemos definido una función, <code>forecast</code> , que toma una matriz como argumento. Modifique la función utilizando <code>slice()</code> para extraer información de la matriz de argumentos y devuelva una nueva matriz que contenga los elementos <code>&#39;warm&#39;</code> y <code>&#39;sunny&#39;</code> .
</section> </section>
## Tests ## Tests
@ -22,7 +22,7 @@ Hemos definido una función, <code>forecast</code> , que toma una matriz como ar
```yml ```yml
tests: tests:
- text: &#39; <code>forecast</code> debería devolver <code>[&quot;warm&quot;, &quot;sunny&quot;]&#39;</code> - text: ' <code>forecast</code> debería devolver <code>[&quot;warm&quot;, &quot;sunny&quot;]&#39;</code>
testString: 'assert.deepEqual(forecast(["cold", "rainy", "warm", "sunny", "cool", "thunderstorms"]), ["warm", "sunny"], "<code>forecast</code> should return <code>["warm", "sunny"]");' testString: 'assert.deepEqual(forecast(["cold", "rainy", "warm", "sunny", "cool", "thunderstorms"]), ["warm", "sunny"], "<code>forecast</code> should return <code>["warm", "sunny"]");'
- text: La función de <code>forecast</code> debe utilizar el método <code>slice()</code> - text: La función de <code>forecast</code> debe utilizar el método <code>slice()</code>
testString: 'assert(/\.slice\(/.test(code), "The <code>forecast</code> function should utilize the <code>slice()</code> method");' testString: 'assert(/\.slice\(/.test(code), "The <code>forecast</code> function should utilize the <code>slice()</code> method");'

View File

@ -6,20 +6,20 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
impresionante! ¡Acabas de aprender un montón de arreglos! Este ha sido un resumen de nivel bastante alto, y hay mucho más que aprender sobre el trabajo con matrices, muchas de las cuales veremos en secciones posteriores. Pero antes de pasar a mirar <dfn>Objetos</dfn> , echemos un vistazo más y veamos cómo los arreglos pueden volverse un poco más complejos de lo que hemos visto en desafíos anteriores. impresionante! ¡Acabas de aprender un montón de arreglos! Este ha sido un resumen de nivel bastante alto, y hay mucho más que aprender sobre el trabajo con matrices, muchas de las cuales veremos en secciones posteriores. Pero antes de pasar a mirar <dfn>Objetos</dfn> , echemos un vistazo más y veamos cómo los arreglos pueden volverse un poco más complejos de lo que hemos visto en desafíos anteriores.
Una de las características más poderosas cuando se piensa en los arreglos como estructuras de datos, es que los arreglos pueden contener, o incluso estar completamente compuestos de otros arreglos. Hemos visto matrices que contienen matrices en desafíos anteriores, pero bastante simples. Sin embargo, las matrices pueden contener una profundidad infinita de matrices que pueden contener otras matrices, cada una con sus propios niveles arbitrarios de profundidad, y así sucesivamente. De esta manera, una matriz puede convertirse muy rápidamente en una estructura de datos muy compleja, conocida como una matriz <dfn>multidimensional</dfn> o anidada. Considera el siguiente ejemplo: Una de las características más poderosas cuando se piensa en los arreglos como estructuras de datos, es que los arreglos pueden contener, o incluso estar completamente compuestos de otros arreglos. Hemos visto matrices que contienen matrices en desafíos anteriores, pero bastante simples. Sin embargo, las matrices pueden contener una profundidad infinita de matrices que pueden contener otras matrices, cada una con sus propios niveles arbitrarios de profundidad, y así sucesivamente. De esta manera, una matriz puede convertirse muy rápidamente en una estructura de datos muy compleja, conocida como una matriz <dfn>multidimensional</dfn> o anidada. Considera el siguiente ejemplo:
<blockquote>let nestedArray = [ // top, or first level - the outer most array<br>&nbsp;&nbsp;['deep'], // an array within an array, 2 levels of depth<br>&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;['deeper'], ['deeper'] // 2 arrays nested 3 levels deep<br>&nbsp;&nbsp;],<br>&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['deepest'], ['deepest'] // 2 arrays nested 4 levels deep<br>&nbsp;&nbsp;&nbsp;&nbsp;],<br>&nbsp;&nbsp;&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['deepest-est?'] // an array nested 5 levels deep<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<br>&nbsp;&nbsp;&nbsp;&nbsp;]<br>&nbsp;&nbsp;]<br>];</blockquote> <blockquote>let nestedArray = [ // top, or first level - the outer most array<br>&nbsp;&nbsp;['deep'], // an array within an array, 2 levels of depth<br>&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;['deeper'], ['deeper'] // 2 arrays nested 3 levels deep<br>&nbsp;&nbsp;],<br>&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['deepest'], ['deepest'] // 2 arrays nested 4 levels deep<br>&nbsp;&nbsp;&nbsp;&nbsp;],<br>&nbsp;&nbsp;&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['deepest-est?'] // an array nested 5 levels deep<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<br>&nbsp;&nbsp;&nbsp;&nbsp;]<br>&nbsp;&nbsp;]<br>];</blockquote>
Si bien este ejemplo puede parecer complicado, este nivel de complejidad no es inaudito, o incluso inusual, cuando se trata de grandes cantidades de datos. Si bien este ejemplo puede parecer complicado, este nivel de complejidad no es inaudito, o incluso inusual, cuando se trata de grandes cantidades de datos.
Sin embargo, aún podemos acceder fácilmente a los niveles más profundos de una matriz de este complejo con notación de corchete: Sin embargo, aún podemos acceder fácilmente a los niveles más profundos de una matriz de este complejo con notación de corchete:
<blockquote>console.log(nestedArray[2][1][0][0][0]);<br>// logs: deepest-est?</blockquote> <blockquote>console.log(nestedArray[2][1][0][0][0]);<br>// logs: deepest-est?</blockquote>
Y ahora que sabemos dónde está ese dato, podemos restablecerlo si necesitamos: Y ahora que sabemos dónde está ese dato, podemos restablecerlo si necesitamos:
<blockquote>nestedArray[2][1][0][0][0] = 'deeper still';<br><br>console.log(nestedArray[2][1][0][0][0]);<br>// now logs: deeper still</blockquote> <blockquote>nestedArray[2][1][0][0][0] = 'deeper still';<br><br>console.log(nestedArray[2][1][0][0][0]);<br>// now logs: deeper still</blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Hemos definido una variable, <code>myNestedArray</code> , igual a una matriz. Modifique <code>myNestedArray</code> , utilizando cualquier combinación de <dfn>cadenas</dfn> , <dfn>números</dfn> y <dfn>valores booleanos</dfn> para los elementos de datos, de modo que tenga exactamente cinco niveles de profundidad (recuerde, la matriz más externa es el nivel 1). En algún lugar en el tercer nivel, incluye la cadena <code>&#39;deep&#39;</code> , en el cuarto nivel, incluyen la cadena <code>&#39;deeper&#39;</code> , y en el quinto nivel, incluyen la cadena <code>&#39;deepest&#39;</code> . Hemos definido una variable, <code>myNestedArray</code> , igual a una matriz. Modifique <code>myNestedArray</code> , utilizando cualquier combinación de <dfn>cadenas</dfn> , <dfn>números</dfn> y <dfn>valores booleanos</dfn> para los elementos de datos, de modo que tenga exactamente cinco niveles de profundidad (recuerde, la matriz más externa es el nivel 1). En algún lugar en el tercer nivel, incluye la cadena <code>&#39;deep&#39;</code> , en el cuarto nivel, incluyen la cadena <code>&#39;deeper&#39;</code> , y en el quinto nivel, incluyen la cadena <code>&#39;deepest&#39;</code> .
</section> </section>
## Tests ## Tests
@ -27,7 +27,7 @@ Hemos definido una variable, <code>myNestedArray</code> , igual a una matriz. Mo
```yml ```yml
tests: tests:
- text: &#39; <code>myNestedArray</code> debe contener solo números, booleanos y cadenas como elementos de datos&#39; - text: ' <code>myNestedArray</code> debe contener solo números, booleanos y cadenas como elementos de datos'
testString: 'assert.strictEqual((function(arr) { let flattened = (function flatten(arr) { const flat = [].concat(...arr); return flat.some (Array.isArray) ? flatten(flat) : flat; })(arr); for (let i = 0; i < flattened.length; i++) { if ( typeof flattened[i] !== "number" && typeof flattened[i] !== "string" && typeof flattened[i] !== "boolean") { return false } } return true })(myNestedArray), true, "<code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements");' testString: 'assert.strictEqual((function(arr) { let flattened = (function flatten(arr) { const flat = [].concat(...arr); return flat.some (Array.isArray) ? flatten(flat) : flat; })(arr); for (let i = 0; i < flattened.length; i++) { if ( typeof flattened[i] !== "number" && typeof flattened[i] !== "string" && typeof flattened[i] !== "boolean") { return false } } return true })(myNestedArray), true, "<code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements");'
- text: <code>myNestedArray</code> debe tener exactamente 5 niveles de profundidad - text: <code>myNestedArray</code> debe tener exactamente 5 niveles de profundidad
testString: 'assert.strictEqual((function(arr) {let depth = 0;function arrayDepth(array, i, d) { if (Array.isArray(array[i])) { arrayDepth(array[i], 0, d + 1);} else { depth = (d > depth) ? d : depth;}if (i < array.length) { arrayDepth(array, i + 1, d);} }arrayDepth(arr, 0, 0);return depth;})(myNestedArray), 4, "<code>myNestedArray</code> should have exactly 5 levels of depth");' testString: 'assert.strictEqual((function(arr) {let depth = 0;function arrayDepth(array, i, d) { if (Array.isArray(array[i])) { arrayDepth(array[i], 0, d + 1);} else { depth = (d > depth) ? d : depth;}if (i < array.length) { arrayDepth(array, i + 1, d);} }arrayDepth(arr, 0, 0);return depth;})(myNestedArray), 4, "<code>myNestedArray</code> should have exactly 5 levels of depth");'

View File

@ -6,13 +6,13 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
También podemos generar una matriz que contiene todas las claves almacenadas en un objeto usando el método <code>Object.keys()</code> y pasando un objeto como argumento. Esto devolverá una matriz con cadenas que representan cada propiedad en el objeto. Nuevamente, no habrá un orden específico para las entradas en la matriz. También podemos generar una matriz que contiene todas las claves almacenadas en un objeto usando el método <code>Object.keys()</code> y pasando un objeto como argumento. Esto devolverá una matriz con cadenas que representan cada propiedad en el objeto. Nuevamente, no habrá un orden específico para las entradas en la matriz.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Termine de escribir la función <code>getArrayOfUsers</code> para que devuelva una matriz que contenga todas las propiedades en el objeto que recibe como argumento. Termine de escribir la función <code>getArrayOfUsers</code> para que devuelva una matriz que contenga todas las propiedades en el objeto que recibe como argumento.
</section> </section>
## Tests ## Tests
@ -20,7 +20,7 @@ Termine de escribir la función <code>getArrayOfUsers</code> para que devuelva u
```yml ```yml
tests: tests:
- text: &#39;El objeto de los <code>users</code> solo contiene las claves <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> &#39; - text: 'El objeto de los <code>users</code> solo contiene las claves <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> '
testString: 'assert("Alan" in users && "Jeff" in users && "Sarah" in users && "Ryan" in users && Object.keys(users).length === 4, "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>");' testString: 'assert("Alan" in users && "Jeff" in users && "Sarah" in users && "Ryan" in users && Object.keys(users).length === 4, "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>");'
- text: La función <code>getArrayOfUsers</code> devuelve una matriz que contiene todas las claves en el objeto de los <code>users</code> - text: La función <code>getArrayOfUsers</code> devuelve una matriz que contiene todas las claves en el objeto de los <code>users</code>
testString: 'assert((function() { users.Sam = {}; users.Lewis = {}; let R = getArrayOfUsers(users); return (R.indexOf("Alan") !== -1 && R.indexOf("Jeff") !== -1 && R.indexOf("Sarah") !== -1 && R.indexOf("Ryan") !== -1 && R.indexOf("Sam") !== -1 && R.indexOf("Lewis") !== -1); })() === true, "The <code>getArrayOfUsers</code> function returns an array which contains all the keys in the <code>users</code> object");' testString: 'assert((function() { users.Sam = {}; users.Lewis = {}; let R = getArrayOfUsers(users); return (R.indexOf("Alan") !== -1 && R.indexOf("Jeff") !== -1 && R.indexOf("Sarah") !== -1 && R.indexOf("Ryan") !== -1 && R.indexOf("Sam") !== -1 && R.indexOf("Lewis") !== -1); })() === true, "The <code>getArrayOfUsers</code> function returns an array which contains all the keys in the <code>users</code> object");'

View File

@ -6,16 +6,16 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
A veces, cuando se trabaja con matrices, es muy útil poder recorrer cada elemento para encontrar uno o más elementos que podríamos necesitar, o manipular una matriz en función de qué elementos de datos cumplen un determinado conjunto de criterios. JavaScript ofrece varios métodos integrados que se repiten en matrices de maneras ligeramente diferentes para lograr resultados diferentes (como <code>every()</code> , para <code>forEach()</code> , <code>map()</code> , etc.), sin embargo, la técnica es más flexible y nos ofrece la mejor cantidad de control es un simple <code>for</code> bucle. A veces, cuando se trabaja con matrices, es muy útil poder recorrer cada elemento para encontrar uno o más elementos que podríamos necesitar, o manipular una matriz en función de qué elementos de datos cumplen un determinado conjunto de criterios. JavaScript ofrece varios métodos integrados que se repiten en matrices de maneras ligeramente diferentes para lograr resultados diferentes (como <code>every()</code> , para <code>forEach()</code> , <code>map()</code> , etc.), sin embargo, la técnica es más flexible y nos ofrece la mejor cantidad de control es un simple <code>for</code> bucle.
Considera lo siguiente: Considera lo siguiente:
<blockquote>function greaterThanTen(arr) {<br>&nbsp;&nbsp;let newArr = [];<br>&nbsp;&nbsp;for (let i = 0; i < arr.length; i++) {<br>&nbsp;&nbsp;&nbsp;&nbsp;if (arr[i] > 10) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newArr.push(arr[i]);<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;return newArr;<br>}<br><br>greaterThanTen([2, 12, 8, 14, 80, 0, 1]);<br>// returns [12, 14, 80]</blockquote> <blockquote>function greaterThanTen(arr) {<br>&nbsp;&nbsp;let newArr = [];<br>&nbsp;&nbsp;for (let i = 0; i < arr.length; i++) {<br>&nbsp;&nbsp;&nbsp;&nbsp;if (arr[i] > 10) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newArr.push(arr[i]);<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;return newArr;<br>}<br><br>greaterThanTen([2, 12, 8, 14, 80, 0, 1]);<br>// returns [12, 14, 80]</blockquote>
Usando un bucle <code>for</code> , esta función recorre y accede a cada elemento de la matriz, y lo somete a una prueba simple que hemos creado. De esta manera, hemos determinado fácil y programáticamente qué elementos de datos son más grandes que <code>10</code> , y hemos devuelto una nueva matriz que contiene esos elementos. Usando un bucle <code>for</code> , esta función recorre y accede a cada elemento de la matriz, y lo somete a una prueba simple que hemos creado. De esta manera, hemos determinado fácil y programáticamente qué elementos de datos son más grandes que <code>10</code> , y hemos devuelto una nueva matriz que contiene esos elementos.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Hemos definido una función, <code>filteredArray</code> , que toma <code>arr</code> , una matriz anidada, y <code>elem</code> como argumentos, y devuelve una nueva matriz. <code>elem</code> representa un elemento que puede o no estar presente en una o más de las matrices anidadas dentro de <code>arr</code> . Modifique la función, utilizando un bucle <code>for</code> , para devolver una versión filtrada de la matriz pasada de manera que se haya eliminado cualquier matriz anidada dentro de <code>arr</code> contenga <code>elem</code> . Hemos definido una función, <code>filteredArray</code> , que toma <code>arr</code> , una matriz anidada, y <code>elem</code> como argumentos, y devuelve una nueva matriz. <code>elem</code> representa un elemento que puede o no estar presente en una o más de las matrices anidadas dentro de <code>arr</code> . Modifique la función, utilizando un bucle <code>for</code> , para devolver una versión filtrada de la matriz pasada de manera que se haya eliminado cualquier matriz anidada dentro de <code>arr</code> contenga <code>elem</code> .
</section> </section>
## Tests ## Tests
@ -23,13 +23,13 @@ Hemos definido una función, <code>filteredArray</code> , que toma <code>arr</co
```yml ```yml
tests: tests:
- text: &#39; <code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> debe devolver <code>[ [10, 8, 3], [14, 6, 23] ]</code> &#39; - text: ' <code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> debe devolver <code>[ [10, 8, 3], [14, 6, 23] ]</code> '
testString: 'assert.deepEqual(filteredArray([ [10, 8, 3], [14, 6, 23], [3, 18, 6] ], 18), [[10, 8, 3], [14, 6, 23]], "<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[ [10, 8, 3], [14, 6, 23] ]</code>");' testString: 'assert.deepEqual(filteredArray([ [10, 8, 3], [14, 6, 23], [3, 18, 6] ], 18), [[10, 8, 3], [14, 6, 23]], "<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[ [10, 8, 3], [14, 6, 23] ]</code>");'
- text: &#39; <code>filteredArray([ [&quot;trumpets&quot;, 2], [&quot;flutes&quot;, 4], [&quot;saxophones&quot;, 2] ], 2)</code> debe devolver <code>[ [&quot;flutes&quot;, 4] ]</code> &#39; - text: ' <code>filteredArray([ [&quot;trumpets&quot;, 2], [&quot;flutes&quot;, 4], [&quot;saxophones&quot;, 2] ], 2)</code> debe devolver <code>[ [&quot;flutes&quot;, 4] ]</code> '
testString: 'assert.deepEqual(filteredArray([ ["trumpets", 2], ["flutes", 4], ["saxophones", 2] ], 2), [["flutes", 4]], "<code>filteredArray([ ["trumpets", 2], ["flutes", 4], ["saxophones", 2] ], 2)</code> should return <code>[ ["flutes", 4] ]</code>");' testString: 'assert.deepEqual(filteredArray([ ["trumpets", 2], ["flutes", 4], ["saxophones", 2] ], 2), [["flutes", 4]], "<code>filteredArray([ ["trumpets", 2], ["flutes", 4], ["saxophones", 2] ], 2)</code> should return <code>[ ["flutes", 4] ]</code>");'
- text: &#39; <code>filteredArray([ [&quot;amy&quot;, &quot;beth&quot;, &quot;sam&quot;], [&quot;dave&quot;, &quot;sean&quot;, &quot;peter&quot;] ], &quot;peter&quot;)</code> debe devolver <code>[ [&quot;amy&quot;, &quot;beth&quot;, &quot;sam&quot;] ]</code> &#39; - text: ' <code>filteredArray([ [&quot;amy&quot;, &quot;beth&quot;, &quot;sam&quot;], [&quot;dave&quot;, &quot;sean&quot;, &quot;peter&quot;] ], &quot;peter&quot;)</code> debe devolver <code>[ [&quot;amy&quot;, &quot;beth&quot;, &quot;sam&quot;] ]</code> '
testString: 'assert.deepEqual(filteredArray([["amy", "beth", "sam"], ["dave", "sean", "peter"]], "peter"), [["amy", "beth", "sam"]], "<code>filteredArray([ ["amy", "beth", "sam"], ["dave", "sean", "peter"] ], "peter")</code> should return <code>[ ["amy", "beth", "sam"] ]</code>");' testString: 'assert.deepEqual(filteredArray([["amy", "beth", "sam"], ["dave", "sean", "peter"]], "peter"), [["amy", "beth", "sam"]], "<code>filteredArray([ ["amy", "beth", "sam"], ["dave", "sean", "peter"] ], "peter")</code> should return <code>[ ["amy", "beth", "sam"] ]</code>");'
- text: &#39; <code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> debe devolver <code>[ ]</code> &#39; - text: ' <code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> debe devolver <code>[ ]</code> '
testString: 'assert.deepEqual(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3), [], "<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[ ]</code>");' testString: 'assert.deepEqual(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3), [], "<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[ ]</code>");'
- text: El <code>filteredArray</code> función debe utilizar un <code>for</code> bucle - text: El <code>filteredArray</code> función debe utilizar un <code>for</code> bucle
testString: 'assert.notStrictEqual(filteredArray.toString().search(/for/), -1, "The <code>filteredArray</code> function should utilize a <code>for</code> loop");' testString: 'assert.notStrictEqual(filteredArray.toString().search(/for/), -1, "The <code>filteredArray</code> function should utilize a <code>for</code> loop");'

View File

@ -6,13 +6,13 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Ahora has visto todas las operaciones básicas para objetos JavaScript. Puede agregar, modificar y eliminar pares clave-valor, verificar si existen claves e iterar sobre todas las claves en un objeto. A medida que continúe aprendiendo JavaScript, verá aplicaciones de objetos aún más versátiles. Además, las lecciones opcionales de Estructuras de datos avanzadas más adelante en el plan de estudios también cubren los objetos <dfn>Map</dfn> y <dfn>Set de</dfn> ES6, los cuales son similares a los objetos comunes pero ofrecen algunas características adicionales. ¡Ahora que ha aprendido los conceptos básicos de matrices y objetos, está completamente preparado para comenzar a abordar problemas más complejos utilizando JavaScript! Ahora has visto todas las operaciones básicas para objetos JavaScript. Puede agregar, modificar y eliminar pares clave-valor, verificar si existen claves e iterar sobre todas las claves en un objeto. A medida que continúe aprendiendo JavaScript, verá aplicaciones de objetos aún más versátiles. Además, las lecciones opcionales de Estructuras de datos avanzadas más adelante en el plan de estudios también cubren los objetos <dfn>Map</dfn> y <dfn>Set de</dfn> ES6, los cuales son similares a los objetos comunes pero ofrecen algunas características adicionales. ¡Ahora que ha aprendido los conceptos básicos de matrices y objetos, está completamente preparado para comenzar a abordar problemas más complejos utilizando JavaScript!
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Eche un vistazo al objeto que hemos proporcionado en el editor de código. El objeto de <code>user</code> contiene tres claves. La clave de <code>data</code> contiene cinco claves, una de las cuales contiene una gran variedad de <code>friends</code> . A partir de esto, puede ver cómo los objetos flexibles son como estructuras de datos. Hemos empezado a escribir una función <code>addFriend</code> . Termine de escribirlo para que tome un objeto de <code>user</code> y agregue el nombre del argumento de <code>friend</code> a la matriz almacenada en <code>user.data.friends</code> y devuelva esa matriz. Eche un vistazo al objeto que hemos proporcionado en el editor de código. El objeto de <code>user</code> contiene tres claves. La clave de <code>data</code> contiene cinco claves, una de las cuales contiene una gran variedad de <code>friends</code> . A partir de esto, puede ver cómo los objetos flexibles son como estructuras de datos. Hemos empezado a escribir una función <code>addFriend</code> . Termine de escribirlo para que tome un objeto de <code>user</code> y agregue el nombre del argumento de <code>friend</code> a la matriz almacenada en <code>user.data.friends</code> y devuelva esa matriz.
</section> </section>
## Tests ## Tests
@ -20,11 +20,11 @@ Eche un vistazo al objeto que hemos proporcionado en el editor de código. El ob
```yml ```yml
tests: tests:
- text: &#39;El objeto de <code>user</code> tiene <code>name</code> , <code>age</code> y claves de <code>data</code> &#39; - text: 'El objeto de <code>user</code> tiene <code>name</code> , <code>age</code> y claves de <code>data</code> '
testString: 'assert("name" in user && "age" in user && "data" in user, "The <code>user</code> object has <code>name</code>, <code>age</code>, and <code>data</code> keys");' testString: 'assert("name" in user && "age" in user && "data" in user, "The <code>user</code> object has <code>name</code>, <code>age</code>, and <code>data</code> keys");'
- text: La función <code>addFriend</code> acepta un objeto de <code>user</code> y una cadena de <code>friend</code> como argumentos y agrega el amigo a la matriz de <code>friends</code> en el objeto de <code>user</code> - text: La función <code>addFriend</code> acepta un objeto de <code>user</code> y una cadena de <code>friend</code> como argumentos y agrega el amigo a la matriz de <code>friends</code> en el objeto de <code>user</code>
testString: 'assert((function() { let L1 = user.data.friends.length; addFriend(user, "Sean"); let L2 = user.data.friends.length; return (L2 === L1 + 1); })(), "The <code>addFriend</code> function accepts a <code>user</code> object and a <code>friend</code> string as arguments and adds the friend to the array of <code>friends</code> in the <code>user</code> object");' testString: 'assert((function() { let L1 = user.data.friends.length; addFriend(user, "Sean"); let L2 = user.data.friends.length; return (L2 === L1 + 1); })(), "The <code>addFriend</code> function accepts a <code>user</code> object and a <code>friend</code> string as arguments and adds the friend to the array of <code>friends</code> in the <code>user</code> object");'
- text: &#39; <code>addFriend(user, &quot;Pete&quot;)</code> debe devolver <code>[&quot;Sam&quot;, &quot;Kira&quot;, &quot;Tomo&quot;, &quot;Pete&quot;]</code> &#39; - text: ' <code>addFriend(user, &quot;Pete&quot;)</code> debe devolver <code>[&quot;Sam&quot;, &quot;Kira&quot;, &quot;Tomo&quot;, &quot;Pete&quot;]</code> '
testString: 'assert.deepEqual((function() { delete user.data.friends; user.data.friends = ["Sam", "Kira", "Tomo"]; return addFriend(user, "Pete") })(), ["Sam", "Kira", "Tomo", "Pete"], "<code>addFriend(user, "Pete")</code> should return <code>["Sam", "Kira", "Tomo", "Pete"]</code>");' testString: 'assert.deepEqual((function() { delete user.data.friends; user.data.friends = ["Sam", "Kira", "Tomo"]; return addFriend(user, "Pete") })(), ["Sam", "Kira", "Tomo", "Pete"], "<code>addFriend(user, "Pete")</code> should return <code>["Sam", "Kira", "Tomo", "Pete"]</code>");'
``` ```

View File

@ -6,15 +6,15 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Ahora veamos un objeto un poco más complejo. Las propiedades de los objetos se pueden anidar a una profundidad arbitraria, y sus valores pueden ser cualquier tipo de datos admitidos por JavaScript, incluidas las matrices e incluso otros objetos. Considera lo siguiente: Ahora veamos un objeto un poco más complejo. Las propiedades de los objetos se pueden anidar a una profundidad arbitraria, y sus valores pueden ser cualquier tipo de datos admitidos por JavaScript, incluidas las matrices e incluso otros objetos. Considera lo siguiente:
<blockquote>let nestedObject = {<br>&nbsp;&nbsp;id: 28802695164,<br>&nbsp;&nbsp;date: 'December 31, 2016',<br>&nbsp;&nbsp;data: {<br>&nbsp;&nbsp;&nbsp;&nbsp;totalUsers: 99,<br>&nbsp;&nbsp;&nbsp;&nbsp;online: 80,<br>&nbsp;&nbsp;&nbsp;&nbsp;onlineStatus: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;active: 67,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;away: 13<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>};</blockquote> <blockquote>let nestedObject = {<br>&nbsp;&nbsp;id: 28802695164,<br>&nbsp;&nbsp;date: 'December 31, 2016',<br>&nbsp;&nbsp;data: {<br>&nbsp;&nbsp;&nbsp;&nbsp;totalUsers: 99,<br>&nbsp;&nbsp;&nbsp;&nbsp;online: 80,<br>&nbsp;&nbsp;&nbsp;&nbsp;onlineStatus: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;active: 67,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;away: 13<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>};</blockquote>
<code>nestedObject</code> tiene tres claves únicas: <code>id</code> , cuyo valor es un número, la <code>date</code> cuyo valor es una cadena y los <code>data</code> , cuyo valor es un objeto que tiene otro objeto anidado dentro de él. Si bien las estructuras pueden volverse complejas rápidamente, aún podemos usar las mismas notaciones para acceder a la información que necesitamos. <code>nestedObject</code> tiene tres claves únicas: <code>id</code> , cuyo valor es un número, la <code>date</code> cuyo valor es una cadena y los <code>data</code> , cuyo valor es un objeto que tiene otro objeto anidado dentro de él. Si bien las estructuras pueden volverse complejas rápidamente, aún podemos usar las mismas notaciones para acceder a la información que necesitamos.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Aquí hemos definido un objeto, <code>userActivity</code> , que incluye otro objeto anidado dentro de él. Puede modificar las propiedades de este objeto anidado de la misma manera que modificó las propiedades en el último desafío. Establezca el valor de la clave en <code>online</code> en <code>45</code> . Aquí hemos definido un objeto, <code>userActivity</code> , que incluye otro objeto anidado dentro de él. Puede modificar las propiedades de este objeto anidado de la misma manera que modificó las propiedades en el último desafío. Establezca el valor de la clave en <code>online</code> en <code>45</code> .
</section> </section>
## Tests ## Tests
@ -22,7 +22,7 @@ Aquí hemos definido un objeto, <code>userActivity</code> , que incluye otro obj
```yml ```yml
tests: tests:
- text: &#39; <code>userActivity</code> tiene <code>id</code> , <code>date</code> y propiedades de <code>data</code> &#39; - text: ' <code>userActivity</code> tiene <code>id</code> , <code>date</code> y propiedades de <code>data</code> '
testString: 'assert("id" in userActivity && "date" in userActivity && "data" in userActivity, "<code>userActivity</code> has <code>id</code>, <code>date</code> and <code>data</code> properties");' testString: 'assert("id" in userActivity && "date" in userActivity && "data" in userActivity, "<code>userActivity</code> has <code>id</code>, <code>date</code> and <code>data</code> properties");'
- text: <code>userActivity</code> tiene una clave de <code>data</code> configurada para un objeto con las teclas <code>totalUsers</code> y en <code>online</code> - text: <code>userActivity</code> tiene una clave de <code>data</code> configurada para un objeto con las teclas <code>totalUsers</code> y en <code>online</code>
testString: 'assert("totalUsers" in userActivity.data && "online" in userActivity.data, "<code>userActivity</code> has a <code>data</code> key set to an object with keys <code>totalUsers</code> and <code>online</code>");' testString: 'assert("totalUsers" in userActivity.data && "online" in userActivity.data, "<code>userActivity</code> has a <code>data</code> key set to an object with keys <code>totalUsers</code> and <code>online</code>");'

View File

@ -6,17 +6,17 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Tanto <code>push()</code> como <code>unshift()</code> tienen métodos correspondientes que son opuestos casi funcionales: <code>pop()</code> y <code>shift()</code> . Como ya habrá adivinado, en lugar de agregar, <code>pop()</code> <em>elimina</em> un elemento del final de una matriz, mientras que <code>shift()</code> elimina un elemento desde el principio. La diferencia clave entre <code>pop()</code> y <code>shift()</code> y sus primos <code>push()</code> y <code>unshift()</code> , es que ninguno de los dos métodos toma parámetros, y cada uno solo permite que una matriz sea modificada por un solo elemento a la vez. Tanto <code>push()</code> como <code>unshift()</code> tienen métodos correspondientes que son opuestos casi funcionales: <code>pop()</code> y <code>shift()</code> . Como ya habrá adivinado, en lugar de agregar, <code>pop()</code> <em>elimina</em> un elemento del final de una matriz, mientras que <code>shift()</code> elimina un elemento desde el principio. La diferencia clave entre <code>pop()</code> y <code>shift()</code> y sus primos <code>push()</code> y <code>unshift()</code> , es que ninguno de los dos métodos toma parámetros, y cada uno solo permite que una matriz sea modificada por un solo elemento a la vez.
Echemos un vistazo: Echemos un vistazo:
<blockquote>let greetings = ['whats up?', 'hello', 'see ya!'];<br><br>greetings.pop();<br>// now equals ['whats up?', 'hello']<br><br>greetings.shift();<br>// now equals ['hello']</blockquote> <blockquote>let greetings = ['whats up?', 'hello', 'see ya!'];<br><br>greetings.pop();<br>// now equals ['whats up?', 'hello']<br><br>greetings.shift();<br>// now equals ['hello']</blockquote>
También podemos devolver el valor del elemento eliminado con uno de estos métodos: También podemos devolver el valor del elemento eliminado con uno de estos métodos:
<blockquote>let popped = greetings.pop();<br>// returns 'hello'<br>// greetings now equals []</blockquote> <blockquote>let popped = greetings.pop();<br>// returns 'hello'<br>// greetings now equals []</blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Hemos definido una función, <code>popShift</code> , que toma una matriz como argumento y devuelve una nueva matriz. Modifique la función, utilizando <code>pop()</code> y <code>shift()</code> , para eliminar el primer y último elemento de la matriz de argumentos, y asigne los elementos eliminados a sus variables correspondientes, de modo que la matriz devuelta contenga sus valores. Hemos definido una función, <code>popShift</code> , que toma una matriz como argumento y devuelve una nueva matriz. Modifique la función, utilizando <code>pop()</code> y <code>shift()</code> , para eliminar el primer y último elemento de la matriz de argumentos, y asigne los elementos eliminados a sus variables correspondientes, de modo que la matriz devuelta contenga sus valores.
</section> </section>
## Tests ## Tests
@ -24,7 +24,7 @@ Hemos definido una función, <code>popShift</code> , que toma una matriz como ar
```yml ```yml
tests: tests:
- text: &#39; <code>popShift([&quot;challenge&quot;, &quot;is&quot;, &quot;not&quot;, &quot;complete&quot;])</code> debe devolver <code>[&quot;challenge&quot;, &quot;complete&quot;]</code> &#39; - text: ' <code>popShift([&quot;challenge&quot;, &quot;is&quot;, &quot;not&quot;, &quot;complete&quot;])</code> debe devolver <code>[&quot;challenge&quot;, &quot;complete&quot;]</code> '
testString: 'assert.deepEqual(popShift(["challenge", "is", "not", "complete"]), ["challenge", "complete"], "<code>popShift(["challenge", "is", "not", "complete"])</code> should return <code>["challenge", "complete"]</code>");' testString: 'assert.deepEqual(popShift(["challenge", "is", "not", "complete"]), ["challenge", "complete"], "<code>popShift(["challenge", "is", "not", "complete"])</code> should return <code>["challenge", "complete"]</code>");'
- text: La función <code>popShift</code> debería utilizar el método <code>pop()</code> - text: La función <code>popShift</code> debería utilizar el método <code>pop()</code>
testString: 'assert.notStrictEqual(popShift.toString().search(/\.pop\(/), -1, "The <code>popShift</code> function should utilize the <code>pop()</code> method");' testString: 'assert.notStrictEqual(popShift.toString().search(/\.pop\(/), -1, "The <code>popShift</code> function should utilize the <code>pop()</code> method");'

View File

@ -6,16 +6,16 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Ahora ya sabes qué son los objetos y sus características y ventajas básicas. En resumen, son tiendas de valor clave que proporcionan una forma flexible e intuitiva de estructurar los datos <strong><em>y</em></strong> proporcionan un tiempo de búsqueda muy rápido. A lo largo del resto de estos desafíos, describiremos varias operaciones comunes que puede realizar en objetos para que pueda sentirse cómodo aplicando estas estructuras de datos útiles en sus programas. Ahora ya sabes qué son los objetos y sus características y ventajas básicas. En resumen, son tiendas de valor clave que proporcionan una forma flexible e intuitiva de estructurar los datos <strong><em>y</em></strong> proporcionan un tiempo de búsqueda muy rápido. A lo largo del resto de estos desafíos, describiremos varias operaciones comunes que puede realizar en objetos para que pueda sentirse cómodo aplicando estas estructuras de datos útiles en sus programas.
En desafíos anteriores, hemos agregado y modificado los pares clave-valor de un objeto. Aquí veremos cómo podemos <em>eliminar</em> un par clave-valor de un objeto. En desafíos anteriores, hemos agregado y modificado los pares clave-valor de un objeto. Aquí veremos cómo podemos <em>eliminar</em> un par clave-valor de un objeto.
Repasemos nuestro ejemplo de objeto de <code>foods</code> una última vez. Si quisiéramos eliminar la clave de las <code>apples</code> , podemos eliminarla usando la palabra clave <code>delete</code> así: Repasemos nuestro ejemplo de objeto de <code>foods</code> una última vez. Si quisiéramos eliminar la clave de las <code>apples</code> , podemos eliminarla usando la palabra clave <code>delete</code> así:
<blockquote>delete foods.apples;</blockquote> <blockquote>delete foods.apples;</blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Use la palabra clave delete para eliminar las teclas de <code>oranges</code> , <code>plums</code> y <code>strawberries</code> del objeto de <code>foods</code> . Use la palabra clave delete para eliminar las teclas de <code>oranges</code> , <code>plums</code> y <code>strawberries</code> del objeto de <code>foods</code> .
</section> </section>
## Tests ## Tests
@ -23,9 +23,9 @@ Use la palabra clave delete para eliminar las teclas de <code>oranges</code> , <
```yml ```yml
tests: tests:
- text: &#39;El objeto de <code>foods</code> solo tiene tres claves: <code>apples</code> , <code>grapes</code> y <code>bananas</code> &#39; - text: 'El objeto de <code>foods</code> solo tiene tres claves: <code>apples</code> , <code>grapes</code> y <code>bananas</code> '
testString: 'assert(!foods.hasOwnProperty("oranges") && !foods.hasOwnProperty("plums") && !foods.hasOwnProperty("strawberries") && Object.keys(foods).length === 3, "The <code>foods</code> object only has three keys: <code>apples</code>, <code>grapes</code>, and <code>bananas</code>");' testString: 'assert(!foods.hasOwnProperty("oranges") && !foods.hasOwnProperty("plums") && !foods.hasOwnProperty("strawberries") && Object.keys(foods).length === 3, "The <code>foods</code> object only has three keys: <code>apples</code>, <code>grapes</code>, and <code>bananas</code>");'
- text: &#39;Las claves de <code>oranges</code> , <code>plums</code> y <code>strawberries</code> se eliminan usando <code>delete</code> &#39; - text: 'Las claves de <code>oranges</code> , <code>plums</code> y <code>strawberries</code> se eliminan usando <code>delete</code> '
testString: 'assert(code.search(/oranges:/) !== -1 && code.search(/plums:/) !== -1 && code.search(/strawberries:/) !== -1, "The <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys are removed using <code>delete</code>");' testString: 'assert(code.search(/oranges:/) !== -1 && code.search(/plums:/) !== -1 && code.search(/strawberries:/) !== -1, "The <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys are removed using <code>delete</code>");'
``` ```

View File

@ -6,18 +6,18 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
A for loop también puede contar hacia atrás, siempre que podamos definir las condiciones correctas. A for loop también puede contar hacia atrás, siempre que podamos definir las condiciones correctas.
Para contar hacia atrás de dos en dos, necesitaremos cambiar nuestra <code>initialization</code> , <code>condition</code> y <code>final-expression</code> . Para contar hacia atrás de dos en dos, necesitaremos cambiar nuestra <code>initialization</code> , <code>condition</code> y <code>final-expression</code> .
Comenzaremos en <code>i = 10</code> y haremos un bucle mientras <code>i &gt; 0</code> . Disminuiremos <code>i</code> en 2 cada bucle con <code>i -= 2</code> . Comenzaremos en <code>i = 10</code> y haremos un bucle mientras <code>i &gt; 0</code> . Disminuiremos <code>i</code> en 2 cada bucle con <code>i -= 2</code> .
<blockquote>var ourArray = [];<br>for (var i=10; i &#62; 0; i-=2) {<br>&nbsp;&nbsp;ourArray.push(i);<br>}</blockquote> <blockquote>var ourArray = [];<br>for (var i=10; i &#62; 0; i-=2) {<br>&nbsp;&nbsp;ourArray.push(i);<br>}</blockquote>
<code>ourArray</code> ahora contendrá <code>[10,8,6,4,2]</code> . <code>ourArray</code> ahora contendrá <code>[10,8,6,4,2]</code> .
Cambiemos nuestra <code>initialization</code> y <code>final-expression</code> para que podamos contar hacia atrás de dos en dos con números impares. Cambiemos nuestra <code>initialization</code> y <code>final-expression</code> para que podamos contar hacia atrás de dos en dos con números impares.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Empuje los números impares del 9 al 1 a <code>myArray</code> usando un bucle <code>for</code> . Empuje los números impares del 9 al 1 a <code>myArray</code> usando un bucle <code>for</code> .
</section> </section>
## Tests ## Tests
@ -29,7 +29,7 @@ tests:
testString: 'assert(code.match(/for\s*\(/g).length > 1, "You should be using a <code>for</code> loop for this.");' testString: 'assert(code.match(/for\s*\(/g).length > 1, "You should be using a <code>for</code> loop for this.");'
- text: Deberías estar usando el método de matriz <code>push</code> . - text: Deberías estar usando el método de matriz <code>push</code> .
testString: 'assert(code.match(/myArray.push/), "You should be using the array method <code>push</code>.");' testString: 'assert(code.match(/myArray.push/), "You should be using the array method <code>push</code>.");'
- text: &#39; <code>myArray</code> debe ser igual a <code>[9,7,5,3,1]</code> .&#39; - text: ' <code>myArray</code> debe ser igual a <code>[9,7,5,3,1]</code> .'
testString: 'assert.deepEqual(myArray, [9,7,5,3,1], "<code>myArray</code> should equal <code>[9,7,5,3,1]</code>.");' testString: 'assert.deepEqual(myArray, [9,7,5,3,1], "<code>myArray</code> should equal <code>[9,7,5,3,1]</code>.");'
``` ```

View File

@ -6,17 +6,17 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
En el juego de casino Blackjack, un jugador puede obtener una ventaja sobre la casa al hacer un seguimiento del número relativo de cartas altas y bajas que quedan en el mazo. Esto se llama <a href='https://en.wikipedia.org/wiki/Card_counting' target='_blank'>conteo de cartas</a> . En el juego de casino Blackjack, un jugador puede obtener una ventaja sobre la casa al hacer un seguimiento del número relativo de cartas altas y bajas que quedan en el mazo. Esto se llama <a href='https://en.wikipedia.org/wiki/Card_counting' target='_blank'>conteo de cartas</a> .
Tener más cartas altas en el mazo favorece al jugador. A cada tarjeta se le asigna un valor de acuerdo con la siguiente tabla. Cuando el conteo es positivo, el jugador debe apostar alto. Cuando el conteo es cero o negativo, el jugador debe apostar bajo. Tener más cartas altas en el mazo favorece al jugador. A cada tarjeta se le asigna un valor de acuerdo con la siguiente tabla. Cuando el conteo es positivo, el jugador debe apostar alto. Cuando el conteo es cero o negativo, el jugador debe apostar bajo.
<table class="table table-striped"><thead><tr><th> Cambio de cuenta </th><th> Tarjetas </th></tr></thead><tbody><tr><td> +1 </td><td> 2, 3, 4, 5, 6 </td></tr><tr><td> 0 </td><td> 7, 8, 9 </td></tr><tr><td> -1 </td><td> 10, &#39;J&#39;, &#39;Q&#39;, &#39;K&#39;, &#39;A&#39; </td></tr></tbody></table> <table class="table table-striped"><thead><tr><th> Cambio de cuenta </th><th> Tarjetas </th></tr></thead><tbody><tr><td> +1 </td><td> 2, 3, 4, 5, 6 </td></tr><tr><td> 0 </td><td> 7, 8, 9 </td></tr><tr><td> -1 </td><td> 10, &#39;J&#39;, &#39;Q&#39;, &#39;K&#39;, &#39;A&#39; </td></tr></tbody></table>
Escribirás una función de conteo de cartas. Recibirá un parámetro de <code>card</code> , que puede ser un número o una cadena, y aumentará o disminuirá la variable de <code>count</code> global según el valor de la tarjeta (consulte la tabla). La función devolverá una cadena con el recuento actual y la cadena <code>Bet</code> si el recuento es positivo, o <code>Hold</code> si el recuento es cero o negativo. El conteo actual y la decisión del jugador ( <code>Bet</code> o <code>Hold</code> ) deben estar separados por un solo espacio. Escribirás una función de conteo de cartas. Recibirá un parámetro de <code>card</code> , que puede ser un número o una cadena, y aumentará o disminuirá la variable de <code>count</code> global según el valor de la tarjeta (consulte la tabla). La función devolverá una cadena con el recuento actual y la cadena <code>Bet</code> si el recuento es positivo, o <code>Hold</code> si el recuento es cero o negativo. El conteo actual y la decisión del jugador ( <code>Bet</code> o <code>Hold</code> ) deben estar separados por un solo espacio.
<strong>Ejemplo de salida</strong> <br> <code>-3 Hold</code> <br> <code>5 Bet</code> <strong>Ejemplo de salida</strong> <br> <code>-3 Hold</code> <br> <code>5 Bet</code>
<strong>Sugerencia</strong> <br> NO reinicie el <code>count</code> a 0 cuando el valor sea 7, 8 o 9. <br> NO devuelva una matriz. <br> NO incluya comillas (simples o dobles) en la salida. <strong>Sugerencia</strong> <br> NO reinicie el <code>count</code> a 0 cuando el valor sea 7, 8 o 9. <br> NO devuelva una matriz. <br> NO incluya comillas (simples o dobles) en la salida.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -25,19 +25,19 @@ Escribirás una función de conteo de cartas. Recibirá un parámetro de <code>c
```yml ```yml
tests: tests:
- text: &#39;Las secuencias de cartas 2, 3, 4, 5, 6 deben devolver <code>5 Bet</code> &#39; - text: 'Las secuencias de cartas 2, 3, 4, 5, 6 deben devolver <code>5 Bet</code> '
testString: 'assert((function(){ count = 0; cc(2);cc(3);cc(4);cc(5);var out = cc(6); if(out === "5 Bet") {return true;} return false; })(), "Cards Sequence 2, 3, 4, 5, 6 should return <code>5 Bet</code>");' testString: 'assert((function(){ count = 0; cc(2);cc(3);cc(4);cc(5);var out = cc(6); if(out === "5 Bet") {return true;} return false; })(), "Cards Sequence 2, 3, 4, 5, 6 should return <code>5 Bet</code>");'
- text: &#39;Las secuencias de cartas 7, 8, 9 deben devolver <code>0 Hold</code> &#39; - text: 'Las secuencias de cartas 7, 8, 9 deben devolver <code>0 Hold</code> '
testString: 'assert((function(){ count = 0; cc(7);cc(8);var out = cc(9); if(out === "0 Hold") {return true;} return false; })(), "Cards Sequence 7, 8, 9 should return <code>0 Hold</code>");' testString: 'assert((function(){ count = 0; cc(7);cc(8);var out = cc(9); if(out === "0 Hold") {return true;} return false; })(), "Cards Sequence 7, 8, 9 should return <code>0 Hold</code>");'
- text: &#39;La secuencia de cartas 10, J, Q, K, A debería devolver <code>-5 Hold</code> &#39; - text: 'La secuencia de cartas 10, J, Q, K, A debería devolver <code>-5 Hold</code> '
testString: 'assert((function(){ count = 0; cc(10);cc("J");cc("Q");cc("K");var out = cc("A"); if(out === "-5 Hold") {return true;} return false; })(), "Cards Sequence 10, J, Q, K, A should return <code>-5 Hold</code>");' testString: 'assert((function(){ count = 0; cc(10);cc("J");cc("Q");cc("K");var out = cc("A"); if(out === "-5 Hold") {return true;} return false; })(), "Cards Sequence 10, J, Q, K, A should return <code>-5 Hold</code>");'
- text: &#39;Las secuencias de cartas 3, 7, Q, 8, A deben devolver <code>-1 Hold</code> &#39; - text: 'Las secuencias de cartas 3, 7, Q, 8, A deben devolver <code>-1 Hold</code> '
testString: 'assert((function(){ count = 0; cc(3);cc(7);cc("Q");cc(8);var out = cc("A"); if(out === "-1 Hold") {return true;} return false; })(), "Cards Sequence 3, 7, Q, 8, A should return <code>-1 Hold</code>");' testString: 'assert((function(){ count = 0; cc(3);cc(7);cc("Q");cc(8);var out = cc("A"); if(out === "-1 Hold") {return true;} return false; })(), "Cards Sequence 3, 7, Q, 8, A should return <code>-1 Hold</code>");'
- text: &#39;Las secuencias de cartas 2, J, 9, 2, 7 deben devolver <code>1 Bet</code> &#39; - text: 'Las secuencias de cartas 2, J, 9, 2, 7 deben devolver <code>1 Bet</code> '
testString: 'assert((function(){ count = 0; cc(2);cc("J");cc(9);cc(2);var out = cc(7); if(out === "1 Bet") {return true;} return false; })(), "Cards Sequence 2, J, 9, 2, 7 should return <code>1 Bet</code>");' testString: 'assert((function(){ count = 0; cc(2);cc("J");cc(9);cc(2);var out = cc(7); if(out === "1 Bet") {return true;} return false; })(), "Cards Sequence 2, J, 9, 2, 7 should return <code>1 Bet</code>");'
- text: &#39;Las secuencias de cartas 2, 2, 10 deben devolver <code>1 Bet</code> &#39; - text: 'Las secuencias de cartas 2, 2, 10 deben devolver <code>1 Bet</code> '
testString: 'assert((function(){ count = 0; cc(2);cc(2);var out = cc(10); if(out === "1 Bet") {return true;} return false; })(), "Cards Sequence 2, 2, 10 should return <code>1 Bet</code>");' testString: 'assert((function(){ count = 0; cc(2);cc(2);var out = cc(10); if(out === "1 Bet") {return true;} return false; })(), "Cards Sequence 2, 2, 10 should return <code>1 Bet</code>");'
- text: &#39;Secuencia de cartas 3, 2, A, 10, K debería devolver <code>-1 Hold</code> &#39; - text: 'Secuencia de cartas 3, 2, A, 10, K debería devolver <code>-1 Hold</code> '
testString: 'assert((function(){ count = 0; cc(3);cc(2);cc("A");cc(10);var out = cc("K"); if(out === "-1 Hold") {return true;} return false; })(), "Cards Sequence 3, 2, A, 10, K should return <code>-1 Hold</code>");' testString: 'assert((function(){ count = 0; cc(3);cc(2);cc("A");cc(10);var out = cc("K"); if(out === "-1 Hold") {return true;} return false; })(), "Cards Sequence 3, 2, A, 10, K should return <code>-1 Hold</code>");'
``` ```

View File

@ -6,21 +6,21 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
En informática, los <dfn>datos</dfn> son cualquier cosa que sea significativa para la computadora. JavaScript proporciona siete <dfn>tipos de datos diferentes</dfn> que son <code>undefined</code> , <code>null</code> , <code>boolean</code> , <code>string</code> , <code>symbol</code> , <code>number</code> y <code>object</code> . En informática, los <dfn>datos</dfn> son cualquier cosa que sea significativa para la computadora. JavaScript proporciona siete <dfn>tipos de datos diferentes</dfn> que son <code>undefined</code> , <code>null</code> , <code>boolean</code> , <code>string</code> , <code>symbol</code> , <code>number</code> y <code>object</code> .
Por ejemplo, las computadoras distinguen entre los números, como el número <code>12</code> , y las <code>strings</code> , como <code>&quot;12&quot;</code> , <code>&quot;dog&quot;</code> o <code>&quot;123 cats&quot;</code> , que son colecciones de caracteres. Las computadoras pueden realizar operaciones matemáticas en un número, pero no en una cadena. Por ejemplo, las computadoras distinguen entre los números, como el número <code>12</code> , y las <code>strings</code> , como <code>&quot;12&quot;</code> , <code>&quot;dog&quot;</code> o <code>&quot;123 cats&quot;</code> , que son colecciones de caracteres. Las computadoras pueden realizar operaciones matemáticas en un número, pero no en una cadena.
<dfn>Las variables</dfn> permiten que las computadoras almacenen y manipulen datos de una manera dinámica. Hacen esto usando una &quot;etiqueta&quot; para señalar los datos en lugar de usar los datos en sí. Cualquiera de los siete tipos de datos puede almacenarse en una variable. <dfn>Las variables</dfn> permiten que las computadoras almacenen y manipulen datos de una manera dinámica. Hacen esto usando una &quot;etiqueta&quot; para señalar los datos en lugar de usar los datos en sí. Cualquiera de los siete tipos de datos puede almacenarse en una variable.
<code>Variables</code> son similares a las variables x e y que usa en matemáticas, lo que significa que son un nombre simple para representar los datos a los que queremos referirnos. Las <code>variables</code> computadora difieren de las variables matemáticas en que pueden almacenar diferentes valores en diferentes momentos. <code>Variables</code> son similares a las variables x e y que usa en matemáticas, lo que significa que son un nombre simple para representar los datos a los que queremos referirnos. Las <code>variables</code> computadora difieren de las variables matemáticas en que pueden almacenar diferentes valores en diferentes momentos.
Le pedimos a JavaScript que cree o <dfn>declare</dfn> una variable poniendo la palabra clave <code>var</code> delante de ella, así: Le pedimos a JavaScript que cree o <dfn>declare</dfn> una variable poniendo la palabra clave <code>var</code> delante de ella, así:
<blockquote>var ourName;</blockquote> <blockquote>var ourName;</blockquote>
crea una <code>variable</code> llamada <code>ourName</code> . En JavaScript terminamos las frases con punto y coma. crea una <code>variable</code> llamada <code>ourName</code> . En JavaScript terminamos las frases con punto y coma.
<code>Variable</code> nombres de las <code>Variable</code> pueden estar formados por números, letras y <code>$</code> o <code>_</code> , pero no pueden contener espacios ni comenzar con un número. <code>Variable</code> nombres de las <code>Variable</code> pueden estar formados por números, letras y <code>$</code> o <code>_</code> , pero no pueden contener espacios ni comenzar con un número.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Use la palabra clave <code>var</code> para crear una variable llamada <code>myName</code> . Use la palabra clave <code>var</code> para crear una variable llamada <code>myName</code> .
<strong>Pista</strong> <br> Mira el ejemplo de <code>ourName</code> si te quedas atascado. <strong>Pista</strong> <br> Mira el ejemplo de <code>ourName</code> si te quedas atascado.
</section> </section>
## Tests ## Tests
@ -28,7 +28,7 @@ Use la palabra clave <code>var</code> para crear una variable llamada <code>myNa
```yml ```yml
tests: tests:
- text: &#39;Debes declarar <code>myName</code> con la palabra clave <code>var</code> , que termina con un punto y coma&#39; - text: 'Debes declarar <code>myName</code> con la palabra clave <code>var</code> , que termina con un punto y coma'
testString: 'assert(/var\s+myName\s*;/.test(code), "You should declare <code>myName</code> with the <code>var</code> keyword, ending with a semicolon");' testString: 'assert(/var\s+myName\s*;/.test(code), "You should declare <code>myName</code> with the <code>var</code> keyword, ending with a semicolon");'
``` ```

View File

@ -6,19 +6,19 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
comillas no son los únicos caracteres que pueden <dfn>escaparse</dfn> dentro de una cadena. Hay dos razones para usar caracteres que se escapan: primero es permitirle usar caracteres que de otra forma no podría escribir, como un retroceso. El segundo es permitirte representar múltiples citas en una cadena sin que JavaScript interprete mal lo que quieres decir. Aprendimos esto en el reto anterior. comillas no son los únicos caracteres que pueden <dfn>escaparse</dfn> dentro de una cadena. Hay dos razones para usar caracteres que se escapan: primero es permitirle usar caracteres que de otra forma no podría escribir, como un retroceso. El segundo es permitirte representar múltiples citas en una cadena sin que JavaScript interprete mal lo que quieres decir. Aprendimos esto en el reto anterior.
<table class="table table-striped"><thead><tr><th> Código </th><th> Salida </th></tr></thead><tbody><tr><td> <code>\&#39;</code> </td> <td> una frase </td></tr><tr><td> <code>\&quot;</code> </td> <td> doble cita </td></tr><tr><td> <code>\\</code> </td> <td> barra invertida </td></tr><tr><td> <code>\n</code> </td> <td> nueva línea </td></tr><tr><td> <code>\r</code> </td> <td> retorno de carro </td></tr><tr><td> <code>\t</code> </td> <td> lengüeta </td></tr><tr><td> <code>\b</code> </td> <td> retroceso </td></tr><tr><td> <code>\f</code> </td> <td> form feed </td></tr></tbody></table> <table class="table table-striped"><thead><tr><th> Código </th><th> Salida </th></tr></thead><tbody><tr><td> <code>\&#39;</code> </td> <td> una frase </td></tr><tr><td> <code>\&quot;</code> </td> <td> doble cita </td></tr><tr><td> <code>\\</code> </td> <td> barra invertida </td></tr><tr><td> <code>\n</code> </td> <td> nueva línea </td></tr><tr><td> <code>\r</code> </td> <td> retorno de carro </td></tr><tr><td> <code>\t</code> </td> <td> lengüeta </td></tr><tr><td> <code>\b</code> </td> <td> retroceso </td></tr><tr><td> <code>\f</code> </td> <td> form feed </td></tr></tbody></table>
<em>Tenga en cuenta que la barra invertida debe escaparse para que se muestre como una barra invertida.</em> <em>Tenga en cuenta que la barra invertida debe escaparse para que se muestre como una barra invertida.</em>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Asigne las siguientes tres líneas de texto a la única variable <code>myStr</code> usando secuencias de escape. Asigne las siguientes tres líneas de texto a la única variable <code>myStr</code> usando secuencias de escape.
<blockquote>FirstLine<br/>&nbsp;&nbsp;&nbsp;&nbsp;\SecondLine<br/>ThirdLine</blockquote> <blockquote>FirstLine<br/>&nbsp;&nbsp;&nbsp;&nbsp;\SecondLine<br/>ThirdLine</blockquote>
Necesitará usar secuencias de escape para insertar caracteres especiales correctamente. También deberá seguir el espaciado como se ve arriba, sin espacios entre las secuencias de escape o las palabras. Necesitará usar secuencias de escape para insertar caracteres especiales correctamente. También deberá seguir el espaciado como se ve arriba, sin espacios entre las secuencias de escape o las palabras.
Aquí está el texto con las secuencias de escape escritas. Aquí está el texto con las secuencias de escape escritas.
<q>FirstLine <code>newline</code> <code>tab</code> <code>backslash</code> SecondLine <code>newline</code> ThirdLine</q> <q>FirstLine <code>newline</code> <code>tab</code> <code>backslash</code> SecondLine <code>newline</code> ThirdLine</q>
</section> </section>
## Tests ## Tests
@ -28,7 +28,7 @@ Aquí está el texto con las secuencias de escape escritas.
tests: tests:
- text: <code>myStr</code> no debe contener espacios - text: <code>myStr</code> no debe contener espacios
testString: 'assert(!/ /.test(myStr), "<code>myStr</code> should not contain any spaces");' testString: 'assert(!/ /.test(myStr), "<code>myStr</code> should not contain any spaces");'
- text: &#39; <code>myStr</code> debe contener las cadenas <code>FirstLine</code> , <code>SecondLine</code> y <code>ThirdLine</code> (recuerda la sensibilidad a los casos)&#39; - text: ' <code>myStr</code> debe contener las cadenas <code>FirstLine</code> , <code>SecondLine</code> y <code>ThirdLine</code> (recuerda la sensibilidad a los casos)'
testString: 'assert(/FirstLine/.test(myStr) && /SecondLine/.test(myStr) && /ThirdLine/.test(myStr), "<code>myStr</code> should contain the strings <code>FirstLine</code>, <code>SecondLine</code> and <code>ThirdLine</code> (remember case sensitivity)");' testString: 'assert(/FirstLine/.test(myStr) && /SecondLine/.test(myStr) && /ThirdLine/.test(myStr), "<code>myStr</code> should contain the strings <code>FirstLine</code>, <code>SecondLine</code> and <code>ThirdLine</code> (remember case sensitivity)");'
- text: <code>FirstLine</code> debe ir seguido del carácter de nueva línea <code>\n</code> - text: <code>FirstLine</code> debe ir seguido del carácter de nueva línea <code>\n</code>
testString: 'assert(/FirstLine\n/.test(myStr), "<code>FirstLine</code> should be followed by the newline character <code>\n</code>");' testString: 'assert(/FirstLine\n/.test(myStr), "<code>FirstLine</code> should be followed by the newline character <code>\n</code>");'

View File

@ -6,18 +6,18 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Cuando está definiendo una cadena, debe comenzar y terminar con una comilla simple o doble. ¿Qué sucede cuando necesita una cita literal: <code>&quot;</code> o <code>&#39;</code> dentro de su cadena? Cuando está definiendo una cadena, debe comenzar y terminar con una comilla simple o doble. ¿Qué sucede cuando necesita una cita literal: <code>&quot;</code> o <code>&#39;</code> dentro de su cadena?
En JavaScript, puede <dfn>evitar que</dfn> una cita la considere como un final de cadena de la cadena colocando una <dfn>barra invertida</dfn> ( <code>\</code> ) delante de la cita. En JavaScript, puede <dfn>evitar que</dfn> una cita la considere como un final de cadena de la cadena colocando una <dfn>barra invertida</dfn> ( <code>\</code> ) delante de la cita.
<code>var sampleStr = &quot;Alan said, \&quot;Peter is learning JavaScript\&quot;.&quot;;</code> <code>var sampleStr = &quot;Alan said, \&quot;Peter is learning JavaScript\&quot;.&quot;;</code>
Esto indica a JavaScript que la siguiente cita no es el final de la cadena, sino que debería aparecer dentro de la cadena. Por lo tanto, si imprimiera esto en En la consola, obtendrías: Esto indica a JavaScript que la siguiente cita no es el final de la cadena, sino que debería aparecer dentro de la cadena. Por lo tanto, si imprimiera esto en En la consola, obtendrías:
<code>Alan said, &quot;Peter is learning JavaScript&quot;.</code> <code>Alan said, &quot;Peter is learning JavaScript&quot;.</code>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Use <dfn>barras diagonales inversas</dfn> para asignar una cadena a la variable <code>myStr</code> modo que si tuviera que imprimirla en la consola, verá: Use <dfn>barras diagonales inversas</dfn> para asignar una cadena a la variable <code>myStr</code> modo que si tuviera que imprimirla en la consola, verá:
<code>I am a &quot;double quoted&quot; string inside &quot;double quotes&quot;.</code> <code>I am a &quot;double quoted&quot; string inside &quot;double quotes&quot;.</code>
</section> </section>
## Tests ## Tests
@ -25,9 +25,9 @@ Use <dfn>barras diagonales inversas</dfn> para asignar una cadena a la variable
```yml ```yml
tests: tests:
- text: &#39;Debería usar dos comillas dobles ( <code>&quot;</code> ) y cuatro comillas dobles escapadas ( <code>\&quot;</code> ).&#39; - text: 'Debería usar dos comillas dobles ( <code>&quot;</code> ) y cuatro comillas dobles escapadas ( <code>\&quot;</code> ).'
testString: 'assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2, "You should use two double quotes (<code>&quot;</code>) and four escaped double quotes (<code>&#92;&quot;</code>).");' testString: 'assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2, "You should use two double quotes (<code>&quot;</code>) and four escaped double quotes (<code>&#92;&quot;</code>).");'
- text: &#39;Variable myStr debe contener la cadena: <code>I am a &quot;double quoted&quot; string inside &quot;double quotes&quot;.</code> comilla <code>I am a &quot;double quoted&quot; string inside &quot;double quotes&quot;.</code> &#39; - text: 'Variable myStr debe contener la cadena: <code>I am a &quot;double quoted&quot; string inside &quot;double quotes&quot;.</code> comilla <code>I am a &quot;double quoted&quot; string inside &quot;double quotes&quot;.</code> '
testString: 'assert(myStr === "I am a \"double quoted\" string inside \"double quotes\".", "Variable myStr should contain the string: <code>I am a "double quoted" string inside "double quotes".</code>");' testString: 'assert(myStr === "I am a \"double quoted\" string inside \"double quotes\".", "Variable myStr should contain the string: <code>I am a "double quoted" string inside "double quotes".</code>");'
``` ```

View File

@ -6,15 +6,15 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Puede encontrar la longitud de un valor de <code>String</code> escribiendo <code>.length</code> después de la variable de cadena o el literal de cadena. Puede encontrar la longitud de un valor de <code>String</code> escribiendo <code>.length</code> después de la variable de cadena o el literal de cadena.
<code>&quot;Alan Peter&quot;.length; // 10</code> <code>&quot;Alan Peter&quot;.length; // 10</code>
Por ejemplo, si creamos una variable <code>var firstName = &quot;Charles&quot;</code> , podríamos averiguar cuánto tiempo dura la cadena <code>&quot;Charles&quot;</code> utilizando la propiedad <code>firstName.length</code> . Por ejemplo, si creamos una variable <code>var firstName = &quot;Charles&quot;</code> , podríamos averiguar cuánto tiempo dura la cadena <code>&quot;Charles&quot;</code> utilizando la propiedad <code>firstName.length</code> .
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Use la propiedad <code>.length</code> para contar el número de caracteres en la variable <code>lastName</code> y asignarla a <code>lastNameLength</code> . Use la propiedad <code>.length</code> para contar el número de caracteres en la variable <code>lastName</code> y asignarla a <code>lastNameLength</code> .
</section> </section>
## Tests ## Tests
@ -24,7 +24,7 @@ Use la propiedad <code>.length</code> para contar el número de caracteres en la
tests: tests:
- text: <code>lastNameLength</code> debe ser igual a ocho. - text: <code>lastNameLength</code> debe ser igual a ocho.
testString: 'assert((function(){if(typeof lastNameLength !== "undefined" && typeof lastNameLength === "number" && lastNameLength === 8){return true;}else{return false;}})(), "<code>lastNameLength</code> should be equal to eight.");' testString: 'assert((function(){if(typeof lastNameLength !== "undefined" && typeof lastNameLength === "number" && lastNameLength === 8){return true;}else{return false;}})(), "<code>lastNameLength</code> should be equal to eight.");'
- text: &#39;Deberías obtener la longitud del <code>lastName</code> al usar <code>.length</code> esta manera: <code>lastName.length</code> &#39;. - text: 'Deberías obtener la longitud del <code>lastName</code> al usar <code>.length</code> esta manera: <code>lastName.length</code> '
testString: 'assert((function(){if(code.match(/\.length/gi) && code.match(/\.length/gi).length >= 2 && code.match(/var lastNameLength \= 0;/gi) && code.match(/var lastNameLength \= 0;/gi).length >= 1){return true;}else{return false;}})(), "You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.");' testString: 'assert((function(){if(code.match(/\.length/gi) && code.match(/\.length/gi).length >= 2 && code.match(/var lastNameLength \= 0;/gi) && code.match(/var lastNameLength \= 0;/gi).length >= 1){return true;}else{return false;}})(), "You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.");'
``` ```

View File

@ -6,16 +6,16 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
En lugar de generar un número aleatorio entre cero y un número dado como hicimos antes, podemos generar un número aleatorio que se encuentre dentro de un rango de dos números específicos. En lugar de generar un número aleatorio entre cero y un número dado como hicimos antes, podemos generar un número aleatorio que se encuentre dentro de un rango de dos números específicos.
Para hacer esto, definiremos un número mínimo <code>min</code> y un máximo número <code>max</code> . Para hacer esto, definiremos un número mínimo <code>min</code> y un máximo número <code>max</code> .
Aquí está la fórmula que usaremos. Tómese un momento para leerlo e intente entender lo que hace este código: Aquí está la fórmula que usaremos. Tómese un momento para leerlo e intente entender lo que hace este código:
<code>Math.floor(Math.random() * (max - min + 1)) + min</code> <code>Math.floor(Math.random() * (max - min + 1)) + min</code>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Cree una función llamada <code>randomRange</code> que tome un rango <code>myMin</code> y <code>myMax</code> y devuelva un número aleatorio que sea mayor o igual que <code>myMin</code> , y que sea menor o igual que <code>myMax</code> , inclusive. Cree una función llamada <code>randomRange</code> que tome un rango <code>myMin</code> y <code>myMax</code> y devuelva un número aleatorio que sea mayor o igual que <code>myMin</code> , y que sea menor o igual que <code>myMax</code> , inclusive.
</section> </section>
## Tests ## Tests
@ -23,13 +23,13 @@ Cree una función llamada <code>randomRange</code> que tome un rango <code>myMin
```yml ```yml
tests: tests:
- text: &#39;El número aleatorio más bajo que puede ser generado por <code>randomRange</code> debería ser igual a tu número mínimo, <code>myMin</code> &#39;. - text: 'El número aleatorio más bajo que puede ser generado por <code>randomRange</code> debería ser igual a tu número mínimo, <code>myMin</code> '
testString: 'assert(calcMin === 5, "The lowest random number that can be generated by <code>randomRange</code> should be equal to your minimum number, <code>myMin</code>.");' testString: 'assert(calcMin === 5, "The lowest random number that can be generated by <code>randomRange</code> should be equal to your minimum number, <code>myMin</code>.");'
- text: &quot;El número aleatorio más alto que puede ser generado por <code>randomRange</code> debería ser igual a tu número máximo, <code>myMax</code> &quot;. - text: &quot;El número aleatorio más alto que puede ser generado por <code>randomRange</code> debería ser igual a tu número máximo, <code>myMax</code> &quot;.
testString: 'assert(calcMax === 15, "The highest random number that can be generated by <code>randomRange</code> should be equal to your maximum number, <code>myMax</code>.");' testString: 'assert(calcMax === 15, "The highest random number that can be generated by <code>randomRange</code> should be equal to your maximum number, <code>myMax</code>.");'
- text: &#39;El número aleatorio generado por <code>randomRange</code> debe ser un número entero, no un decimal&#39;. - text: 'El número aleatorio generado por <code>randomRange</code> debe ser un número entero, no un decimal'
testString: 'assert(randomRange(0,1) % 1 === 0 , "The random number generated by <code>randomRange</code> should be an integer, not a decimal.");' testString: 'assert(randomRange(0,1) % 1 === 0 , "The random number generated by <code>randomRange</code> should be an integer, not a decimal.");'
- text: &#39; <code>randomRange</code> debe usar <code>myMax</code> y <code>myMin</code> , y devolver un número aleatorio en tu rango&#39;. - text: ' <code>randomRange</code> debe usar <code>myMax</code> y <code>myMin</code> , y devolver un número aleatorio en tu rango'
testString: 'assert((function(){if(code.match(/myMax/g).length > 1 && code.match(/myMin/g).length > 2 && code.match(/Math.floor/g) && code.match(/Math.random/g)){return true;}else{return false;}})(), "<code>randomRange</code> should use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.");' testString: 'assert((function(){if(code.match(/myMax/g).length > 1 && code.match(/myMin/g).length > 2 && code.match(/Math.floor/g) && code.match(/Math.random/g)){return true;}else{return false;}})(), "<code>randomRange</code> should use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.");'
``` ```

View File

@ -6,15 +6,15 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
En el juego de <a href="https://en.wikipedia.org/wiki/Golf" target="_blank">golf,</a> cada hoyo tiene un <code>par</code> significa el número promedio de <code>strokes</code> que se espera que un golfista realice para hundir la bola en un hoyo para completar el juego. Dependiendo de qué tan por encima o <code>par</code> debajo de tus <code>strokes</code> , hay un apodo diferente. En el juego de <a href="https://en.wikipedia.org/wiki/Golf" target="_blank">golf,</a> cada hoyo tiene un <code>par</code> significa el número promedio de <code>strokes</code> que se espera que un golfista realice para hundir la bola en un hoyo para completar el juego. Dependiendo de qué tan por encima o <code>par</code> debajo de tus <code>strokes</code> , hay un apodo diferente.
Su función se pasará <code>par</code> y <code>strokes</code> argumentos. Devuelva la cadena correcta de acuerdo con esta tabla que enumera los trazos en orden de prioridad; arriba (más alto) a abajo (más bajo): Su función se pasará <code>par</code> y <code>strokes</code> argumentos. Devuelva la cadena correcta de acuerdo con esta tabla que enumera los trazos en orden de prioridad; arriba (más alto) a abajo (más bajo):
<table class="table table-striped"><thead><tr><th> Trazos </th><th> Regreso </th></tr></thead><tbody><tr><td> 1 </td><td> &quot;¡Hoyo en uno!&quot; </td></tr><tr><td> &lt;= par - 2 </td><td> &quot;Águila&quot; </td></tr><tr><td> par - 1 </td><td> &quot;Pajarito&quot; </td></tr><tr><td> par </td><td> &quot;Par&quot; </td></tr><tr><td> par + 1 </td><td> &quot;Espectro&quot; </td></tr><tr><td> par + 2 </td><td> &quot;Doble Bogey&quot; </td></tr><tr><td> &gt; = par + 3 </td><td> &quot;¡Vete a casa!&quot; </td></tr></tbody></table> <table class="table table-striped"><thead><tr><th> Trazos </th><th> Regreso </th></tr></thead><tbody><tr><td> 1 </td><td> &quot;¡Hoyo en uno!&quot; </td></tr><tr><td> &lt;= par - 2 </td><td> &quot;Águila&quot; </td></tr><tr><td> par - 1 </td><td> &quot;Pajarito&quot; </td></tr><tr><td> par </td><td> &quot;Par&quot; </td></tr><tr><td> par + 1 </td><td> &quot;Espectro&quot; </td></tr><tr><td> par + 2 </td><td> &quot;Doble Bogey&quot; </td></tr><tr><td> &gt; = par + 3 </td><td> &quot;¡Vete a casa!&quot; </td></tr></tbody></table>
<code>par</code> y <code>strokes</code> siempre serán numéricos y positivos. Hemos agregado una matriz de todos los nombres para su conveniencia. <code>par</code> y <code>strokes</code> siempre serán numéricos y positivos. Hemos agregado una matriz de todos los nombres para su conveniencia.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -23,27 +23,27 @@ Su función se pasará <code>par</code> y <code>strokes</code> argumentos. Devue
```yml ```yml
tests: tests:
- text: &#39; <code>golfScore(4, 1)</code> debe devolver &quot;Hole-in-one!&quot;&#39; - text: ' <code>golfScore(4, 1)</code> debe devolver &quot;Hole-in-one!&quot;'
testString: 'assert(golfScore(4, 1) === "Hole-in-one!", "<code>golfScore(4, 1)</code> should return "Hole-in-one!"");' testString: 'assert(golfScore(4, 1) === "Hole-in-one!", "<code>golfScore(4, 1)</code> should return "Hole-in-one!"");'
- text: &#39; <code>golfScore(4, 2)</code> debe devolver &quot;Eagle&quot;&#39; - text: ' <code>golfScore(4, 2)</code> debe devolver &quot;Eagle&quot;'
testString: 'assert(golfScore(4, 2) === "Eagle", "<code>golfScore(4, 2)</code> should return "Eagle"");' testString: 'assert(golfScore(4, 2) === "Eagle", "<code>golfScore(4, 2)</code> should return "Eagle"");'
- text: &#39; <code>golfScore(5, 2)</code> debe devolver &quot;Eagle&quot;&#39; - text: ' <code>golfScore(5, 2)</code> debe devolver &quot;Eagle&quot;'
testString: 'assert(golfScore(5, 2) === "Eagle", "<code>golfScore(5, 2)</code> should return "Eagle"");' testString: 'assert(golfScore(5, 2) === "Eagle", "<code>golfScore(5, 2)</code> should return "Eagle"");'
- text: &#39; <code>golfScore(4, 3)</code> debe devolver &quot;Birdie&quot;&#39; - text: ' <code>golfScore(4, 3)</code> debe devolver &quot;Birdie&quot;'
testString: 'assert(golfScore(4, 3) === "Birdie", "<code>golfScore(4, 3)</code> should return "Birdie"");' testString: 'assert(golfScore(4, 3) === "Birdie", "<code>golfScore(4, 3)</code> should return "Birdie"");'
- text: &#39; <code>golfScore(4, 4)</code> debe devolver &quot;Par&quot; - text: ' <code>golfScore(4, 4)</code> debe devolver &quot;Par&quot;
testString: 'assert(golfScore(4, 4) === "Par", "<code>golfScore(4, 4)</code> should return "Par"");' testString: 'assert(golfScore(4, 4) === "Par", "<code>golfScore(4, 4)</code> should return "Par"");'
- text: &#39; <code>golfScore(1, 1)</code> debe devolver &quot;Hole-in-one!&quot;&#39; - text: ' <code>golfScore(1, 1)</code> debe devolver &quot;Hole-in-one!&quot;'
testString: 'assert(golfScore(1, 1) === "Hole-in-one!", "<code>golfScore(1, 1)</code> should return "Hole-in-one!"");' testString: 'assert(golfScore(1, 1) === "Hole-in-one!", "<code>golfScore(1, 1)</code> should return "Hole-in-one!"");'
- text: &#39; <code>golfScore(5, 5)</code> debe devolver &quot;Par&quot; - text: ' <code>golfScore(5, 5)</code> debe devolver &quot;Par&quot;
testString: 'assert(golfScore(5, 5) === "Par", "<code>golfScore(5, 5)</code> should return "Par"");' testString: 'assert(golfScore(5, 5) === "Par", "<code>golfScore(5, 5)</code> should return "Par"");'
- text: &#39; <code>golfScore(4, 5)</code> debería devolver &quot;Bogey&quot;&#39; - text: ' <code>golfScore(4, 5)</code> debería devolver &quot;Bogey&quot;'
testString: 'assert(golfScore(4, 5) === "Bogey", "<code>golfScore(4, 5)</code> should return "Bogey"");' testString: 'assert(golfScore(4, 5) === "Bogey", "<code>golfScore(4, 5)</code> should return "Bogey"");'
- text: &#39; <code>golfScore(4, 6)</code> debería devolver &quot;Double Bogey&quot;&#39; - text: ' <code>golfScore(4, 6)</code> debería devolver &quot;Double Bogey&quot;'
testString: 'assert(golfScore(4, 6) === "Double Bogey", "<code>golfScore(4, 6)</code> should return "Double Bogey"");' testString: 'assert(golfScore(4, 6) === "Double Bogey", "<code>golfScore(4, 6)</code> should return "Double Bogey"");'
- text: &#39; <code>golfScore(4, 7)</code> debe devolver &quot;Go Home!&quot;&#39; - text: ' <code>golfScore(4, 7)</code> debe devolver &quot;Go Home!&quot;'
testString: 'assert(golfScore(4, 7) === "Go Home!", "<code>golfScore(4, 7)</code> should return "Go Home!"");' testString: 'assert(golfScore(4, 7) === "Go Home!", "<code>golfScore(4, 7)</code> should return "Go Home!"");'
- text: &#39; <code>golfScore(5, 9)</code> debe devolver &quot;Go Home!&quot;&#39; - text: ' <code>golfScore(5, 9)</code> debe devolver &quot;Go Home!&quot;'
testString: 'assert(golfScore(5, 9) === "Go Home!", "<code>golfScore(5, 9)</code> should return "Go Home!"");' testString: 'assert(golfScore(5, 9) === "Go Home!", "<code>golfScore(5, 9)</code> should return "Go Home!"");'
``` ```

View File

@ -6,17 +6,17 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Para que los bucles no tengan que iterar uno a la vez. Al cambiar nuestra <code>final-expression</code> , podemos contar por números pares. Para que los bucles no tengan que iterar uno a la vez. Al cambiar nuestra <code>final-expression</code> , podemos contar por números pares.
Comenzaremos en <code>i = 0</code> y haremos un bucle mientras que <code>i &lt; 10</code> . Incrementaremos <code>i</code> en 2 en cada bucle con <code>i += 2</code> . Comenzaremos en <code>i = 0</code> y haremos un bucle mientras que <code>i &lt; 10</code> . Incrementaremos <code>i</code> en 2 en cada bucle con <code>i += 2</code> .
<blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 10; i += 2) {<br>&nbsp;&nbsp;ourArray.push(i);<br>}</blockquote> <blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 10; i += 2) {<br>&nbsp;&nbsp;ourArray.push(i);<br>}</blockquote>
<code>ourArray</code> ahora contendrá <code>[0,2,4,6,8]</code> . <code>ourArray</code> ahora contendrá <code>[0,2,4,6,8]</code> .
Cambiemos nuestra <code>initialization</code> para que podamos contar por números impares. Cambiemos nuestra <code>initialization</code> para que podamos contar por números impares.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Empuje los números impares del 1 al 9 a <code>myArray</code> usando un bucle <code>for</code> . Empuje los números impares del 1 al 9 a <code>myArray</code> usando un bucle <code>for</code> .
</section> </section>
## Tests ## Tests
@ -26,7 +26,7 @@ Empuje los números impares del 1 al 9 a <code>myArray</code> usando un bucle <c
tests: tests:
- text: Usted debe estar usando una <code>for</code> bucle para esto. - text: Usted debe estar usando una <code>for</code> bucle para esto.
testString: 'assert(code.match(/for\s*\(/g).length > 1, "You should be using a <code>for</code> loop for this.");' testString: 'assert(code.match(/for\s*\(/g).length > 1, "You should be using a <code>for</code> loop for this.");'
- text: &#39; <code>myArray</code> debería ser igual a <code>[1,3,5,7,9]</code> .&#39; - text: ' <code>myArray</code> debería ser igual a <code>[1,3,5,7,9]</code> .'
testString: 'assert.deepEqual(myArray, [1,3,5,7,9], "<code>myArray</code> should equal <code>[1,3,5,7,9]</code>.");' testString: 'assert.deepEqual(myArray, [1,3,5,7,9], "<code>myArray</code> should equal <code>[1,3,5,7,9]</code>.");'
``` ```

View File

@ -6,24 +6,24 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Puede ejecutar el mismo código varias veces utilizando un bucle. Puede ejecutar el mismo código varias veces utilizando un bucle.
El siguiente tipo de bucle que aprenderá se llama bucle &quot; <code>do...while</code> &quot; porque primero &quot; <code>do</code> &quot; una pasada del código dentro del bucle sin importar qué, y luego se ejecuta &quot; <code>while</code> &quot; una condición específica es verdadero y se detiene una vez que esa condición ya no es verdadera. Veamos un ejemplo. El siguiente tipo de bucle que aprenderá se llama bucle &quot; <code>do...while</code> &quot; porque primero &quot; <code>do</code> &quot; una pasada del código dentro del bucle sin importar qué, y luego se ejecuta &quot; <code>while</code> &quot; una condición específica es verdadero y se detiene una vez que esa condición ya no es verdadera. Veamos un ejemplo.
<blockquote>var ourArray = [];<br>var i = 0;<br>do {<br>&nbsp;&nbsp;ourArray.push(i);<br>&nbsp;&nbsp;i++;<br>} while (i < 5);</blockquote> <blockquote>var ourArray = [];<br>var i = 0;<br>do {<br>&nbsp;&nbsp;ourArray.push(i);<br>&nbsp;&nbsp;i++;<br>} while (i < 5);</blockquote>
Esto se comporta como se esperaría con cualquier otro tipo de bucle, y la matriz resultante se verá como <code>[0, 1, 2, 3, 4]</code> . Sin embargo, lo que hace <code>do...while</code> diferente de otros bucles es cómo se comporta cuando la condición falla en la primera comprobación. Veamos esto en acción. Esto se comporta como se esperaría con cualquier otro tipo de bucle, y la matriz resultante se verá como <code>[0, 1, 2, 3, 4]</code> . Sin embargo, lo que hace <code>do...while</code> diferente de otros bucles es cómo se comporta cuando la condición falla en la primera comprobación. Veamos esto en acción.
Aquí hay un bucle while común que ejecutará el código en el bucle siempre y cuando <code>i &lt; 5</code> . Aquí hay un bucle while común que ejecutará el código en el bucle siempre y cuando <code>i &lt; 5</code> .
<blockquote>var ourArray = []; <br>var i = 5;<br>while (i < 5) {<br>&nbsp;&nbsp;ourArray.push(i);<br>&nbsp;&nbsp;i++;<br>}</blockquote> <blockquote>var ourArray = []; <br>var i = 5;<br>while (i < 5) {<br>&nbsp;&nbsp;ourArray.push(i);<br>&nbsp;&nbsp;i++;<br>}</blockquote>
Observe que inicializamos el valor de <code>i</code> en 5. Cuando ejecutamos la siguiente línea, notamos que <code>i</code> no es menor que 5. Por lo tanto, no ejecutamos el código dentro del bucle. El resultado es que <code>ourArray</code> no agregará nada, por lo que aún se verá así <code>[]</code> cuando todo el código del ejemplo anterior termine de ejecutarse. Observe que inicializamos el valor de <code>i</code> en 5. Cuando ejecutamos la siguiente línea, notamos que <code>i</code> no es menor que 5. Por lo tanto, no ejecutamos el código dentro del bucle. El resultado es que <code>ourArray</code> no agregará nada, por lo que aún se verá así <code>[]</code> cuando todo el código del ejemplo anterior termine de ejecutarse.
Ahora, eche un vistazo a un <code>do...while</code> loop. Ahora, eche un vistazo a un <code>do...while</code> loop.
<blockquote>var ourArray = []; <br>var i = 5;<br>do {<br>&nbsp;&nbsp;ourArray.push(i);<br>&nbsp;&nbsp;i++;<br>} while (i < 5);</blockquote> <blockquote>var ourArray = []; <br>var i = 5;<br>do {<br>&nbsp;&nbsp;ourArray.push(i);<br>&nbsp;&nbsp;i++;<br>} while (i < 5);</blockquote>
En este caso, inicializamos el valor de <code>i</code> como 5, como hicimos con el bucle while. Cuando llegamos a la siguiente línea, no hay comprobación del valor de <code>i</code> , por lo que vamos al código dentro de las llaves y lo ejecutamos. Agregaremos un elemento a la matriz e incrementaremos <code>i</code> antes de llegar a la verificación de condición. Entonces, cuando se llega a comprobar si <code>i &lt; 5</code> ver que <code>i</code> es ahora de 6 años, que no pasa la comprobación condicional. Así que salimos del bucle y estamos listos. Al final del ejemplo anterior, el valor de <code>ourArray</code> es <code>[5]</code> . En este caso, inicializamos el valor de <code>i</code> como 5, como hicimos con el bucle while. Cuando llegamos a la siguiente línea, no hay comprobación del valor de <code>i</code> , por lo que vamos al código dentro de las llaves y lo ejecutamos. Agregaremos un elemento a la matriz e incrementaremos <code>i</code> antes de llegar a la verificación de condición. Entonces, cuando se llega a comprobar si <code>i &lt; 5</code> ver que <code>i</code> es ahora de 6 años, que no pasa la comprobación condicional. Así que salimos del bucle y estamos listos. Al final del ejemplo anterior, el valor de <code>ourArray</code> es <code>[5]</code> .
Esencialmente, un bucle <code>do...while</code> while garantiza que el código dentro del bucle se ejecute al menos una vez. Esencialmente, un bucle <code>do...while</code> while garantiza que el código dentro del bucle se ejecute al menos una vez.
Intentemos obtener un ciclo <code>do...while</code> while para que funcione presionando los valores en una matriz. Intentemos obtener un ciclo <code>do...while</code> while para que funcione presionando los valores en una matriz.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Cambiar el <code>while</code> de bucle en el código a un <code>do...while</code> bucle de modo que el bucle empujará el número 10 a <code>myArray</code> , y <code>i</code> será igual a <code>11</code> cuando el código termina de ejecutarse. Cambiar el <code>while</code> de bucle en el código a un <code>do...while</code> bucle de modo que el bucle empujará el número 10 a <code>myArray</code> , y <code>i</code> será igual a <code>11</code> cuando el código termina de ejecutarse.
</section> </section>
## Tests ## Tests
@ -33,7 +33,7 @@ Cambiar el <code>while</code> de bucle en el código a un <code>do...while</code
tests: tests:
- text: Deberías usar un bucle <code>do...while</code> while para esto. - text: Deberías usar un bucle <code>do...while</code> while para esto.
testString: 'assert(code.match(/do/g), "You should be using a <code>do...while</code> loop for this.");' testString: 'assert(code.match(/do/g), "You should be using a <code>do...while</code> loop for this.");'
- text: &#39; <code>myArray</code> debería ser igual a <code>[10]</code> &#39;. - text: ' <code>myArray</code> debería ser igual a <code>[10]</code> '
testString: 'assert.deepEqual(myArray, [10], "<code>myArray</code> should equal <code>[10]</code>.");' testString: 'assert.deepEqual(myArray, [10], "<code>myArray</code> should equal <code>[10]</code>.");'
- text: <code>i</code> debe ser igual a <code>11</code> - text: <code>i</code> debe ser igual a <code>11</code>
testString: 'assert.deepEqual(i, 11, "<code>i</code> should equal <code>11</code>");' testString: 'assert.deepEqual(i, 11, "<code>i</code> should equal <code>11</code>");'

View File

@ -6,22 +6,22 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Puede ejecutar el mismo código varias veces utilizando un bucle. Puede ejecutar el mismo código varias veces utilizando un bucle.
El tipo más común de bucle de JavaScript se llama &quot; <code>for loop</code> &quot; porque se ejecuta &quot;por&quot; un número específico de veces. El tipo más común de bucle de JavaScript se llama &quot; <code>for loop</code> &quot; porque se ejecuta &quot;por&quot; un número específico de veces.
Para los bucles se declaran con tres expresiones opcionales separadas por punto y coma: Para los bucles se declaran con tres expresiones opcionales separadas por punto y coma:
<code>for ([initialization]; [condition]; [final-expression])</code> <code>for ([initialization]; [condition]; [final-expression])</code>
La instrucción de <code>initialization</code> se ejecuta una sola vez antes de que comience el bucle. Normalmente se utiliza para definir y configurar su variable de bucle. La instrucción de <code>initialization</code> se ejecuta una sola vez antes de que comience el bucle. Normalmente se utiliza para definir y configurar su variable de bucle.
La declaración de <code>condition</code> se evalúa al comienzo de cada iteración de bucle y continuará mientras se evalúe como <code>true</code> . Cuando la <code>condition</code> es <code>false</code> al inicio de la iteración, el bucle dejará de ejecutarse. Esto significa que si la <code>condition</code> comienza como <code>false</code> , su bucle nunca se ejecutará. La declaración de <code>condition</code> se evalúa al comienzo de cada iteración de bucle y continuará mientras se evalúe como <code>true</code> . Cuando la <code>condition</code> es <code>false</code> al inicio de la iteración, el bucle dejará de ejecutarse. Esto significa que si la <code>condition</code> comienza como <code>false</code> , su bucle nunca se ejecutará.
La <code>final-expression</code> se ejecuta al final de cada iteración de bucle, antes de la siguiente verificación de <code>condition</code> y generalmente se usa para aumentar o disminuir su contador de bucle. La <code>final-expression</code> se ejecuta al final de cada iteración de bucle, antes de la siguiente verificación de <code>condition</code> y generalmente se usa para aumentar o disminuir su contador de bucle.
En el siguiente ejemplo, inicializamos con <code>i = 0</code> e iteramos mientras nuestra condición <code>i &lt; 5</code> es verdadera. Incrementaremos <code>i</code> en <code>1</code> en cada iteración de bucle con <code>i++</code> como nuestra <code>final-expression</code> . En el siguiente ejemplo, inicializamos con <code>i = 0</code> e iteramos mientras nuestra condición <code>i &lt; 5</code> es verdadera. Incrementaremos <code>i</code> en <code>1</code> en cada iteración de bucle con <code>i++</code> como nuestra <code>final-expression</code> .
<blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 5; i++) {<br>&nbsp;&nbsp;ourArray.push(i);<br>}</blockquote> <blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 5; i++) {<br>&nbsp;&nbsp;ourArray.push(i);<br>}</blockquote>
<code>ourArray</code> ahora contendrá <code>[0,1,2,3,4]</code> . <code>ourArray</code> ahora contendrá <code>[0,1,2,3,4]</code> .
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Use un bucle <code>for</code> para trabajar y empujar los valores del 1 al 5 en <code>myArray</code> . Use un bucle <code>for</code> para trabajar y empujar los valores del 1 al 5 en <code>myArray</code> .
</section> </section>
## Tests ## Tests
@ -31,7 +31,7 @@ Use un bucle <code>for</code> para trabajar y empujar los valores del 1 al 5 en
tests: tests:
- text: Usted debe estar usando una <code>for</code> bucle para esto. - text: Usted debe estar usando una <code>for</code> bucle para esto.
testString: 'assert(code.match(/for\s*\(/g).length > 1, "You should be using a <code>for</code> loop for this.");' testString: 'assert(code.match(/for\s*\(/g).length > 1, "You should be using a <code>for</code> loop for this.");'
- text: &#39; <code>myArray</code> debe ser igual a <code>[1,2,3,4,5]</code> .&#39; - text: ' <code>myArray</code> debe ser igual a <code>[1,2,3,4,5]</code> .'
testString: 'assert.deepEqual(myArray, [1,2,3,4,5], "<code>myArray</code> should equal <code>[1,2,3,4,5]</code>.");' testString: 'assert.deepEqual(myArray, [1,2,3,4,5], "<code>myArray</code> should equal <code>[1,2,3,4,5]</code>.");'
``` ```

View File

@ -6,16 +6,16 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Puede ejecutar el mismo código varias veces utilizando un bucle. Puede ejecutar el mismo código varias veces utilizando un bucle.
El primer tipo de bucle vamos a aprender se llama un &quot; <code>while</code> &quot; bucle porque funciona &quot;mientras que&quot; una condición especificada es verdadera y se detiene una vez que la condición ya no es cierto. El primer tipo de bucle vamos a aprender se llama un &quot; <code>while</code> &quot; bucle porque funciona &quot;mientras que&quot; una condición especificada es verdadera y se detiene una vez que la condición ya no es cierto.
<blockquote>var ourArray = [];<br>var i = 0;<br>while(i &#60; 5) {<br>&nbsp;&nbsp;ourArray.push(i);<br>&nbsp;&nbsp;i++;<br>}</blockquote> <blockquote>var ourArray = [];<br>var i = 0;<br>while(i &#60; 5) {<br>&nbsp;&nbsp;ourArray.push(i);<br>&nbsp;&nbsp;i++;<br>}</blockquote>
Intentemos que funcione un bucle while empujando los valores a una matriz. Intentemos que funcione un bucle while empujando los valores a una matriz.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Empuje los números de 0 a 4 para <code>myArray</code> usando un <code>while</code> de bucle. Empuje los números de 0 a 4 para <code>myArray</code> usando un <code>while</code> de bucle.
</section> </section>
## Tests ## Tests
@ -25,7 +25,7 @@ Empuje los números de 0 a 4 para <code>myArray</code> usando un <code>while</co
tests: tests:
- text: Usted debe utilizar un <code>while</code> de bucle para esto. - text: Usted debe utilizar un <code>while</code> de bucle para esto.
testString: 'assert(code.match(/while/g), "You should be using a <code>while</code> loop for this.");' testString: 'assert(code.match(/while/g), "You should be using a <code>while</code> loop for this.");'
- text: &#39; <code>myArray</code> debe ser igual a <code>[0,1,2,3,4]</code> .&#39; - text: ' <code>myArray</code> debe ser igual a <code>[0,1,2,3,4]</code> .'
testString: 'assert.deepEqual(myArray, [0,1,2,3,4], "<code>myArray</code> should equal <code>[0,1,2,3,4]</code>.");' testString: 'assert.deepEqual(myArray, [0,1,2,3,4], "<code>myArray</code> should equal <code>[0,1,2,3,4]</code>.");'
``` ```

View File

@ -6,16 +6,16 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Otra forma de cambiar los datos en una matriz es con la función <code>.pop()</code> . Otra forma de cambiar los datos en una matriz es con la función <code>.pop()</code> .
<code>.pop()</code> se usa para &quot; <code>.pop()</code> &quot; un valor del final de una matriz. Podemos almacenar este valor &quot;extraído&quot; asignándolo a una variable. En otras palabras, <code>.pop()</code> elimina el último elemento de una matriz y devuelve ese elemento. <code>.pop()</code> se usa para &quot; <code>.pop()</code> &quot; un valor del final de una matriz. Podemos almacenar este valor &quot;extraído&quot; asignándolo a una variable. En otras palabras, <code>.pop()</code> elimina el último elemento de una matriz y devuelve ese elemento.
Cualquier tipo de entrada se puede &quot;extraer&quot; de una matriz: números, cadenas, incluso matrices anidadas. Cualquier tipo de entrada se puede &quot;extraer&quot; de una matriz: números, cadenas, incluso matrices anidadas.
<blockquote> <code>var threeArr = [1, 4, 6];<br> var oneDown = threeArr.pop();<br> console.log(oneDown); // Returns 6<br> console.log(threeArr); // Returns [1, 4]</code> </blockquote> <blockquote> <code>var threeArr = [1, 4, 6];<br> var oneDown = threeArr.pop();<br> console.log(oneDown); // Returns 6<br> console.log(threeArr); // Returns [1, 4]</code> </blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Use la función <code>.pop()</code> para eliminar el último elemento de <code>myArray</code> , asignando el valor de &quot;desprendimiento de&quot; a <code>removedFromMyArray</code> . Use la función <code>.pop()</code> para eliminar el último elemento de <code>myArray</code> , asignando el valor de &quot;desprendimiento de&quot; a <code>removedFromMyArray</code> .
</section> </section>
## Tests ## Tests
@ -23,11 +23,11 @@ Use la función <code>.pop()</code> para eliminar el último elemento de <code>m
```yml ```yml
tests: tests:
- text: &#39; <code>myArray</code> solo debe contener <code>[[&quot;John&quot;, 23]]</code> .&#39; - text: ' <code>myArray</code> solo debe contener <code>[[&quot;John&quot;, 23]]</code> .'
testString: 'assert((function(d){if(d[0][0] == "John" && d[0][1] === 23 && d[1] == undefined){return true;}else{return false;}})(myArray), "<code>myArray</code> should only contain <code>[["John", 23]]</code>.");' testString: 'assert((function(d){if(d[0][0] == "John" && d[0][1] === 23 && d[1] == undefined){return true;}else{return false;}})(myArray), "<code>myArray</code> should only contain <code>[["John", 23]]</code>.");'
- text: Usa <code>pop()</code> en <code>myArray</code> - text: Usa <code>pop()</code> en <code>myArray</code>
testString: 'assert(/removedFromMyArray\s*=\s*myArray\s*.\s*pop\s*(\s*)/.test(code), "Use <code>pop()</code> on <code>myArray</code>");' testString: 'assert(/removedFromMyArray\s*=\s*myArray\s*.\s*pop\s*(\s*)/.test(code), "Use <code>pop()</code> on <code>myArray</code>");'
- text: &#39; <code>removedFromMyArray</code> solo debe contener <code>[&quot;cat&quot;, 2]</code> .&#39; - text: ' <code>removedFromMyArray</code> solo debe contener <code>[&quot;cat&quot;, 2]</code> .'
testString: 'assert((function(d){if(d[0] == "cat" && d[1] === 2 && d[2] == undefined){return true;}else{return false;}})(removedFromMyArray), "<code>removedFromMyArray</code> should only contain <code>["cat", 2]</code>.");' testString: 'assert((function(d){if(d[0] == "cat" && d[1] === 2 && d[2] == undefined){return true;}else{return false;}})(removedFromMyArray), "<code>removedFromMyArray</code> should only contain <code>["cat", 2]</code>.");'
``` ```

View File

@ -6,15 +6,15 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Una forma fácil de agregar datos al final de una matriz es a través de la función <code>push()</code> . Una forma fácil de agregar datos al final de una matriz es a través de la función <code>push()</code> .
<code>.push()</code> toma uno o más <dfn>parámetros</dfn> y los &quot;empuja&quot; al final de la matriz. <code>.push()</code> toma uno o más <dfn>parámetros</dfn> y los &quot;empuja&quot; al final de la matriz.
<blockquote>var arr = [1,2,3];<br>arr.push(4);<br>// arr is now [1,2,3,4]</blockquote> <blockquote>var arr = [1,2,3];<br>arr.push(4);<br>// arr is now [1,2,3,4]</blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Presione <code>[&quot;dog&quot;, 3]</code> en el extremo de la variable <code>myArray</code> . Presione <code>[&quot;dog&quot;, 3]</code> en el extremo de la variable <code>myArray</code> .
</section> </section>
## Tests ## Tests
@ -22,7 +22,7 @@ Presione <code>[&quot;dog&quot;, 3]</code> en el extremo de la variable <code>my
```yml ```yml
tests: tests:
- text: &#39; <code>myArray</code> ahora debe ser igual a <code>[[&quot;John&quot;, 23], [&quot;cat&quot;, 2], [&quot;dog&quot;, 3]]</code> .&#39; - text: ' <code>myArray</code> ahora debe ser igual a <code>[[&quot;John&quot;, 23], [&quot;cat&quot;, 2], [&quot;dog&quot;, 3]]</code> .'
testString: 'assert((function(d){if(d[2] != undefined && d[0][0] == "John" && d[0][1] === 23 && d[2][0] == "dog" && d[2][1] === 3 && d[2].length == 2){return true;}else{return false;}})(myArray), "<code>myArray</code> should now equal <code>[["John", 23], ["cat", 2], ["dog", 3]]</code>.");' testString: 'assert((function(d){if(d[2] != undefined && d[0][0] == "John" && d[0][1] === 23 && d[2][0] == "dog" && d[2][1] === 3 && d[2].length == 2){return true;}else{return false;}})(myArray), "<code>myArray</code> should now equal <code>[["John", 23], ["cat", 2], ["dog", 3]]</code>.");'
``` ```

View File

@ -6,14 +6,14 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
<code>pop()</code> siempre elimina el último elemento de una matriz. ¿Qué pasa si quieres eliminar el primero? <code>pop()</code> siempre elimina el último elemento de una matriz. ¿Qué pasa si quieres eliminar el primero?
Ahí es donde <code>.shift()</code> en <code>.shift()</code> . Funciona igual que <code>.pop()</code> , excepto que elimina el primer elemento en lugar del último. Ahí es donde <code>.shift()</code> en <code>.shift()</code> . Funciona igual que <code>.pop()</code> , excepto que elimina el primer elemento en lugar del último.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Use la función <code>.shift()</code> para eliminar el primer elemento de <code>myArray</code> , asignando el valor &quot;desviado&quot; a <code>removedFromMyArray</code> . Use la función <code>.shift()</code> para eliminar el primer elemento de <code>myArray</code> , asignando el valor &quot;desviado&quot; a <code>removedFromMyArray</code> .
</section> </section>
## Tests ## Tests
@ -21,9 +21,9 @@ Use la función <code>.shift()</code> para eliminar el primer elemento de <code>
```yml ```yml
tests: tests:
- text: &#39; <code>myArray</code> ahora debe ser igual a <code>[[&quot;dog&quot;, 3]]</code> .&#39; - text: ' <code>myArray</code> ahora debe ser igual a <code>[[&quot;dog&quot;, 3]]</code> .'
testString: 'assert((function(d){if(d[0][0] == "dog" && d[0][1] === 3 && d[1] == undefined){return true;}else{return false;}})(myArray), "<code>myArray</code> should now equal <code>[["dog", 3]]</code>.");' testString: 'assert((function(d){if(d[0][0] == "dog" && d[0][1] === 3 && d[1] == undefined){return true;}else{return false;}})(myArray), "<code>myArray</code> should now equal <code>[["dog", 3]]</code>.");'
- text: &#39; <code>removedFromMyArray</code> debe contener <code>[&quot;John&quot;, 23]</code> .&#39; - text: ' <code>removedFromMyArray</code> debe contener <code>[&quot;John&quot;, 23]</code> .'
testString: 'assert((function(d){if(d[0] == "John" && d[1] === 23 && typeof removedFromMyArray === "object"){return true;}else{return false;}})(removedFromMyArray), "<code>removedFromMyArray</code> should contain <code>["John", 23]</code>.");' testString: 'assert((function(d){if(d[0] == "John" && d[1] === 23 && typeof removedFromMyArray === "object"){return true;}else{return false;}})(removedFromMyArray), "<code>removedFromMyArray</code> should contain <code>["John", 23]</code>.");'
``` ```

View File

@ -6,14 +6,14 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
No solo puede <code>shift</code> elementos del principio de una matriz, <code>unshift</code> también puede <code>unshift</code> elementos al principio de una matriz, es decir, agregar elementos delante de la matriz. No solo puede <code>shift</code> elementos del principio de una matriz, <code>unshift</code> también puede <code>unshift</code> elementos al principio de una matriz, es decir, agregar elementos delante de la matriz.
<code>.unshift()</code> funciona exactamente como <code>.push()</code> , pero en lugar de agregar el elemento al final de la matriz, <code>unshift()</code> agrega el elemento al principio de la matriz. <code>.unshift()</code> funciona exactamente como <code>.push()</code> , pero en lugar de agregar el elemento al final de la matriz, <code>unshift()</code> agrega el elemento al principio de la matriz.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Añadir <code>[&quot;Paul&quot;,35]</code> para el inicio de la <code>myArray</code> variable usando <code>unshift()</code> . Añadir <code>[&quot;Paul&quot;,35]</code> para el inicio de la <code>myArray</code> variable usando <code>unshift()</code> .
</section> </section>
## Tests ## Tests
@ -21,7 +21,7 @@ Añadir <code>[&quot;Paul&quot;,35]</code> para el inicio de la <code>myArray</c
```yml ```yml
tests: tests:
- text: &#39; <code>myArray</code> debería tener ahora [[&quot;Paul&quot;, 35], [&quot;dog&quot;, 3]].&#39; - text: ' <code>myArray</code> debería tener ahora [[&quot;Paul&quot;, 35], [&quot;dog&quot;, 3]].'
testString: 'assert((function(d){if(typeof d[0] === "object" && d[0][0] == "Paul" && d[0][1] === 35 && d[1][0] != undefined && d[1][0] == "dog" && d[1][1] != undefined && d[1][1] == 3){return true;}else{return false;}})(myArray), "<code>myArray</code> should now have [["Paul", 35], ["dog", 3]].");' testString: 'assert((function(d){if(typeof d[0] === "object" && d[0][0] == "Paul" && d[0][1] === 35 && d[1][0] != undefined && d[1][0] == "dog" && d[1][1] != undefined && d[1][1] == 3){return true;}else{return false;}})(myArray), "<code>myArray</code> should now have [["Paul", 35], ["dog", 3]].");'
``` ```

View File

@ -6,20 +6,20 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
A veces es posible que desee almacenar datos en una <dfn>estructura de datos</dfn> flexible. Un objeto JavaScript es una forma de manejar datos flexibles. Permiten combinaciones arbitrarias de <dfn>cadenas</dfn> , <dfn>números</dfn> , <dfn>booleanos</dfn> , <dfn>matrices</dfn> , <dfn>funciones</dfn> y <dfn>objetos</dfn> . A veces es posible que desee almacenar datos en una <dfn>estructura de datos</dfn> flexible. Un objeto JavaScript es una forma de manejar datos flexibles. Permiten combinaciones arbitrarias de <dfn>cadenas</dfn> , <dfn>números</dfn> , <dfn>booleanos</dfn> , <dfn>matrices</dfn> , <dfn>funciones</dfn> y <dfn>objetos</dfn> .
Aquí hay un ejemplo de una estructura de datos compleja: Aquí hay un ejemplo de una estructura de datos compleja:
<blockquote>var ourMusic = [<br>&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;"artist": "Daft Punk",<br>&nbsp;&nbsp;&nbsp;&nbsp;"title": "Homework",<br>&nbsp;&nbsp;&nbsp;&nbsp;"release_year": 1997,<br>&nbsp;&nbsp;&nbsp;&nbsp;"formats": [ <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"CD", <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"Cassette", <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"LP"<br>&nbsp;&nbsp;&nbsp;&nbsp;],<br>&nbsp;&nbsp;&nbsp;&nbsp;"gold": true<br>&nbsp;&nbsp;}<br>];</blockquote> <blockquote>var ourMusic = [<br>&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;"artist": "Daft Punk",<br>&nbsp;&nbsp;&nbsp;&nbsp;"title": "Homework",<br>&nbsp;&nbsp;&nbsp;&nbsp;"release_year": 1997,<br>&nbsp;&nbsp;&nbsp;&nbsp;"formats": [ <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"CD", <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"Cassette", <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"LP"<br>&nbsp;&nbsp;&nbsp;&nbsp;],<br>&nbsp;&nbsp;&nbsp;&nbsp;"gold": true<br>&nbsp;&nbsp;}<br>];</blockquote>
Esta es una matriz que contiene un objeto dentro. El objeto tiene varias piezas de <dfn>metadatos</dfn> sobre un álbum. También tiene una matriz de <code>&quot;formats&quot;</code> anidados. Si desea agregar más registros de álbum, puede hacerlo agregando registros a la matriz de nivel superior. Esta es una matriz que contiene un objeto dentro. El objeto tiene varias piezas de <dfn>metadatos</dfn> sobre un álbum. También tiene una matriz de <code>&quot;formats&quot;</code> anidados. Si desea agregar más registros de álbum, puede hacerlo agregando registros a la matriz de nivel superior.
objetos contienen datos en una propiedad, que tiene un formato de clave-valor. En el ejemplo anterior, <code>&quot;artist&quot;: &quot;Daft Punk&quot;</code> es una propiedad que tiene una clave de <code>&quot;artist&quot;</code> y un valor de <code>&quot;Daft Punk&quot;</code> . objetos contienen datos en una propiedad, que tiene un formato de clave-valor. En el ejemplo anterior, <code>&quot;artist&quot;: &quot;Daft Punk&quot;</code> es una propiedad que tiene una clave de <code>&quot;artist&quot;</code> y un valor de <code>&quot;Daft Punk&quot;</code> .
<a href='http://www.json.org/' target=_blank>JavaScript Object Notation</a> o <code>JSON</code> es un formato de intercambio de datos relacionado que se utiliza para almacenar datos. <a href='http://www.json.org/' target=_blank>JavaScript Object Notation</a> o <code>JSON</code> es un formato de intercambio de datos relacionado que se utiliza para almacenar datos.
<blockquote>{<br>&nbsp;&nbsp;"artist": "Daft Punk",<br>&nbsp;&nbsp;"title": "Homework",<br>&nbsp;&nbsp;"release_year": 1997,<br>&nbsp;&nbsp;"formats": [ <br>&nbsp;&nbsp;&nbsp;&nbsp;"CD",<br>&nbsp;&nbsp;&nbsp;&nbsp;"Cassette",<br>&nbsp;&nbsp;&nbsp;&nbsp;"LP"<br>&nbsp;&nbsp;],<br>&nbsp;&nbsp;"gold": true<br>}</blockquote> <blockquote>{<br>&nbsp;&nbsp;"artist": "Daft Punk",<br>&nbsp;&nbsp;"title": "Homework",<br>&nbsp;&nbsp;"release_year": 1997,<br>&nbsp;&nbsp;"formats": [ <br>&nbsp;&nbsp;&nbsp;&nbsp;"CD",<br>&nbsp;&nbsp;&nbsp;&nbsp;"Cassette",<br>&nbsp;&nbsp;&nbsp;&nbsp;"LP"<br>&nbsp;&nbsp;],<br>&nbsp;&nbsp;"gold": true<br>}</blockquote>
<strong>Nota</strong> <br> Deberá colocar una coma después de cada objeto de la matriz, a menos que sea el último objeto de la matriz. <strong>Nota</strong> <br> Deberá colocar una coma después de cada objeto de la matriz, a menos que sea el último objeto de la matriz.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Agrega un nuevo álbum a la matriz <code>myMusic</code> . Agregue cadenas de <code>artist</code> y <code>title</code> , número de año de <code>release_year</code> y una matriz de <code>formats</code> de cadenas. Agrega un nuevo álbum a la matriz <code>myMusic</code> . Agregue cadenas de <code>artist</code> y <code>title</code> , número de año de <code>release_year</code> y una matriz de <code>formats</code> de cadenas.
</section> </section>
## Tests ## Tests
@ -31,17 +31,17 @@ tests:
testString: 'assert(Array.isArray(myMusic), "<code>myMusic</code> should be an array");' testString: 'assert(Array.isArray(myMusic), "<code>myMusic</code> should be an array");'
- text: <code>myMusic</code> debería tener al menos dos elementos - text: <code>myMusic</code> debería tener al menos dos elementos
testString: 'assert(myMusic.length > 1, "<code>myMusic</code> should have at least two elements");' testString: 'assert(myMusic.length > 1, "<code>myMusic</code> should have at least two elements");'
- text: &#39; <code>myMusic[1]</code> debería ser un objeto&#39; - text: ' <code>myMusic[1]</code> debería ser un objeto'
testString: 'assert(typeof myMusic[1] === "object", "<code>myMusic[1]</code> should be an object");' testString: 'assert(typeof myMusic[1] === "object", "<code>myMusic[1]</code> should be an object");'
- text: &#39; <code>myMusic[1]</code> debería tener al menos 4 propiedades&#39; - text: ' <code>myMusic[1]</code> debería tener al menos 4 propiedades'
testString: 'assert(Object.keys(myMusic[1]).length > 3, "<code>myMusic[1]</code> should have at least 4 properties");' testString: 'assert(Object.keys(myMusic[1]).length > 3, "<code>myMusic[1]</code> should have at least 4 properties");'
- text: &#39; <code>myMusic[1]</code> debe contener una propiedad de <code>artist</code> que es una cadena&#39; - text: ' <code>myMusic[1]</code> debe contener una propiedad de <code>artist</code> que es una cadena'
testString: 'assert(myMusic[1].hasOwnProperty("artist") && typeof myMusic[1].artist === "string", "<code>myMusic[1]</code> should contain an <code>artist</code> property which is a string");' testString: 'assert(myMusic[1].hasOwnProperty("artist") && typeof myMusic[1].artist === "string", "<code>myMusic[1]</code> should contain an <code>artist</code> property which is a string");'
- text: &#39; <code>myMusic[1]</code> debe contener una propiedad de <code>title</code> que es una cadena&#39; - text: ' <code>myMusic[1]</code> debe contener una propiedad de <code>title</code> que es una cadena'
testString: 'assert(myMusic[1].hasOwnProperty("title") && typeof myMusic[1].title === "string", "<code>myMusic[1]</code> should contain a <code>title</code> property which is a string");' testString: 'assert(myMusic[1].hasOwnProperty("title") && typeof myMusic[1].title === "string", "<code>myMusic[1]</code> should contain a <code>title</code> property which is a string");'
- text: &#39; <code>myMusic[1]</code> debe contener una propiedad <code>release_year</code> que es un número&#39; - text: ' <code>myMusic[1]</code> debe contener una propiedad <code>release_year</code> que es un número'
testString: 'assert(myMusic[1].hasOwnProperty("release_year") && typeof myMusic[1].release_year === "number", "<code>myMusic[1]</code> should contain a <code>release_year</code> property which is a number");' testString: 'assert(myMusic[1].hasOwnProperty("release_year") && typeof myMusic[1].release_year === "number", "<code>myMusic[1]</code> should contain a <code>release_year</code> property which is a number");'
- text: &#39; <code>myMusic[1]</code> debe contener una propiedad de <code>formats</code> que es una matriz&#39; - text: ' <code>myMusic[1]</code> debe contener una propiedad de <code>formats</code> que es una matriz'
testString: 'assert(myMusic[1].hasOwnProperty("formats") && Array.isArray(myMusic[1].formats), "<code>myMusic[1]</code> should contain a <code>formats</code> property which is an array");' testString: 'assert(myMusic[1].hasOwnProperty("formats") && Array.isArray(myMusic[1].formats), "<code>myMusic[1]</code> should contain a <code>formats</code> property which is an array");'
- text: <code>formats</code> deben ser una matriz de cadenas con al menos dos elementos. - text: <code>formats</code> deben ser una matriz de cadenas con al menos dos elementos.
testString: 'assert(myMusic[1].formats.every(function(item) { return (typeof item === "string")}) && myMusic[1].formats.length > 1, "<code>formats</code> should be an array of strings with at least two elements");' testString: 'assert(myMusic[1].formats.every(function(item) { return (typeof item === "string")}) && myMusic[1].formats.length > 1, "<code>formats</code> should be an array of strings with at least two elements");'

View File

@ -6,16 +6,16 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
A diferencia de las cadenas, las entradas de matrices son <dfn>mutables</dfn> y se pueden cambiar libremente. A diferencia de las cadenas, las entradas de matrices son <dfn>mutables</dfn> y se pueden cambiar libremente.
<strong>Ejemplo</strong> <strong>Ejemplo</strong>
<blockquote>var ourArray = [50,40,30];<br>ourArray[0] = 15; // equals [15,40,30]</blockquote> <blockquote>var ourArray = [50,40,30];<br>ourArray[0] = 15; // equals [15,40,30]</blockquote>
<strong>Nota</strong> <br> No debe haber espacios entre el nombre de la matriz y los corchetes, como la <code>array [0]</code> . Aunque JavaScript puede procesar esto correctamente, esto puede confundir a otros programadores que leen su código. <strong>Nota</strong> <br> No debe haber espacios entre el nombre de la matriz y los corchetes, como la <code>array [0]</code> . Aunque JavaScript puede procesar esto correctamente, esto puede confundir a otros programadores que leen su código.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Modifique los datos almacenados en el índice <code>0</code> de <code>myArray</code> a un valor de <code>45</code> . Modifique los datos almacenados en el índice <code>0</code> de <code>myArray</code> a un valor de <code>45</code> .
</section> </section>
## Tests ## Tests
@ -23,7 +23,7 @@ Modifique los datos almacenados en el índice <code>0</code> de <code>myArray</c
```yml ```yml
tests: tests:
- text: &#39; <code>myArray</code> ahora debería ser [45,64,99].&#39; - text: ' <code>myArray</code> ahora debería ser [45,64,99].'
testString: 'assert((function(){if(typeof myArray != "undefined" && myArray[0] == 45 && myArray[1] == 64 && myArray[2] == 99){return true;}else{return false;}})(), "<code>myArray</code> should now be [45,64,99].");' testString: 'assert((function(){if(typeof myArray != "undefined" && myArray[0] == 45 && myArray[1] == 64 && myArray[2] == 99){return true;}else{return false;}})(), "<code>myArray</code> should now be [45,64,99].");'
- text: Debe utilizar el índice correcto para modificar el valor en <code>myArray</code> . - text: Debe utilizar el índice correcto para modificar el valor en <code>myArray</code> .
testString: 'assert((function(){if(code.match(/myArray\[0\]\s*=\s*/g)){return true;}else{return false;}})(), "You should be using correct index to modify the value in <code>myArray</code>.");' testString: 'assert((function(){if(code.match(/myArray\[0\]\s*=\s*/g)){return true;}else{return false;}})(), "You should be using correct index to modify the value in <code>myArray</code>.");'

View File

@ -6,15 +6,15 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Si tiene una matriz multidimensional, puede usar la misma lógica que el punto de ruta anterior para recorrer tanto la matriz como cualquier subarreglo. Aquí hay un ejemplo: Si tiene una matriz multidimensional, puede usar la misma lógica que el punto de ruta anterior para recorrer tanto la matriz como cualquier subarreglo. Aquí hay un ejemplo:
<blockquote>var arr = [<br>&nbsp;&nbsp;[1,2], [3,4], [5,6]<br>];<br>for (var i=0; i &lt; arr.length; i++) {<br>&nbsp;&nbsp;for (var j=0; j &lt; arr[i].length; j++) {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(arr[i][j]);<br>&nbsp;&nbsp;}<br>}</blockquote> <blockquote>var arr = [<br>&nbsp;&nbsp;[1,2], [3,4], [5,6]<br>];<br>for (var i=0; i &lt; arr.length; i++) {<br>&nbsp;&nbsp;for (var j=0; j &lt; arr[i].length; j++) {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(arr[i][j]);<br>&nbsp;&nbsp;}<br>}</blockquote>
Esto genera cada subelemento en <code>arr</code> uno a la vez. Tenga en cuenta que para el bucle interno, estamos comprobando la <code>.length</code> de <code>arr[i]</code> , ya que <code>arr[i]</code> es en sí misma una matriz. Esto genera cada subelemento en <code>arr</code> uno a la vez. Tenga en cuenta que para el bucle interno, estamos comprobando la <code>.length</code> de <code>arr[i]</code> , ya que <code>arr[i]</code> es en sí misma una matriz.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Modificar la función <code>multiplyAll</code> para que multiplique la variable del <code>product</code> por cada número en las subarreglas de <code>arr</code> Modificar la función <code>multiplyAll</code> para que multiplique la variable del <code>product</code> por cada número en las subarreglas de <code>arr</code>
</section> </section>
## Tests ## Tests
@ -22,11 +22,11 @@ Modificar la función <code>multiplyAll</code> para que multiplique la variable
```yml ```yml
tests: tests:
- text: &#39; <code>multiplyAll([[1],[2],[3]])</code> debe devolver <code>6</code> &#39; - text: ' <code>multiplyAll([[1],[2],[3]])</code> debe devolver <code>6</code> '
testString: 'assert(multiplyAll([[1],[2],[3]]) === 6, "<code>multiplyAll([[1],[2],[3]])</code> should return <code>6</code>");' testString: 'assert(multiplyAll([[1],[2],[3]]) === 6, "<code>multiplyAll([[1],[2],[3]])</code> should return <code>6</code>");'
- text: &#39; <code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> debe devolver <code>5040</code> &#39; - text: ' <code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> debe devolver <code>5040</code> '
testString: 'assert(multiplyAll([[1,2],[3,4],[5,6,7]]) === 5040, "<code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> should return <code>5040</code>");' testString: 'assert(multiplyAll([[1,2],[3,4],[5,6,7]]) === 5040, "<code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> should return <code>5040</code>");'
- text: &#39; <code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])</code> debe devolver <code>54</code> &#39; - text: ' <code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])</code> debe devolver <code>54</code> '
testString: 'assert(multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]]) === 54, "<code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])</code> should return <code>54</code>");' testString: 'assert(multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]]) === 54, "<code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])</code> should return <code>54</code>");'
``` ```

View File

@ -6,18 +6,18 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
<dfn>parámetros</dfn> son variables que actúan como marcadores de posición para los valores que deben ingresarse en una función cuando se llama. Cuando se define una función, normalmente se define junto con uno o más parámetros. Los valores reales que se ingresan (o <dfn>&quot;pasan&quot;</dfn> ) en una función cuando se llama se conocen como <dfn>argumentos</dfn> . <dfn>parámetros</dfn> son variables que actúan como marcadores de posición para los valores que deben ingresarse en una función cuando se llama. Cuando se define una función, normalmente se define junto con uno o más parámetros. Los valores reales que se ingresan (o <dfn>&quot;pasan&quot;</dfn> ) en una función cuando se llama se conocen como <dfn>argumentos</dfn> .
Aquí hay una función con dos parámetros, <code>param1</code> y <code>param2</code> : Aquí hay una función con dos parámetros, <code>param1</code> y <code>param2</code> :
<blockquote>function testFun(param1, param2) {<br>&nbsp;&nbsp;console.log(param1, param2);<br>}</blockquote> <blockquote>function testFun(param1, param2) {<br>&nbsp;&nbsp;console.log(param1, param2);<br>}</blockquote>
Entonces podemos llamar a <code>testFun</code> : Entonces podemos llamar a <code>testFun</code> :
<code>testFun(&quot;Hello&quot;, &quot;World&quot;);</code> <code>testFun(&quot;Hello&quot;, &quot;World&quot;);</code>
Hemos pasado dos argumentos, <code>&quot;Hello&quot;</code> y <code>&quot;World&quot;</code> . Dentro de la función, <code>param1</code> será igual a &quot;Hello&quot; y <code>param2</code> será igual a &quot;World&quot;. Tenga en cuenta que podría <code>testFun</code> llamar a <code>testFun</code> con diferentes argumentos y los parámetros tomarían el valor de los nuevos argumentos. Hemos pasado dos argumentos, <code>&quot;Hello&quot;</code> y <code>&quot;World&quot;</code> . Dentro de la función, <code>param1</code> será igual a &quot;Hello&quot; y <code>param2</code> será igual a &quot;World&quot;. Tenga en cuenta que podría <code>testFun</code> llamar a <code>testFun</code> con diferentes argumentos y los parámetros tomarían el valor de los nuevos argumentos.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
<ol> <li> Cree una función llamada <code>functionWithArgs</code> que acepte dos argumentos y envíe su suma a la consola dev. </li><li> Llame a la función con dos números como argumentos. </li></ol> <ol> <li> Cree una función llamada <code>functionWithArgs</code> que acepte dos argumentos y envíe su suma a la consola dev. </li><li> Llame a la función con dos números como argumentos. </li></ol>
</section> </section>
## Tests ## Tests
@ -27,9 +27,9 @@ Hemos pasado dos argumentos, <code>&quot;Hello&quot;</code> y <code>&quot;World&
tests: tests:
- text: <code>functionWithArgs</code> debería ser una función - text: <code>functionWithArgs</code> debería ser una función
testString: 'assert(typeof functionWithArgs === "function", "<code>functionWithArgs</code> should be a function");' testString: 'assert(typeof functionWithArgs === "function", "<code>functionWithArgs</code> should be a function");'
- text: &#39; <code>functionWithArgs(1,2)</code> debe generar <code>3</code> &#39; - text: ' <code>functionWithArgs(1,2)</code> debe generar <code>3</code> '
testString: 'if(typeof functionWithArgs === "function") { capture(); functionWithArgs(1,2); uncapture(); } assert(logOutput == 3, "<code>functionWithArgs(1,2)</code> should output <code>3</code>");' testString: 'if(typeof functionWithArgs === "function") { capture(); functionWithArgs(1,2); uncapture(); } assert(logOutput == 3, "<code>functionWithArgs(1,2)</code> should output <code>3</code>");'
- text: &#39; <code>functionWithArgs(7,9)</code> debe generar <code>16</code> &#39; - text: ' <code>functionWithArgs(7,9)</code> debe generar <code>16</code> '
testString: 'if(typeof functionWithArgs === "function") { capture(); functionWithArgs(7,9); uncapture(); } assert(logOutput == 16, "<code>functionWithArgs(7,9)</code> should output <code>16</code>");' testString: 'if(typeof functionWithArgs === "function") { capture(); functionWithArgs(7,9); uncapture(); } assert(logOutput == 16, "<code>functionWithArgs(7,9)</code> should output <code>16</code>");'
- text: Llame a <code>functionWithArgs</code> con dos números después de definirlo. - text: Llame a <code>functionWithArgs</code> con dos números después de definirlo.
testString: 'assert(/^\s*functionWithArgs\s*\(\s*\d+\s*,\s*\d+\s*\)\s*;/m.test(code), "Call <code>functionWithArgs</code> with two numbers after you define it.");' testString: 'assert(/^\s*functionWithArgs\s*\(\s*\d+\s*,\s*\d+\s*\)\s*;/m.test(code), "Call <code>functionWithArgs</code> with two numbers after you define it.");'

View File

@ -6,18 +6,18 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
En los últimos dos desafíos, aprendimos sobre el operador de igualdad ( <code>==</code> ) y el operador de igualdad estricta ( <code>===</code> ). Hagamos una revisión rápida y practiquemos el uso de estos operadores un poco más. En los últimos dos desafíos, aprendimos sobre el operador de igualdad ( <code>==</code> ) y el operador de igualdad estricta ( <code>===</code> ). Hagamos una revisión rápida y practiquemos el uso de estos operadores un poco más.
Si los valores que se comparan no son del mismo tipo, el operador de igualdad realizará una conversión de tipo y luego evaluará los valores. Sin embargo, el operador de igualdad estricta comparará tanto el tipo de datos como el valor tal como está, sin convertir un tipo en otro. Si los valores que se comparan no son del mismo tipo, el operador de igualdad realizará una conversión de tipo y luego evaluará los valores. Sin embargo, el operador de igualdad estricta comparará tanto el tipo de datos como el valor tal como está, sin convertir un tipo en otro.
<strong>ejemplos</strong> <strong>ejemplos</strong>
<blockquote>3 == '3' // returns true because JavaScript performs type conversion from string to number<br>3 === '3' // returns false because the types are different and type conversion is not performed</blockquote> <blockquote>3 == '3' // returns true because JavaScript performs type conversion from string to number<br>3 === '3' // returns false because the types are different and type conversion is not performed</blockquote>
<strong>Nota</strong> <br> En JavaScript, puede determinar el tipo de una variable o un valor con el operador <code>typeof</code> , de la siguiente manera: <strong>Nota</strong> <br> En JavaScript, puede determinar el tipo de una variable o un valor con el operador <code>typeof</code> , de la siguiente manera:
<blockquote>typeof 3 // returns 'number'<br>typeof '3' // returns 'string'</blockquote> <blockquote>typeof 3 // returns 'number'<br>typeof '3' // returns 'string'</blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
La función <code>compareEquality</code> en el editor compara dos valores utilizando el <code>equality operator</code> . Modifique la función de modo que devuelva &quot;Igual&quot; solo cuando los valores sean estrictamente iguales. La función <code>compareEquality</code> en el editor compara dos valores utilizando el <code>equality operator</code> . Modifique la función de modo que devuelva &quot;Igual&quot; solo cuando los valores sean estrictamente iguales.
</section> </section>
## Tests ## Tests
@ -25,9 +25,9 @@ La función <code>compareEquality</code> en el editor compara dos valores utiliz
```yml ```yml
tests: tests:
- text: &#39; <code>compareEquality(10, &quot;10&quot;)</code> debe devolver &quot;Not Equal&quot;&#39; - text: ' <code>compareEquality(10, &quot;10&quot;)</code> debe devolver &quot;Not Equal&quot;'
testString: 'assert(compareEquality(10, "10") === "Not Equal", "<code>compareEquality(10, "10")</code> should return "Not Equal"");' testString: 'assert(compareEquality(10, "10") === "Not Equal", "<code>compareEquality(10, "10")</code> should return "Not Equal"");'
- text: &#39; <code>compareEquality(&quot;20&quot;, 20)</code> debe devolver &quot;Not Equal&quot;&#39; - text: ' <code>compareEquality(&quot;20&quot;, 20)</code> debe devolver &quot;Not Equal&quot;'
testString: 'assert(compareEquality("20", 20) === "Not Equal", "<code>compareEquality("20", 20)</code> should return "Not Equal"");' testString: 'assert(compareEquality("20", 20) === "Not Equal", "<code>compareEquality("20", 20)</code> should return "Not Equal"");'
- text: Debes usar el operador <code>===</code> - text: Debes usar el operador <code>===</code>
testString: 'assert(code.match(/===/g), "You should use the <code>===</code> operator");' testString: 'assert(code.match(/===/g), "You should use the <code>===</code> operator");'

View File

@ -6,17 +6,17 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Tenemos una variedad de objetos que representan a diferentes personas en nuestras listas de contactos. Tenemos una variedad de objetos que representan a diferentes personas en nuestras listas de contactos.
Se ha <code>lookUpProfile</code> función <code>lookUpProfile</code> que toma el <code>name</code> y una propiedad ( <code>prop</code> ) como argumentos. Se ha <code>lookUpProfile</code> función <code>lookUpProfile</code> que toma el <code>name</code> y una propiedad ( <code>prop</code> ) como argumentos.
La función debe comprobar si <code>name</code> es de un contacto real <code>firstName</code> y la propiedad dada ( <code>prop</code> ) es una propiedad de ese contacto. La función debe comprobar si <code>name</code> es de un contacto real <code>firstName</code> y la propiedad dada ( <code>prop</code> ) es una propiedad de ese contacto.
Si ambos son verdaderos, devuelva el &quot;valor&quot; de esa propiedad. Si ambos son verdaderos, devuelva el &quot;valor&quot; de esa propiedad.
Si el <code>name</code> no corresponde a ningún contacto, devuelva <code>&quot;No such contact&quot;</code> Si el <code>name</code> no corresponde a ningún contacto, devuelva <code>&quot;No such contact&quot;</code>
Si la <code>prop</code> no corresponde a ninguna propiedad válida de un contacto encontrado para coincidir con el <code>name</code> entonces devuelva <code>&quot;No such property&quot;</code> existe <code>&quot;No such property&quot;</code> Si la <code>prop</code> no corresponde a ninguna propiedad válida de un contacto encontrado para coincidir con el <code>name</code> entonces devuelva <code>&quot;No such property&quot;</code> existe <code>&quot;No such property&quot;</code>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -25,17 +25,17 @@ Si la <code>prop</code> no corresponde a ninguna propiedad válida de un contact
```yml ```yml
tests: tests:
- text: &#39; <code>&quot;Kristian&quot;, &quot;lastName&quot;</code> debería devolver <code>&quot;Vos&quot;</code> &#39; - text: ' <code>&quot;Kristian&quot;, &quot;lastName&quot;</code> debería devolver <code>&quot;Vos&quot;</code> '
testString: 'assert(lookUpProfile("Kristian","lastName") === "Vos", "<code>"Kristian", "lastName"</code> should return <code>"Vos"</code>");' testString: 'assert(lookUpProfile("Kristian","lastName") === "Vos", "<code>"Kristian", "lastName"</code> should return <code>"Vos"</code>");'
- text: &#39; <code>&quot;Sherlock&quot;, &quot;likes&quot;</code> debería devolver <code>[&quot;Intriguing Cases&quot;, &quot;Violin&quot;]</code> &#39; - text: ' <code>&quot;Sherlock&quot;, &quot;likes&quot;</code> debería devolver <code>[&quot;Intriguing Cases&quot;, &quot;Violin&quot;]</code> '
testString: 'assert.deepEqual(lookUpProfile("Sherlock", "likes"), ["Intriguing Cases", "Violin"], "<code>"Sherlock", "likes"</code> should return <code>["Intriguing Cases", "Violin"]</code>");' testString: 'assert.deepEqual(lookUpProfile("Sherlock", "likes"), ["Intriguing Cases", "Violin"], "<code>"Sherlock", "likes"</code> should return <code>["Intriguing Cases", "Violin"]</code>");'
- text: &#39; <code>&quot;Harry&quot;,&quot;likes&quot;</code> debería devolver una matriz&#39; - text: ' <code>&quot;Harry&quot;,&quot;likes&quot;</code> debería devolver una matriz'
testString: 'assert(typeof lookUpProfile("Harry", "likes") === "object", "<code>"Harry","likes"</code> should return an array");' testString: 'assert(typeof lookUpProfile("Harry", "likes") === "object", "<code>"Harry","likes"</code> should return an array");'
- text: &#39; <code>&quot;Bob&quot;, &quot;number&quot;</code> debe devolver &quot;No existe tal contacto&quot;&#39; - text: ' <code>&quot;Bob&quot;, &quot;number&quot;</code> debe devolver &quot;No existe tal contacto&quot;'
testString: 'assert(lookUpProfile("Bob", "number") === "No such contact", "<code>"Bob", "number"</code> should return "No such contact"");' testString: 'assert(lookUpProfile("Bob", "number") === "No such contact", "<code>"Bob", "number"</code> should return "No such contact"");'
- text: &#39; <code>&quot;Bob&quot;, &quot;potato&quot;</code> debe devolver &quot;No hay tal contacto&quot;&#39; - text: ' <code>&quot;Bob&quot;, &quot;potato&quot;</code> debe devolver &quot;No hay tal contacto&quot;'
testString: 'assert(lookUpProfile("Bob", "potato") === "No such contact", "<code>"Bob", "potato"</code> should return "No such contact"");' testString: 'assert(lookUpProfile("Bob", "potato") === "No such contact", "<code>"Bob", "potato"</code> should return "No such contact"");'
- text: &#39; <code>&quot;Akira&quot;, &quot;address&quot;</code> debe devolver &quot;No existe tal propiedad&quot; - text: ' <code>&quot;Akira&quot;, &quot;address&quot;</code> debe devolver &quot;No existe tal propiedad&quot;
testString: 'assert(lookUpProfile("Akira", "address") === "No such property", "<code>"Akira", "address"</code> should return "No such property"");' testString: 'assert(lookUpProfile("Akira", "address") === "No such property", "<code>"Akira", "address"</code> should return "No such property"");'
``` ```

View File

@ -6,21 +6,21 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
<dfn>Los</dfn> valores de <dfn>cadena</dfn> en JavaScript se pueden escribir con comillas simples o dobles, siempre y cuando comience y termine con el mismo tipo de comillas. A diferencia de otros lenguajes de programación, las comillas simples y dobles funcionan de la misma manera en JavaScript. <dfn>Los</dfn> valores de <dfn>cadena</dfn> en JavaScript se pueden escribir con comillas simples o dobles, siempre y cuando comience y termine con el mismo tipo de comillas. A diferencia de otros lenguajes de programación, las comillas simples y dobles funcionan de la misma manera en JavaScript.
<blockquote>doubleQuoteStr = "This is a string"; <br/>singleQuoteStr = 'This is also a string';</blockquote> <blockquote>doubleQuoteStr = "This is a string"; <br/>singleQuoteStr = 'This is also a string';</blockquote>
La razón por la que podría querer usar un tipo de cita sobre la otra es si quiere usar ambos en una cadena. Esto puede suceder si desea guardar una conversación en una cadena y tener la conversación entre comillas. Otro uso sería guardar una etiqueta <code>&lt;a&gt;</code> con varios atributos entre comillas, todo dentro de una cadena. La razón por la que podría querer usar un tipo de cita sobre la otra es si quiere usar ambos en una cadena. Esto puede suceder si desea guardar una conversación en una cadena y tener la conversación entre comillas. Otro uso sería guardar una etiqueta <code>&lt;a&gt;</code> con varios atributos entre comillas, todo dentro de una cadena.
<blockquote>conversation = 'Finn exclaims to Jake, "Algebraic!"';</blockquote> <blockquote>conversation = 'Finn exclaims to Jake, "Algebraic!"';</blockquote>
Sin embargo, esto se convierte en un problema si necesita usar las citas más externas dentro de él. Recuerde, una cadena tiene el mismo tipo de cita al principio y al final. Pero si tiene la misma cita en algún punto intermedio, la cadena se detendrá antes y arrojará un error. Sin embargo, esto se convierte en un problema si necesita usar las citas más externas dentro de él. Recuerde, una cadena tiene el mismo tipo de cita al principio y al final. Pero si tiene la misma cita en algún punto intermedio, la cadena se detendrá antes y arrojará un error.
<blockquote>goodStr = 'Jake asks Finn, "Hey, let\'s go on an adventure?"'; <br/>badStr = 'Finn responds, "Let's go!"'; // Throws an error</blockquote> <blockquote>goodStr = 'Jake asks Finn, "Hey, let\'s go on an adventure?"'; <br/>badStr = 'Finn responds, "Let's go!"'; // Throws an error</blockquote>
En el <dfn>goodStr</dfn> anterior, puede usar ambas comillas de forma segura usando la barra invertida <code>\</code> como un carácter de escape. En el <dfn>goodStr</dfn> anterior, puede usar ambas comillas de forma segura usando la barra invertida <code>\</code> como un carácter de escape.
<strong>Nota</strong> <br/> La barra invertida <code>\</code> no debe confundirse con la barra inclinada <code>/</code> . No hacen lo mismo. <strong>Nota</strong> <br/> La barra invertida <code>\</code> no debe confundirse con la barra inclinada <code>/</code> . No hacen lo mismo.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Cambie la cadena proporcionada por una cadena con comillas simples al principio y al final y sin caracteres de escape. Cambie la cadena proporcionada por una cadena con comillas simples al principio y al final y sin caracteres de escape.
En este momento, la etiqueta <code>&lt;a&gt;</code> en la cadena usa comillas dobles en todas partes. Deberá cambiar las comillas externas a comillas simples para poder eliminar los caracteres de escape. En este momento, la etiqueta <code>&lt;a&gt;</code> en la cadena usa comillas dobles en todas partes. Deberá cambiar las comillas externas a comillas simples para poder eliminar los caracteres de escape.
</section> </section>
## Tests ## Tests
@ -30,7 +30,7 @@ En este momento, la etiqueta <code>&lt;a&gt;</code> en la cadena usa comillas do
tests: tests:
- text: Eliminar todas las <code>backslashes</code> ( <code>\</code> ) - text: Eliminar todas las <code>backslashes</code> ( <code>\</code> )
testString: 'assert(!/\\/g.test(code) && myStr.match("\\s*<a href\\s*=\\s*"http://www.example.com"\\s*target\\s*=\\s*"_blank">\\s*Link\\s*</a>\\s*"), "Remove all the <code>backslashes</code> (<code>\</code>)");' testString: 'assert(!/\\/g.test(code) && myStr.match("\\s*<a href\\s*=\\s*"http://www.example.com"\\s*target\\s*=\\s*"_blank">\\s*Link\\s*</a>\\s*"), "Remove all the <code>backslashes</code> (<code>\</code>)");'
- text: &#39;Debería tener dos comillas simples <code>&#39;</code> y cuatro comillas dobles <code>&quot;</code> &#39; - text: 'Debería tener dos comillas simples <code>&#39;</code> y cuatro comillas dobles <code>&quot;</code> '
testString: 'assert(code.match(/"/g).length === 4 && code.match(/"/g).length === 2, "You should have two single quotes <code>&#39;</code> and four double quotes <code>&quot;</code>");' testString: 'assert(code.match(/"/g).length === 4 && code.match(/"/g).length === 2, "You should have two single quotes <code>&#39;</code> and four double quotes <code>&quot;</code>");'
``` ```

View File

@ -6,22 +6,22 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Se le asigna un objeto JSON que representa una parte de su colección de álbumes musicales. Cada álbum tiene varias propiedades y un número de identificación único como clave. No todos los álbumes tienen información completa. Se le asigna un objeto JSON que representa una parte de su colección de álbumes musicales. Cada álbum tiene varias propiedades y un número de identificación único como clave. No todos los álbumes tienen información completa.
Escriba una función que tome la <code>id</code> un álbum (como <code>2548</code> ), una propiedad <code>prop</code> (como <code>&quot;artist&quot;</code> o <code>&quot;tracks&quot;</code> ), y un <code>value</code> (como <code>&quot;Addicted to Love&quot;</code> ) para modificar los datos de esta colección. Escriba una función que tome la <code>id</code> un álbum (como <code>2548</code> ), una propiedad <code>prop</code> (como <code>&quot;artist&quot;</code> o <code>&quot;tracks&quot;</code> ), y un <code>value</code> (como <code>&quot;Addicted to Love&quot;</code> ) para modificar los datos de esta colección.
Si la <code>prop</code> no es <code>&quot;tracks&quot;</code> y el <code>value</code> no está vacío ( <code>&quot;&quot;</code> ), actualice o establezca el <code>value</code> para la propiedad del álbum de grabación. Si la <code>prop</code> no es <code>&quot;tracks&quot;</code> y el <code>value</code> no está vacío ( <code>&quot;&quot;</code> ), actualice o establezca el <code>value</code> para la propiedad del álbum de grabación.
Su función debe devolver siempre el objeto de colección completo. Su función debe devolver siempre el objeto de colección completo.
Existen varias reglas para manejar datos incompletos: Existen varias reglas para manejar datos incompletos:
Si <code>prop</code> es <code>&quot;tracks&quot;</code> pero el álbum no tiene una propiedad de <code>&quot;tracks&quot;</code> , cree una matriz vacía antes de agregar el nuevo valor a la propiedad correspondiente del álbum. Si <code>prop</code> es <code>&quot;tracks&quot;</code> pero el álbum no tiene una propiedad de <code>&quot;tracks&quot;</code> , cree una matriz vacía antes de agregar el nuevo valor a la propiedad correspondiente del álbum.
Si <code>prop</code> es <code>&quot;tracks&quot;</code> y el <code>value</code> no está vacío ( <code>&quot;&quot;</code> ), presione el <code>value</code> sobre el final de la matriz de <code>tracks</code> existente del <code>tracks</code> . Si <code>prop</code> es <code>&quot;tracks&quot;</code> y el <code>value</code> no está vacío ( <code>&quot;&quot;</code> ), presione el <code>value</code> sobre el final de la matriz de <code>tracks</code> existente del <code>tracks</code> .
Si el <code>value</code> está vacío ( <code>&quot;&quot;</code> ), elimine la propiedad de <code>prop</code> determinada del álbum. Si el <code>value</code> está vacío ( <code>&quot;&quot;</code> ), elimine la propiedad de <code>prop</code> determinada del álbum.
<strong>Consejos</strong> <br> Utilice la <code>bracket notation</code> cuando <a href="javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">acceda a las propiedades de objetos con variables</a> . <strong>Consejos</strong> <br> Utilice la <code>bracket notation</code> cuando <a href="javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">acceda a las propiedades de objetos con variables</a> .
Push es un método de matriz que puede leer sobre <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank">Mozilla Developer Network</a> . Push es un método de matriz que puede leer sobre <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank">Mozilla Developer Network</a> .
Puede volver a consultar <a href="javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">Manipular objetos complejos</a> Presentando la notación de objetos de JavaScript (JSON) para obtener una actualización. Puede volver a consultar <a href="javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">Manipular objetos complejos</a> Presentando la notación de objetos de JavaScript (JSON) para obtener una actualización.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
</section> </section>
@ -30,19 +30,19 @@ Puede volver a consultar <a href="javascript-algorithms-and-data-structures/basi
```yml ```yml
tests: tests:
- text: &#39;Después de <code>updateRecords(5439, &quot;artist&quot;, &quot;ABBA&quot;)</code> , el <code>artist</code> debe ser <code>&quot;ABBA&quot;</code> &#39; - text: 'Después de <code>updateRecords(5439, &quot;artist&quot;, &quot;ABBA&quot;)</code> , el <code>artist</code> debe ser <code>&quot;ABBA&quot;</code> '
testString: 'collection = collectionCopy; assert(updateRecords(5439, "artist", "ABBA")[5439]["artist"] === "ABBA", "After <code>updateRecords(5439, "artist", "ABBA")</code>, <code>artist</code> should be <code>"ABBA"</code>");' testString: 'collection = collectionCopy; assert(updateRecords(5439, "artist", "ABBA")[5439]["artist"] === "ABBA", "After <code>updateRecords(5439, "artist", "ABBA")</code>, <code>artist</code> should be <code>"ABBA"</code>");'
- text: &#39;Después de <code>updateRecords(5439, &quot;tracks&quot;, &quot;Take a Chance on Me&quot;)</code> , los <code>tracks</code> deberían tener <code>&quot;Take a Chance on Me&quot;</code> como el último elemento.&#39; - text: 'Después de <code>updateRecords(5439, &quot;tracks&quot;, &quot;Take a Chance on Me&quot;)</code> , los <code>tracks</code> deberían tener <code>&quot;Take a Chance on Me&quot;</code> como el último elemento.'
testString: 'assert(updateRecords(5439, "tracks", "Take a Chance on Me")[5439]["tracks"].pop() === "Take a Chance on Me", "After <code>updateRecords(5439, "tracks", "Take a Chance on Me")</code>, <code>tracks</code> should have <code>"Take a Chance on Me"</code> as the last element.");' testString: 'assert(updateRecords(5439, "tracks", "Take a Chance on Me")[5439]["tracks"].pop() === "Take a Chance on Me", "After <code>updateRecords(5439, "tracks", "Take a Chance on Me")</code>, <code>tracks</code> should have <code>"Take a Chance on Me"</code> as the last element.");'
- text: &#39;Después de <code>updateRecords(2548, &quot;artist&quot;, &quot;&quot;)</code> , el <code>artist</code> no debe configurarse&#39; - text: 'Después de <code>updateRecords(2548, &quot;artist&quot;, &quot;&quot;)</code> , el <code>artist</code> no debe configurarse'
testString: 'updateRecords(2548, "artist", ""); assert(!collection[2548].hasOwnProperty("artist"), "After <code>updateRecords(2548, "artist", "")</code>, <code>artist</code> should not be set");' testString: 'updateRecords(2548, "artist", ""); assert(!collection[2548].hasOwnProperty("artist"), "After <code>updateRecords(2548, "artist", "")</code>, <code>artist</code> should not be set");'
- text: &#39;Después de <code>updateRecords(1245, &quot;tracks&quot;, &quot;Addicted to Love&quot;)</code> , las <code>tracks</code> deberían tener <code>&quot;Addicted to Love&quot;</code> como último elemento.&#39; - text: 'Después de <code>updateRecords(1245, &quot;tracks&quot;, &quot;Addicted to Love&quot;)</code> , las <code>tracks</code> deberían tener <code>&quot;Addicted to Love&quot;</code> como último elemento.'
testString: 'assert(updateRecords(1245, "tracks", "Addicted to Love")[1245]["tracks"].pop() === "Addicted to Love", "After <code>updateRecords(1245, "tracks", "Addicted to Love")</code>, <code>tracks</code> should have <code>"Addicted to Love"</code> as the last element.");' testString: 'assert(updateRecords(1245, "tracks", "Addicted to Love")[1245]["tracks"].pop() === "Addicted to Love", "After <code>updateRecords(1245, "tracks", "Addicted to Love")</code>, <code>tracks</code> should have <code>"Addicted to Love"</code> as the last element.");'
- text: &#39;Después de <code>updateRecords(2468, &quot;tracks&quot;, &quot;Free&quot;)</code> , los <code>tracks</code> deberían tener <code>&quot;1999&quot;</code> como primer elemento.&#39; - text: 'Después de <code>updateRecords(2468, &quot;tracks&quot;, &quot;Free&quot;)</code> , los <code>tracks</code> deberían tener <code>&quot;1999&quot;</code> como primer elemento.'
testString: 'assert(updateRecords(2468, "tracks", "Free")[2468]["tracks"][0] === "1999", "After <code>updateRecords(2468, "tracks", "Free")</code>, <code>tracks</code> should have <code>"1999"</code> as the first element.");' testString: 'assert(updateRecords(2468, "tracks", "Free")[2468]["tracks"][0] === "1999", "After <code>updateRecords(2468, "tracks", "Free")</code>, <code>tracks</code> should have <code>"1999"</code> as the first element.");'
- text: &#39;Después de <code>updateRecords(2548, &quot;tracks&quot;, &quot;&quot;)</code> , no se deben establecer <code>tracks</code> &#39; - text: 'Después de <code>updateRecords(2548, &quot;tracks&quot;, &quot;&quot;)</code> , no se deben establecer <code>tracks</code> '
testString: 'updateRecords(2548, "tracks", ""); assert(!collection[2548].hasOwnProperty("tracks"), "After <code>updateRecords(2548, "tracks", "")</code>, <code>tracks</code> should not be set");' testString: 'updateRecords(2548, "tracks", ""); assert(!collection[2548].hasOwnProperty("tracks"), "After <code>updateRecords(2548, "tracks", "")</code>, <code>tracks</code> should not be set");'
- text: &#39;Después de <code>updateRecords(1245, &quot;album&quot;, &quot;Riptide&quot;)</code> , el <code>album</code> debería ser <code>&quot;Riptide&quot;</code> &#39; - text: 'Después de <code>updateRecords(1245, &quot;album&quot;, &quot;Riptide&quot;)</code> , el <code>album</code> debería ser <code>&quot;Riptide&quot;</code> '
testString: 'assert(updateRecords(1245, "album", "Riptide")[1245]["album"] === "Riptide", "After <code>updateRecords(1245, "album", "Riptide")</code>, <code>album</code> should be <code>"Riptide"</code>");' testString: 'assert(updateRecords(1245, "album", "Riptide")[1245]["album"] === "Riptide", "After <code>updateRecords(1245, "album", "Riptide")</code>, <code>album</code> should be <code>"Riptide"</code>");'
``` ```

View File

@ -6,16 +6,16 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Si tiene muchas opciones para elegir, una instrucción <code>switch</code> puede ser más fácil de escribir que muchas instrucciones encadenadas <code>if</code> / <code>else if</code> . Lo siguiente: Si tiene muchas opciones para elegir, una instrucción <code>switch</code> puede ser más fácil de escribir que muchas instrucciones encadenadas <code>if</code> / <code>else if</code> . Lo siguiente:
<blockquote>if (val === 1) {<br>&nbsp;&nbsp;answer = "a";<br>} else if (val === 2) {<br>&nbsp;&nbsp;answer = "b";<br>} else {<br>&nbsp;&nbsp;answer = "c";<br>}</blockquote> <blockquote>if (val === 1) {<br>&nbsp;&nbsp;answer = "a";<br>} else if (val === 2) {<br>&nbsp;&nbsp;answer = "b";<br>} else {<br>&nbsp;&nbsp;answer = "c";<br>}</blockquote>
puede ser reemplazado por: puede ser reemplazado por:
<blockquote>switch(val) {<br>&nbsp;&nbsp;case 1:<br>&nbsp;&nbsp;&nbsp;&nbsp;answer = "a";<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;case 2:<br>&nbsp;&nbsp;&nbsp;&nbsp;answer = "b";<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;default:<br>&nbsp;&nbsp;&nbsp;&nbsp;answer = "c";<br>}</blockquote> <blockquote>switch(val) {<br>&nbsp;&nbsp;case 1:<br>&nbsp;&nbsp;&nbsp;&nbsp;answer = "a";<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;case 2:<br>&nbsp;&nbsp;&nbsp;&nbsp;answer = "b";<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;default:<br>&nbsp;&nbsp;&nbsp;&nbsp;answer = "c";<br>}</blockquote>
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Cambie las sentencias <code>if</code> / <code>else if</code> encadenadas en una sentencia <code>switch</code> . Cambie las sentencias <code>if</code> / <code>else if</code> encadenadas en una sentencia <code>switch</code> .
</section> </section>
## Tests ## Tests
@ -33,7 +33,7 @@ tests:
testString: 'assert(chainToSwitch("bob") === "Marley", "<code>chainToSwitch("bob")</code> should be "Marley"");' testString: 'assert(chainToSwitch("bob") === "Marley", "<code>chainToSwitch("bob")</code> should be "Marley"");'
- text: <code>chainToSwitch(42)</code> debe ser &quot;La Respuesta&quot; - text: <code>chainToSwitch(42)</code> debe ser &quot;La Respuesta&quot;
testString: 'assert(chainToSwitch(42) === "The Answer", "<code>chainToSwitch(42)</code> should be "The Answer"");' testString: 'assert(chainToSwitch(42) === "The Answer", "<code>chainToSwitch(42)</code> should be "The Answer"");'
- text: &#39; <code>chainToSwitch(1)</code> debe ser &quot;No hay # 1&quot;&#39; - text: ' <code>chainToSwitch(1)</code> debe ser &quot;No hay # 1&quot;'
testString: 'assert(chainToSwitch(1) === "There is no #1", "<code>chainToSwitch(1)</code> should be "There is no #1"");' testString: 'assert(chainToSwitch(1) === "There is no #1", "<code>chainToSwitch(1)</code> should be "There is no #1"");'
- text: <code>chainToSwitch(99)</code> debería ser &quot;¡Me <code>chainToSwitch(99)</code> por esto!&quot; - text: <code>chainToSwitch(99)</code> debería ser &quot;¡Me <code>chainToSwitch(99)</code> por esto!&quot;
testString: 'assert(chainToSwitch(99) === "Missed me by this much!", "<code>chainToSwitch(99)</code> should be "Missed me by this much!"");' testString: 'assert(chainToSwitch(99) === "Missed me by this much!", "<code>chainToSwitch(99)</code> should be "Missed me by this much!"");'

View File

@ -6,17 +6,17 @@ challengeType: 1
--- ---
## Description ## Description
<section id='description'> <section id='description'>
Cuando se alcanza una declaración de <code>return</code> , la ejecución de la función actual se detiene y el control vuelve a la ubicación de la llamada. Cuando se alcanza una declaración de <code>return</code> , la ejecución de la función actual se detiene y el control vuelve a la ubicación de la llamada.
<strong>Ejemplo</strong> <strong>Ejemplo</strong>
<blockquote>function myFun() {<br>&nbsp;&nbsp;console.log("Hello");<br>&nbsp;&nbsp;return "World";<br>&nbsp;&nbsp;console.log("byebye")<br>}<br>myFun();</blockquote> <blockquote>function myFun() {<br>&nbsp;&nbsp;console.log("Hello");<br>&nbsp;&nbsp;return "World";<br>&nbsp;&nbsp;console.log("byebye")<br>}<br>myFun();</blockquote>
Lo anterior muestra &quot;Hola&quot; a la consola, devuelve &quot;Mundo&quot;, pero <code>&quot;byebye&quot;</code> nunca se <code>&quot;byebye&quot;</code> , porque la función sale de la instrucción de <code>return</code> . Lo anterior muestra &quot;Hola&quot; a la consola, devuelve &quot;Mundo&quot;, pero <code>&quot;byebye&quot;</code> nunca se <code>&quot;byebye&quot;</code> , porque la función sale de la instrucción de <code>return</code> .
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Modifique la función <code>abTest</code> para que si <code>a</code> o <code>b</code> sean menores que <code>0</code> la función saldrá inmediatamente con un valor <code>undefined</code> . Modifique la función <code>abTest</code> para que si <code>a</code> o <code>b</code> sean menores que <code>0</code> la función saldrá inmediatamente con un valor <code>undefined</code> .
<strong>Pista</strong> <br> Recuerde que <a href='http://www.freecodecamp.org/challenges/understanding-uninitialized-variables' target='_blank'><code>undefined</code> es una palabra clave</a> , no una cadena. <strong>Pista</strong> <br> Recuerde que <a href='http://www.freecodecamp.org/challenges/understanding-uninitialized-variables' target='_blank'><code>undefined</code> es una palabra clave</a> , no una cadena.
</section> </section>
## Tests ## Tests
@ -24,17 +24,17 @@ Modifique la función <code>abTest</code> para que si <code>a</code> o <code>b</
```yml ```yml
tests: tests:
- text: &#39; <code>abTest(2,2)</code> debe devolver un número&#39; - text: ' <code>abTest(2,2)</code> debe devolver un número'
testString: 'assert(typeof abTest(2,2) === "number" , "<code>abTest(2,2)</code> should return a number");' testString: 'assert(typeof abTest(2,2) === "number" , "<code>abTest(2,2)</code> should return a number");'
- text: &#39; <code>abTest(2,2)</code> debe devolver <code>8</code> &#39; - text: ' <code>abTest(2,2)</code> debe devolver <code>8</code> '
testString: 'assert(abTest(2,2) === 8 , "<code>abTest(2,2)</code> should return <code>8</code>");' testString: 'assert(abTest(2,2) === 8 , "<code>abTest(2,2)</code> should return <code>8</code>");'
- text: &#39; <code>abTest(-2,2)</code> debe devolver <code>undefined</code> &#39; - text: ' <code>abTest(-2,2)</code> debe devolver <code>undefined</code> '
testString: 'assert(abTest(-2,2) === undefined , "<code>abTest(-2,2)</code> should return <code>undefined</code>");' testString: 'assert(abTest(-2,2) === undefined , "<code>abTest(-2,2)</code> should return <code>undefined</code>");'
- text: &#39; <code>abTest(2,-2)</code> debe devolver <code>undefined</code> &#39; - text: ' <code>abTest(2,-2)</code> debe devolver <code>undefined</code> '
testString: 'assert(abTest(2,-2) === undefined , "<code>abTest(2,-2)</code> should return <code>undefined</code>");' testString: 'assert(abTest(2,-2) === undefined , "<code>abTest(2,-2)</code> should return <code>undefined</code>");'
- text: &#39; <code>abTest(2,8)</code> debe devolver <code>18</code> &#39; - text: ' <code>abTest(2,8)</code> debe devolver <code>18</code> '
testString: 'assert(abTest(2,8) === 18 , "<code>abTest(2,8)</code> should return <code>18</code>");' testString: 'assert(abTest(2,8) === 18 , "<code>abTest(2,8)</code> should return <code>18</code>");'
- text: &#39; <code>abTest(3,3)</code> debe devolver <code>12</code> &#39; - text: ' <code>abTest(3,3)</code> debe devolver <code>12</code> '
testString: 'assert(abTest(3,3) === 12 , "<code>abTest(3,3)</code> should return <code>12</code>");' testString: 'assert(abTest(3,3) === 12 , "<code>abTest(3,3)</code> should return <code>12</code>");'
``` ```

Some files were not shown because too many files have changed in this diff Show More