finish drafting copy and tests for bootstrap section
Quincy Larson
parent
4e8337bfb3
commit
3a22e96754
|
|
@ -177,7 +177,6 @@
|
|||
"dashedName": "waypoint-center-text-with-bootstrap",
|
||||
"difficulty": 2,
|
||||
"description": [
|
||||
"Add Bootstrap's \"text-center\" class to your <code>h2</code> element.",
|
||||
"Now that we're using Bootstrap, we can center our heading elements to make them look better. All we need to do is add the class <code>text-center</code> to our <code>h1</code> and <code>h2</code> elements.",
|
||||
"Remember that you can add several classes to the same element by separating each of them with a space, like this: <code><h2 class=\"text-red text-center\">your text</h2></code>."
|
||||
],
|
||||
|
|
@ -261,8 +260,8 @@
|
|||
"dashedName": "waypoint-create-a-bootstrap-button",
|
||||
"difficulty": 3,
|
||||
"description": [
|
||||
"Create a new <code>button</code> element below your large kitten photo. Give it the class \"btn\" and the text of \"like this photo\".",
|
||||
"Bootstrap has its own styles for <code>button</code> elements, which look much better than the plain HTML ones."
|
||||
"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 \"btn\" and the text of \"like this photo\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('button').hasClass('btn'), 'Your new button should have the class \"btn\".')",
|
||||
|
|
@ -346,11 +345,11 @@
|
|||
"dashedName": "waypoint-create-a-block-element-bootstrap-button",
|
||||
"difficulty": 4,
|
||||
"description": [
|
||||
"Add Bootstrap's \"btn-block\" class to your Bootstrap button.",
|
||||
"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 \"inline\" elements and \"block-level\" elements:",
|
||||
"<img class='img-responsive' src='https://www.evernote.com/l/AHTFU358y71AV6mokPeuTEgrZVdUJ4A8v3AB/image.png' 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.'>",
|
||||
"Note that these buttons still need the \"btn\" class."
|
||||
"Note that these buttons still need the \"btn\" class.",
|
||||
"Add Bootstrap's \"btn-block\" class to your Bootstrap button."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('button').hasClass('btn'), 'Your button should still have the class \"btn\".')",
|
||||
|
|
@ -435,8 +434,8 @@
|
|||
"dashedName": "waypoint-taste-the-bootstrap-button-color-rainbow",
|
||||
"difficulty": 5,
|
||||
"description": [
|
||||
"Add Bootstrap's \"btn-primary\" class to your button.",
|
||||
"The \"btn-primary\" 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 \"btn-primary\" class to your button.",
|
||||
"Note that this button will still need the \"btn\" and \"btn-block\" classes."
|
||||
],
|
||||
"tests": [
|
||||
|
|
@ -522,8 +521,8 @@
|
|||
"dashedName": "waypoint-call-out-optional-actions-with-button-info",
|
||||
"difficulty": 6,
|
||||
"description": [
|
||||
"Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's \"btn-info\" and \"btn-block\" classes to it.",
|
||||
"Bootstrap comes with several pre-defined colors for buttons. The \"btn-info\" 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 \"btn-info\" and \"btn-block\" classes to it.",
|
||||
"Note that these buttons still need the \"btn\" and \"btn-block\" classes."
|
||||
],
|
||||
"tests": [
|
||||
|
|
@ -610,8 +609,8 @@
|
|||
"dashedName": "waypoint-warn-your-users-of-a-dangerous-action",
|
||||
"difficulty": 7,
|
||||
"description": [
|
||||
"Create a button with the text \"Delete\" and give it the class \"btn-danger\".",
|
||||
"Bootstrap comes with several pre-defined colors for buttons. The \"btn-danger\" 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 \"btn-danger\".",
|
||||
"Note that these buttons still need the \"btn\" and \"btn-block\" classes."
|
||||
],
|
||||
"tests": [
|
||||
|
|
@ -699,12 +698,12 @@
|
|||
"dashedName": "waypoint-use-the-bootstrap-grid-to-put-elements-side-by-side",
|
||||
"difficulty": 8,
|
||||
"description": [
|
||||
"Put the \"Like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping 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.",
|
||||
"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://getbootstrap.com/css/#grid-example-basic' target='_blank'><img class='img-responsive' src='https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png'></a>",
|
||||
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, \"md\" means \"medium\", and \"*\" 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 \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.",
|
||||
"Put the \"Like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping 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 \"row\" class is applied to a <code>div</code>, and the buttons themselves can be wrapped within it."
|
||||
],
|
||||
"tests": [
|
||||
|
|
@ -793,9 +792,9 @@
|
|||
"dashedName": "waypoint-ditch-custom-css-for-bootstrap",
|
||||
"difficulty": 9,
|
||||
"description": [
|
||||
"Delete the \".red-text\", \"p\", and \".smaller-image\" CSS declarations from your <code>style</code> element so that the only declarations left in your <code>style</code> element are \"h2\" and \"thick-green-border\". Then Delete the <code>p</code> element that contains a dead link. Then remove the \"red-text\" class from your <code>h2</code> element and replace it with the \"text-primary\" 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.",
|
||||
"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."
|
||||
"Don't worry - there will be plenty of time to customize our CSS later.",
|
||||
"Delete the \".red-text\", \"p\", and \".smaller-image\" CSS declarations from your <code>style</code> element so that the only declarations left in your <code>style</code> element are \"h2\" and \"thick-green-border\". Then Delete the <code>p</code> element that contains a dead link. Then remove the \"red-text\" class from your <code>h2</code> element and replace it with the \"text-primary\" 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'), 'You h2 element should no longer have the class \"red-text\".')",
|
||||
|
|
@ -892,13 +891,13 @@
|
|||
"dashedName": "waypoint-create-a-custom-heading",
|
||||
"difficulty": 11,
|
||||
"description": [
|
||||
"Wrap your first image and your <code>h2</code> element within a single <code><div class='row'></code> element. Wrap 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.",
|
||||
"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://getbootstrap.com/css/#grid' target='_blank'><img class='img-responsive' src='https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png'></a>",
|
||||
"Note that in this illustration, we use the \"col-md-*\" class. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, we're specifying how many columns wide an element should be on a medium-sized screen, such as a laptop.",
|
||||
"In the Cat Photo App that we're building, we'll use \"col-xs-*\", where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.",
|
||||
"Wrap your first image and your <code>h2</code> element within a single <code><div class='row'></code> element. Wrap 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": [
|
||||
|
|
@ -981,9 +980,8 @@
|
|||
"dashedName": "waypoint-add-font-awesome-icons-to-our-buttons",
|
||||
"difficulty": 12,
|
||||
"description": [
|
||||
"Use Font Awesome to add a \"thumbs-up\" icon to your like button by giving it a <code>i</code> element with the classes \"fa\" and \"fa-thumbs-up\".",
|
||||
"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.",
|
||||
"Go ahead and add a <code><i class=\"fa fa-thumbs-up\"></i></code> within your like button's element."
|
||||
"Use Font Awesome to add a \"thumbs-up\" icon to your like button by giving it a <code>i</code> element with the classes \"fa\" and \"fa-thumbs-up\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('i').hasClass('fa fa-thumbs-up'), 'Add an <code>i</code> element with the classes \"fa\" and \"fa-thumbs-up\".')",
|
||||
|
|
@ -1067,9 +1065,8 @@
|
|||
"dashedName": "waypoint-add-font-awesome-icons-to-all-of-our-Buttons",
|
||||
"difficulty": 13,
|
||||
"description": [
|
||||
"Use Font Awesome to add a \"info-circle\" icon to your info button and a \"trash\" icon to your delete button.",
|
||||
"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.",
|
||||
"Add <code><i class=\"fa fa-info-circle\"></i></code> within your info button's element, and a <code><i class=\"fa fa-trash\"></i></code> within your delete button."
|
||||
"Use Font Awesome to add a \"info-circle\" icon to your info button and a \"trash\" icon to your delete button."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('i').hasClass('fa fa-trash'), 'You should add a <code><i class=\"fa fa-trash\"></i></code> within your delete button element.')",
|
||||
|
|
@ -1153,8 +1150,8 @@
|
|||
"dashedName": "waypoint-responsively-style-radio-buttons",
|
||||
"difficulty": 14,
|
||||
"description": [
|
||||
"Wrap all of your radio buttons within a <code><div class='row'></code> element. Then wrap each of them within a <code><div class='col-xs-6'></code> element.",
|
||||
"You can use Bootstrap's \"col-xs-*\" 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."
|
||||
"You can use Bootstrap's \"col-xs-*\" 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.",
|
||||
"Wrap all of your radio buttons within a <code><div class='row'></code> element. Then wrap each of them within a <code><div class='col-xs-6'></code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('div.row:has(input[type=\\'radio\\'])').length > 0, 'Wrap all of your radio buttons inside one <code>div</code> with the class \"row\".')",
|
||||
|
|
@ -1238,8 +1235,8 @@
|
|||
"dashedName": "waypoint-responsively-style-checkboxes",
|
||||
"difficulty": 15,
|
||||
"description": [
|
||||
"Wrap all your checkboxes in a <code><div class='row'></code> element. Then wrap each of them in a <code><div class='col-xs-4'></code> element.",
|
||||
"You can use Bootstrap's \"col-xs-*\" 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."
|
||||
"You can use Bootstrap's \"col-xs-*\" 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.",
|
||||
"Wrap all your checkboxes in a <code><div class='row'></code> element. Then wrap each of them in a <code><div class='col-xs-4'></code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('div.row:has(input[type=\\'checkbox\\'])').length > 0, 'Wrap all of your checkboxes inside one <code>div</code> with the class \"row\".')",
|
||||
|
|
@ -1330,8 +1327,8 @@
|
|||
"dashedName": "waypoint-style-text-inputs-as-form-controls",
|
||||
"difficulty": 16,
|
||||
"description": [
|
||||
"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\".",
|
||||
"You can add the \"fa-paper-plane\" Font Awesome icon by adding <code><i class=\"fa fa-paper-plane\"></i></code> within your submit <code>button</code> element."
|
||||
"You can add the \"fa-paper-plane\" 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 \"form-control\". Give your form's submit button the classes \"btn btn-primary\". Also give this button the Font Awesome icon of \"fa-paper-plane\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('button[type=\\'submit\\']').hasClass('btn btn-primary'), 'Give the submit button in your form the classes \"btn btn-primary\".')",
|
||||
|
|
@ -1533,7 +1530,10 @@
|
|||
"dashedName": "waypoint-create-a-bootstrap-headline",
|
||||
"difficulty": 18,
|
||||
"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 \"jQuery Playground\".",
|
||||
"Color your <code>h3</code> element with the \"text-primary\" Bootstrap class, and center it with the \"text-center\" bootstrap class."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('h3') && $('h3').length > 0, 'Add a <code>h3</code> element to your page.')",
|
||||
|
|
@ -1565,7 +1565,8 @@
|
|||
"dashedName": "waypoint-house-our-page-within-a-bootstrap-container-fluid-div",
|
||||
"difficulty": 18,
|
||||
"description": [
|
||||
|
||||
"Now let's make sure all the content on your page is mobile-responsive.",
|
||||
"Let's wrap your <code>h3</code> element within a <code>div<code> element with the class \"containter-fluid\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('div').hasClass('container-fluid'), 'Your <code>div</code> element should have the class \"row\"')",
|
||||
|
|
@ -1594,9 +1595,11 @@
|
|||
"dashedName": "waypoint-create-a-bootstrap-row",
|
||||
"difficulty": 18.5,
|
||||
"description": [
|
||||
"Now we'll create a Bootstrap row for our inline elements.",
|
||||
"Create a <code>div</code> element with the class \"row\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('div').length > 0, 'Add a <code>div</code> element to your page.')",
|
||||
"assert($('div').length > 1, 'Add a <code>div</code> element to your page.')",
|
||||
"assert($('div').hasClass('row'), 'Your <code>div</code> element should have the class \"row\"')",
|
||||
"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.')"
|
||||
],
|
||||
|
|
@ -1625,6 +1628,8 @@
|
|||
"dashedName": "waypoint-split-your-bootstrap-row",
|
||||
"difficulty": 19,
|
||||
"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 \"col-xs-6\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('div.row').children('div.col-xs-6').length > 1, 'Wrap two <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
|
||||
|
|
@ -1655,6 +1660,8 @@
|
|||
"dashedName": "waypoint-create-bootstrap-wells",
|
||||
"difficulty": 20,
|
||||
"description": [
|
||||
"Bootstrap has a class called \"well\" that can create a visual sense of depth for your columns.",
|
||||
"Wrap one <code>div</code> element with the class \"well\" within each of your \"col-xs-6\" <code>div</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('div').length > 4, 'Add two <code>div</code> elements inside your <code>div class=\"row\"></code> element both with the class \"col-xs-6\"')",
|
||||
|
|
@ -1687,13 +1694,16 @@
|
|||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aec908849",
|
||||
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
|
||||
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
|
||||
"name": "Waypoint: Add Elements within your Bootstrap Wells",
|
||||
"dashedName": "waypoint-add-elements-within-your-bootstrap-wells",
|
||||
"difficulty": 21,
|
||||
"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.",
|
||||
"Wrap three <code>button</code> elements within each of your \"well\" <code>div</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
"assert($('div.well').children('button').length > 5, 'Wrap three <code>button</code> elements within each of your <code>div</code> elements with class \"well\".')",
|
||||
"assert($('button') && $('button').length > 5, 'You should have a total of 6 <code>button</code> elements.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class='container-fluid'>",
|
||||
|
|
@ -1724,13 +1734,16 @@
|
|||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aec908850",
|
||||
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
|
||||
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
|
||||
"name": "Waypoint: Apply the Default Bootstrap Button Style",
|
||||
"dashedName": "waypoint-apply-the-default-bootstrap-button-style",
|
||||
"difficulty": 22,
|
||||
"description": [
|
||||
"Bootstrap has another button class called \"btn-default\"",
|
||||
"Apply both the \"btn\" and \"btn-default\" classes to each of your <code>button</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
"assert($('.btn').length > 5, 'Apply the \"btn\" class to each of your <code>button</code> elements.')",
|
||||
"assert($('.btn').length > 5, 'Apply the \"btn-default\" class to each of your <code>button</code> elements.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class='container-fluid'>",
|
||||
|
|
@ -1767,13 +1780,15 @@
|
|||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aec908852",
|
||||
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
|
||||
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
|
||||
"name": "Waypoint: Create a Class to Target with jQuery Selectors",
|
||||
"dashedName": "waypoint-create-a-class-to-target-with-jquery-selectors",
|
||||
"difficulty": 23,
|
||||
"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 \"target\"."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
"assert($('.target').length > 5, 'Apply the \"target\" class to each of your <code>button</code> elements.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class='container-fluid'>",
|
||||
|
|
@ -1810,13 +1825,19 @@
|
|||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aec908853",
|
||||
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
|
||||
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
|
||||
"name": "Waypoint: Add ID Attributes to Bootstrap Elements",
|
||||
"dashedName": "waypoint-add-id-attributes-to-bootstrap-elements",
|
||||
"difficulty": 24,
|
||||
"description": [
|
||||
"Recall that in addition to class attributes, you can give each of your elements an id 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 \"well\".",
|
||||
"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 \"left-well\". Give the well on the right the id of \"right-well\"."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
"assert($('#left-well') && $('#left-well').length > 0, 'Give your left \"well\" the id of \"left-well\".')",
|
||||
"assert($('#left-well') && $('#left-well').length > 0, 'Give your right \"well\" the id of \"right-well\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class='container-fluid'>",
|
||||
|
|
@ -1853,13 +1874,18 @@
|
|||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aec908854",
|
||||
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
|
||||
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
|
||||
"name": "Waypoint: Label Boostrap Wells",
|
||||
"dashedName": "waypoint-label-bootstrap-wells",
|
||||
"difficulty": 25,
|
||||
"description": [
|
||||
"For the sake of clarity, let's label both of our wells with their ids.",
|
||||
"Above your left-well, inside its \"col-xs-6\" <code>div</code> element, add a <code>h4</code> element with the text \"#left-well\".",
|
||||
"Above your right-well, inside its \"col-xs-6\" <code>div</code> element, add a <code>h4</code> element with the text \"#right-well\"."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
"assert($('.col-xs-12').children('h4') && $('.col-xs-12').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 \"#left-well\".')",
|
||||
"assert(new RegExp('#right-well','gi').test($('h4').text()), 'One <code>h4</code> element should have the text \"#right-well\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class='container-fluid'>",
|
||||
|
|
@ -1896,13 +1922,20 @@
|
|||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aec908855",
|
||||
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
|
||||
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
|
||||
"name": "Waypoint: Give Each Element a Unique ID",
|
||||
"dashedName": "waypoint-give-each-element-a-unique-id",
|
||||
"difficulty": 26,
|
||||
"description": [
|
||||
"We will also want to be able to use jQuery to target each button by its unique id.",
|
||||
"Give each of your buttons a unique id like, starting with \"target1\" and ending with \"target6\"."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
"assert($('#target1') && $('#target1').length > 0, 'One <code>button</code> element should have the id \"#target1\".')",
|
||||
"assert($('#target2') && $('#target2').length > 0, 'One <code>button</code> element should have the id \"#target2\".')",
|
||||
"assert($('#target3') && $('#target3').length > 0, 'One <code>button</code> element should have the id \"#target3\".')",
|
||||
"assert($('#target4') && $('#target4').length > 0, 'One <code>button</code> element should have the id \"#target4\".')",
|
||||
"assert($('#target5') && $('#target5').length > 0, 'One <code>button</code> element should have the id \"#target5\".')",
|
||||
"assert($('#target6') && $('#target6').length > 0, 'One <code>button</code> element should have the id \"#target6\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class='container-fluid'>",
|
||||
|
|
@ -1941,13 +1974,20 @@
|
|||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aec908856",
|
||||
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
|
||||
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
|
||||
"name": "Waypoint: Label Bootstrap Buttons",
|
||||
"dashedName": "waypoint-label-bootstrap-buttons",
|
||||
"difficulty": 27,
|
||||
"description": [
|
||||
"Just like we labled our wells, we want to label our buttons.",
|
||||
"Give each of your buttons text that corresponds to their id."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
"assert(new RegExp('#target1','gi').test($('#target1').text()), 'Give your <code>button</code> element with the id \"target1\" the text \"#target1\".')",
|
||||
"assert(new RegExp('#target2','gi').test($('#target2').text()), 'Give your <code>button</code> element with the id \"target2\" the text \"#target2\".')",
|
||||
"assert(new RegExp('#target3','gi').test($('#target3').text()), 'Give your <code>button</code> element with the id \"target3\" the text \"#target3\".')",
|
||||
"assert(new RegExp('#target4','gi').test($('#target4').text()), 'Give your <code>button</code> element with the id \"target4\" the text \"#target4\".')",
|
||||
"assert(new RegExp('#target5','gi').test($('#target5').text()), 'Give your <code>button</code> element with the id \"target5\" the text \"#target5\".')",
|
||||
"assert(new RegExp('#target6','gi').test($('#target6').text()), 'Give your <code>button</code> element with the id \"target6\" the text \"#target6\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class='container-fluid'>",
|
||||
|
|
@ -1990,10 +2030,15 @@
|
|||
"dashedName": "waypoint-use-comments-to-clarify-code",
|
||||
"difficulty": 28,
|
||||
"description": [
|
||||
"add <!-- You shouldn't need to modify code below this line -->"
|
||||
"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).length > 1, 'Start a comment with <code><!--</code>.')",
|
||||
"assert(editor.match(/this line/g).length > 1, 'Your comment should have the text <code>You shouldn't need to modify code below this line</code>')",
|
||||
"assert(editor.match(/-->/g).length > 1, 'Be sure to close your comment with <code>--></code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class='container-fluid'>",
|
||||
|
|
|
|||
Loading…
Reference in New Issue