2154 lines
97 KiB
JSON
2154 lines
97 KiB
JSON
{
|
|
"name": "Responsive Design with Bootstrap",
|
|
"order": 3,
|
|
"time": "2h",
|
|
"challenges": [
|
|
{
|
|
"id": "bad87fee1348bd9acde08712",
|
|
"title": "Use Responsive Design with Bootstrap Fluid Containers",
|
|
"description": [
|
|
"Now let's go back to our Cat Photo App. This time, we'll style it using the popular Bootstrap responsive CSS framework.",
|
|
"Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <code>Responsive Design</code>.",
|
|
"With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.",
|
|
"You can add Bootstrap to any app just by including it with <code><link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/></code> at the top of your HTML. But we've added it for you to this page behind the scenes.",
|
|
"To get started, we should nest all of our HTML in a <code>div</code> element with the class <code>container-fluid</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\"div\").hasClass(\"container-fluid\"), 'Your <code>div</code> element should have the class <code>container-fluid</code>')",
|
|
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: red;",
|
|
" }",
|
|
"",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" p {",
|
|
" font-size: 16px;",
|
|
" font-family: Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
" .smaller-image {",
|
|
" width: 100px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
|
"",
|
|
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
|
"",
|
|
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
"",
|
|
"<p>Things cats love:</p>",
|
|
"<ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
"</ul>",
|
|
"<p>Top 3 things cats hate:</p>",
|
|
"<ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
"</ol>",
|
|
"<form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
"</form>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9acde08812",
|
|
"title": "Make Images Mobile Responsive",
|
|
"description": [
|
|
"First, add a new image below the existing one. Set it's <code>src</code> attribute to <code>http://bit.ly/fcc-running-cats</code>.",
|
|
"It would be great if this image could be exactly the width of our phone's screen.",
|
|
"Fortunately, with Bootstrap, all we need to do is add the <code>img-responsive</code> class to your image. Do this, and the image should perfectly fit the width of your page."
|
|
],
|
|
"tests": [
|
|
"assert($(\"img\").length > 1, 'You should have a total of two images.')",
|
|
"assert($(\"img\").hasClass(\"img-responsive\"), 'Your new image should have the class <code>img-responsive</code>.')",
|
|
"assert(new RegExp(\"http://bit.ly/fcc-running-cats\", \"gi\").test($(\"img.img-responsive\").attr(\"src\")), 'Add a second image with the <code>src</code> of <code>http://bit.ly/fcc-running-cats</code>.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: red;",
|
|
" }",
|
|
"",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" p {",
|
|
" font-size: 16px;",
|
|
" font-family: Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
" .smaller-image {",
|
|
" width: 100px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h2 class=\"red-text\">CatPhotoApp</h2>",
|
|
"",
|
|
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
|
"",
|
|
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"http://bit.ly/fcc-relaxing-cat\"></a>",
|
|
"",
|
|
" <p>Things cats love:</p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd8acde08812",
|
|
"title": "Center Text with Bootstrap",
|
|
"description": [
|
|
"Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class <code>text-center</code> to our <code>h2</code> element.",
|
|
"Remember that you can add several classes to the same element by separating each of them with a space, like this: <code><h2 class=\"red-text text-center\">your text</h2></code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\"h2\").hasClass(\"text-center\"), 'Your <code>h2</code> element should be centered by applying the class <code>text-center</code>')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: red;",
|
|
" }",
|
|
"",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" p {",
|
|
" font-size: 16px;",
|
|
" font-family: Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
" .smaller-image {",
|
|
" width: 100px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h2 class=\"red-text\">CatPhotoApp</h2>",
|
|
"",
|
|
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
|
"",
|
|
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
"",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <p>Things cats love:</p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348cd8acdf08812",
|
|
"title": "Create a Bootstrap Button",
|
|
"description": [
|
|
"Bootstrap has its own styles for <code>button</code> elements, which look much better than the plain HTML ones.",
|
|
"Create a new <code>button</code> element below your large kitten photo. Give it the class <code>btn</code> and the text of \"Like\"."
|
|
],
|
|
"tests": [
|
|
"assert(new RegExp(\"like\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"Like\".')",
|
|
"assert($(\"button\").hasClass(\"btn\"), 'Your new button should have the class <code>btn</code>.')",
|
|
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: red;",
|
|
" }",
|
|
"",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" p {",
|
|
" font-size: 16px;",
|
|
" font-family: Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
" .smaller-image {",
|
|
" width: 100px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h2 class=\"red-text text-center\">CatPhotoApp</h2>",
|
|
"",
|
|
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
|
"",
|
|
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
"",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
"",
|
|
" <p>Things cats love:</p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348cd8acef08812",
|
|
"title": "Create a Block Element Bootstrap Button",
|
|
"description": [
|
|
"Normally, your <code>button</code> elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",
|
|
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
|
|
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
|
|
"Note that these buttons still need the <code>btn</code> class.",
|
|
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button."
|
|
],
|
|
"tests": [
|
|
"assert($(\"button\").hasClass(\"btn\"), 'Your button should still have the class <code>btn</code>.')",
|
|
"assert($(\"button\").hasClass(\"btn-block\"), 'Your button should have the class <code>btn-block</code>.')",
|
|
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: red;",
|
|
" }",
|
|
"",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" p {",
|
|
" font-size: 16px;",
|
|
" font-family: Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
" .smaller-image {",
|
|
" width: 100px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h2 class=\"red-text text-center\">CatPhotoApp</h2>",
|
|
"",
|
|
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
|
"",
|
|
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
"",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <button class=\"btn\">Like</button>",
|
|
" <p>Things cats love:</p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348cd8acef08811",
|
|
"title": "Taste the Bootstrap Button Color Rainbow",
|
|
"description": [
|
|
"The <code>btn-primary</code> class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.",
|
|
"Add Bootstrap's <code>btn-primary</code> class to your button.",
|
|
"Note that this button will still need the <code>btn</code> and <code>btn-block</code> classes."
|
|
],
|
|
"tests": [
|
|
"assert($(\"button\").hasClass(\"btn-primary\"), 'Your button should have the class <code>btn-primary</code>.')",
|
|
"assert($(\"button\").hasClass(\"btn-block\") && $(\"button\").hasClass(\"btn\"), 'Your button should still have the <code>btn</code> and <code>btn-block</code> classes.')",
|
|
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: red;",
|
|
" }",
|
|
"",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" p {",
|
|
" font-size: 16px;",
|
|
" font-family: Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
" .smaller-image {",
|
|
" width: 100px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h2 class=\"red-text text-center\">CatPhotoApp</h2>",
|
|
"",
|
|
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
|
"",
|
|
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
"",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <button class=\"btn btn-block\">Like</button>",
|
|
" <p>Things cats love:</p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348cd8acef08813",
|
|
"title": "Call out Optional Actions with Button Info",
|
|
"description": [
|
|
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-info</code> class is used to call attention to optional actions that the user can take.",
|
|
"Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's <code>btn-info</code> and <code>btn-block</code> classes to it.",
|
|
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
|
|
],
|
|
"tests": [
|
|
"assert(new RegExp(\"info\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"Info\".')",
|
|
"assert($(\"button.btn-block.btn\").length > 1, 'Both of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.')",
|
|
"assert($(\"button\").hasClass(\"btn-info\"), 'Your new button should have the class <code>btn-info</code>.')",
|
|
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: red;",
|
|
" }",
|
|
"",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" p {",
|
|
" font-size: 16px;",
|
|
" font-family: Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
" .smaller-image {",
|
|
" width: 100px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h2 class=\"red-text text-center\">CatPhotoApp</h2>",
|
|
"",
|
|
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
|
"",
|
|
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
"",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
|
" <p>Things cats love:</p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348ce8acef08814",
|
|
"title": "Warn your Users of a Dangerous Action",
|
|
"description": [
|
|
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-danger</code> class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.",
|
|
"Create a button with the text \"Delete\" and give it the class <code>btn-danger</code>.",
|
|
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
|
|
],
|
|
"tests": [
|
|
"assert(new RegExp(\"Delete\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"Delete\".')",
|
|
"assert($(\"button.btn-block.btn\").length > 2, 'All of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.')",
|
|
"assert($(\"button\").hasClass(\"btn-danger\"), 'Your new button should have the class <code>btn-danger</code>.')",
|
|
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: red;",
|
|
" }",
|
|
"",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" p {",
|
|
" font-size: 16px;",
|
|
" font-family: Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
" .smaller-image {",
|
|
" width: 100px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h2 class=\"red-text text-center\">CatPhotoApp</h2>",
|
|
"",
|
|
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
|
"",
|
|
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
"",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
|
" <button class=\"btn btn-block btn-info\">Info</button>",
|
|
" <p>Things cats love:</p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad88fee1348ce8acef08815",
|
|
"title": "Use the Bootstrap Grid to Put Elements Side By Side",
|
|
"description": [
|
|
"Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
|
|
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
|
|
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
|
|
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
|
|
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
|
|
"Put the <code>Like</code>, <code>Info</code> and <code>Delete</code> buttons side-by-side by nesting all three of them within one <code><div class=\"row\"></code> element, then each of them within a <code><div class=\"col-xs-4\"></code> element.",
|
|
"The <code>row</code> class is applied to a <code>div</code>, and the buttons themselves can be nested within it."
|
|
],
|
|
"tests": [
|
|
"assert($(\"div.row:has(button)\").length > 0, 'Your buttons should all be nested within the same <code>div</code> element with the class <code>row</code>.')",
|
|
"assert($(\"div.col-xs-4:has(button)\").length > 2, 'Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class <code>col-xs-4</code>.')",
|
|
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure each of your <code>button</code> elements has a closing tag.')",
|
|
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: red;",
|
|
" }",
|
|
"",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" p {",
|
|
" font-size: 16px;",
|
|
" font-family: Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
" .smaller-image {",
|
|
" width: 100px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h2 class=\"red-text text-center\">CatPhotoApp</h2>",
|
|
"",
|
|
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
|
"",
|
|
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
"",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
|
" <button class=\"btn btn-block btn-info\">Info</button>",
|
|
" <button class=\"btn btn-block btn-danger\">Delete</button>",
|
|
" <p>Things cats love:</p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1347bd9aedf08845",
|
|
"title": "Ditch Custom CSS for Bootstrap",
|
|
"description": [
|
|
"We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.",
|
|
"Don't worry - there will be plenty of time to customize our CSS later.",
|
|
"Delete the <code>.red-text</code>, <code>p</code>, and <code>.smaller-image</code> CSS declarations from your <code>style</code> element so that the only declarations left in your <code>style</code> element are <code>h2</code> and <code>thick-green-border</code>.",
|
|
"Then delete the <code>p</code> element that contains a dead link. Then remove the <code>red-text</code> class from your <code>h2</code> element and replace it with the <code>text-primary</code> Bootstrap class.",
|
|
"Finally, remove the \"smaller-image\" class from your first <code>img</code> element and replace it with the <code>img-responsive</code> class."
|
|
],
|
|
"tests": [
|
|
"assert(!$(\"h2\").hasClass(\"red-text\"), 'Your h2 element should no longer have the class <code>red-text</code>.')",
|
|
"assert($(\"h2\").hasClass(\"text-primary\"), 'Your h2 element should now have the class <code>text-primary</code>.')",
|
|
"assert(!$(\"p\").css(\"font-family\").match(/monospace/i), 'Your paragraph elements should no longer use the font <code>Monospace</code>.')",
|
|
"assert(!$(\"img\").hasClass(\"smaller-image\"), 'Remove the <code>smaller-image</code> class from your top image.')",
|
|
"assert($(\".img-responsive\").length > 1, 'Add the <code>img-responsive</code> class to your top image.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: red;",
|
|
" }",
|
|
"",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" p {",
|
|
" font-size: 16px;",
|
|
" font-family: Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
" .smaller-image {",
|
|
" width: 100px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h2 class=\"red-text text-center\">CatPhotoApp</h2>",
|
|
"",
|
|
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
|
"",
|
|
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
"",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-info\">Info</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-danger\">Delete</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <p>Things cats love:</p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aedf08845",
|
|
"title": "Use Spans for Inline Elements",
|
|
"description": [
|
|
"You can use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button fill the entire row?",
|
|
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
|
|
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
|
|
"By using the <code>span</code> element, you can put several elements together, and even style different parts of the same element differently.",
|
|
"Nest the word \"love\" in your \"Things cats love\" element below within a <code>span</code> element. Then give that <code>span</code> the class <code>text-danger</code> to make the text red.",
|
|
"Here's how you would do this with the \"Top 3 things cats hate\" element: <code><p>Top 3 things cats <span class = \"text-danger\">hate</span></p></code>"
|
|
],
|
|
"tests": [
|
|
"assert($(\"p span\") && $(\"p span\").length > 0, 'Your <code>span</code> element should be inside your <code>p</code> element.')",
|
|
"assert($(\"p span\") && $(\"p span\").text().match(/love/i), 'Your <code>span</code> element should have the text <code>love</code>.')",
|
|
"assert($(\"span\").hasClass(\"text-danger\"), 'Your <code>span</code> element should have class <code>text-danger</code>.')",
|
|
"assert(editor.match(/<\\/span>/g) && editor.match(/<span/g) && editor.match(/<\\/span>/g).length === editor.match(/<span/g).length, 'Make sure your <code>span</code> element has a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
"",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
|
"",
|
|
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
"",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-info\">Info</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-danger\">Delete</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <p>Things cats love:</p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aede08845",
|
|
"title": "Create a Custom Heading",
|
|
"description": [
|
|
"We will make a simple heading for our Cat Photo App by putting them in the same row.",
|
|
"Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
|
|
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
|
|
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
|
|
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
|
|
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
|
|
"Nest your first image and your <code>h2</code> element within a single <code><div class=\"row\"></code> element. Nest your <code>h2</code> text within a <code><div class=\"col-xs-8\"></code> and your image in a <code><div class=\"col-xs-4\"></code> so that they are on the same line.",
|
|
"Notice how the image is now just the right size to fit along the text?"
|
|
],
|
|
"tests": [
|
|
"assert($(\"div.row:has(h2)\").length > 0 && $(\"div.row:has(img)\").length > 0, 'Your <code>h2</code> element and topmost <code>img</code> element should both be nested together within a <code>div</code> element with the class <code>row</code>.')",
|
|
"assert($(\"div.col-xs-4:has(img)\").length > 0, 'Nest your topmost <code>img</code> element within a <code>div</code> with the class <code>col-xs-4</code>.')",
|
|
"assert($(\"div.col-xs-8:has(h2)\").length > 0, 'Nest your <code>h2</code> element within a <code>div</code> with the class <code>col-xs-8</code>.')",
|
|
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"",
|
|
"<style>",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
|
"",
|
|
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
"",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-info\">Info</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-danger\">Delete</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <p>Things cats <span class=\"text-danger\">love:</span></p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"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 <code>.svg</code> 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 <code>thumbs-up</code> icon to your like button by giving it a <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\"i\").hasClass(\"fa fa-thumbs-up\"), 'Add an <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>.')",
|
|
"assert($(\"button\").children(\"i\").length > 0, 'Nest your <code>i</code> element within your <code>button</code> element.')",
|
|
"assert(editor.match(/<\\/i>/g), 'Make sure your <code>i</code> element has a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-8\">",
|
|
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
" </div>",
|
|
" </div>",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-info\">Info</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-danger\">Delete</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <p>Things cats <span class=\"text-danger\">love:</span></p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"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 <code>.svg</code> 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 <code>info-circle</code> icon to your info button and a <code>trash</code> icon to your delete button."
|
|
],
|
|
"tests": [
|
|
"assert($(\".btn-danger > i\").hasClass(\"fa fa-trash\"), 'You should add a <code><i class=\"fa fa-trash\"></i></code> within your delete button element.')",
|
|
"assert($(\".btn-info > i\").hasClass(\"fa fa-info-circle\"), 'You should add a <code><i class=\"fa fa-info-circle\"></i></code> within your info button element.')",
|
|
"assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i>/g).length > 2 && $(\".btn-primary > i\").hasClass(\"fa fa-thumbs-up\"), 'Make sure each of your <code>i</code> elements has a closing tag and <code><i class=\"fa fa-thumbs-up\"></i></code> is in your like button element.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-8\">",
|
|
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
" </div>",
|
|
" </div>",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-info\">Info</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-danger\">Delete</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <p>Things cats <span class=\"text-danger\">love:</span></p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aedb08845",
|
|
"title": "Responsively Style Radio Buttons",
|
|
"description": [
|
|
"You can use Bootstrap's <code>col-xs-*</code> classes on <code>form</code> 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 <code><div class=\"row\"></code> element. Then nest each of them within a <code><div class=\"col-xs-6\"></code> element."
|
|
],
|
|
"tests": [
|
|
"assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, 'Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.')",
|
|
"assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'Nest each of your radio buttons inside its own <code>div</code> with the class <code>col-xs-6</code>.')",
|
|
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-8\">",
|
|
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
" </div>",
|
|
" </div>",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-info\"><i class=\"fa fa-info-circle\"></i> Info</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-danger\"><i class=\"fa fa-trash\"></i> Delete</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <p>Things cats <span class=\"text-danger\">love:</span></p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aeda08845",
|
|
"title": "Responsively Style Checkboxes",
|
|
"description": [
|
|
"You can use Bootstrap's <code>col-xs-*</code> classes on <code>form</code> 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 <code><div class=\"row\"></code> element. Then nest each of them in a <code><div class=\"col-xs-4\"></code> element."
|
|
],
|
|
"tests": [
|
|
"assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, 'Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.')",
|
|
"assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'Nest each of your checkboxes inside its own <code>div</code> with the class <code>col-xs-4</code>.')",
|
|
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-8\">",
|
|
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
" </div>",
|
|
" </div>",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-info\"><i class=\"fa fa-info-circle\"></i> Info</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-danger\"><i class=\"fa fa-trash\"></i> Delete</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <p>Things cats <span class=\"text-danger\">love:</span></p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" </div>",
|
|
" </div>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aed908845",
|
|
"title": "Style Text Inputs as Form Controls",
|
|
"description": [
|
|
"You can add the <code>fa-paper-plane</code> Font Awesome icon by adding <code><i class=\"fa fa-paper-plane\"></i></code> within your submit <code>button</code> element.",
|
|
"Give your form's text input field a class of <code>form-control</code>. Give your form's submit button the classes <code>btn btn-primary</code>. Also give this button the Font Awesome icon of <code>fa-paper-plane</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\"button[type=\\\"submit\\\"]\").hasClass(\"btn btn-primary\"), 'Give the submit button in your form the classes <code>btn btn-primary</code>.')",
|
|
"assert($(\"button[type=\\\"submit\\\"]:has(i.fa.fa-paper-plane)\").length > 0, 'Add a <code><i class=\"fa fa-paper-plane\"></i></code> within your submit <code>button</code> element.')",
|
|
"assert($(\"input[type=\\\"text\\\"]\").hasClass(\"form-control\"), 'Give the text <code>input</code> in your form the class <code>form-control</code>.')",
|
|
"assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i/g).length > 3, 'Make sure each of your <code>i</code> elements has a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-8\">",
|
|
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
" </div>",
|
|
" </div>",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-info\"><i class=\"fa fa-info-circle\"></i> Info</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-danger\"><i class=\"fa fa-trash\"></i> Delete</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <p>Things cats <span class=\"text-danger\">love:</span></p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-4\">",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" </div>",
|
|
" </div>",
|
|
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\">Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aec908845",
|
|
"title": "Line up Form Elements Responsively with Bootstrap",
|
|
"description": [
|
|
"Now let's get your form <code>input</code> and your submission <code>button</code> on the same line. We'll do this the same way we have previously: by using a <code>div</code> element with the class <code>row</code>, and other <code>div</code> elements within it using the <code>col-xs-*</code> class.",
|
|
"Nest both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class <code>row</code>. Nest your form's text <code>input</code> within a div with the class of <code>col-xs-7</code>. Nest your form's submit <code>button</code> in a <code>div</code> with the class <code>col-xs-5</code>.",
|
|
"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, 'Nest your form submission button and text input in a div with class <code>row</code>.')",
|
|
"assert($(\"div.col-xs-7:has(input[type=\\\"text\\\"])\").length > 0, 'Nest your form text input in a div with the class <code>col-xs-7</code>.')",
|
|
"assert($(\"div.col-xs-5:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button in a div with the class <code>col-xs-5</code>.')",
|
|
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
|
"<style>",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"container-fluid\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-8\">",
|
|
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
|
" </div>",
|
|
" </div>",
|
|
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-info\"><i class=\"fa fa-info-circle\"></i> Info</button>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <button class=\"btn btn-block btn-danger\"><i class=\"fa fa-trash\"></i> Delete</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <p>Things cats <span class=\"text-danger\">love:</span></p>",
|
|
" <ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
" </ul>",
|
|
" <p>Top 3 things cats hate:</p>",
|
|
" <ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
" </ol>",
|
|
" <form action=\"/submit-cat-photo\">",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-4\">",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
|
" </div>",
|
|
" <div class=\"col-xs-4\">",
|
|
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
|
|
" </div>",
|
|
" </div>",
|
|
" <input type=\"text\" class=\"form-control\" placeholder=\"cat photo URL\" required>",
|
|
" <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fa fa-paper-plane\"></i> Submit</button>",
|
|
" </form>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"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 <code>h3</code> element, with the text <code>jQuery Playground</code>.",
|
|
"Color your <code>h3</code> element with the <code>text-primary</code> Bootstrap class, and center it with the <code>text-center</code> Bootstrap class."
|
|
],
|
|
"tests": [
|
|
"assert($(\"h3\") && $(\"h3\").length > 0, 'Add a <code>h3</code> element to your page.')",
|
|
"assert(editor.match(/<\\/h3>/g) && editor.match(/<h3/g) && editor.match(/<\\/h3>/g).length === editor.match(/<h3/g).length, 'Make sure your <code>h3</code> element has a closing tag.')",
|
|
"assert($(\"h3\").hasClass(\"text-primary\"), 'Your <code>h3</code> element should be colored by applying the class <code>text-primary</code>')",
|
|
"assert($(\"h3\").hasClass(\"text-center\"), 'Your <code>h3</code> element should be centered by applying the class <code>text-center</code>')",
|
|
"assert.isTrue((/jquery(\\s)+playground/gi).test($(\"h3\").text()), 'Your <code>h3</code> element should have the text <code>jQuery Playground</code>.')"
|
|
],
|
|
"challengeSeed": [
|
|
"",
|
|
"",
|
|
""
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"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 <code>h3</code> element within a <code>div</code> element with the class <code>container-fluid</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\"div\").hasClass(\"container-fluid\"), 'Your <code>div</code> element should have the class <code>container-fluid</code>.')",
|
|
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
"",
|
|
""
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9bec908846",
|
|
"title": "Create a Bootstrap Row",
|
|
"description": [
|
|
"Now we'll create a Bootstrap row for our inline elements.",
|
|
"Create a <code>div</code> element with the class <code>row</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\"div\").length > 1, 'Add a <code>div</code> element below your <code>h3</code> element.')",
|
|
"assert($(\"div\").hasClass(\"row\"), 'Your <code>div</code> element should have the class <code>row</code>')",
|
|
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure your <code>div</code> element has a closing tag.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
"",
|
|
"</div>",
|
|
""
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"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 <code>div</code> elements within your row, both with the class <code>col-xs-6</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\"div.row > div.col-xs-6\").length > 1, 'Nest two <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
|
|
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
"",
|
|
"",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aec908848",
|
|
"title": "Create Bootstrap Wells",
|
|
"description": [
|
|
"Bootstrap has a class called <code>well</code> that can create a visual sense of depth for your columns.",
|
|
"Nest one <code>div</code> element with the class <code>well</code> within each of your <code>col-xs-6</code> <code>div</code> elements."
|
|
],
|
|
"tests": [
|
|
"assert($(\"div.col-xs-6\").not(\":has(>div.well)\").length < 1, 'Add a <code>div</code> element with the class <code>well</code> inside each of your <code>div</code> elements with the class <code>\"col-xs-6\"</code>')",
|
|
"assert($(\"div.row > div.col-xs-6\").length > 1, 'Nest both of your <code>div</code> elements with the class <code>\"col-xs-6\"</code> within your <code>div</code> element with the class <code>\"row\"</code>.')",
|
|
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
"",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
"",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aec908849",
|
|
"title": "Add Elements within your Bootstrap Wells",
|
|
"description": [
|
|
"Now we're several <code>div</code> elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our <code>button</code> elements.",
|
|
"Nest three <code>button</code> elements within each of your <code>well</code> <code>div</code> elements."
|
|
],
|
|
"tests": [
|
|
"assert($(\"div.well\").children(\"button\").length > 5, 'Nest three <code>button</code> elements within each of your <code>div</code> elements with class <code>well</code>.')",
|
|
"assert($(\"button\") && $(\"button\").length > 5, 'You should have a total of 6 <code>button</code> elements.')",
|
|
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have closing tags.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <div class=\"well\">",
|
|
"",
|
|
"",
|
|
"",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <div class=\"well\">",
|
|
"",
|
|
"",
|
|
"",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bad87fee1348bd9aec908850",
|
|
"title": "Apply the Default Bootstrap Button Style",
|
|
"description": [
|
|
"Bootstrap has another button class called <code>btn-default</code>.",
|
|
"Apply both the <code>btn</code> and <code>btn-default</code> classes to each of your <code>button</code> elements."
|
|
],
|
|
"tests": [
|
|
"assert($(\".btn\").length > 5, 'Apply the <code>btn</code> class to each of your <code>button</code> elements.')",
|
|
"assert($(\".btn-default\").length > 5, 'Apply the <code>btn-default</code> class to each of your <code>button</code> elements.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <div class=\"well\">",
|
|
" <button></button>",
|
|
" <button></button>",
|
|
" <button></button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <div class=\"well\">",
|
|
" <button></button>",
|
|
" <button></button>",
|
|
" <button></button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"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 <code>button</code> elements the class <code>target</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\".target\").length > 5, 'Apply the <code>target</code> class to each of your <code>button</code> elements.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <div class=\"well\">",
|
|
" <button class=\"btn btn-default\"></button>",
|
|
" <button class=\"btn btn-default\"></button>",
|
|
" <button class=\"btn btn-default\"></button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <div class=\"well\">",
|
|
" <button class=\"btn btn-default\"></button>",
|
|
" <button class=\"btn btn-default\"></button>",
|
|
" <button class=\"btn btn-default\"></button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"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 <code>id</code> attribute.",
|
|
"Each id should be unique to a specific element.",
|
|
"Let's give a unique id to each of our <code>div</code> elements of class <code>well</code>.",
|
|
"Remember that you can give an element an id like this: <code><div class=\"well\" id=\"center-well\"></code>",
|
|
"Give the well on the left the id of <code>left-well</code>. Give the well on the right the <code>id</code> of <code>right-well</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\".col-xs-6\").children(\"#left-well\") && $(\".col-xs-6\").children(\"#left-well\").length > 0, 'Give your left <code>well</code> the id of <code>left-well</code>.')",
|
|
"assert($(\".col-xs-6\").children(\"#right-well\") && $(\".col-xs-6\").children(\"#right-well\").length > 0, 'Give your right <code>well</code> the id of <code>right-well</code>.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <div class=\"well\">",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <div class=\"well\">",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"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 <code>col-xs-6</code> <code>div</code> element, add a <code>h4</code> element with the text <code>#left-well</code>.",
|
|
"Above your right-well, inside its <code>col-xs-6</code> <code>div</code> element, add a <code>h4</code> element with the text <code>#right-well</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\".col-xs-6\").children(\"h4\") && $(\".col-xs-6\").children(\"h4\").length > 1, 'Add an <code>h4</code> element to each of your <code><div class=\"col-xs-6\"></code> elements.');",
|
|
"assert(new RegExp(\"#left-well\",\"gi\").test($(\"h4\").text()), 'One <code>h4</code> element should have the text <code>#left-well</code>.');",
|
|
"assert(new RegExp(\"#right-well\",\"gi\").test($(\"h4\").text()), 'One <code>h4</code> element should have the text <code>#right-well</code>.');",
|
|
"assert(editor.match(/<\\/h4>/g) && editor.match(/<h4/g) && editor.match(/<\\/h4>/g).length === editor.match(/<h4/g).length, 'Make sure all your <code>h4</code> elements have closing tags.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
"",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
"",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"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 <code>target1</code> and ending with <code>target6</code>."
|
|
],
|
|
"tests": [
|
|
"assert($(\"#left-well\").children(\"#target1\") && $(\"#left-well\").children(\"#target1\").length > 0, 'One <code>button</code> element should have the id <code>target1</code>.')",
|
|
"assert($(\"#left-well\").children(\"#target2\") && $(\"#left-well\").children(\"#target2\").length > 0, 'One <code>button</code> element should have the id <code>target2</code>.')",
|
|
"assert($(\"#left-well\").children(\"#target3\") && $(\"#left-well\").children(\"#target3\").length > 0, 'One <code>button</code> element should have the id <code>target3</code>.')",
|
|
"assert($(\"#right-well\").children(\"#target4\") && $(\"#right-well\").children(\"#target4\").length > 0, 'One <code>button</code> element should have the id <code>target4</code>.')",
|
|
"assert($(\"#right-well\").children(\"#target5\") && $(\"#right-well\").children(\"#target5\").length > 0, 'One <code>button</code> element should have the id <code>target5</code>.')",
|
|
"assert($(\"#right-well\").children(\"#target6\") && $(\"#right-well\").children(\"#target6\").length > 0, 'One <code>button</code> element should have the id <code>target6</code>.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" <button class=\"btn btn-default target\"></button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"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 <code>button</code> elements text that corresponds to their <code>id</code>."
|
|
],
|
|
"tests": [
|
|
"assert(new RegExp(\"#target1\",\"gi\").test($(\"#target1\").text()), 'Give your <code>button</code> element with the id <code>target1</code> the text <code>#target1</code>.')",
|
|
"assert(new RegExp(\"#target2\",\"gi\").test($(\"#target2\").text()), 'Give your <code>button</code> element with the id <code>target2</code> the text <code>#target2</code>.')",
|
|
"assert(new RegExp(\"#target3\",\"gi\").test($(\"#target3\").text()), 'Give your <code>button</code> element with the id <code>target3</code> the text <code>#target3</code>.')",
|
|
"assert(new RegExp(\"#target4\",\"gi\").test($(\"#target4\").text()), 'Give your <code>button</code> element with the id <code>target4</code> the text <code>#target4</code>.')",
|
|
"assert(new RegExp(\"#target5\",\"gi\").test($(\"#target5\").text()), 'Give your <code>button</code> element with the id <code>target5</code> the text <code>#target5</code>.')",
|
|
"assert(new RegExp(\"#target6\",\"gi\").test($(\"#target6\").text()), 'Give your <code>button</code> element with the id <code>target6</code> the text <code>#target6</code>.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\"></button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\"></button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\"></button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\"></button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\"></button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\"></button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"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 <code><!--</code> and end a comment with <code>--></code>",
|
|
"Add a comment at the top of your HTML that says <code>You shouldn't need to modify code below this line</code>."
|
|
],
|
|
"tests": [
|
|
"assert(editor.match(/<!--/g) && editor.match(/<!--/g).length > 0, 'Start a comment with <code><!--</code>.')",
|
|
"assert(editor.match(/this line/g) && editor.match(/this line/g).length > 0, 'Your comment should have the text <code>You shouldn't need to modify code below this line</code>.')",
|
|
"assert(editor.match(/-->.*\\n+.+/g), 'Be sure to close your comment with <code>--></code>.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<div class=\"container-fluid\">",
|
|
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
|
" <div class=\"row\">",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#left-well</h4>",
|
|
" <div class=\"well\" id=\"left-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" <div class=\"col-xs-6\">",
|
|
" <h4>#right-well</h4>",
|
|
" <div class=\"well\" id=\"right-well\">",
|
|
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
|
|
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
|
|
" </div>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
}
|
|
]
|
|
}
|