div elements has a closing tag.');"
],
"challengeSeed": [
"
",
"",
"",
"",
"
",
"
CatPhotoApp ",
"",
"
",
"",
"
",
"
",
"
",
" Like ",
"
",
"
",
" Info ",
"
",
"
",
" Delete ",
"
",
"
",
"
Things cats love:
",
"
",
" cat nip ",
" laser pointers ",
" lasagna ",
" ",
"
Top 3 things cats hate:
",
"
",
" flea treatment ",
" thunder ",
" other cats ",
" ",
"
",
"
"
],
"type": "waypoint",
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Crea un encabezado personalizado",
"descriptionEs": [
"Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniéndolos en la misma línea.",
"Recuerda, Bootstrap usa un sistema de cuadrícula adaptativo, el cual facilita poner elementos en filas y especificar el ancho relativo de cada elemento. La mayoría de las clases de Bootstrap pueden aplicarse a un elemento
div.",
"Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:",
"
",
"En esta ilustración se está utilizando la clase
col-md-*. Aquí,
md significa mediano, y
* es un número que especifica el número de columnas que debe tomar el ancho del elemento. En este caso, se especifica el ancho de columna de un elemento en una pantalla de tamaño mediano, como un computador portátil.",
"En la aplicación de fotos de gatos que estamos construyendo, usaremos
col-xs-*, donde
xs significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y
* especifica el número de columnas que debe tomar el ancho del elemento.",
"Anida tu primera imagen y tu elemento
h2 dentro de un solo elemento
<div class=\"row\">. Anida tu texto
h2 dentro de un
<div class=\"col-xs-8\"> y tu imagen en un
<div class=\"col-xs-4\"> de tal forma que estén en la misma línea.",
"¿Te diste cuenta de que la imagen es ahora justamente del tamaño apropiado para el texto?"
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aedd08845",
"title": "Add Font Awesome Icons to our Buttons",
"description": [
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the
.svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
"The
i element was originally used to make other elements italic, but is now commonly used for icons. You add the Font Awesome classes to the
i element to turn it into an icon, for example:",
"
<i class=\"fa fa-info-circle\"></i>",
"Use Font Awesome to add a
thumbs-up icon to your like button by giving it an
i element with the classes
fa and
fa-thumbs-up."
],
"tests": [
"assert($(\"i\").hasClass(\"fa fa-thumbs-up\"), 'message: Add an
i element with the classes
fa and
fa-thumbs-up.');",
"assert($(\"i.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > i\").hasClass(\"fa fa-thumbs-up\"), 'message: Your
fa-thumbs-up icon should be located within the Like button.');",
"assert($(\"button\").children(\"i\").length > 0, 'message: Nest your
i element within your
button element.');",
"assert(code.match(/<\\/i>/g), 'message: Make sure your
i element has a closing tag.');"
],
"challengeSeed": [
"
",
"",
"",
"
",
"
",
"
",
"
CatPhotoApp ",
" ",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
" Like ",
"
",
"
",
" Info ",
"
",
"
",
" Delete ",
"
",
"
",
"
Things cats love:
",
"
",
" cat nip ",
" laser pointers ",
" lasagna ",
" ",
"
Top 3 things cats hate:
",
"
",
" flea treatment ",
" thunder ",
" other cats ",
" ",
"
",
"
"
],
"type": "waypoint",
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Agrega iconos de Font Awesome a los botones",
"descriptionEs": [
"Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato
.svg, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.",
"Usa Font Awesome para agregar un icono de \"pulgar arriba\"
thumbs-up a tu botón de like dándole un elemento
i con las clases
fa y
fa-thumbs-up."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aedc08845",
"title": "Add Font Awesome Icons to all of our Buttons",
"description": [
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the
.svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
"Use Font Awesome to add a
info-circle icon to your info button and a
trash icon to your delete button."
],
"tests": [
"assert($(\".btn-danger > i\").hasClass(\"fa fa-trash\"), 'message: You should add a
<i class=\"fa fa-trash\"></i> within your delete button element.');",
"assert($(\".btn-info > i\").hasClass(\"fa fa-info-circle\"), 'message: You should add a
<i class=\"fa fa-info-circle\"></i> within your info button element.');",
"assert(code.match(/<\\/i>/g) && code.match(/<\\/i>/g).length > 2 && $(\".btn-primary > i\").hasClass(\"fa fa-thumbs-up\"), 'message: Make sure each of your
i elements has a closing tag and
<i class=\"fa fa-thumbs-up\"></i> is in your like button element.');"
],
"challengeSeed": [
"
",
"",
"",
"
",
"
",
"
",
"
CatPhotoApp ",
" ",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
" Info ",
"
",
"
",
" Delete ",
"
",
"
",
"
Things cats love:
",
"
",
" cat nip ",
" laser pointers ",
" lasagna ",
" ",
"
Top 3 things cats hate:
",
"
",
" flea treatment ",
" thunder ",
" other cats ",
" ",
"
",
"
"
],
"type": "waypoint",
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Agrega Font Awesome a todos los botones",
"descriptionEs": [
"Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato
.svg, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.",
"Utiliza Font Awesome para agregar un icono
info-circle a tu botón informativo y un icono
trash a tu botón de eliminar."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aedb08845",
"title": "Responsively Style Radio Buttons",
"description": [
"You can use Bootstrap's
col-xs-* classes on
form elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is.",
"Nest all of your radio buttons within a
<div class=\"row\"> element. Then nest each of them within a
<div class=\"col-xs-6\"> element."
],
"tests": [
"assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, 'message: Nest all of your radio buttons inside one
div with the class
row.');",
"assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'message: Nest each of your radio buttons inside its own
div with the class
col-xs-6.');",
"assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');"
],
"challengeSeed": [
"
",
"",
"",
"
",
"
",
"
",
"
CatPhotoApp ",
" ",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
Things cats love:
",
"
",
" cat nip ",
" laser pointers ",
" lasagna ",
" ",
"
Top 3 things cats hate:
",
"
",
" flea treatment ",
" thunder ",
" other cats ",
" ",
"
",
"
"
],
"type": "waypoint",
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Crea botones de opción con estilo adaptativo",
"descriptionEs": [
"¡Puedes utilizar las clases
col-xs-* de Bootstrap en elementos
form también! De esta forma, nuestros botones de opción estarán igualmente distribuidos en la página, sin importar qué tan ancha es la resolución de la pantalla.",
"Anida todos los botones de opción dentro de un elemento
<div class=\"row\">. Luego, anida cada uno de ellos dentro de un elemento
<div class=\"col-xs-6\">."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aeda08845",
"title": "Responsively Style Checkboxes",
"description": [
"You can use Bootstrap's
col-xs-* classes on
form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.",
"Nest all your checkboxes in a
<div class=\"row\"> element. Then nest each of them in a
<div class=\"col-xs-4\"> element."
],
"tests": [
"assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, 'message: Nest all of your checkboxes inside one
div with the class
row.');",
"assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'message: Nest each of your checkboxes inside its own
div with the class
col-xs-4.');",
"assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');"
],
"challengeSeed": [
"
",
"",
"",
"
",
"
",
"
",
"
CatPhotoApp ",
" ",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
Things cats love:
",
"
",
" cat nip ",
" laser pointers ",
" lasagna ",
" ",
"
Top 3 things cats hate:
",
"
",
" flea treatment ",
" thunder ",
" other cats ",
" ",
"
",
"
"
],
"type": "waypoint",
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Crea casillas de selección con estilo adaptativo",
"descriptionEs": [
"¡Puedes utilizar las clases
col-xs-* de Bootstrap en elementos
form también! De esta forma, nuestros botones de opción estarán igualmente distribuidos en la página, sin importar qué tan ancha es la resolución de la pantalla.",
"Anida todas las casillas de selección en un elemento
<div class=\"row\">. Luego, anida cada una de ellas en un elemento
<div class=\"col-xs-4\">."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aed908845",
"title": "Style Text Inputs as Form Controls",
"description": [
"You can add the
fa-paper-plane Font Awesome icon by adding
<i class=\"fa fa-paper-plane\"></i> within your submit
button element.",
"Give your form's text input field a class of
form-control. Give your form's submit button the classes
btn btn-primary. Also give this button the Font Awesome icon of
fa-paper-plane."
],
"tests": [
"assert($(\"button[type=\\\"submit\\\"]\").hasClass(\"btn btn-primary\"), 'message: Give the submit button in your form the classes
btn btn-primary.');",
"assert($(\"button[type=\\\"submit\\\"]:has(i.fa.fa-paper-plane)\").length > 0, 'message: Add a
<i class=\"fa fa-paper-plane\"></i> within your submit
button element.');",
"assert($(\"input[type=\\\"text\\\"]\").hasClass(\"form-control\"), 'message: Give the text
input in your form the class
form-control.');",
"assert(code.match(/<\\/i>/g) && code.match(/<\\/i/g).length > 3, 'message: Make sure each of your
i elements has a closing tag.');"
],
"challengeSeed": [
"
",
"",
"",
"
",
"
",
"
",
"
CatPhotoApp ",
" ",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
Things cats love:
",
"
",
" cat nip ",
" laser pointers ",
" lasagna ",
" ",
"
Top 3 things cats hate:
",
"
",
" flea treatment ",
" thunder ",
" other cats ",
" ",
"
",
"
"
],
"type": "waypoint",
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Estiliza cajas de texto como controles de formulario",
"descriptionEs": [
"Puedes agregar el icono
fa-paper-plane de Font Awesome incluyendo
<i class=\"fa fa-paper-plane\"></i> dentro de tu elemento
button de envío.",
"Dale a la entrada de texto de tu formulario la clase
form-control. Dale al botón de envío de tu formulario las clases
btn btn-primary. También, incluye en ese botón el icono
fa-paper-plane de Font Awesome."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908845",
"title": "Line up Form Elements Responsively with Bootstrap",
"description": [
"Now let's get your form
input and your submission
button on the same line. We'll do this the same way we have previously: by using a
div element with the class
row, and other
div elements within it using the
col-xs-* class.",
"Nest both your form's text
input and submit
button within a
div with the class
row. Nest your form's text
input within a div with the class of
col-xs-7. Nest your form's submit
button in a
div with the class
col-xs-5.",
"This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!"
],
"tests": [
"assert($(\"div.row:has(input[type=\\\"text\\\"])\").length > 0 && $(\"div.row:has(button[type=\\\"submit\\\"])\").length > 0, 'message: Nest your form submission button and text input in a div with class
row.');",
"assert($(\"div.col-xs-7:has(input[type=\\\"text\\\"])\").length > 0, 'message: Nest your form text input in a div with the class
col-xs-7.');",
"assert($(\"div.col-xs-5:has(button[type=\\\"submit\\\"])\").length > 0, 'message: Nest your form submission button in a div with the class
col-xs-5.');",
"assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');"
],
"challengeSeed": [
"
",
"",
"",
"
",
"
",
"
",
"
CatPhotoApp ",
" ",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
Things cats love:
",
"
",
" cat nip ",
" laser pointers ",
" lasagna ",
" ",
"
Top 3 things cats hate:
",
"
",
" flea treatment ",
" thunder ",
" other cats ",
" ",
"
",
"
"
],
"type": "waypoint",
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Alínea elementos de formulario de forma adaptativa con Bootstrap",
"descriptionEs": [
"Ahora vamos a poner el elemento
input y el elemento
button que dice submit de tu formulario en la misma línea. Lo haremos de la misma forma que lo hicimos anteriormente: usando un elemento
div con la clase
row, y otros elementos
div dentro de ese, usando la clase
col-xs-*.",
"Anida ambos, el elemento
input y el elemento
button que dice submit de tu formulario dentro de un
div con la clase
row. Anida el elemento
input de tu formulario dentro de un div con cla clase
col-xs-7. Anida el elemento
button que dice submit de tu formulario en un elemento
div con la clase
col-xs-5.",
"¡Este es el último desafío que haremos con nuestra aplicación de fotos de gato por ahora. Esperamos que hayas disfrutado aprender acerca de Font Awesome, Bootstrap y diseño adaptativo!"
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908846",
"title": "Create a Bootstrap Headline",
"description": [
"Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills.",
"We'll build a jQuery playground, which we'll soon put to use in our jQuery challenges.",
"To start with, create an
h3 element, with the text
jQuery Playground.",
"Color your
h3 element with the
text-primary Bootstrap class, and center it with the
text-center Bootstrap class."
],
"tests": [
"assert($(\"h3\") && $(\"h3\").length > 0, 'message: Add a
h3 element to your page.');",
"assert(code.match(/<\\/h3>/g) && code.match(/
/g).length === code.match(/h3 element has a closing tag.');",
"assert($(\"h3\").hasClass(\"text-primary\"), 'message: Your h3 element should be colored by applying the class text-primary');",
"assert($(\"h3\").hasClass(\"text-center\"), 'message: Your h3 element should be centered by applying the class text-center');",
"assert.isTrue((/jquery(\\s)+playground/gi).test($(\"h3\").text()), 'message: Your h3 element should have the text jQuery Playground.');"
],
"challengeSeed": [
"",
"",
""
],
"type": "waypoint",
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Crea un encabezado con Bootstrap",
"descriptionEs": [
"Ahora vamos a comenzar un proyecto desde cero para practicar nuestras habilidades con HTML, CSS y Bootstrap.",
"Crearemos un área de juego con jQuery, el cual utilizaremos en nuestros desafíos con jQuery.",
"Para empezar, crea un elemento h3, con el texto jQuery Playground.",
"Ponle color a tu elemento h3 con la clase text-primary de Bootstrap, y céntrala con la clase text-center de Bootstrap."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908746",
"title": "House our page within a Bootstrap Container Fluid Div",
"description": [
"Now let's make sure all the content on your page is mobile-responsive.",
"Let's nest your h3 element within a div element with the class container-fluid."
],
"tests": [
"assert($(\"div\").hasClass(\"container-fluid\"), 'message: Your div element should have the class container-fluid.');",
"assert(code.match(/<\\/div>/g) && code.match(//g).length === code.match(/
div elements has a closing tag.');",
"assert($(\"div\").children(\"h3\").length >0, 'message: Nest your
h3 element inside a
div element.');"
],
"challengeSeed": [
"
jQuery Playground ",
"",
""
],
"type": "waypoint",
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Aloja la página dentro de un elemento Div contenedor fluido de Bootstrap",
"descriptionEs": [
"Ahora asegurémonos de que todo el contenido en nuestra página pueda adaptarse a dispositivos móviles.",
"Anida tu elemento
h3 dentro de un elemento
div con la clase
container-fluid."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9bec908846",
"title": "Create a Bootstrap Row",
"description": [
"Now we'll create a Bootstrap row for our inline elements.",
"Create a
div element below the
h3 tag, with a class of
row."
],
"tests": [
"assert($(\"div\").length > 1, 'message: Add a
div element below your
h3 element.');",
"assert($(\"div\").hasClass(\"row\"), 'message: Your
div element should have the class
row');",
"assert($(\"div.container-fluid div.row\").length > 0, 'message: Your
row div should be nested inside the
container-fluid div');",
"assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div element has a closing tag.');"
],
"challengeSeed": [
"
",
"
jQuery Playground ",
"",
"",
""
],
"type": "waypoint",
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Crea una fila en Bootstrap",
"descriptionEs": [
"Ahora crearemos una fila de Bootstrap con nuestros elementos en línea.",
"Crea un elemento
div debajo de la etiqueta
h3, con la clase
row."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908847",
"title": "Split your Bootstrap Row",
"description": [
"Now that we have a Bootstrap Row, let's split it into two columns to house our elements.",
"Create two
div elements within your row, both with the class
col-xs-6."
],
"tests": [
"assert($(\"div.row > div.col-xs-6\").length > 1, 'message: Nest two
div class=\"col-xs-6\" elements within your
div class=\"row\" element.');",
"assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements have closing tags.');"
],
"challengeSeed": [
"
",
"
jQuery Playground ",
"
",
"",
"",
"
",
"
"
],
"type": "waypoint",
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Parte tu fila en Bootstrap",
"descriptionEs": [
"Ahora que tenemos una fila en Bootstrap, vamos a partirla en dos columnas para alojar nuestros elementos.",
"Crea dos elementos
div dentro de tu fila, ambos con la clase
col-xs-6."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908848",
"title": "Create Bootstrap Wells",
"description": [
"Bootstrap has a class called
well that can create a visual sense of depth for your columns.",
"Nest one
div element with the class
well within each of your
col-xs-6 div elements."
],
"tests": [
"assert($(\"div.col-xs-6\").not(\":has(>div.well)\").length < 1, 'message: Add a
div element with the class
well inside each of your
div elements with the class
\"col-xs-6\"');",
"assert($(\"div.row > div.col-xs-6\").length > 1, 'message: Nest both of your
div elements with the class
\"col-xs-6\" within your
div element with the class
\"row\".');",
"assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements have closing tags.');"
],
"challengeSeed": [
"
",
"
jQuery Playground ",
"
",
"
",
"",
"
",
"
",
"",
"
",
"
",
"
"
],
"type": "waypoint",
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Crea pozos en Bootstrap",
"descriptionEs": [
"Bootstrap tiene una clase llamada
well que crea una sensación visual de profundidad para tus columnas.",
"Anida un elemento
div con la clase
well dentro de cada uno de tus elementos
div que tienen la clase
col-xs-6."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908849",
"title": "Add Elements within your Bootstrap Wells",
"description": [
"Now we're several
div elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our
button elements.",
"Nest three
button elements within each of your
well div elements."
],
"tests": [
"assert($(\"div.well\").children(\"button\").length > 5, 'message: Nest three
button elements within each of your
div elements with class
well.');",
"assert($(\"button\") && $(\"button\").length > 5, 'message: You should have a total of 6
button elements.');",
"assert(code.match(/<\\/button>/g) && code.match(/
/g).length === code.match(/button elements have closing tags.');"
],
"challengeSeed": [
"",
"
jQuery Playground ",
"
",
"
",
"
",
"",
"",
"",
"
",
"
",
"
",
"
",
"",
"",
"",
"
",
"
",
"
",
"
div dentro de cada columna de nuestra fila. No iremos más profundo que esto. Ahora podemos agregar nuestros elementos button.",
"Anida tres elementos button dentro de cada uno de tus elementos div que tienen la clase well."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908850",
"title": "Apply the Default Bootstrap Button Style",
"description": [
"Bootstrap has another button class called btn-default.",
"Apply both the btn and btn-default classes to each of your button elements."
],
"tests": [
"assert($(\".btn\").length > 5, 'message: Apply the btn class to each of your button elements.');",
"assert($(\".btn-default\").length > 5, 'message: Apply the btn-default class to each of your button elements.');"
],
"challengeSeed": [
"",
"
jQuery Playground ",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
btn-default.",
"Aplica las clases btn y btn-default a cada uno de tus elementos button."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908852",
"title": "Create a Class to Target with jQuery Selectors",
"description": [
"Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery.",
"Give each of your button elements the class target."
],
"tests": [
"assert($(\".target\").length > 5, 'message: Apply the target class to each of your button elements.');"
],
"challengeSeed": [
"",
"
jQuery Playground ",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
button la clase target."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908853",
"title": "Add ID Attributes to Bootstrap Elements",
"description": [
"Recall that in addition to class attributes, you can give each of your elements an id attribute.",
"Each id must be unique to a specific element and used only once per page.",
"Let's give a unique id to each of our div elements of class well.",
"Remember that you can give an element an id like this:",
"<div class=\"well\" id=\"center-well\">",
"Give the well on the left the id of left-well. Give the well on the right the id of right-well."
],
"tests": [
"assert($(\".col-xs-6\").children(\"#left-well\") && $(\".col-xs-6\").children(\"#left-well\").length > 0, 'message: Give your left well the id of left-well.');",
"assert($(\".col-xs-6\").children(\"#right-well\") && $(\".col-xs-6\").children(\"#right-well\").length > 0, 'message: Give your right well the id of right-well.');"
],
"challengeSeed": [
"",
"
jQuery Playground ",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
",
"
id.",
"Cada id debe ser único para un elemento específico y ser usado solamente una vez por página.",
"Vamos a darle un id único a cada uno de nuestros elementos div que tienen la clase well.",
"Recuerda que puedes darle a un elemento un id como el siguiente:",
"<div class=\"well\" id=\"center-well\">",
"Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id de right-well."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908854",
"title": "Label Bootstrap Wells",
"description": [
"For the sake of clarity, let's label both of our wells with their ids.",
"Above your left-well, inside its col-xs-6 div element, add a h4 element with the text #left-well.",
"Above your right-well, inside its col-xs-6 div element, add a h4 element with the text #right-well."
],
"tests": [
"assert($(\".col-xs-6\").children(\"h4\") && $(\".col-xs-6\").children(\"h4\").length > 1, 'message: Add an h4 element to each of your <div class=\"col-xs-6\"> elements.');",
"assert(new RegExp(\"#left-well\",\"gi\").test($(\"h4\").text()), 'message: One h4 element should have the text #left-well.');",
"assert(new RegExp(\"#right-well\",\"gi\").test($(\"h4\").text()), 'message: One h4 element should have the text #right-well.');",
"assert(code.match(/<\\/h4>/g) && code.match(//g).length === code.match(/h4 elements have closing tags.');"
],
"challengeSeed": [
"",
"
jQuery Playground ",
"
",
"
",
"",
"
",
"
",
"
",
"
",
"",
"
",
"
",
"
",
"
",
"
div que tiene la clase col-xs-6, agrega un elemento h4 con el texto #left-well.",
"Ahora, sobre tu pozo de la derecha, dentro de su elemento div que tiene la clase col-xs-6, agrega un elemento h4 con el texto #right-well."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908855",
"title": "Give Each Element a Unique ID",
"description": [
"We will also want to be able to use jQuery to target each button by its unique id.",
"Give each of your buttons a unique id like, starting with target1 and ending with target6."
],
"tests": [
"assert($(\"#left-well\").children(\"#target1\") && $(\"#left-well\").children(\"#target1\").length > 0, 'message: One button element should have the id target1.');",
"assert($(\"#left-well\").children(\"#target2\") && $(\"#left-well\").children(\"#target2\").length > 0, 'message: One button element should have the id target2.');",
"assert($(\"#left-well\").children(\"#target3\") && $(\"#left-well\").children(\"#target3\").length > 0, 'message: One button element should have the id target3.');",
"assert($(\"#right-well\").children(\"#target4\") && $(\"#right-well\").children(\"#target4\").length > 0, 'message: One button element should have the id target4.');",
"assert($(\"#right-well\").children(\"#target5\") && $(\"#right-well\").children(\"#target5\").length > 0, 'message: One button element should have the id target5.');",
"assert($(\"#right-well\").children(\"#target6\") && $(\"#right-well\").children(\"#target6\").length > 0, 'message: One button element should have the id target6.');"
],
"challengeSeed": [
"",
"
jQuery Playground ",
"
",
"
",
"
#left-well ",
"
",
"
",
"
",
"
",
"
#right-well ",
"
",
"
",
"
",
"
",
"
target1 y terminando con target6."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908856",
"title": "Label Bootstrap Buttons",
"description": [
"Just like we labeled our wells, we want to label our buttons.",
"Give each of your button elements text that corresponds to their id."
],
"tests": [
"assert(new RegExp(\"#target1\",\"gi\").test($(\"#target1\").text()), 'message: Give your button element with the id target1 the text #target1.');",
"assert(new RegExp(\"#target2\",\"gi\").test($(\"#target2\").text()), 'message: Give your button element with the id target2 the text #target2.');",
"assert(new RegExp(\"#target3\",\"gi\").test($(\"#target3\").text()), 'message: Give your button element with the id target3 the text #target3.');",
"assert(new RegExp(\"#target4\",\"gi\").test($(\"#target4\").text()), 'message: Give your button element with the id target4 the text #target4.');",
"assert(new RegExp(\"#target5\",\"gi\").test($(\"#target5\").text()), 'message: Give your button element with the id target5 the text #target5.');",
"assert(new RegExp(\"#target6\",\"gi\").test($(\"#target6\").text()), 'message: Give your button element with the id target6 the text #target6.');"
],
"challengeSeed": [
"",
"
jQuery Playground ",
"
",
"
",
"
#left-well ",
"
",
"
",
"
",
"
",
"
#right-well ",
"
",
"
",
"
",
"
",
"
button un texto que corresponda con su id."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908857",
"title": "Use Comments to Clarify Code",
"description": [
"When we start using jQuery, we will modify HTML elements without needing to actually change them in HTML.",
"Let's make sure that everyone knows they shouldn't actually modify any of this code directly.",
"Remember that you can start a comment with <!-- and end a comment with -->",
"Add a comment at the top of your HTML that says Only change code above this line."
],
"tests": [
"assert(code.match(/^.*this line)).*this line.*-->/gi), 'message: Your comment should have the text Only change code above this line.');",
"assert(code.match(/-->.*\\n+.+/g), 'message: Be sure to close your comment with -->.');",
"assert(code.match(//g).length, 'message: You should have the same number of comment openers and closers.');"
],
"challengeSeed": [
"",
"
jQuery Playground ",
"
",
"
",
"
#left-well ",
"
",
" #target1 ",
" #target2 ",
" #target3 ",
"
",
"
",
"
",
"
#right-well ",
"
",
" #target4 ",
" #target5 ",
" #target6 ",
"
",
"
",
"
",
"
<!-- y terminarlo usando -->",
"Agrega un comentario al inicio de tu código HTML que diga No hacer cambios en el código debajo de esta línea."
],
"namePt": "",
"descriptionPt": []
}
]
}
![](\"https://bit.ly/fcc-relaxing-cat\")
",
"",
"![](\"http://bit.ly/fcc-relaxing-cat\")
",
"",
" ![](\"http://bit.ly/fcc-running-cats\")
",
"