div elements has a closing tag.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Crea un encabezado personalizado",
+ "description": [
+ "Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniendo el título y la relajante imagen del gato 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?"
+ ]
+ },
+ "fr": {
+ "title": "Créer un entête personalisé",
+ "description": [
+ "Notice how the image is now just the right size to fit along the text?",
+ "Nous allons réaliser un entête tout simple pour notre appli Cat Photo App en plaçant le titre et l'image de chat relaxante dans la même rangée.",
+ "Rappelez-vous, Bootstrap utilise un système de grille adaptative, qui rend facile le placement des éléments en rangées et la définition de la largeur relative de chaque élément. La plupart des classes de Bootstrap peuvent être appliquées à un élément
div.",
+ "Voici un diagramme du fonctionnement de la grille à 12 colonnes de Bootstrap:",
+ "
",
+ "Notez que dans cet exemple, on utilise la classe
col-md-*. Ici
md signifie medium, et
* est un nombre spécifiant le nombre de colonnes en largeur que l'élément devrait avoir.",
+ "Enveloppez votre première image et votre élément
h2 dans un seul élément
<div class=\"row\">. Mettez l'élément
h2 dans un
<div class=\"col-xs-8\"> et votre image dans un
<div class=\"col-xs-4\"> pour qu'ils soient sur la même ligne.",
+ "Voyez vous comme l'image est maintenant exactement ajustée à la bonne taille pour être à côté du texte?"
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "
",
+ "",
+ "",
+ "",
+ "
",
+ "
CatPhotoApp ",
+ "",
+ "
",
+ "",
+ "
",
+ "
",
+ "
",
+ " Like ",
+ "
",
+ "
",
+ " Info ",
+ "
",
+ "
",
+ " Delete ",
+ "
",
+ "
",
+ "
Things cats love:
",
+ "
",
+ " cat nip ",
+ " laser pointers ",
+ " lasagna ",
+ " ",
+ "
Top 3 things cats hate:
",
+ "
",
+ " flea treatment ",
+ " thunder ",
+ " other cats ",
+ " ",
+ "
",
+ "
"
+ ],
+ "head": "",
+ "tail": ""
+ }
+ }
+ },
+ {
+ "id": "bad87fee1348bd9aedd08845",
+ "title": "Add Font Awesome Icons to our Buttons",
+ "required": [
+ {
+ "link": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css",
+ "raw": true
+ }
+ ],
+ "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.",
+ "You can include Font Awesome in any app by adding the following code to the top of your HTML:",
+ "
<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\" integrity=\"sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+\" crossorigin=\"anonymous\">",
+ "In this case, we've already added it for you to this page behind the scenes.",
+ "The
i element was originally used to make other elements italic, but is now commonly used for icons. You can add the Font Awesome classes to the
i element to turn it into an icon, for example:",
+ "
<i class=\"fa fa-info-circle\"></i>",
+ "Note that the
span element is also acceptable for use with icons.",
+ "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; make sure to keep the text \"Like\" next to the icon."
+ ],
+ "tests": [
+ {
+ "text": "Add an
i element with the classes
fa and
fa-thumbs-up.",
+ "testString": "assert($(\"i\").is(\".fa.fa-thumbs-up\") || $(\"span\").is(\".fa.fa-thumbs-up\"), 'Add an
i element with the classes
fa and
fa-thumbs-up.');"
+ },
+ {
+ "text": "Your
fa-thumbs-up icon should be located within the Like button.",
+ "testString": "assert(($(\"i.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > i\").is(\".fa.fa-thumbs-up\")) || ($(\"span.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), 'Your
fa-thumbs-up icon should be located within the Like button.');"
+ },
+ {
+ "text": "Nest your
i element within your
button element.",
+ "testString": "assert($(\"button\").children(\"i\").length > 0 || $(\"button\").children(\"span\").length > 0, 'Nest your
i element within your
button element.');"
+ },
+ {
+ "text": "Make sure your icon element has a closing tag.",
+ "testString": "assert(code.match(/<\\/i>|<\\/span>/g), 'Make sure your icon element has a closing tag.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Agrega iconos de Font Awesome a los botones",
+ "description": [
+ "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.",
+ "Puedes añadir Font Awesome a cualquier aplicación sólo incluyendo y agregando el siguiente código al comienzo de tu HTML:",
+ "
<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\" integrity=\"sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+\" crossorigin=\"anonymous\"/>",
+ "En este caso, ya lo hemos agregado por tí a esta página tras bambalinas.",
+ "El elemento
i originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos. Le agregas clases de Font Awesome al elemento
i para convertirlo en un ícono, por ejemplo:",
+ "
<i class=\"fa fa-info-circle\"></i>",
+ "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."
+ ]
+ },
+ "fr": {
+ "title": "Ajouter des icônes Font Awesome à nos boutons",
+ "description": [
+ "Font Awesome est une librairie d'icônes très pratique. Ces icones sont des images vectorielles, stockées en format
.svg. Ces icônes sont traités exactemeent comme des polices. Vous pouvez choisir leur taille en pixel, et ils prendront la taille de police de leur élémment parent HTML.",
+ "Vous poyvez ajouter Font Awesome à n'importe quell application en ajoutant le code suivant en haut de votre HTML:",
+ "
<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\" integrity=\"sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+\" crossorigin=\"anonymous\">/>",
+ "Ici, nous l'avons déjà ajouté pour vous dans le back-office.",
+ "La balise
i eétait utilisé à la base pour mettre les autres éléments en italique, mais maintenant elle est utilisée pour les icones. Vous ajoutez des classes Font Awesome à un élément
i pour les les transformer en icones, par exemple:",
+ "
<i class=\"fa fa-info-circle\"></i>",
+ "Utilisez Font Awesome pour ajouter un icone
thumbs-up à votre bouton de like en lui donnant un élément
i ayant les classes
fa et
fa-thumbs-up."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "
",
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
CatPhotoApp ",
+ " ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ " Like ",
+ "
",
+ "
",
+ " Info ",
+ "
",
+ "
",
+ " Delete ",
+ "
",
+ "
",
+ "
Things cats love:
",
+ "
",
+ " cat nip ",
+ " laser pointers ",
+ " lasagna ",
+ " ",
+ "
Top 3 things cats hate:
",
+ "
",
+ " flea treatment ",
+ " thunder ",
+ " other cats ",
+ " ",
+ "
",
+ "
"
+ ],
+ "head": "",
+ "tail": ""
+ }
+ }
+ },
+ {
+ "id": "bad87fee1348bd9aedc08845",
+ "title": "Add Font Awesome Icons to all of our Buttons",
+ "required": [
+ {
+ "link": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css",
+ "raw": true
+ }
+ ],
+ "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 an
info-circle icon to your info button and a
trash icon to your delete button.",
+ "Note: The
span element is an acceptable alternative to the
i element for the directions below."
+ ],
+ "tests": [
+ {
+ "text": "You should add a
<i class=\"fa fa-info-circle\"></i> within your info button element.",
+ "testString": "assert($(\".btn-info > i\").is(\".fa.fa-info-circle\") || $(\".btn-info > span\").is(\".fa.fa-info-circle\"), 'You should add a
<i class=\"fa fa-info-circle\"></i> within your info button element.');"
+ },
+ {
+ "text": "You should add a
<i class=\"fa fa-trash\"></i> within your delete button element.",
+ "testString": "assert($(\".btn-danger > i\").is(\".fa.fa-trash\") || $(\".btn-danger > span\").is(\".fa.fa-trash\"), 'You should add a
<i class=\"fa fa-trash\"></i> within your delete button element.');"
+ },
+ {
+ "text": "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.",
+ "testString": "assert(code.match(/<\\/i>|<\\/span/g) && code.match(/<\\/i|<\\/span>/g).length > 2 && ($(\".btn-primary > i\").is(\".fa.fa-thumbs-up\") || $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), '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.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Agrega Font Awesome a todos los botones",
+ "description": [
+ "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."
+ ]
+ },
+ "fr": {
+ "title": "Ajoutez des icones Font Awesome à tous nos boutons",
+ "description": [
+ "Font Awesome est une librairie d'icônes très pratique. Ces icones sont des images vectorielles, stockées en format
.svg. Ces icônes sont traités exactemeent comme des polices. Vous pouvez choisir leur taille en pixel, et ils prendront la taille de police de leur élémment parent HTML.",
+ "Utilisez Font Awesome pour ajouter un icone
info-circle à votre bouton d'info et un icone
trash à votre bouton de suppression."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "
",
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
CatPhotoApp ",
+ " ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ " Info ",
+ "
",
+ "
",
+ " Delete ",
+ "
",
+ "
",
+ "
Things cats love:
",
+ "
",
+ " cat nip ",
+ " laser pointers ",
+ " lasagna ",
+ " ",
+ "
Top 3 things cats hate:
",
+ "
",
+ " flea treatment ",
+ " thunder ",
+ " other cats ",
+ " ",
+ "
",
+ "
"
+ ],
+ "head": "",
+ "tail": ""
+ }
+ }
+ },
+ {
+ "id": "bad87fee1348bd9aedb08845",
+ "title": "Responsively Style Radio Buttons",
+ "required": [
+ {
+ "link": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css",
+ "raw": true
+ }
+ ],
+ "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 both your radio buttons within a
<div class=\"row\"> element. Then nest each of them within a
<div class=\"col-xs-6\"> element.",
+ "
Note: As a reminder, radio buttons are
input elements of type
radio."
+ ],
+ "tests": [
+ {
+ "text": "Nest all of your radio buttons inside one
div with the class
row.",
+ "testString": "assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, 'Nest all of your radio buttons inside one
div with the class
row.');"
+ },
+ {
+ "text": "Nest each of your radio buttons inside its own
div with the class
col-xs-6.",
+ "testString": "assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'Nest each of your radio buttons inside its own
div with the class
col-xs-6.');"
+ },
+ {
+ "text": "Make sure each of your
div elements has a closing tag.",
+ "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Crea botones de opción con estilo adaptativo",
+ "description": [
+ "¡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\">."
+ ]
+ },
+ "fr": {
+ "title": "Donnez un style responsive à vos boutons radio",
+ "description": [
+ "Vous pouvez utiliser la classe Bootstrap
col-xs-* sur des éléments
form. Comme ça, nos boutons radio serons disposés régulierement dans la page, quelle que soit la largeur de l'écran.",
+ "Nichez tous vous boutons radio dans un élément
<div class=\"row\">. Ensuite, nichezchacun d'entre eux dans un élément
<div class=\"col-xs-6\">"
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "
",
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
CatPhotoApp ",
+ " ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
Things cats love:
",
+ "
",
+ " cat nip ",
+ " laser pointers ",
+ " lasagna ",
+ " ",
+ "
Top 3 things cats hate:
",
+ "
",
+ " flea treatment ",
+ " thunder ",
+ " other cats ",
+ " ",
+ "
",
+ "
"
+ ],
+ "head": "",
+ "tail": ""
+ }
+ }
+ },
+ {
+ "id": "bad87fee1348bd9aeda08845",
+ "title": "Responsively Style Checkboxes",
+ "required": [
+ {
+ "link": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css",
+ "raw": true
+ }
+ ],
+ "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 three of your checkboxes in a
<div class=\"row\"> element. Then nest each of them in a
<div class=\"col-xs-4\"> element."
+ ],
+ "tests": [
+ {
+ "text": "Nest all of your checkboxes inside one
div with the class
row.",
+ "testString": "assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, 'Nest all of your checkboxes inside one
div with the class
row.');"
+ },
+ {
+ "text": "Nest each of your checkboxes inside its own
div with the class
col-xs-4.",
+ "testString": "assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'Nest each of your checkboxes inside its own
div with the class
col-xs-4.');"
+ },
+ {
+ "text": "Make sure each of your
div elements has a closing tag.",
+ "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Crea casillas de selección con estilo adaptativo",
+ "description": [
+ "¡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\">."
+ ]
+ },
+ "fr": {
+ "title": "Donnez un style responsive à vos checkbox (cases de séléction)",
+ "description": [
+ "Vous pouvez aussi utiliser la classe Bootstrap
col-xs-* sur des éléments
form! Comme ça, nos boutons radio serons disposés régulierement dans la page, quelle que soit la largeur de l'écran.",
+ "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.",
+ "Nichez toustes vos checkbox dans un élément
<div class=\"row\">. Ensuite nichez chacun d'entre eux dans un élément
<div class=\"col-xs-4\">"
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "
",
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
CatPhotoApp ",
+ " ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
Things cats love:
",
+ "
",
+ " cat nip ",
+ " laser pointers ",
+ " lasagna ",
+ " ",
+ "
Top 3 things cats hate:
",
+ "
",
+ " flea treatment ",
+ " thunder ",
+ " other cats ",
+ " ",
+ "
",
+ "
"
+ ],
+ "head": "",
+ "tail": ""
+ }
+ }
+ },
+ {
+ "id": "bad87fee1348bd9aed908845",
+ "title": "Style Text Inputs as Form Controls",
+ "required": [
+ {
+ "link": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css",
+ "raw": true
+ }
+ ],
+ "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.",
+ "All textual
<input>,
<textarea>, and
<select> elements with the class
.form-control have a width of 100%."
+ ],
+ "tests": [
+ {
+ "text": "Give the submit button in your form the classes
btn btn-primary.",
+ "testString": "assert($(\"button[type=\\\"submit\\\"]\").hasClass(\"btn btn-primary\"), 'Give the submit button in your form the classes
btn btn-primary.');"
+ },
+ {
+ "text": "Add a
<i class=\"fa fa-paper-plane\"></i> within your submit
button element.",
+ "testString": "assert($(\"button[type=\\\"submit\\\"]:has(i.fa.fa-paper-plane)\").length > 0, 'Add a
<i class=\"fa fa-paper-plane\"></i> within your submit
button element.');"
+ },
+ {
+ "text": "Give the text
input in your form the class
form-control.",
+ "testString": "assert($(\"input[type=\\\"text\\\"]\").hasClass(\"form-control\"), 'Give the text
input in your form the class
form-control.');"
+ },
+ {
+ "text": "Make sure each of your
i elements has a closing tag.",
+ "testString": "assert(code.match(/<\\/i>/g) && code.match(/<\\/i/g).length > 3, 'Make sure each of your
i elements has a closing tag.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Estiliza cajas de texto como controles de formulario",
+ "description": [
+ "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."
+ ]
+ },
+ "fr": {
+ "title": "Donnez un style similaire au contrôles de formulaires à des zones de texte",
+ "description": [
+ "Vous pouvez ajouter l'icone Font Awesome
fa-paper-plane en ajoutant
<i class=\"fa fa-paper-plane\"></i> à l'intérieur de votre
button de soumission du formulaire.",
+ "Donnez aux entrées texte de votre formulaire une classe
form-control. Donnez à votre bouton de soumission de formulaire les classes
btn btn-primary. Donnez lui aussi un icone Font Awesome
fa-paper-plane."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "
",
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
CatPhotoApp ",
+ " ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
Things cats love:
",
+ "
",
+ " cat nip ",
+ " laser pointers ",
+ " lasagna ",
+ " ",
+ "
Top 3 things cats hate:
",
+ "
",
+ " flea treatment ",
+ " thunder ",
+ " other cats ",
+ " ",
+ "
",
+ "
"
+ ],
+ "head": "",
+ "tail": ""
+ }
+ }
+ },
+ {
+ "id": "bad87fee1348bd9aec908845",
+ "title": "Line up Form Elements Responsively with Bootstrap",
+ "required": [
+ {
+ "link": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css",
+ "raw": true
+ }
+ ],
+ "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": [
+ {
+ "text": "Nest your form submission button and text input in a div with class
row.",
+ "testString": "assert($(\"div.row:has(input[type=\\\"text\\\"])\").length > 0 && $(\"div.row:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button and text input in a div with class
row.');"
+ },
+ {
+ "text": "Nest your form text input in a div with the class
col-xs-7.",
+ "testString": "assert($(\"div.col-xs-7:has(input[type=\\\"text\\\"])\").length > 0, 'Nest your form text input in a div with the class
col-xs-7.');"
+ },
+ {
+ "text": "Nest your form submission button in a div with the class
col-xs-5.",
+ "testString": "assert($(\"div.col-xs-5:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button in a div with the class
col-xs-5.');"
+ },
+ {
+ "text": "Make sure each of your
div elements has a closing tag.",
+ "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Alínea elementos de formulario de forma adaptativa con Bootstrap",
+ "description": [
+ "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!"
+ ]
+ },
+ "fr": {
+ "title": "Aligner les éléments de formulaire de façon responsive avec Bootstrap",
+ "description": [
+ "Maintenant mettons sur la même ligne l'élément
input et le
button de soumission du formulaire. Nous procéderons de la même façon que précedemment: en utilisant un élément
div avec la classe
row, et un un autre div à l'intérieur qui aura la classe
col-xs-*.",
+ "Nichez à la fois l'
input texte de votre formulaire et le
button de soumission de formulaire à l'intérieur d'un
div avec la classe
row. Nichez l'
input texte du formulaire dans un div ayant la classe
col-xs-7. Nichez votre
button de soumission de formulaire dans un div ayant la classe
col-xs-5.",
+ "C'est le dernier challenge qui concerne notre application de photos de chats. Nous espérons que vous avez aimé apprendre Font Awesome, Bootstrap et du design adaptatif!"
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "
",
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
CatPhotoApp ",
+ " ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
Things cats love:
",
+ "
",
+ " cat nip ",
+ " laser pointers ",
+ " lasagna ",
+ " ",
+ "
Top 3 things cats hate:
",
+ "
",
+ " flea treatment ",
+ " thunder ",
+ " other cats ",
+ " ",
+ "
",
+ "
"
+ ],
+ "head": "",
+ "tail": ""
+ }
+ }
+ },
+ {
+ "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": [
+ {
+ "text": "Add a
h3 element to your page.",
+ "testString": "assert($(\"h3\") && $(\"h3\").length > 0, 'Add a
h3 element to your page.');"
+ },
+ {
+ "text": "Make sure your
h3 element has a closing tag.",
+ "testString": "assert(code.match(/<\\/h3>/g) && code.match(/
/g).length === code.match(/h3 element has a closing tag.');"
+ },
+ {
+ "text": "Your h3 element should be colored by applying the class text-primary",
+ "testString": "assert($(\"h3\").hasClass(\"text-primary\"), 'Your h3 element should be colored by applying the class text-primary');"
+ },
+ {
+ "text": "Your h3 element should be centered by applying the class text-center",
+ "testString": "assert($(\"h3\").hasClass(\"text-center\"), 'Your h3 element should be centered by applying the class text-center');"
+ },
+ {
+ "text": "Your h3 element should have the text jQuery Playground.",
+ "testString": "assert.isTrue((/jquery(\\s)+playground/gi).test($(\"h3\").text()), 'Your h3 element should have the text jQuery Playground.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Crea un encabezado con Bootstrap",
+ "description": [
+ "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."
+ ]
+ },
+ "fr": {
+ "title": "Créer un entête Bootstrap",
+ "description": [
+ "Maintenons, créons queqlque chose à partir de zéro pour pratiquer nos connaissances acquises sur HTML, CSS et Bootstrap.",
+ "Nous allons construire un terrain de jeu pour jQuery, que nous allons bientôt utiliser dans les challenges jQuery.",
+ "Pour commencer, créez un élément h3, contenant le texte jQuery Playground.",
+ "Colorez notre élément h3 avec la classe Bootstrap text-primary, et centrez le en utilisant la classe Bootstrap text-center"
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "",
+ "",
+ ""
+ ],
+ "head": "",
+ "tail": ""
+ }
+ }
+ },
+ {
+ "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": [
+ {
+ "text": "Your div element should have the class container-fluid.",
+ "testString": "assert($(\"div\").hasClass(\"container-fluid\"), 'Your div element should have the class container-fluid.');"
+ },
+ {
+ "text": "Make sure each of your div elements has a closing tag.",
+ "testString": "assert(code.match(/<\\/div>/g) && code.match(//g).length === code.match(/
div elements has a closing tag.');"
+ },
+ {
+ "text": "Nest your
h3 element inside a
div element.",
+ "testString": "assert($(\"div\").children(\"h3\").length >0, 'Nest your
h3 element inside a
div element.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Aloja la página dentro de un elemento Div contenedor fluido de Bootstrap",
+ "description": [
+ "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."
+ ]
+ },
+ "fr": {
+ "title": "Loger notre page dans un conteneur Bootstrap Fluid Div",
+ "description": [
+ "Maintenant, assurons nous que tout le contenu de la page est mobile-responsive (adaptatif au téléphones mobiles).",
+ "Nichons notre element
h3 à l'intérieur d'un élément
div ayant la classe
container-fluid."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "
jQuery Playground ",
+ "",
+ ""
+ ],
+ "head": "",
+ "tail": ""
+ }
+ }
+ },
+ {
+ "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": [
+ {
+ "text": "Add a
div element below your
h3 element.",
+ "testString": "assert(($(\"div\").length > 1) && ($(\"div.row h3.text-primary\").length == 0) && ($(\"div.row + h3.text-primary\").length == 0) && ($(\"h3.text-primary + div.row\").length > 0), 'Add a
div element below your
h3 element.');"
+ },
+ {
+ "text": "Your
div element should have the class
row",
+ "testString": "assert($(\"div\").hasClass(\"row\"), 'Your
div element should have the class
row');"
+ },
+ {
+ "text": "Your
row div should be nested inside the
container-fluid div",
+ "testString": "assert($(\"div.container-fluid div.row\").length > 0, 'Your
row div should be nested inside the
container-fluid div');"
+ },
+ {
+ "text": "Make sure your
div element has a closing tag.",
+ "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div element has a closing tag.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Crea una fila en Bootstrap",
+ "description": [
+ "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."
+ ]
+ },
+ "fr": {
+ "title": "Créer une rangée (row) Bootstrap",
+ "description": [
+ "Maintenant nous allons créer une rangée (row) Bootstrap pour nos éléments inline.",
+ "Créez un élément
div en dessous de la balise
h3, avec une classe
row."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "
",
+ "
jQuery Playground ",
+ "",
+ "",
+ ""
+ ],
+ "head": "",
+ "tail": ""
+ }
+ }
+ },
+ {
+ "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": [
+ {
+ "text": "Nest two
div class=\"col-xs-6\" elements within your
div class=\"row\" element.",
+ "testString": "assert($(\"div.row > div.col-xs-6\").length > 1, 'Nest two
div class=\"col-xs-6\" elements within your
div class=\"row\" element.');"
+ },
+ {
+ "text": "Make sure all your
div elements have closing tags.",
+ "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements have closing tags.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Parte tu fila en Bootstrap",
+ "description": [
+ "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."
+ ]
+ },
+ "fr": {
+ "title": "Séparer une rangée Bootstrap",
+ "description": [
+ "Maintenant que nous avons une rangée Bootstrap, séparons la en deux colonnes pour placer nos éléments.",
+ "Créez deux éléments
divdans votre rangée, chacun ayant la classe
col-xs-6."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "
",
+ "
jQuery Playground ",
+ "
",
+ "",
+ "",
+ "
",
+ "
"
+ ],
+ "head": "",
+ "tail": ""
+ }
+ }
+ },
+ {
+ "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": [
+ {
+ "text": "Add a
div element with the class
well inside each of your
div elements with the class
\"col-xs-6\"",
+ "testString": "assert($(\"div.col-xs-6\").not(\":has(>div.well)\").length < 1, 'Add a
div element with the class
well inside each of your
div elements with the class
\"col-xs-6\"');"
+ },
+ {
+ "text": "Nest both of your
div elements with the class
\"col-xs-6\" within your
div element with the class
\"row\".",
+ "testString": "assert($(\"div.row > div.col-xs-6\").length > 1, 'Nest both of your
div elements with the class
\"col-xs-6\" within your
div element with the class
\"row\".');"
+ },
+ {
+ "text": "Make sure all your
div elements have closing tags.",
+ "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements have closing tags.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Crea pozos en Bootstrap",
+ "description": [
+ "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."
+ ]
+ },
+ "fr": {
+ "title": "Créez un \"puit\" (well) Bootstrap",
+ "description": [
+ "Bootstrap possède une classe appelée
well qui peux créer une certaine profondeur pour vos colonnes.",
+ "Nichez un élément
div avec la classe
well dans chacun de vos éléments
col-xs-6 div."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "
",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "",
+ "
",
+ "
",
+ "",
+ "
",
+ "
",
+ "
"
+ ],
+ "head": "",
+ "tail": ""
+ }
+ }
+ },
+ {
+ "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": [
+ {
+ "text": "Nest three
button elements within each of your
div elements with class
well.",
+ "testString": "assert($(\"div.well:eq(0)\").children(\"button\").length === 3 && $(\"div.well:eq(1)\").children(\"button\").length === 3, 'Nest three
button elements within each of your
div elements with class
well.');"
+ },
+ {
+ "text": "You should have a total of 6
button elements.",
+ "testString": "assert($(\"button\") && $(\"button\").length > 5, 'You should have a total of 6
button elements.');"
+ },
+ {
+ "text": "Make sure all your
button elements have closing tags.",
+ "testString": "assert(code.match(/<\\/button>/g) && code.match(/
/g).length === code.match(/button elements have closing tags.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Agrega elementos dentro de los pozos de Bootstrap",
+ "description": [
+ "Ahora estamos a una profundidad de varios elementos 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."
+ ]
+ },
+ "fr": {
+ "title": "Ajouter des éléments dans un puit Bootstrap",
+ "description": [
+ "Nous avons maintenant plusieurs niveaux de profondeur d'éléments div dans chaque colonne de notre rangée. Ceci est suffisant pour le moment. Maintenant nous pouvons ajouter nos éléments button.",
+ "Nichez trois éléments button dans chaque élément well div."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "
",
+ "",
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
",
+ "",
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
btn-default.",
+ "Apply both the btn and btn-default classes to each of your button elements."
+ ],
+ "tests": [
+ {
+ "text": "Apply the btn class to each of your button elements.",
+ "testString": "assert($(\".btn\").length > 5, 'Apply the btn class to each of your button elements.');"
+ },
+ {
+ "text": "Apply the btn-default class to each of your button elements.",
+ "testString": "assert($(\".btn-default\").length > 5, 'Apply the btn-default class to each of your button elements.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Aplica el estilo de botón predeterminado de Bootstrap",
+ "description": [
+ "Bootstrap tiene otra clase de botón llamada btn-default.",
+ "Aplica las clases btn y btn-default a cada uno de tus elementos button."
+ ]
+ },
+ "fr": {
+ "title": "Appliquer le style de bouton par défaut de Bootstrap",
+ "description": [
+ "Bootstrap possède une autre classe de bouton appelée btn-default.",
+ "Appliquez les deux classes btn et btn-default à chacun de vos éléments button"
+ ]
+ }
+ },
+ "guideUrl": "https://guide.freecodecamp.org/certificates/apply-the-default-bootstrap-button-style",
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
button elements the class target."
+ ],
+ "tests": [
+ {
+ "text": "Apply the target class to each of your button elements.",
+ "testString": "assert($(\".target\").length > 5, 'Apply the target class to each of your button elements.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Crea una clase para usar con selectores de jQuery",
+ "description": [
+ "No todas las clases necesitan tener un código CSS correspondiente. A veces creamos clases sólo con el propósito de seleccionar esos elementos más fácilmente usando jQuery.",
+ "Dale a cada uno de tus elementos button la clase target."
+ ]
+ },
+ "fr": {
+ "title": "Créez une classe à cibler avec les sélécteurs jQuery",
+ "description": [
+ "Toutes les classes ne nécéssitent pas d'avoir un code CSS qui leur correspondent. Parfois ous créons des classes dans le seul but de pouvoir sélectionner ces éléments plus facilement en utilisant jQuery.",
+ "Donnez à chacun de vos éléments button la classe target."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
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": [
+ {
+ "text": "Give your left well the id of left-well.",
+ "testString": "assert($(\".col-xs-6\").children(\"#left-well\") && $(\".col-xs-6\").children(\"#left-well\").length > 0, 'Give your left well the id of left-well.');"
+ },
+ {
+ "text": "Give your right well the id of right-well.",
+ "testString": "assert($(\".col-xs-6\").children(\"#right-well\") && $(\".col-xs-6\").children(\"#right-well\").length > 0, 'Give your right well the id of right-well.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Asígnales atributos de identificación (id) a tus elementos de Bootstrap",
+ "description": [
+ "Recuerda que, además de los atributos de clase, también puedes darle a cada uno de tus elementos un atributo 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 right-well."
+ ]
+ },
+ "fr": {
+ "title": "Ajouter des attributs ID à vos éléments Bootstrap",
+ "description": [
+ "Rappelez vous qu'en plus des attributs classes, vous pouvez donnez à chacun de vos éléments un attribut id.",
+ "Chaque id doit être unique pour un élément donné et utilisé une seule fois par page.",
+ "Donnons un id unique à chacun de nos éléments div de classe well.",
+ "Rappelez vous que vous pouvez donner un id à un élément ainsi :",
+ "<div class=\"well\" id=\"center-well\">",
+ "Donnez au puit sur la gauche un id de left-well. Donnez au puit sur la droite un id de right-well."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
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": [
+ {
+ "text": "Add an h4 element to each of your <div class=\"col-xs-6\"> elements.",
+ "testString": "assert($(\".col-xs-6\").children(\"h4\") && $(\".col-xs-6\").children(\"h4\").length > 1, 'Add an h4 element to each of your <div class=\"col-xs-6\"> elements.');"
+ },
+ {
+ "text": "One h4 element should have the text #left-well.",
+ "testString": "assert(new RegExp(\"#left-well\",\"gi\").test($(\"h4\").text()), 'One h4 element should have the text #left-well.');"
+ },
+ {
+ "text": "One h4 element should have the text #right-well.",
+ "testString": "assert(new RegExp(\"#right-well\",\"gi\").test($(\"h4\").text()), 'One h4 element should have the text #right-well.');"
+ },
+ {
+ "text": "Make sure all your h4 elements have closing tags.",
+ "testString": "assert(code.match(/<\\/h4>/g) && code.match(//g).length === code.match(/h4 elements have closing tags.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Etiqueta tus pozos de Bootstrap",
+ "description": [
+ "Para que todo esté más claro, vamos a ponerle a todos nuestros pozos una etiqueta que sea igual a su id.",
+ "Sobre tu pozo de la izquierda, dentro de su elemento 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."
+ ]
+ },
+ "fr": {
+ "title": "Donner un nom aux puits Bootstrap",
+ "description": [
+ "Au nom de la clarté, donnons un nom à nos deux puits en accord avec leur ids",
+ "Au dessus de votre puit de gauche, à l'intérieur de ses éléments col-xs-6 div, ajoutez un élément h4 ayant le texte #left-well.",
+ "Au dessus de votre puit de droite, à l'intérieur de ses éléments col-xs-6 div, ajoutez un élément h4 ayant le texte #right-well."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "",
+ "
",
+ "
",
+ "
",
+ "
",
+ "",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
target1 and ending with target6.",
+ "Make sure that target1 to target3 are in #left-well, and target4 to target6 are in #right-well."
+ ],
+ "tests": [
+ {
+ "text": "One button element should have the id target1.",
+ "testString": "assert($(\"#left-well\").children(\"#target1\") && $(\"#left-well\").children(\"#target1\").length > 0, 'One button element should have the id target1.');"
+ },
+ {
+ "text": "One button element should have the id target2.",
+ "testString": "assert($(\"#left-well\").children(\"#target2\") && $(\"#left-well\").children(\"#target2\").length > 0, 'One button element should have the id target2.');"
+ },
+ {
+ "text": "One button element should have the id target3.",
+ "testString": "assert($(\"#left-well\").children(\"#target3\") && $(\"#left-well\").children(\"#target3\").length > 0, 'One button element should have the id target3.');"
+ },
+ {
+ "text": "One button element should have the id target4.",
+ "testString": "assert($(\"#right-well\").children(\"#target4\") && $(\"#right-well\").children(\"#target4\").length > 0, 'One button element should have the id target4.');"
+ },
+ {
+ "text": "One button element should have the id target5.",
+ "testString": "assert($(\"#right-well\").children(\"#target5\") && $(\"#right-well\").children(\"#target5\").length > 0, 'One button element should have the id target5.');"
+ },
+ {
+ "text": "One button element should have the id target6.",
+ "testString": "assert($(\"#right-well\").children(\"#target6\") && $(\"#right-well\").children(\"#target6\").length > 0, 'One button element should have the id target6.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Dale a cada elemento un ID único",
+ "description": [
+ "También quisiéramos referirnos a cada botón por su id utilizando jQuery.",
+ "Dale a cada uno de tus botones un id único, comenzando con target1 y terminando con target6.",
+ "Asegúrate que target1 a target3 queden en #left-well, mientras que target4 a target6 queden en #right-well."
+ ]
+ },
+ "fr": {
+ "title": "Donner à chaque élément un ID unique",
+ "description": [
+ "Nous désirerons aussi pouvoir être capable d'utiliser jQuery pour cibler chaque bouton suivant son id unique.",
+ "Donnez à chaque bouton un id unique, commençant par target1 et finissant par target6.",
+ "Assurez vous que target1 à target3 sont dans le #left-well, et que target4 à target6 sont dans le #right-well."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "
#left-well ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
#right-well ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
button elements text that corresponds to its id's selector."
+ ],
+ "tests": [
+ {
+ "text": "Give your button element with the id target1 the text #target1.",
+ "testString": "assert(new RegExp(\"#target1\",\"gi\").test($(\"#target1\").text()), 'Give your button element with the id target1 the text #target1.');"
+ },
+ {
+ "text": "Give your button element with the id target2 the text #target2.",
+ "testString": "assert(new RegExp(\"#target2\",\"gi\").test($(\"#target2\").text()), 'Give your button element with the id target2 the text #target2.');"
+ },
+ {
+ "text": "Give your button element with the id target3 the text #target3.",
+ "testString": "assert(new RegExp(\"#target3\",\"gi\").test($(\"#target3\").text()), 'Give your button element with the id target3 the text #target3.');"
+ },
+ {
+ "text": "Give your button element with the id target4 the text #target4.",
+ "testString": "assert(new RegExp(\"#target4\",\"gi\").test($(\"#target4\").text()), 'Give your button element with the id target4 the text #target4.');"
+ },
+ {
+ "text": "Give your button element with the id target5 the text #target5.",
+ "testString": "assert(new RegExp(\"#target5\",\"gi\").test($(\"#target5\").text()), 'Give your button element with the id target5 the text #target5.');"
+ },
+ {
+ "text": "Give your button element with the id target6 the text #target6.",
+ "testString": "assert(new RegExp(\"#target6\",\"gi\").test($(\"#target6\").text()), 'Give your button element with the id target6 the text #target6.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Etiqueta los botones con Bootstrap",
+ "description": [
+ "De la misma forma en que etiquetamos nuestros pozos, ahora vamos a etiquetar nuestros botones.",
+ "Dale a cada uno de tus elementos button un texto que corresponda con su id."
+ ]
+ },
+ "fr": {
+ "title": "Donnez un nom à vos boutons Bootstrap",
+ "description": [
+ "De la même façon que nous avons donné un nom à nos puits, nous voulons nommer nos boutons.",
+ "Donnez à chaque élément button un texte qui corresponde à son id."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "
#left-well ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
#right-well ",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
<!-- and end a comment with -->",
+ "Add a comment at the top of your HTML that says Only change code above this line."
+ ],
+ "tests": [
+ {
+ "text": "Start a comment with <!-- at the top of your HTML.",
+ "testString": "assert(code.match(/^\\s*.*this line))\\s*.*this line.*\\s*-->/gi), 'Your comment should have the text Only change code above this line.');"
+ },
+ {
+ "text": "Be sure to close your comment with -->.",
+ "testString": "assert(code.match(/-->.*\\n+.+/g), 'Be sure to close your comment with -->.');"
+ },
+ {
+ "text": "You should have the same number of comment openers and closers.",
+ "testString": "assert(code.match(//g).length, 'You should have the same number of comment openers and closers.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "es": {
+ "title": "Usa elementos para explicar tu código",
+ "description": [
+ "Cuando comencemos a usar jQuery, modificarmemos los elementos HTML sin necesidad de hacer cambios reales en el código HTML.",
+ "Vamos a asegurar que cualquier persona sepa que no debe modificar nada en este código directamente.",
+ "Recuerda que puedes iniciar un comentario usando <!-- y terminarlo usando -->",
+ "Agrega un comentario al inicio de tu código HTML que diga Only change code above this line."
+ ]
+ },
+ "fr": {
+ "title": "Utiliser des commentaires pour clarifier son code",
+ "description": [
+ "Quand nous commencerons à utiliser jQuery, nous modifierons les éléments HTML sans avoir besoin de les changer directement dans le fichier HTML.",
+ "Assurons nous que tout le monde sache qu'ils ne devraient pas modifier quoi que ce soit dans le code HTML.",
+ "Rappelez vous que vous pouvez commencer un commentaire avec <!-- et le finir avec -->",
+ "Ajoutez un commentaire en haut de l'HTML qui annonce Only change code above this line. (Changez seulement le code au dessus de cette ligne.)"
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "
#left-well ",
+ "
",
+ " #target1 ",
+ " #target2 ",
+ " #target3 ",
+ "
",
+ "
",
+ "
",
+ "
#right-well ",
+ "
",
+ " #target4 ",
+ " #target5 ",
+ " #target6 ",
+ "
",
+ "
",
+ "
",
+ "
working example . Try not to look at its code.",
+ "You can build your project by forking this CodePen pen . Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js",
+ "Once you're done, submit the URL to your working project with all its tests passing.",
+ "Remember to use the Read-Search-Ask method if you get stuck."
+ ],
+ "tests": [],
+ "type": "zipline",
+ "isRequired": true,
+ "challengeType": 3,
+ "translations": {
+ "es": {
+ "title": "Crea una máquina de frases aleatorias"
+ },
+ "ru": {
+ "title": "Создайте генератор случайных цитат"
+ }
+ }
+ },
+ {
+ "id": "bd7157d8c242eddfaeb5bd13",
+ "title": "Build a Markdown Previewer",
+ "description": [
+ "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+ "Here's a working example . Try not to look at its code.",
+ "You can build your project by forking this CodePen pen . Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js",
+ "Once you're done, submit the URL to your working project with all its tests passing.",
+ "Remember to use the Read-Search-Ask method if you get stuck."
+ ],
+ "releasedOn": "January 10, 2017",
+ "tests": [],
+ "type": "zipline",
+ "isRequired": true,
+ "challengeType": 3,
+ "translations": {
+ "es": {
+ "title": "Crea una caja de recetas"
+ },
+ "ru": {
+ "title": "Создайте хранилище рецептов"
+ }
+ }
+ },
+ {
+ "id": "587d7dbc367417b2b2512bae",
+ "title": "Build a Drum Machine",
+ "description": [
+ "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+ "Here's a working example . Try not to look at its code.",
+ "You can build your project by forking this CodePen pen . Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js",
+ "Once you're done, submit the URL to your working project with all its tests passing.",
+ "Remember to use the Read-Search-Ask method if you get stuck."
+ ],
+ "releasedOn": "February 17, 2017",
+ "tests": [],
+ "type": "zipline",
+ "isRequired": true,
+ "challengeType": 3,
+ "translations": {
+ "es": {
+ "title": "Crea un Juego de la vida"
+ },
+ "ru": {
+ "title": "Создайте игру \"Жизнь\""
+ }
+ }
+ },
+ {
+ "id": "bd7158d8c442eddfaeb5bd17",
+ "title": "Build a JavaScript Calculator",
+ "description": [
+ "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+ "Here's a working example . Try not to look at its code.",
+ "Note On Calculator Logic: It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic . Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug.",
+ "EXAMPLE: 3 + 5 x 6 - 2 / 4 =Immediate Execution Logic: 11.5Formula/Expression Logic: 32.5this CodePen pen . Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js",
+ "Once you're done, submit the URL to your working project with all its tests passing.",
+ "Remember to use the Read-Search-Ask method if you get stuck."
+ ],
+ "tests": [],
+ "type": "zipline",
+ "challengeType": 3,
+ "isRequired": true,
+ "translations": {
+ "es": {
+ "title": "Crea una calculadora JavaScript"
+ }
+ }
+ },
+ {
+ "id": "bd7158d8c442eddfaeb5bd0f",
+ "title": "Build a Pomodoro Clock",
+ "description": [
+ "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+ "Here's a working example . Try not to look at its code.",
+ "You can build your project by forking this CodePen pen . Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js",
+ "Once you're done, submit the URL to your working project with all its tests passing.",
+ "Remember to use the Read-Search-Ask method if you get stuck."
+ ],
+ "tests": [],
+ "type": "zipline",
+ "isRequired": true,
+ "challengeType": 3,
+ "translations": {
+ "es": {
+ "title": "Crea un reloj pomodoro"
+ },
+ "ru": {
+ "title": "Создайте таймер Pomodoro"
+ }
+ }
+ }
+ ],
+ "fileName": "03-front-end-libraries/front-end-libraries-projects.json",
+ "superBlock": "front-end-libraries",
+ "superOrder": 3
+}
\ No newline at end of file
diff --git a/packages/learn/seed/challenges/03-front-end-libraries/jquery.json b/packages/learn/seed/challenges/03-front-end-libraries/jquery.json
new file mode 100644
index 0000000000..eca5d56a82
--- /dev/null
+++ b/packages/learn/seed/challenges/03-front-end-libraries/jquery.json
@@ -0,0 +1,1865 @@
+{
+ "name": "jQuery",
+ "order": 3,
+ "time": "3 hours",
+ "helpRoom": "Help",
+ "required": [
+ {
+ "link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
+ }
+ ],
+ "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.",
+ "Before we can start using jQuery, we need to add some things to our HTML.",
+ "First, add a script element at the top of your page. Be sure to close it on the following line.",
+ "Your browser will run any JavaScript inside a script element, including jQuery.",
+ "Inside your script element, add this code: $(document).ready(function() { to your script. Then close it on the following line (still inside your script element) with: });",
+ "We'll learn more about functions later. The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.",
+ "This is important because without your document ready function, your code may run before your HTML is rendered, which would cause bugs."
+ ],
+ "tests": [
+ {
+ "text": "Create a script element making sure it is valid and has a closing tag.",
+ "testString": "assert(code.match(/<\\/script\\s*>/g) && code.match(//g) && code.match(/<\\/script\\s*>/g).length === code.match(//g).length, 'Create a script element making sure it is valid and has a closing tag.');"
+ },
+ {
+ "text": "You should add $(document).ready(function() { to the beginning of your script element.",
+ "testString": "assert(code.match(/\\$\\s*?\\(\\s*?document\\s*?\\)\\.ready\\s*?\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'You should add $(document).ready(function() { to the beginning of your script element.');"
+ },
+ {
+ "text": "Close your $(document).ready(function() { function with });",
+ "testString": "assert(code.match(/\\n*?\\s*?\\}\\s*?\\);/g), 'Close your $(document).ready(function() { function with });');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "de": {
+ "title": "Lerne, wie Script Tags und Document Ready funktionieren",
+ "description": [
+ "Jetzt sind wir bereit jQuery zu lernen, das populärste JavaScript-Tool aller Zeiten. Mach dir über JavaScript keine Sorgen - über dieses werden wir bald sprechen.",
+ "Bevor wir jQuery nutzen können, müssen wir erst ein paar Dinge zu unserem HTML hinzufügen.",
+ "Füge als erstes ein script Element am Beginn deiner Seite ein. Vergewissere dich, dass du das Element in der nächsten Zeile geschlossen hast.",
+ "Dein Browser wird jegliches JavaScript, jQuery eingeschlossen, innerhalb eines script Elements ausführen.",
+ "Füge innerhalb deines script Elements folgenden Code hinzu: $(document).ready(function() {. Schließe ihn danach in der nächsten Zeile (noch immer innerhalb deines script Elements) mit: });",
+ "Wir werden später noch mehr über Funktionen lernen. Wichtig zu wissen ist, dass der Code innerhalb der Funktion ausgeführt wird, sobald der Browser die Seite geladen hat.",
+ "Das ist wichtig, denn ohne deine Document Ready Funktion könnte dein Code ausgeführt werden, bevor das HTML gerendert wurde - was zu Fehlern führen kann."
+ ]
+ },
+ "es": {
+ "title": "Aprende cómo funcionan las etiquetas de programa y la función de documento listo.",
+ "description": [
+ "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 script 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 script, incluyendo jQuery.",
+ "Dentro de tu elemento script, agrega este código: $(document).ready(function () { A continuación, ciérralo en la línea siguiente (aún dentro de tu elemento script) con: })",
+ "Más adelante aprenderemos más acerca de funciones. Lo importante es saber que el código que pongas dentro de esta función (function) se ejecutará tan pronto como tu navegador haya cargado la página.",
+ "Esto es importante porque sin tu función de documento listo, tu código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores."
+ ]
+ },
+ "fr": {
+ "title": "Apprendre comment fonctionnent les balises Script et Document Ready",
+ "description": [
+ "Nous sommes maintenant prêt à apprendre jQuery, l'outil JavaScript le plus populaire de tout les temps. Ne vous inquiétez pas à propos de JavaScript lui-même, nous y viendrons bientôt.",
+ "Avant de pouvoir utiliser jQuery, nous avons besoin d'ajouter certaines choses à notre HTML.",
+ "Premièrement, ajoutez un élément script en haut de votre page. Assurez-vous de le fermer à la ligne suivante.",
+ "Votre navigateur exécutera JavaScript à l'intérieur de l'élement script, y compris jQuery.",
+ "Á l'intérieur de votre élement script, ajoutez ce code : $(document).ready(function() { à votre script. Puis fermez-le à la ligne suivante (toujours à l'intérieur de votre élement script avec: });",
+ "Nous en apprendrons plus sur les functions plus tard. Le plus important à savoir est que le code à l'intérieur de cette function sera exécuté dès que le navigateur aura chargé votre page.",
+ "Ceci est important car sans votre document ready function, votre code pourrait être exécuté avant que votre HTML soit affiché, ce qui pourrait causer des problèmes."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "",
+ "",
+ "",
+ "",
+ "",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "
#left-well ",
+ "
",
+ " #target1 ",
+ " #target2 ",
+ " #target3 ",
+ "
",
+ "
",
+ "
",
+ "
#right-well ",
+ "
",
+ " #target4 ",
+ " #target5 ",
+ " #target6 ",
+ "
",
+ "
",
+ "
",
+ "
document ready function.",
+ "Now let's write our first jQuery statement. All jQuery functions start with a $, usually referred to as a dollar sign operator, or as bling.",
+ "jQuery often selects an HTML element with a selector, then does something to that element.",
+ "For example, let's make all of your button elements bounce. Just add this code inside your document ready function:",
+ "$(\"button\").addClass(\"animated bounce\");",
+ "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 bounce class to your button elements."
+ ],
+ "tests": [
+ {
+ "text": "Use the jQuery addClass() function to give the classes animated and bounce to your button elements.",
+ "testString": "assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'Use the jQuery addClass() function to give the classes animated and bounce to your button elements.');"
+ },
+ {
+ "text": "Only use jQuery to add these colors to the element.",
+ "testString": "assert(!code.match(/class.*animated/g), 'Only use jQuery to add these colors to the element.');"
+ },
+ {
+ "text": "Your jQuery code should be within the $(document).ready(); function.",
+ "testString": "assert(code.match(/\\$\\(document\\)\\.ready\\(function.*(\\s|\\n)*.*button.*.addClass.*\\);/g), 'Your jQuery code should be within the $(document).ready(); function.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "de": {
+ "title": "HTML-Elemente mit Selektoren durch jQuery auswählen",
+ "description": [
+ "Jetzt haben wir eine Document Ready Funktion.",
+ "Lass uns unser erstes jQuery Statement schreiben. Alle jQuery Funktionen starten mit einem $, für gewöhnlich als Dollar-Zeichen Operator bezeichnet.",
+ "jQuery wählt oft HTML-Elemente mit einem Selektor aus, um dann mit diesen Elementen etwas zu machen.",
+ "Zum Beispiel, lasse alle deine Button Elemente hüpfen. Dazu musst du nur folgenden Code in deine Document Ready Funktion hinzufügen:",
+ "$(\"button\").addClass(\"animated bounce\");",
+ "Beachte, dass wir bereits jQuery und Animate.css im Hintergrund hinzugefügt haben, damit du diese im Editor nutzen kannst. Du nutzt also jQuery um die bounce Klasse von Animate.css zu deinen Button Elementen hinzuzufügen."
+ ]
+ },
+ "es": {
+ "title": "Elige elementos HTML usando selectores y jQuery",
+ "description": [
+ "Ya tenemos una función de documento listo.",
+ "Ahora vamos a escribir nuestra primera instrucción jQuery. Todas las funciones de jQuery comienzan con un $, al que suele referirse como operador dólar, o simplemente como bling. ",
+ "jQuery a menudo selecciona un elemento HTML con un selector, y luego le hace algo a ese elemento.",
+ "Por ejemplo, hagamos que todos tus elementos button reboten. Sólo tienes que añadir este código dentro de la función de documento listo: ",
+ "$(\"button\").addClass(\"animated bounce\")",
+ "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 bounce de Animate.css a tus elementos button."
+ ]
+ },
+ "fr": {
+ "title": "Cibler des élements HTML par sélecteurs avec jQuery",
+ "description": [
+ "Nous avons maintenant un document ready function.",
+ "Nous allons à présent écrire notre première expression jQuery. Chaque fonction jQuery commence avec un $, habituellement nommé opérateur dollar, ou bling.",
+ "jQuery sélectionne souvent un élément HTML à l'aide d'un selector, puis fait quelque chose à cet élement.",
+ "Par exemple, faisons en sorte que tous nos button rebondissent. Ajoutez juste ce code à l'intérieur de votre $(document).ready(function(){:",
+ "$(\"button\").addClass(\"animated bounce\");",
+ "Notez que nous avons déjà inclus à la fois la librairie jQuery et la librairie Animate.css en amont donc nous pouvons les utiliser dans l'éditeur. Donc, vous utilisez jQuery pour appliquer la classe bounce d'Animate.css à vos éléments button.",
+ "De plus, assurez-vous d'utiliser $(\"button\").addClass(\"animated bounce\"); et non $('button').addClass(\"animated bounce\"); car les apostrophes ne passeront pas nos tests."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "fccss",
+ " $(document).ready(function() {",
+ "",
+ " });",
+ "fcces",
+ "",
+ "",
+ "",
+ "",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "
#left-well ",
+ "
",
+ " #target1 ",
+ " #target2 ",
+ " #target3 ",
+ "
",
+ "
",
+ "
",
+ "
#right-well ",
+ "
",
+ " #target4 ",
+ " #target5 ",
+ " #target6 ",
+ "
",
+ "
",
+ "
",
+ "
button elements bounce? We selected them with $(\"button\"), then we added some CSS classes to them with .addClass(\"animated bounce\");.",
+ "You just used jQuery's .addClass() function, which allows you to add classes to elements.",
+ "First, let's target your div elements with the class well by using the $(\".well\") selector.",
+ "Note that, just like with CSS declarations, you type a . before the class's name.",
+ "Then use jQuery's .addClass() function to add the classes animated and shake.",
+ "For example, you could make all the elements with the class text-primary shake by adding the following to your document ready function:",
+ "$(\".text-primary\").addClass(\"animated shake\");"
+ ],
+ "tests": [
+ {
+ "text": "Use the jQuery addClass() function to give the classes animated and shake to all your elements with the class well.",
+ "testString": "assert($(\".well\").hasClass(\"animated\") && $(\".well\").hasClass(\"shake\"), 'Use the jQuery addClass() function to give the classes animated and shake to all your elements with the class well.');"
+ },
+ {
+ "text": "Only use jQuery to add these classes to the element.",
+ "testString": "assert(!code.match(/class\\.\\*animated/g), 'Only use jQuery to add these classes to the element.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "de": {
+ "title": "Elemente anhand von Klassen mit jQuery auswählen",
+ "description": [
+ "Siehst du, wie wir alle deine Button Elemente hüpfen haben lassen? Wir haben sie mit $(\"button\") ausgewählt, dann CSS-Klassen mit .addClass(\"animated bounce\"); hinzugefügt.",
+ "Du hast gerade jQuery's .addClass() Funktion genutzt, die dir erlaubt, Klassen zu Elemente hinzuzufügen.",
+ "Wähle als erstes deine div Elemente mit der Klasse well, indem du den $(\".well\") Selektor nutzt.",
+ "Bedenke, dass du - genauso wie bei CSS-Deklarationen - einen . vor den Namen der Klasse setzen musst.",
+ "Dann nutze die jQuery Funktion .addClass() um die Klassen animated und shake hinzuzufügen.",
+ "Zum Beispiel könntest du alle Elemente mit der Klasse text-primary schütteln lassen, indem du folgendes zu deiner Document Ready Funktion hinzufügst:",
+ "$(\".text-primary\").addClass(\"animated shake\");"
+ ]
+ },
+ "es": {
+ "title": "Elige elementos por su clase usando jQuery",
+ "description": [
+ "¿Viste como hicimos rebotar todos tus elementos button? Los seleccionamos con $(\"button\"), y luego les añadimos algunas clases CSS con .addClass(\"animated bounce\");. ",
+ "Acabas de usar la función addClass() de jQuery, que te permite añadir clases a los elementos.",
+ "En primer lugar, apuntemos a tus elementos div que tengan la clase well usando el selector $(\".well\").",
+ "Ten en cuenta que, al igual que con las declaraciones CSS, escribes un . antes del nombre de la clase.",
+ "A continuación, utiliza la función .addClass() de jQuery para agregar las clases animated y shake.",
+ "Por ejemplo, podrías hacer que todos los elementos con la clase text-primary se sacudieran añadiendo lo siguiente a tu función de documento listo:",
+ "$(\".text-primary\").addClass(\"animated shake\");"
+ ]
+ },
+ "fr": {
+ "title": "Cibler les élements par Classe avec jQuery",
+ "description": [
+ "Voyez comment nous avons fait rebondir tous nos éléments button? Nous les avons sélectionné avec $(\"button\"), puis nous leur avons ajouté des classes CSS avec .addClass(\"animated bounce\");.",
+ "Vous venez d'utiliser la fonction jQuery .addClass(), ce qui nous permet d'ajouter des classes aux éléments.",
+ "Tout d'abord, ciblons nos éléments div qui ont la classe well en utilisant le sélecteur $(\".well\").",
+ "Notez que, tout comme les expressions CSS, vous ajoutez un . avant le nom de la classe.",
+ "Puis, vous utilisez la fonction jQuery .addClass() pour ajouter les classes animated et shake.",
+ "Par exemple, vous pouvez faire en sorte que tous les éléments avec la classe text-primary s'agitent en ajoutant le code suivant à votre document ready function:",
+ "$(\".text-primary\").addClass(\"animated shake\");"
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "fccss",
+ " $(document).ready(function() {",
+ " $(\"button\").addClass(\"animated bounce\");",
+ " });",
+ "fcces",
+ "",
+ "",
+ "",
+ "",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "
#left-well ",
+ "
",
+ " #target1 ",
+ " #target2 ",
+ " #target3 ",
+ "
",
+ "
",
+ "
",
+ "
#right-well ",
+ "
",
+ " #target4 ",
+ " #target5 ",
+ " #target6 ",
+ "
",
+ "
",
+ "
",
+ "
button element with the id target3 by using the $(\"#target3\") selector.",
+ "Note that, just like with CSS declarations, you type a # before the id's name.",
+ "Then use jQuery's .addClass() function to add the classes animated and fadeOut.",
+ "Here's how you'd make the button element with the id target6 fade out:",
+ "$(\"#target6\").addClass(\"animated fadeOut\")."
+ ],
+ "tests": [
+ {
+ "text": "Select the button element with the id of target3 and use the jQuery addClass() function to give it the class of animated.",
+ "testString": "assert($(\"#target3\").hasClass(\"animated\"), 'Select the button element with the id of target3 and use the jQuery addClass() function to give it the class of animated.');"
+ },
+ {
+ "text": "Target the element with the id target3 and use the jQuery addClass() function to give it the class fadeOut.",
+ "testString": "assert(($(\"#target3\").hasClass(\"fadeOut\") || $(\"#target3\").hasClass(\"fadeout\")) && code.match(/\\$\\(\\s*.#target3.\\s*\\)/g), 'Target the element with the id target3 and use the jQuery addClass() function to give it the class fadeOut.');"
+ },
+ {
+ "text": "Only use jQuery to add these classes to the element.",
+ "testString": "assert(!code.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.');"
+ }
+ ],
+ "type": "waypoint",
+ "challengeType": 0,
+ "translations": {
+ "de": {
+ "title": "Elemente anhand der id mit jQuery auswählen",
+ "description": [
+ "Du kannst Elemente auch anhand deren ID-Attributs auswählen.",
+ "Wähle als erstes dein Button Element mit der ID target3, indem du den $(\"#target3\") Selektor nutzt.",
+ "Bedenke, dass du - genauso wie bei CSS-Deklarationen - eine # vor den Namen der Klasse setzen musst.",
+ "Dann nutze die jQuery Funktion .addClass() um die Klassen animated und fadeOut hinzuzufügen.",
+ "So könntest du das Button Element mit der ID target6 ausblenden lassen:",
+ "$(\"#target6\").addClass(\"animated fadeOut\")."
+ ]
+ },
+ "es": {
+ "title": "Elige elementos por id usando jQuery",
+ "description": [
+ "También puedes elegir un elemento por su atributo id.",
+ "Primero selecciona tu elemento button con el id target3 mediante el uso del selector $(\"#target3\").",
+ "Ten en cuenta que, al igual que con las declaraciones CSS, debes escribir un # antes de la identificación.",
+ "A continuación, utiliza la función .addClass() de jQuery para agregar las clases animated y fadeOut.",
+ "He aquí cómo haces que desaparezca el elemento button con la identificación target6:",
+ "$(\"#target6\").addClass(\"animated fadeOut\")."
+ ]
+ },
+ "fr": {
+ "title": "Cibler les éléments par id avec jQuery",
+ "description": [
+ "Vous pouvez également cibler les éléments à l'aide de leurs attributs id.",
+ "Premièrement, cibler votre élément button avec l'id target3 en utilisant le sélecteur $(\"#target\").",
+ "Notez que, tout comme les expressions CSS, vous ajoutez un # avant le nom de l'id.",
+ "Puis, utilisez la fonction jQuery .addClass() afin d'ajouter les classes animated et fadeOut.",
+ "Voici comment vous pouvez faire en sorte que l'élément button avec l'id target6 disparaisse en fondu:",
+ "$(\"#target6\").addClass(\"animated fadeOut\")."
+ ]
+ }
+ },
+ "files": {
+ "indexjs": {
+ "key": "indexhtml",
+ "ext": "html",
+ "name": "index",
+ "contents": [
+ "fccss",
+ " $(document).ready(function() {",
+ " $(\"button\").addClass(\"animated bounce\");",
+ " $(\".well\").addClass(\"animated shake\");",
+ "",
+ " });",
+ "fcces",
+ "",
+ "",
+ "",
+ "",
+ "
jQuery Playground ",
+ "
",
+ "
",
+ "
#left-well ",
+ "
",
+ " #target1 ",
+ " #target2 ",
+ " #target3 ",
+ "
",
+ "
",
+ "
",
+ "
#right-well ",
+ "
",
+ " #target4 ",
+ " #target5 ",
+ " #target6 ",
+ "
",
+ "
",
+ "
",
+ "
document ready function, but leave your document ready function itself intact."
+ ],
+ "tests": [
+ {
+ "text": "Delete all three of your jQuery functions from your document ready function.",
+ "testString": "assert(code.match(/\\{\\s*\\}\\);/g), 'Delete all three of your jQuery functions from your document ready function.');"
+ },
+ {
+ "text": "Leave your script element intact.",
+ "testString": "assert(code.match(/ ![\"A](\"https://bit.ly/fcc-relaxing-cat\")
",
+ "",
+ " ![\"Three](\"https://bit.ly/fcc-running-cats\")
",
+ "