1100 lines
64 KiB
JSON
1100 lines
64 KiB
JSON
{
|
|
"name": "jQuery",
|
|
"order": 5,
|
|
"time": "3 hours",
|
|
"helpRoom": "Help",
|
|
"challenges": [
|
|
{
|
|
"id": "bad87fee1348bd9acdd08826",
|
|
"title": "Learn how Script Tags and Document Ready Work",
|
|
"description": [
|
|
"Now we're ready to learn jQuery, the most popular JavaScript tool of all time. Don't worry about JavaScript itself - we will cover it soon.",
|
|
"Before we can start using jQuery, we need to add some things to our HTML.",
|
|
"First, add a <code>script</code> element at the top of your page. Be sure to close it on the following line.",
|
|
"Your browser will run any JavaScript inside a <code>script</code> element, including jQuery.",
|
|
"Inside your <code>script</code> element, add this code: <code>$(document).ready(function() {</code> to your <code>script</code>. Then close it on the following line (still inside your <code>script</code> element) with: <code>});</code>",
|
|
"We'll learn more about <code>functions</code> later. The important thing to know is that code you put inside this <code>function</code> will run as soon as your browser has loaded your page.",
|
|
"This is important because without your <code>document ready function</code>, your code may run before your HTML is rendered, which would cause bugs."
|
|
],
|
|
"challengeSeed": [
|
|
"",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert(code.match(/<\\/script\\s*>/g) && code.match(/<script(\\sasync|\\sdefer)*(\\s(charset|src|type)\\s*=\\s*[\"\\']+[^\"\\']*[\"\\']+)*(\\sasync|\\sdefer)*\\s*>/g) && code.match(/<\\/script\\s*>/g).length === code.match(/<script(\\sasync|\\sdefer)*(\\s(charset|src|type)\\s*=\\s*[\"\\']+[^\"\\']*[\"\\']+)*(\\sasync|\\sdefer)*\\s*>/g).length, 'message: Create a <code>script</code> element making sure it is valid and has a closing tag.');",
|
|
"assert(code.match(/\\$\\s*?\\(\\s*?document\\)\\.ready\\s*?\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'message: You should add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.');",
|
|
"assert(code.match(/\\n*?\\s*?\\}\\s*?\\);/g), 'message: Close your <code>$(document).ready(function() {</code> function with <code>});</code>');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Aprende cómo funcionan las etiquetas de programa y la función de documento listo.",
|
|
"descriptionEs": [
|
|
"Ahora estamos listos para aprender jQuery, la herramienta de JavaScript más popular de todos los tiempos. No te preocupes por JavaScript en si --lo cubriremos pronto.",
|
|
"Antes de que podamos comenzar a usar jQuery, tenemos que añadir algunas cosas a nuestro HTML.",
|
|
"En primer lugar, añade un elemento de programa <code>script</code> en la parte superior de la página. Asegúrate de cerrarlo en la línea siguiente. ",
|
|
"Tu navegador ejecutará todo JavaScript dentro de un elemento <code>script</code>, incluyendo jQuery.",
|
|
"Dentro de tu elemento <code>script</code>, agrega este código: <code>$(document).ready(function () {</code> A continuación, ciérralo en la línea siguiente (aún dentro de tu elemento <code>script</code>) con: <code>})</code>",
|
|
"Más adelante aprenderemos más acerca de funciones. Lo importante es saber que el código que pongas dentro de esta función (<code>function</code>) se ejecutará tan pronto como tu navegador haya cargado la página.",
|
|
"Esto es importante porque sin su <code>función de documento listo</code>, su código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9bedc08826",
|
|
"title": "Target HTML Elements with Selectors Using jQuery",
|
|
"description": [
|
|
"Now we have a <code>document ready function</code>.",
|
|
"Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a <code>dollar sign operator</code>, or simply as <code>bling</code>.",
|
|
"jQuery often selects an HTML element with a <code>selector</code>, then does something to that element.",
|
|
"For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your document ready function:",
|
|
"<code>$(\"button\").addClass(\"animated bounce\");</code>",
|
|
"Note that we've already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css <code>bounce</code> class to your <code>button</code> elements."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'message: Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.');",
|
|
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Elige elementos HTML usando selectores y jQuery",
|
|
"descriptionEs": [
|
|
"Ahora tenemos una <code>función de documento listo</code>.",
|
|
"Ahora vamos a escribir nuestra primera instrucción jQuery. Todas las funciones de jQuery comienzan con un <code>$</code>, al que suele referirse como <code>operador de signo de dólar</code>, o simplemente como <code>bling</code>. ",
|
|
"jQuery a menudo selecciona un elemento HTML con un <code>selector</code>, y luego hace algo a ese elemento.",
|
|
"Por ejemplo, hagamos que todos tus elementos <code>button</code> reboten. Sólo tienes que añadir este código dentro de la función de documento listo: ",
|
|
"<code>$(\"button\").addClass(\"animated bounce\")</code>",
|
|
"Ten en cuenta que ya hemos incluido tanto la biblioteca jQuery como la biblioteca Animate.css en segundo plano para que pueda utilizarlos en el editor. Así que estás usando jQuery para aplicar la clase <code>bounce</code> de Animate.css a sus elementos <code>button</code>."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aedc08826",
|
|
"title": "Target Elements by Class Using jQuery",
|
|
"description": [
|
|
"You see how we made all of your <code>button</code> elements bounce? We selected them with <code>$(\"button\")</code>, then we added some CSS classes to them with <code>.addClass(\"animated bounce\");</code>.",
|
|
"You just used jQuery's <code>.addClass()</code> function, which allows you to add classes to elements.",
|
|
"First, let's target your <code>div</code> elements with the class <code>well</code> by using the <code>$(\".well\")</code> selector.",
|
|
"Note that, just like with CSS declarations, you type a <code>.</code> before the class's name.",
|
|
"Then use jQuery's <code>.addClass()</code> function to add the classes <code>animated</code> and <code>shake</code>.",
|
|
"For example, you could make all the elements with the class <code>text-primary</code> shake by adding the following to your <code>document ready function</code>:",
|
|
"<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"button\").addClass(\"animated bounce\");",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($(\".well\").hasClass(\"animated\") && $(\".well\").hasClass(\"shake\"), 'message: Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>shake</code> to all your elements with the class <code>well</code>.');",
|
|
"assert(!code.match(/class\\.\\*animated/g), 'message: Only use jQuery to add these classes to the element.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Elige elementos por su clase usando jQuery",
|
|
"descriptionEs": [
|
|
"¿Viste como hicimos rebotar todos tus elementos <code>button</code>? Los seleccionamos con <code>$(\"button\")</code>, y luego les añadimos algunas clases CSS con <code>.addClass(\"animated bounce\");.</code> ",
|
|
"Acabas de usar la función <code>addClass()</code> de jQuery, que te permite añadir clases a los elementos.",
|
|
"En primer lugar, apuntemos a tus elementos <code>div</code> que tengan la clase <code>well</code> usando el selector <code>$(\".well\")</code>.",
|
|
"Ten en cuenta que, al igual que con las declaraciones CSS, escribes un <code>.</code> antes del nombre de la clase.",
|
|
"A continuación, utiliza la función <code>.addClass()</code> de jQuery para agregar las clases <code>animated</code> y <code>shake</code>.",
|
|
"Por ejemplo, podrías hacer que todos los elementos con la clase <code>text-primary</code> se sacudieran añadiendo lo siguiente a tu <code>función de documento listo</code>:",
|
|
"<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aeda08826",
|
|
"title": "Target Elements by ID Using jQuery",
|
|
"description": [
|
|
"You can also target elements by their id attributes.",
|
|
"First target your <code>button</code> element with the id <code>target3</code> by using the <code>$(\"#target3\")</code> selector.",
|
|
"Note that, just like with CSS declarations, you type a <code>#</code> before the id's name.",
|
|
"Then use jQuery's <code>.addClass()</code> function to add the classes <code>animated</code> and <code>fadeOut</code>.",
|
|
"Here's how you'd make the <code>button</code> element with the id <code>target6</code> fade out:",
|
|
"<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"button\").addClass(\"animated bounce\");",
|
|
" $(\".well\").addClass(\"animated shake\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($(\"#target3\").hasClass(\"animated\"), 'message: Select the <code>button</code> element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class of <code>animated</code>.');",
|
|
"assert(($(\"#target3\").hasClass(\"fadeOut\") || $(\"#target3\").hasClass(\"fadeout\")) && code.match(/\\$\\(.#target3.\\)/g), 'message: Target the element with the id <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class <code>fadeOut</code>.');",
|
|
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Elige elementos por ID usando jQuery",
|
|
"descriptionEs": [
|
|
"También puedes elegir un elemento por su atributo id.",
|
|
"Primero selecciona tu elemento <code>button</code> con el id <code>target3</code> mediante el uso del selector <code>$(\"#target3\")</code>.",
|
|
"Ten en cuenta que, al igual que con las declaraciones CSS, debes escribir un <code>#</code> antes de la identificación.",
|
|
"A continuación, utiliza la función <code>.addClass()</code> de jQuery para agregar las clases <code>animated</code> y <code>fadeOut</code>.",
|
|
"He aquí cómo haces que desaparezca el elemento <code>button</code> con la identificación <code>target6</code>:",
|
|
"<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aeda08726",
|
|
"title": "Delete your jQuery Functions",
|
|
"description": [
|
|
"These animations were cool at first, but now they're getting kind of distracting.",
|
|
"Delete all three of these jQuery functions from your <code>document ready function</code>, but leave your <code>document ready function</code> itself intact."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"button\").addClass(\"animated bounce\");",
|
|
" $(\".well\").addClass(\"animated shake\");",
|
|
" $(\"#target3\").addClass(\"animated fadeOut\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert(!code.match(/e\"\\);/g) && !code.match(/t\"\\);/g), 'message: Delete all three of your jQuery functions from your <code>document ready function</code>.');",
|
|
"assert(code.match(/<script>/g), 'message: Leave your <code>script</code> element intact.');",
|
|
"assert(code.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'message: Leave your <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.');",
|
|
"assert(code.match(/\\n\\s+?\\}\\);/g), 'message: Leave your \"document ready function\" closing <code>})</code> intact.');",
|
|
"assert(code.match(/<\\/script>/g) && code.match(/<script/g) && code.match(/<\\/script>/g).length === code.match(/<script/g).length, 'message: Leave your <code>script</code> element closing tag intact.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Elimina tus funciones jQuery",
|
|
"descriptionEs": [
|
|
"Estas animaciones eran divertidas al principio, pero ahora se están volviendo una distracción.",
|
|
"Elimina esas tres funciones de jQuery de tu <code>función de documento listo</code>, pero deja intacta la declaración de la <code>función de documento listo</code>."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed908626",
|
|
"title": "Target the same element with multiple jQuery Selectors",
|
|
"description": [
|
|
"Now you know three ways of targeting elements: by type: <code>$(\"button\")</code>, by class: <code>$(\".btn\")</code>, and by id <code>$(\"#target1\")</code>.",
|
|
"Although it is possible to add multiple classes in a single <code>.addClass()</code> call, let's add them to the same element in three different ways.",
|
|
"Using each of the above jQuery selectors and the <code>addClass()</code> function:",
|
|
"Add the <code>animated</code> class to all elements with type <code>button</code>.",
|
|
"Add the <code>shake</code> class to all the buttons with class <code>.btn</code>.",
|
|
"Add the <code>btn-primary</code> class to the button with id <code>#target1</code>."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?button\\s*?(?:'|\")/gi), 'message: Use the <code>$(\"button\")</code> selector.');",
|
|
"assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.btn\\s*?(?:'|\")/gi), 'message: Use the <code>$(\".btn\")</code> selector.');",
|
|
"assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")/gi), 'message: Use the <code>$(\"#target1\")</code> selector.');",
|
|
"assert(code.match(/addClass/g) && code.match(/addClass\\(\\s*?('|\")[\\w-]+\\1\\s*?\\)/g).length > 2, 'message: Only add one class with each of your three selectors.');",
|
|
"assert($(\"#target1\").hasClass(\"animated\") && $(\"#target1\").hasClass(\"shake\") && $(\"#target1\").hasClass(\"btn-primary\"), 'message: Your <code>#target1</code> element should have the classes <code>animated</code>‚ <code>shake</code> and <code>btn-primary</code>.');",
|
|
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Elige un mismo elemento con múltiples selectores jQuery",
|
|
"descriptionEs": [
|
|
"Ahora ya sabes tres formas de seleccionar elementos: por tipo: <code>$(\"button\")</code>, por clase: <code>$(\".btn\")</code>, y por identificación <code>$(\"#target1\")</code>. ",
|
|
"Aunque es posible agregar varias clases en una sola llamada a <code>.addClass()</code>, vamos a añadirlas al mismo elemento de tres maneras diferentes.",
|
|
"Usa cada uno de los selectores jQuery vistos y la función <code>addClass()</code>:",
|
|
"Agrega la clase <code>animated</code> a todos los elementos con tipo <code>button</code>.",
|
|
"Agrega la clase <code>shake</code> a todos los botones con clase <code>.btn</code>.",
|
|
"Agrega la clase <code>btn-primary</code> al botón con identificación <code>#target1</code>."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed918626",
|
|
"title": "Remove Classes from an element with jQuery",
|
|
"description": [
|
|
"In the same way you can add classes to an element with jQuery's <code>addClass()</code> function, you can remove them with jQuery's <code>removeClass()</code> function.",
|
|
"Here's how you would do this for a specific button:",
|
|
"<code>$(\"#target2\").removeClass(\"btn-default\");</code>",
|
|
"Let's remove the <code>btn-default</code> class from all of our <code>button</code> elements."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"button\").addClass(\"animated bounce\");",
|
|
" $(\".well\").addClass(\"animated shake\");",
|
|
" $(\"#target3\").addClass(\"animated fadeOut\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($(\".btn-default\").length === 0, 'message: Remove the <code>btn-default</code> class from all of your <code>button</code> elements.');",
|
|
"assert(code.match(/btn btn-default/g), 'message: Only use jQuery to remove this class from the element.');",
|
|
"assert(code.match(/\\.[\\v\\s]*removeClass[\\s\\v]*\\([\\s\\v]*('|\")\\s*btn-default\\s*('|\")[\\s\\v]*\\)/gm), 'message: Only remove the <code>btn-default</code> class.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Elimina clases de un elemento con jQuery",
|
|
"descriptionEs": [
|
|
"De la misma manera que puedes agregar clases a un elemento con la función <code>addClass()</code> de jQuery, puedes eliminarlas con la función <code>removeClass()</code>.",
|
|
"He aquí cómo puedes hacerlo para un botón específico:",
|
|
"<code>$(\"#target2\").removeClass(\"btn-default\");</code>",
|
|
"Vamos a quitar la clase <code>btn-default</code> de todos nuestros elementos <code>button</code>."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed908826",
|
|
"title": "Change the CSS of an Element Using jQuery",
|
|
"description": [
|
|
"We can also change the CSS of an HTML element directly with jQuery.",
|
|
"jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.",
|
|
"Here's how we would change its color to blue:",
|
|
"<code>$(\"#target1\").css(\"color\", \"blue\");</code>",
|
|
"This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.",
|
|
"Delete your jQuery selectors, leaving an empty <code>document ready function</code>.",
|
|
"Select <code>target1</code> and change its color to red."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"button\").addClass(\"animated bounce\");",
|
|
" $(\".well\").addClass(\"animated shake\");",
|
|
" $(\"#target3\").addClass(\"animated fadeOut\");",
|
|
" $(\"button\").removeClass(\"btn-default\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'message: Your <code>target1</code> element should have red text.');",
|
|
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Cambia el CSS de un elemento usando jQuery",
|
|
"descriptionEs": [
|
|
"También podemos cambiar el CSS de un elemento HTML directamente con jQuery.",
|
|
"jQuery tiene una función llamada <code>.css()</code> que te permite cambiar el CSS de un elemento.",
|
|
"Así es como cambiaríamos su color a azul:",
|
|
"<code>$(\"#target1\").css(\"color\", \"blue\");</code>",
|
|
"Esto es un poco diferente a una declaración normal CSS, porque la propiedad CSS y su valor están entre comillas y separadas por una coma en lugar de dos puntos.",
|
|
"Elimina tus selectores jQuery, dejando en blanco la <code>función de documento listo</code>.",
|
|
"Selecciona <code>target1</code> y cambia su color a rojo."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed808826",
|
|
"title": "Disable an Element Using jQuery",
|
|
"description": [
|
|
"You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.",
|
|
"When you disable a button, it will become grayed-out and can no longer be clicked.",
|
|
"jQuery has a function called <code>.prop()</code> that allows you to adjust the properties of elements.",
|
|
"Here's how you would disable all buttons:",
|
|
"<code>$(\"button\").prop(\"disabled\", true);</code>",
|
|
"Disable only the <code>target1</code> button."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($(\"#target1\") && $(\"#target1\").prop(\"disabled\"), 'message: Disable your <code>target1</code> button.');",
|
|
"assert($(\"#target2\") && !$(\"#target2\").prop(\"disabled\"), 'message: Do not disable any other buttons.');",
|
|
"assert(!code.match(/disabled>/g), 'message: Only use jQuery to add these classes to the element.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Desactiva un elemento usando jQuery",
|
|
"descriptionEs": [
|
|
"También puedes cambiar propiedades que no son CSS de los elementos HTML con jQuery. Por ejemplo, puedes desactivar los botones. ",
|
|
"Al deshabilitar un botón, se volverá gris y no podrá pulsarse.",
|
|
"jQuery tiene una función llamada <code>.prop()</code> que te permite ajustar las propiedades de los elementos.",
|
|
"He aquí cómo puedes desactivar todos los botones:",
|
|
"<code>$(\"button\").prop(\"disabled\", true);</code>",
|
|
"Desactiva sólo el botón <code>target1</code>."
|
|
]
|
|
},
|
|
{
|
|
"id": "564944c91be2204b269d51e3",
|
|
"title": "Change Text Inside an Element Using jQuery",
|
|
"description": [
|
|
"Using jQuery, you can change the text between the start and end tags of an element. You can even change HTML markup.",
|
|
"jQuery has a function called <code>.html()</code> that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.",
|
|
"Here's how you would rewrite and italicize the text of our heading:",
|
|
"<code>$(\"h3\").html(\"<i>jQuery Playground</i>\");</code>",
|
|
"jQuery also has a similar function called <code>.text()</code> that only alters text without adding tags.",
|
|
"Change the button with id <code>target4</code> by italicizing its text."
|
|
],
|
|
"releasedOn": "November 18, 2015",
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert.isTrue((/<i>#target4<\\/i>/gi).test($(\"#target4\").html()), 'message: Italicize the text in your <code>target4</code> button by adding HTML tags.');",
|
|
"assert($(\"#target4\") && $(\"#target4\").text() === '#target4', 'message: Make sure the text is otherwise unchanged.');",
|
|
"assert.isFalse((/<i>/gi).test($(\"h3\").html()), 'message: Do not alter any other text.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed708826",
|
|
"title": "Remove an Element Using jQuery",
|
|
"description": [
|
|
"Now let's remove an HTML element from your page using jQuery.",
|
|
"jQuery has a function called <code>.remove()</code> that will remove an HTML element entirely",
|
|
"Remove element <code>target4</code> from the page by using the <code>.remove()</code> function."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($(\"#target4\").length === 0, 'message: Use jQuery to remove your <code>target4</code> element from your page.');",
|
|
"assert(code.match(/id=\"target4/g), 'message: Only use jQuery to remove this element.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Elimina un elemento usando jQuery",
|
|
"descriptionEs": [
|
|
"Ahora quitemos un elemento HTML de tu página usando jQuery.",
|
|
"jQuery tiene una función llamada <code>.remove()</code> que eliminará un elemento HTML por completo",
|
|
"Elimina el elemento <code>target4</code> de la página utilizando la función <code>.remove()</code>."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed608826",
|
|
"title": "Use appendTo to Move Elements with jQuery",
|
|
"description": [
|
|
"Now let's try moving elements from one <code>div</code> to another.",
|
|
"jQuery has a function called <code>appendTo()</code> that allows you to select HTML elements and append them to another element.",
|
|
"For example, if we wanted to move <code>target4</code> from our right well to our left well, we would use:",
|
|
"<code>$(\"#target4\").appendTo(\"#left-well\");</code>",
|
|
"Move your <code>target2</code> element from your <code>left-well</code> to your <code>right-well</code>."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($(\"#left-well\").children(\"#target2\").length === 0, 'message: Your <code>target2</code> element should not be inside your <code>left-well</code>.');",
|
|
"assert($(\"#right-well\").children(\"#target2\").length > 0, 'message: Your <code>target2</code> element should be inside your <code>right-well</code>.');",
|
|
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to move these elements.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Usa appendTo para mover elementos con jQuery",
|
|
"descriptionEs": [
|
|
"Ahora intentemos mover elementos de un <code>div</code> a otro.",
|
|
"jQuery tiene una función llamada <code>appendTo()</code> que le permite seleccionar elementos HTML y anexarlos a otro elemento.",
|
|
"Por ejemplo, si quisiéramos mover <code>target4</code> de nuestro pozo (<em>well</em>) derecho a nuestro pozo izquierdo, usaríamos:",
|
|
"<code>$(\"#target4\").appendTo(\"#left-well\");</code>",
|
|
"Mueve tu elemento <code>target2</code> de tu <code>left-well</code> a tu <code>right-well</code>."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed508826",
|
|
"title": "Clone an Element Using jQuery",
|
|
"description": [
|
|
"In addition to moving elements, you can also copy them from one place to another.",
|
|
"jQuery has a function called <code>clone()</code> that makes a copy of an element.",
|
|
"For example, if we wanted to copy <code>target2</code> from our <code>left-well</code> to our <code>right-well</code>, we would use:",
|
|
"<code>$(\"#target2\").clone().appendTo(\"#right-well\");</code>",
|
|
"Did you notice this involves sticking two jQuery functions together? This is called <code>function chaining</code> and it's a convenient way to get things done with jQuery.",
|
|
"Clone your <code>target5</code> element and append it to your <code>left-well</code>."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
" $(\"#target2\").appendTo(\"#right-well\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($(\"#right-well\").children(\"#target5\").length > 0, 'message: Your <code>target5</code> element should be inside your <code>right-well</code>.');",
|
|
"assert($(\"#left-well\").children(\"#target5\").length > 0, 'message: A copy of your <code>target5</code> element should also be inside your <code>left-well</code>.');",
|
|
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to move these elements.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Clona un elemento usando jQuery",
|
|
"descriptionEs": [
|
|
"Además de mover elementos, puedes copiarlos de un sitio a otro.",
|
|
"jQuery tiene una función llamada <code>clone()</code> que hace una copia de un elemento.",
|
|
"Por ejemplo, si quisiéramos copiar <code>target2</code> de nuestro <code>left-well</code> a nuestro <code>right-well</code>, usaríamos:",
|
|
"<code>$(\"#target2\").clone().appendTo(\"#right-well\");</code>",
|
|
"¿Te diste cuenta que esto implica pegar dos funciones jQuery? Esto se conoce como <code>encadenamiento</code> y es una manera conveniente de hacer las cosas con jQuery. ",
|
|
"Clona tu elemento <code>target5</code> y añadelo a tu <code>left-well</code>."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed308826",
|
|
"title": "Target the Parent of an Element Using jQuery",
|
|
"description": [
|
|
"Every HTML element has a <code>parent</code> element from which it <code>inherits</code> properties.",
|
|
"For example, your <code>jQuery Playground</code> <code>h3</code> element has the parent element of <code><div class=\"container-fluid\"></code>, which itself has the parent <code>body</code>.",
|
|
"jQuery has a function called <code>parent()</code> that allows you to access the parent of whichever element you've selected.",
|
|
"Here's an example of how you would use the <code>parent()</code> function if you wanted to give the parent element of the <code>left-well</code> element a background color of blue:",
|
|
"<code>$(\"#left-well\").parent().css(\"background-color\", \"blue\")</code>",
|
|
"Give the parent of the <code>#target1</code> element a background-color of red."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
" $(\"#target2\").appendTo(\"#right-well\");",
|
|
" $(\"#target5\").clone().appendTo(\"#left-well\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<body>",
|
|
" <div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</body>"
|
|
],
|
|
"tests": [
|
|
"assert($(\"#left-well\").css(\"background-color\") === 'red' || $(\"#left-well\").css(\"background-color\") === 'rgb(255, 0, 0)' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#ff0000' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#f00', 'message: Your <code>left-well</code> element should have a red background.');",
|
|
"assert(code.match(/\\.parent\\s*\\(\\)\\s*\\.css/g), 'message: You should use the <code>.parent()</code> function to modify this element.');",
|
|
"assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")\\s*?\\)\\.parent/gi), 'message: The <code>.parent()</code> method should be called on the <code>#target1</code> element.');",
|
|
"assert(code.match(/<div class=\"well\" id=\"left-well\">/g), 'message: Only use jQuery to add these classes to the element.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Elige el padre de un elemento usando jQuery",
|
|
"descriptionEs": [
|
|
"Cada elemento HTML tiene un elemento <code>padre</code> del cual <code>hereda</code> propiedades.",
|
|
"Por ejemplo, tu elemento <code>h3</code> <code>jQuery Playground</code> tiene el elemento padre <code><div class=\"container-fluid\"></code>, que a su vez tiene el padre <code>body</code>. ",
|
|
"jQuery tiene una función llamada <code>parent()</code> que te permite acceder al padre de cualquier elemento que haya seleccionado.",
|
|
"He aquí un ejemplo de cómo se utiliza la función <code>parent()</code> si quisieras darle al elemento padre del elemento <code>left-well</code> un color de fondo azul:",
|
|
"<code>$(\"#left-well\").parent().css(\"background-color\", \"blue\")</code>",
|
|
"Dale al padre del elemento <code>#target1</code> un color de fondo (<code>background-color</code>) rojo."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed208826",
|
|
"title": "Target the Children of an Element Using jQuery",
|
|
"description": [
|
|
"Many HTML elements have <code>children</code> which <code>inherit</code> their properties from their parent HTML elements.",
|
|
"For example, every HTML element is a child of your <code>body</code> element, and your \"jQuery Playground\" <code>h3</code> element is a child of your <code><div class=\"container-fluid\"></code> element.",
|
|
"jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.",
|
|
"Here's an example of how you would use the <code>children()</code> function to give the children of your <code>left-well</code> element the color of blue:",
|
|
"<code>$(\"#left-well\").children().css(\"color\", \"blue\")</code>",
|
|
"Give all the children of your <code>#right-well</code> element a color of orange."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
" $(\"#target2\").appendTo(\"#right-well\");",
|
|
" $(\"#target5\").clone().appendTo(\"#left-well\");",
|
|
" $(\"#target1\").parent().css(\"background-color\", \"red\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($(\"#right-well\").children().css(\"color\") === 'rgb(255, 165, 0)', 'message: All children of <code>#right-well</code> should have orange text.');",
|
|
"assert(code.match(/\\.children\\(\\)\\.css/g), 'message: You should use the <code>children()</code> function to modify these elements.');",
|
|
"assert(code.match(/<div class=\"well\" id=\"right-well\">/g), 'message: Only use jQuery to add these classes to the element.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Elige los hjos de un elemento usando jQuery",
|
|
"descriptionEs": [
|
|
"Muchos elementos HTML tienen <code>hijos</code>, los cuales <code>heredan</code> sus propiedades de sus elementos padres",
|
|
"Por ejemplo, cada elemento HTML es un hijo de tu elemento <code>body</code>, y tu elemento <code>h3</code> \"jQuery Playground\" es un hijo de tu elemento <code><div class=\"container-fluid\"></code>.",
|
|
"jQuery tiene una función llamada <code>children()</code> que te permite acceder a los hijos de cualquier elemento que hayas seleccionado.",
|
|
"He aquí un ejemplo de cómo se utiliza la función <code>children()</code> para darle a los hijos de tu elemento <code>left-well</code> el color azul:",
|
|
"<code>$(\"#left-well\").children().css(\"color\", \"blue\")</code>",
|
|
"Da a todos los hijos de tu elemento <code>right-well</code> el color naranja."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed108826",
|
|
"title": "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.",
|
|
"Fortunately, jQuery has some other tricks for targeting the right elements.",
|
|
"jQuery uses CSS Selectors to target elements. <code>target:nth-child(n)</code> css selector allows you to select all the nth elements with the target class or element type.",
|
|
"Here's how you would give the third element in each well the bounce class:",
|
|
"<code>$(\".target:nth-child(3)\").addClass(\"animated bounce\");</code>",
|
|
"Make the second child in each of your well elements bounce. You must target the children of element with the <code>target</code> class."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
" $(\"#target2\").appendTo(\"#right-well\");",
|
|
" $(\"#target5\").clone().appendTo(\"#left-well\");",
|
|
" $(\"#target1\").parent().css(\"background-color\", \"red\");",
|
|
" $(\"#right-well\").children().css(\"color\", \"orange\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($(\".target:nth-child(2)\").hasClass(\"animated\") && $(\".target:nth-child(2)\").hasClass(\"bounce\"), 'message: The second element in your <code>target</code> elements should bounce.');",
|
|
"assert(code.match(/\\:nth-child\\(/g), 'message: You should use the <code>:nth-child()</code> function to modify these elements.');",
|
|
"assert(code.match(/<button class=\"btn btn-default target\" id=\"target2\">/g), 'message: Only use jQuery to add these classes to the element.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Elige un hijo específico de un elemento usando jQuery",
|
|
"descriptionEs": [
|
|
"Seguramente habrás entendido porque los atributos id son tan convenientes para elegir con selectores jQuery. Pero no siempre contarás con estos agradables identificadores para trabajar. ",
|
|
"Afortunadamente, jQuery tiene algunos otros trucos para elegir los elementos adecuados.",
|
|
"jQuery usa selectores CSS para elegir elementos, El selector CSS <code>.clase:nth-child(i)</code> le permite seleccionar de los elementos con la clase dada, los que sean los i-ésimos hijos de su elemento padre. En lugar de una clase también puede usarse un elemento",
|
|
"He aquí cómo le asignarás la clase <code>bounce</code> al tercer elemento de cada pozo:",
|
|
"<code>$(\".target:nth-child(3)\").addClass(\"animated bounce\");</code>",
|
|
"Haz que rebote el segundo hijo de cada uno de los elementos de tus pozos. Debes elegir los hijos con la clase <code>target</code>."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed008826",
|
|
"title": "Target Even Numbered Elements Using jQuery",
|
|
"description": [
|
|
"You can also target all the even-numbered elements.",
|
|
"Here's how you would target all the odd-numbered elements with class <code>target</code> and give them classes:",
|
|
"<code>$(\".target:odd\").addClass(\"animated shake\");</code>",
|
|
"Note that jQuery is zero-indexed, meaning that, counter-intuitively, <code>:odd</code> selects the second element, fourth element, and so on.",
|
|
"Try selecting all the even-numbered elements and giving them the classes of <code>animated</code> and <code>shake</code>."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
" $(\"#target2\").appendTo(\"#right-well\");",
|
|
" $(\"#target5\").clone().appendTo(\"#left-well\");",
|
|
" $(\"#target1\").parent().css(\"background-color\", \"red\");",
|
|
" $(\"#right-well\").children().css(\"color\", \"orange\");",
|
|
" $(\"#left-well\").children().css(\"color\", \"green\");",
|
|
" $(\".target:nth-child(2)\").addClass(\"animated bounce\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'), 'message: All the <code>target</code> elements that computer considers even should shake.');",
|
|
"assert(code.match(/\\:even/g), 'message: You should use the <code>:even</code> function to modify these elements.');",
|
|
"assert(code.match(/<button class=\"btn btn-default target\" id=\"target3\">/g), 'message: Only use jQuery to add these classes to the element.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Elige elementos con numeración par usando jQuery",
|
|
"descriptionEs": [
|
|
"También puedes elegir todos los elementos con numeración par.",
|
|
"He aquí cómo elegirías todos los elementos impares con clase <code>target</code> y como les agregarías unas clases:",
|
|
"<code>$(\".target:odd\").addClass(\"animated shake\");</code>",
|
|
"Intenta seleccionar todos los elementos de número par y agrégales las clases <code>animated</code> y <code>shake</code>."
|
|
]
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aecb08826",
|
|
"title": "Use jQuery to Modify the Entire Page",
|
|
"description": [
|
|
"We're done playing with our jQuery playground. Let's tear it down!",
|
|
"jQuery can target the <code>body</code> element as well.",
|
|
"Here's how we would make the entire body fade out: <code> $(\"body\").addClass(\"animated fadeOut\");</code>",
|
|
"But let's do something more dramatic. Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element."
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" $(document).ready(function() {",
|
|
" $(\"#target1\").css(\"color\", \"red\");",
|
|
" $(\"#target1\").prop(\"disabled\", true);",
|
|
" $(\"#target4\").remove();",
|
|
" $(\"#target2\").appendTo(\"#right-well\");",
|
|
" $(\"#target5\").clone().appendTo(\"#left-well\");",
|
|
" $(\"#target1\").parent().css(\"background-color\", \"red\");",
|
|
" $(\"#right-well\").children().css(\"color\", \"orange\");",
|
|
" $(\"#left-well\").children().css(\"color\", \"green\");",
|
|
" $(\".target:nth-child(2)\").addClass(\"animated bounce\");",
|
|
" $(\".target:even\").addClass(\"animated shake\");",
|
|
"",
|
|
" });",
|
|
"fcces",
|
|
"",
|
|
"<!-- Only change code above this line. -->",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"tests": [
|
|
"assert($('body').hasClass('animated') && $('body').hasClass('hinge'), 'message: Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameEs": "Usa jQuery para modificar la página entera",
|
|
"descriptionEs": [
|
|
"Hemos terminado de jugar en nuestro patio de recreo jQuery. ¡Vamos a derribarlo!",
|
|
"jQuery también puede elegir el elemento <code>body</code>.",
|
|
"Así es como haríamos que el cuerpo entero desapareciera: <code>$(\"body\").addClass('animated fadeOut');</code>",
|
|
"Pero vamos a hacer algo más dramático. Añade las clases <code>animated</code> y <code>hinge</code> a tu elemento <code>body</code>."
|
|
]
|
|
}
|
|
]
|
|
}
|