chore(i18n,curriculum): update translations (#42191)
This commit is contained in:
camperbot
GitHub
@@ -30,19 +30,19 @@ Cambia el `background-color` de cada elemento `div` sobre la base de los nombres
|
||||
Tu código debe usar la propiedad `hsl()` para declarar el color `green`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Tu código debe usar la propiedad `hsl()` para declarar el color `cyan`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Tu código debe usar la propiedad `hsl()` para declarar el color `blue`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
El elemento `div` con clase `green` debe tener un `background-color` verde.
|
||||
|
||||
@@ -40,7 +40,7 @@ assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
Una clase llamada `silver-background` debe estar definida dentro del elemento `style` y el valor `silver` debe ser asignado a la propiedad `background-color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -32,7 +32,7 @@ assert($('h1').hasClass('pink-text'));
|
||||
Tu `<style>` debería tener una clase CSS `pink-text` que cambie su `color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
|
||||
```
|
||||
|
||||
Tu elemento `h1` debe ser de color rosado ("pink").
|
||||
|
||||
@@ -31,8 +31,8 @@ Tu elemento `img` debe incluir la "class" `smaller-image`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') ===
|
||||
'smaller-image'
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class')
|
||||
.trim().split(/\s+/g).includes('smaller-image')
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@@ -47,7 +47,7 @@ El elemento h2 debe degradarse a la fuente `monospace` cuando `Lobster` no está
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(
|
||||
/\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
|
||||
@@ -37,7 +37,7 @@ assert(
|
||||
Tu clase `red-box` debe asignar a los elementos 1.5em de `padding`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -46,7 +46,7 @@ assert($('h2').hasClass('red-text'));
|
||||
Tu hoja de estilos debe declarar una clase `red-text` y su color debe ser `red` (rojo).
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
|
||||
```
|
||||
|
||||
No debes usar declaraciones de tipo inline style como `style="color: red"` en tu elemento `h2`.
|
||||
|
||||
@@ -32,7 +32,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
Debes usar el `hex code` abreviado para el color rojo en lugar del código hexadecimal `#FF0000`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Debes asignar al elemento `h1` que tiene el texto `I am green!` ("¡Soy de color verde!) el `color` verde.
|
||||
@@ -44,7 +44,7 @@ assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
Debes usar el `hex code` abreviado para el color verde en lugar del código hexadecimal `#00FF00`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Debes asignar al elemento `h1` que tiene el texto `I am cyan!` ("¡Soy de color cian!) el `color` cian.
|
||||
@@ -56,7 +56,7 @@ assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
Debes usar el `hex code` abreviado para el color cian en lugar del código hexadecimal `#00FFFF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Debes asignar al elemento `h1` que tiene el texto `I am fuchsia!` ("¡Soy de color fucsia!) el `color` fucsia.
|
||||
@@ -68,7 +68,7 @@ assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
Debes usar el `hex code` abreviado para el color fucsia en lugar del código hexadecimal `#FF00FF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -36,7 +36,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
Debes usar el `hex code` correspondiente al color rojo en lugar de la palabra reservada `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?(#FF0000|#F00)\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Debes asignar al elemento `h1` que tiene el texto `I am green!` ("¡Soy de color verde!) el `color` verde.
|
||||
@@ -48,7 +48,7 @@ assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
Debes usar el `hex code` correspondiente al color verde en lugar de la palabra reservada `green`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?(#00FF00|#0F0)\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Debes asignar al elemento `h1` que tiene el texto `I am dodger blue!` ("¡Soy de color azul dodger!) el `color` azul dodger.
|
||||
@@ -60,7 +60,7 @@ assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
Debes usar el `hex code` correspondiente al color azul dodger en lugar de la palabra reservada `dodgerblue`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Debes asignar al elemento `h1` que tiene el texto `I am orange!` ("¡Soy de color naranja!) el `color` naranja.
|
||||
@@ -72,7 +72,7 @@ assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
Debes usar el `hex code` correspondiente al color naranja en lugar de la palabra reservada `orange`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -30,7 +30,7 @@ Debes usar el valor `rgb` que corresponde al color rojo.
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi
|
||||
/\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@@ -46,7 +46,7 @@ Debes usar el valor `rgb` que corresponde al color orchid (orquídea).
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi
|
||||
/\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@@ -62,7 +62,7 @@ Debes usar el valor `rgb` que corresponde al color azul.
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi
|
||||
/\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@@ -78,7 +78,7 @@ Debes usar el valor `rgb` que corresponde al color sienna (siena).
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi
|
||||
/\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
@@ -19,10 +19,18 @@ Ambos devuelven `true`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Hemos creado un objeto, `users`, con algunos usuarios en él y una función `isEveryoneHere`, a la que pasamos el objeto `users` como argumento. Termina de escribir esta función para que devuelva `true` solo si el objeto `users` contiene los cuatro nombres, `Alan`, `Jeff`, `Sarah` y `Ryan`, como claves, y `false`en caso contrario.
|
||||
Termina de escribir la función para que devuelva "true" sólo si el objeto pasado contiene los cuatro nombres, `Alan`, `Jeff`, `Sarah` y `Ryan`, y devuelve false de lo contrario.
|
||||
|
||||
# --hints--
|
||||
|
||||
No se debe acceder directamente al objeto `users`
|
||||
|
||||
```js
|
||||
|
||||
assert(code.match(/users/gm).length <= 2)
|
||||
|
||||
```
|
||||
|
||||
El objeto `users` sólo debe contener las claves `Alan`, `Jeff`, `Sarah` y `Ryan`
|
||||
|
||||
```js
|
||||
@@ -35,13 +43,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
La función `isEveryoneHere` debe devolver `true` si `Alan`, `Jeff`, `Sarah`, y `Ryan` son propiedades del objeto `users`
|
||||
La función `isEveryoneHere` debe devolver `true` si `Alan`, `Jeff`, `Sarah` y `Ryan` son propiedades del objeto que se le pasa.
|
||||
|
||||
```js
|
||||
assert(isEveryoneHere(users) === true);
|
||||
```
|
||||
|
||||
La función `isEveryoneHere` debe devolver `false` si `Alan` no es una propiedad del objeto `users`
|
||||
La función `isEveryoneHere` debe devolver `false` si `Alan` no es una propiedad del objeto que se le pasa.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -52,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
La función `isEveryoneHere` debe devolver `false` si `Jeff` no es una propiedad del objeto `users`
|
||||
La función `isEveryoneHere` debe devolver `false` si `Jeff` no es una propiedad del objeto que se le pasa.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -63,7 +71,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
La función `isEveryoneHere` debe devolver `false` si `Sarah` no es una propiedad del objeto `users`
|
||||
La función `isEveryoneHere` debe devolver `false` si `Sarah` no es una propiedad del objeto que se le pasa.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -74,7 +82,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
La función `isEveryoneHere` debe devolver `false` si `Ryan` no es una propiedad del objeto `users`
|
||||
La función `isEveryoneHere` debe devolver `false` si `Ryan` no es una propiedad del objeto que se le pasa.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -109,7 +117,7 @@ let users = {
|
||||
}
|
||||
};
|
||||
|
||||
function isEveryoneHere(obj) {
|
||||
function isEveryoneHere(userObj) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
@@ -140,13 +148,13 @@ let users = {
|
||||
}
|
||||
};
|
||||
|
||||
function isEveryoneHere(obj) {
|
||||
function isEveryoneHere(userObj) {
|
||||
return [
|
||||
'Alan',
|
||||
'Jeff',
|
||||
'Sarah',
|
||||
'Ryan'
|
||||
].every(i => obj.hasOwnProperty(i));
|
||||
].every(user => userObj.hasOwnProperty(user));
|
||||
}
|
||||
|
||||
console.log(isEveryoneHere(users));
|
||||
|
||||
@@ -12,7 +12,7 @@ Ahora que has superado algunos desafíos usando funciones de orden superior como
|
||||
|
||||
# --instructions--
|
||||
|
||||
Hemos definido una función llamada `squareList`. Necesitas completar el código para la función `squareList` usando cualquier combinación de `map()`, `filter()`, y `reduce()` para que devuelva un nuevo arreglo que contenga *sólo* el cuadrado de los enteros positivos (los números decimales no son enteros) cuando se le pase un arreglo de números reales. Un ejemplo de un arreglo que contiene sólo números reales es `[-3, 4.8, 5, 3, -3.2]`.
|
||||
Completa el código para la función `squareList` usando cualquier combinación de `map()`, `filter()`, y `reduce()`. La función debe devolver un nuevo arreglo que contenga los cuadrados de *solamente* los enteros positivos (números decimales no son enteros) cuando se le pasa un arreglo de números reales. Un ejemplo de un arreglo que contiene números reales es `[-3, 4.8, 5, 3, -3.2]`.
|
||||
|
||||
**Nota:** Tu función no debe usar ningún tipo de bucle `for` o `while` o la función `forEach()`.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: Build a Random Quote Machine
|
||||
title: Construye una máquina de citas al azar
|
||||
challengeType: 3
|
||||
forumTopicId: 301374
|
||||
dashedName: build-a-random-quote-machine
|
||||
@@ -8,39 +8,39 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
||||
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcione de manera similar a esta: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Rellena las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que todas las pruebas pasen. Dale tu propio estilo personal.
|
||||
|
||||
You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
Puedes usar cualquier mezcla de HTML, Javascript, CSS, Bootstrap, SASS, React, Redux, y jQuery para completar este proyecto. Puedes usar un framework de frontend (como React por ejemplo) porque esta sección trata sobre el aprendizaje de frameworks de frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo su propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de incidencias que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
|
||||
|
||||
**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`.
|
||||
**Historia de usuario #1:** Puedo ver un elemento contenedor con un archivo `id="quote-box"`.
|
||||
|
||||
**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`.
|
||||
**Historia de usuario #2:** Dentro de `#quote-box`, puedo ver un elemento con su correspondiente `id="text"`.
|
||||
|
||||
**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`.
|
||||
**Historia de usuario #3:** Dentro de `#quote-box`, puedo ver un elemento con su correspondiente `id="author"`.
|
||||
|
||||
**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`.
|
||||
**Historia de usuario #4:** Dentro de `#quote-box`, puedo ver un elemento en el que se puede hacer clic con su correspondiente `id="new-quote"`.
|
||||
|
||||
**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`.
|
||||
**Historia de usuario #5:** Dentro de `#quote-box`, puedo ver un elemento clickeable `a` con su correspondiente `id="tweet-quote"`.
|
||||
|
||||
**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`.
|
||||
**Historia de usuario #6:** En el primer cargado, mi máquina de cotizaciones muestra una cita aleatoria en el elemento con `id="text"`.
|
||||
|
||||
**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`.
|
||||
**Historia de usuario #7:**En el primer cargado, mi máquina de cotizaciones muestra al autor de la cita aleatoria en el elemento con `id="author"`.
|
||||
|
||||
**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element.
|
||||
**Historia de usuario #8:** Cuando se hace clic en el botón `#new-quote`, mi máquina de cotizaciones debería buscar una nueva cita y mostrarla en el elemento `#text`.
|
||||
|
||||
**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element.
|
||||
**Historia de usuario #9:** Mi máquina de cotizaciones debería buscar al autor de la nueva cita cuando se hace click en el botón `#new-quote` y mostrarlo en el elemento `#author`.
|
||||
|
||||
**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote``a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote.
|
||||
**Historia de usuario #10:** Puedo tuitear la cita actual haciendo clic en `#tweet-quote` del elemento `a`. Este elemento `a` debe incluir la ruta `"twitter.com/intent/tweet"` en su atributo `href` para tuitear la cita actual.
|
||||
|
||||
**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized.
|
||||
**Historia de usuario #11:**El elemento contenedor `#quote-box` debe estar centrado horizontalmente. Ejecuta las pruebas con el nivel de zoom del navegador al 100% y la página maximizada.
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Puedes crear tu proyecto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>utilizando la plantilla de CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. O puedes utilizar este enlace CDN para ejecutar cualquier prueba en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Una vez que hayas terminado, envía la URL a tu proyecto de trabajo con todas sus pruebas verificadas.
|
||||
|
||||
**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved.
|
||||
**Nota:** Twitter no permite que se carguen enlaces en un iframe. Intenta usar el atributo `target="_blank"` o `target="_top"` en el elemento `#tweet-quote` si tu tweet no se carga. `target="_top"` reemplazará la pestaña actual, así que asegúrate de que tu trabajo esté guardado.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed708826
|
||||
title: Remove an Element Using jQuery
|
||||
title: Remueve un elemento usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18262
|
||||
dashedName: remove-an-element-using-jquery
|
||||
@@ -8,15 +8,15 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's remove an HTML element from your page using jQuery.
|
||||
Ahora vamos a eliminar un elemento HTML de su página utilizando jQuery.
|
||||
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely
|
||||
jQuery tiene una función llamada `.remove()` que eliminará completamente un elemento HTML
|
||||
|
||||
Remove element `target4` from the page by using the `.remove()` function.
|
||||
Remueve el elemento `#target4` de la página utilizando la función `.remove()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use jQuery to remove your `target4` element from your page.
|
||||
Debes utilizar jQuery para remover tu elemento `target4` de tu página.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -24,7 +24,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should only use jQuery to remove this element.
|
||||
Sólo debes utilizar jQuery para remover este elemento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed108826
|
||||
title: Target a Specific Child of an Element Using jQuery
|
||||
title: Apunta a un hijo específico de un elemento usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18315
|
||||
required:
|
||||
@@ -11,21 +11,23 @@ dashedName: target-a-specific-child-of-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.
|
||||
Has visto por qué los atributos id son muy convenientes para apuntar con los selectores de jQuery. Pero no siempre tendrás tan buenos id's con los que trabajar.
|
||||
|
||||
Fortunately, jQuery has some other tricks for targeting the right elements.
|
||||
Afortunadamente, jQuery tiene algunos otros trucos para apuntar a los elementos correctos.
|
||||
|
||||
jQuery uses CSS Selectors to target elements. The `target:nth-child(n)` CSS selector allows you to select all the nth elements with the target class or element type.
|
||||
jQuery usa selectores de CSS para apuntar elementos. El selector `target:nth-child(n)` de CSS, te permite seleccionar todos los enésimos elementos con el tipo de elemento o la clase apuntada.
|
||||
|
||||
Here's how you would give the third element in each well the bounce class:
|
||||
Así es como le darías al tercer elemento en cada pozo la clase de rebote:
|
||||
|
||||
`$(".target:nth-child(3)").addClass("animated bounce");`
|
||||
```js
|
||||
$(".target:nth-child(3)").addClass("animated bounce");
|
||||
```
|
||||
|
||||
Make the second child in each of your well elements bounce. You must select the elements' children with the `target` class.
|
||||
Has que el segundo niño en cada uno de sus elementos de pozo rebote. Debes seleccionar los hijos de los elementos con la clase `target`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The second element in your `target` elements should bounce.
|
||||
El segundo elemento en tus elementos `target` deben rebotar.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -34,19 +36,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Only two elements should bounce.
|
||||
Solo deben elegirse dos elementos.
|
||||
|
||||
```js
|
||||
assert($('.animated.bounce').length === 2);
|
||||
```
|
||||
|
||||
You should use the `:nth-child()` selector to modify these elements.
|
||||
Debes usar el selector `:nth-child()` para modificar estos elementos.
|
||||
|
||||
```js
|
||||
assert(code.match(/\:nth-child\(/g));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Solo debes usar jQuery para añadir estas clases al elemento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08826
|
||||
title: Target Elements by Class Using jQuery
|
||||
title: Apunta a elementos por clase usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18316
|
||||
required:
|
||||
@@ -11,29 +11,31 @@ dashedName: target-elements-by-class-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
You see how we made all of your `button` elements bounce? We selected them with `$("button")`, then we added some CSS classes to them with `.addClass("animated bounce");`.
|
||||
¿Ves como hicimos que todos tus elementos `button` reboten? Los seleccionamos con `$("button")`, luego agregamos algo de clases CSS a ellos con `.addClass("animated bounce");`.
|
||||
|
||||
You just used jQuery's `.addClass()` function, which allows you to add classes to elements.
|
||||
Acabas de usar la función `.addClass()` de jQuery, que te permite añadir clases a los elementos.
|
||||
|
||||
First, let's target your `div` elements with the class `well` by using the `$(".well")` selector.
|
||||
Primero, apuntemos tus elementos `div` con la clase `well` usando el selector `$(".well")`.
|
||||
|
||||
Note that, just like with CSS declarations, you type a `.` before the class's name.
|
||||
Ten en cuenta que, al igual que con las declaraciones CSS, escribes un `.` antes del nombre de la clase.
|
||||
|
||||
Then use jQuery's `.addClass()` function to add the classes `animated` and `shake`.
|
||||
Luego usa la función `.addClass()` de jQuery para añadir las clases `animated` y `shake`.
|
||||
|
||||
For example, you could make all the elements with the class `text-primary` shake by adding the following to your `document ready function`:
|
||||
Por ejemplo, puedes hacer que todos los elementos con la clase `text-primary` se agiten agregando lo siguiente a tu función `document ready function`:
|
||||
|
||||
`$(".text-primary").addClass("animated shake");`
|
||||
```js
|
||||
$(".text-primary").addClass("animated shake");
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the jQuery `addClass()` function to give the classes `animated` and `shake` to all your elements with the class `well`.
|
||||
Debes usar la función jQuery `addClass()` para dar las clases `animated` y `shake` a todos tus elementos con la clase `well`.
|
||||
|
||||
```js
|
||||
assert($('.well').hasClass('animated') && $('.well').hasClass('shake'));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Solo debes usar jQuery para añadir estas clases al elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class\.\*animated/g));
|
||||
|
||||
Reference in New Issue
Block a user