gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/staging' into staging

Browse Source
This commit is contained in:
benmcmahon100
2015-07-31 19:54:00 +01:00
parent a827e2c846 08d2b373ac
commit f759d9fc24
4 changed files with 719 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
challenges/bootstrap.json
View File

@ -6,7 +6,7 @@
"id": "bad87fee1348bd9acde08712",
"name": "Waypoint: Use Responsive Design with Bootstrap Fluid Containers",
"dashedName": "waypoint-use-responsive-design-with-bootstrap-fluid-containers",
"difficulty": 1,
"difficulty": 2.01,
"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>.",
@ -90,7 +90,7 @@
"id": "bad87fee1348bd9acde08812",
"name": "Waypoint: Make Images Mobile Responsive",
"dashedName": "waypoint-make-images-mobile-responsive",
"difficulty": 1,
"difficulty": 2.02,
"description": [
"First, Add a new image with the <code>src</code> attribute of \"http://bit.ly/fcc-kittens2\".",
"It would be great if this image could be exactly the width of our phone's screen.",
@ -175,9 +175,8 @@
"id": "bad87fee1348bd8acde08812",
"name": "Waypoint: Center Text with Bootstrap",
"dashedName": "waypoint-center-text-with-bootstrap",
"difficulty": 2,
"difficulty": 2.03,
"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>&#60h2 class=\"text-red text-center\"&#62your text&#60/h2&#62</code>."
],
@ -259,10 +258,10 @@
"id": "bad87fee1348cd8acdf08812",
"name": "Waypoint: Create a Bootstrap Button",
"dashedName": "waypoint-create-a-bootstrap-button",
"difficulty": 3,
"difficulty": 2.04,
"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\".')",
@ -344,13 +343,13 @@
"id": "bad87fee1348cd8acef08812",
"name": "Waypoint: Create a Block Element Bootstrap Button",
"dashedName": "waypoint-create-a-block-element-bootstrap-button",
"difficulty": 4,
"difficulty": 2.05,
"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\".')",
@ -433,10 +432,10 @@
"id": "bad87fee1348cd8acef08811",
"name": "Waypoint: Taste the Bootstrap Button Color Rainbow",
"dashedName": "waypoint-taste-the-bootstrap-button-color-rainbow",
"difficulty": 5,
"difficulty": 2.06,
"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": [
@ -520,10 +519,10 @@
"id": "bad87fee1348cd8acef08813",
"name": "Waypoint: Call out Optional Actions with Button Info",
"dashedName": "waypoint-call-out-optional-actions-with-button-info",
"difficulty": 6,
"difficulty": 2.07,
"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": [
@ -608,10 +607,10 @@
"id": "bad87fee1348ce8acef08814",
"name": "Waypoint: Warn your Users of a Dangerous Action",
"dashedName": "waypoint-warn-your-users-of-a-dangerous-action",
"difficulty": 7,
"difficulty": 2.08,
"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": [
@ -697,14 +696,14 @@
"id": "bad88fee1348ce8acef08815",
"name": "Waypoint: Use the Bootstrap Grid to Put Elements Side By Side",
"dashedName": "waypoint-use-the-bootstrap-grid-to-put-elements-side-by-side",
"difficulty": 8,
"difficulty": 2.09,
"description": [
"Put the \"Like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping all three of them within one <code>&#60;div class=\"row\"&#62;</code> element, then each of them within a <code>&#60;div class=\"col-xs-4\"&#62;</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>&#60;div class=\"row\"&#62;</code> element, then each of them within a <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
"The \"row\" class is applied to a <code>div</code>, and the buttons themselves can be wrapped within it."
],
"tests": [
@ -791,11 +790,11 @@
"id": "bad87fee1348bd9aedf08845",
"name": "Waypoint: Ditch Custom CSS for Bootstrap",
"dashedName": "waypoint-ditch-custom-css-for-bootstrap",
"difficulty": 9,
"difficulty": 2.10,
"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\".')",
@ -890,15 +889,15 @@
"id": "bad87fee1348bd9aede08845",
"name": "Waypoint: Create a Custom Heading",
"dashedName": "waypoint-create-a-custom-heading",
"difficulty": 11,
"difficulty": 2.11,
"description": [
"Wrap your first image and your <code>h2</code> element within a single <code>&#60;div class='row'&#62;</code> element. Wrap your <code>h2</code> text within a <code>&#60;div class='col-xs-8'&#62;</code> and your image in a <code>&#60;div class='col-xs-4'&#62;</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>&#60;div class='row'&#62;</code> element. Wrap your <code>h2</code> text within a <code>&#60;div class='col-xs-8'&#62;</code> and your image in a <code>&#60;div class='col-xs-4'&#62;</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": [
@ -979,11 +978,10 @@
"id": "bad87fee1348bd9aedd08845",
"name": "Waypoint: Add Font Awesome Icons to our Buttons",
"dashedName": "waypoint-add-font-awesome-icons-to-our-buttons",
"difficulty": 12,
"difficulty": 2.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>&#60;i class=\"fa fa-thumbs-up\"&#62;&#60;/i&#62;</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\".')",
@ -1065,11 +1063,10 @@
"id": "bad87fee1348bd9aedc08845",
"name": "Waypoint: Add Font Awesome Icons to all of our Buttons",
"dashedName": "waypoint-add-font-awesome-icons-to-all-of-our-Buttons",
"difficulty": 13,
"difficulty": 2.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>&#60;i class=\"fa fa-info-circle\"&#62;&#60;/i&#62;</code> within your info button's element, and a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</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>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</code> within your delete button element.')",
@ -1151,10 +1148,10 @@
"id": "bad87fee1348bd9aedb08845",
"name": "Waypoint: Responsively Style Radio Buttons",
"dashedName": "waypoint-responsively-style-radio-buttons",
"difficulty": 14,
"difficulty": 2.14,
"description": [
"Wrap all of your radio buttons within a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them within a <code>&#60;div class='col-xs-6'&#62;</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>&#60;div class='row'&#62;</code> element. Then wrap each of them within a <code>&#60;div class='col-xs-6'&#62;</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\".')",
@ -1236,10 +1233,10 @@
"id": "bad87fee1348bd9aeda08845",
"name": "Waypoint: Responsively Style Checkboxes",
"dashedName": "waypoint-responsively-style-checkboxes",
"difficulty": 15,
"difficulty": 2.15,
"description": [
"Wrap all your checkboxes in a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them in a <code>&#60;div class='col-xs-4'&#62;</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>&#60;div class='row'&#62;</code> element. Then wrap each of them in a <code>&#60;div class='col-xs-4'&#62;</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\".')",
@ -1328,10 +1325,10 @@
"id": "bad87fee1348bd9aed908845",
"name": "Waypoint: Style Text Inputs as Form Controls",
"dashedName": "waypoint-style-text-inputs-as-form-controls",
"difficulty": 16,
"difficulty": 2.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>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> within your submit <code>button</code> element."
"You can add the \"fa-paper-plane\" Font Awesome icon by adding <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</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\".')",
@ -1429,7 +1426,7 @@
"id": "bad87fee1348bd9aec908845",
"name": "Waypoint: Line up Form Elements Responsively with Bootstrap",
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
"difficulty": 17,
"difficulty": 2.17,
"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 \"row\", and other <code>div</code> elements within it using the \"col-xs-*\" class.",
"Wrap both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class \"row\". Wrap your form's text <code>input</code> within a div with the class of \"col-xs-7\". Wrap your form's submit <code>button</code> in a <code>div</code> with the class \"col-xs-5\".",
@ -1531,9 +1528,12 @@
"id": "bad87fee1348bd9aec908846",
"name": "Waypoint: Create a Bootstrap Headline",
"dashedName": "waypoint-create-a-bootstrap-headline",
"difficulty": 18,
"difficulty": 2.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.')",
@ -1563,9 +1563,10 @@
"id": "bad87fee1348bd9aec908746",
"name": "Waypoint: House our page within a Bootstrap Container Fluid Div",
"dashedName": "waypoint-house-our-page-within-a-bootstrap-container-fluid-div",
"difficulty": 18,
"difficulty": 2.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\"')",
@ -1592,11 +1593,13 @@
"id": "bad87fee1348bd9bec908846",
"name": "Waypoint: Create a Bootstrap Row",
"dashedName": "waypoint-create-a-bootstrap-row",
"difficulty": 18.5,
"difficulty": 2.19,
"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.')"
],
@ -1623,8 +1626,10 @@
"id": "bad87fee1348bd9aec908847",
"name": "Waypoint: Split your Bootstrap Row",
"dashedName": "waypoint-split-your-bootstrap-row",
"difficulty": 19,
"difficulty": 2.20,
"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.')",
@ -1653,8 +1658,10 @@
"id": "bad87fee1348bd9aec908848",
"name": "Waypoint: Create Bootstrap Wells",
"dashedName": "waypoint-create-bootstrap-wells",
"difficulty": 20,
"difficulty": 2.21,
"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",
"difficulty": 21,
"name": "Waypoint: Add Elements within your Bootstrap Wells",
"dashedName": "waypoint-add-elements-within-your-bootstrap-wells",
"difficulty": 2.22,
"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",
"difficulty": 22,
"name": "Waypoint: Apply the Default Bootstrap Button Style",
"dashedName": "waypoint-apply-the-default-bootstrap-button-style",
"difficulty": 2.23,
"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",
"difficulty": 23,
"name": "Waypoint: Create a Class to Target with jQuery Selectors",
"dashedName": "waypoint-create-a-class-to-target-with-jquery-selectors",
"difficulty": 2.24,
"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",
"difficulty": 24,
"name": "Waypoint: Add ID Attributes to Bootstrap Elements",
"dashedName": "waypoint-add-id-attributes-to-bootstrap-elements",
"difficulty": 2.25,
"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>&#60;div class=\"well\" id=\"center-well\"&#62;</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",
"difficulty": 25,
"name": "Waypoint: Label Boostrap Wells",
"dashedName": "waypoint-label-bootstrap-wells",
"difficulty": 2.26,
"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>&#60;div class='col-xs-6'&#62;</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",
"difficulty": 26,
"name": "Waypoint: Give Each Element a Unique ID",
"dashedName": "waypoint-give-each-element-a-unique-id",
"difficulty": 2.27,
"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",
"difficulty": 27,
"name": "Waypoint: Label Bootstrap Buttons",
"dashedName": "waypoint-label-bootstrap-buttons",
"difficulty": 2.28,
"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'>",
@ -1988,12 +2028,17 @@
"id": "bad87fee1348bd9aec908857",
"name": "Waypoint: Use Comments to Clarify Code",
"dashedName": "waypoint-use-comments-to-clarify-code",
"difficulty": 28,
"difficulty": 2.29,
"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>&#60;!--</code> and end a comment with <code>--&#62;</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>&#60;!--</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>--&#62;</code>.')"
],
"challengeSeed": [
"<div class='container-fluid'>",

18
challenges/get-set-for-free-code-camp.json
View File

@ -6,7 +6,7 @@
"id": "bd7124d8c441eddfaeb5bdef",
"name": "Waypoint: Learn how Free Code Camp Works",
"dashedName": "waypoint-learn-how-free-code-camp-works",
"difficulty": 0.001,
"difficulty": 0.01,
"challengeSeed": ["125407438"],
"description": [
"Watch this 1-minute video, or simply read this summary:",
@ -55,7 +55,7 @@
"id": "bd7125d8c441eddfaeb5bd0f",
"name": "Waypoint: Join Our Chat Room",
"dashedName": "waypoint-join-our-chat-room",
"difficulty": 0.002,
"difficulty": 0.02,
"challengeSeed": ["131574135"],
"description": [
"Now we're going to join the Free Code Camp chat room. You can come here any time of day to hang out, ask questions, or find another camper to pair program with.",
@ -115,7 +115,7 @@
"id": "bd7125d8c441eddfaeb5bdff",
"name": "Waypoint: Preview our Challenge Map",
"dashedName": "waypoint-preview-our-challenge-map",
"difficulty": 0.003,
"difficulty": 0.03,
"challengeSeed": ["125407437"],
"description": [
"Before you start learning how to code, we'd like to introduce you to a few things.",
@ -158,7 +158,7 @@
"id": "bd7125d8c441eddfaeb5bd1f",
"name": "Waypoint: Browse our Wiki",
"dashedName": "waypoint-browse-our-wiki",
"difficulty": 0.004,
"difficulty": 0.04,
"challengeSeed": ["125407435"],
"description": [
"Free Code Camp has an up-to-date wiki that will answer your many questions.",
@ -201,7 +201,7 @@
"id": "bd7125d8c441eddfaeb5bd2f",
"name": "Waypoint: Customize your Portfolio Page",
"dashedName": "waypoint-customize-your-portfolio-page",
"difficulty": 0.005,
"difficulty": 0.05,
"challengeSeed": ["125407433"],
"description": [
"You and all your fellow campers have portfolio pages.",
@ -247,7 +247,7 @@
"id": "bd7126d8c441eddfaeb5bd3f",
"name": "Waypoint: Try Camper News",
"dashedName": "waypoint-try-camper-news",
"difficulty": 0.006,
"difficulty": 0.06,
"challengeSeed": ["124553410"],
"description": [
"Camper News is the best place for our campers to share and discuss helpful links.",
@ -299,7 +299,7 @@
"id": "bd7126d8c441eddfaeb5bd3e",
"name": "Waypoint: Meet Other Campers in your City",
"dashedName": "waypoint-meet-other-campers-in-your-city",
"difficulty": 0.007,
"difficulty": 0.07,
"challengeSeed": ["127358841"],
"description": [
"One of the best ways to stay motivated when learning to code is to hang out with other campers.",
@ -348,7 +348,7 @@
"id": "bd7126d8c431eddfaeb5bd3e",
"name": "Waypoint: Add Free Code Camp to your LinkedIn Profile",
"dashedName": "waypoint-add-free-code-camp-to-your-linkedin-profile",
"difficulty": 0.008,
"difficulty": 0.08,
"challengeSeed": ["131574134"],
"description": [
"LinkedIn is a critical tool for your job search later on.",
@ -379,7 +379,7 @@
"id": "bd7137d8c441eddfaeb5bdef",
"name": "Waypoint: Get Help the Hacker Way with RSAP",
"dashedName": "waypoint-get-help-the-hacker-way-with-rsap",
"difficulty": 0.009,
"difficulty": 0.09,
"challengeSeed": ["125407432"],
"description": [
"Let's cover one last thing before you start working through our lessons: how to get help.",

140
challenges/html5-and-css.json
View File

@ -6,7 +6,7 @@
"id": "bd7123c8c441eddfaeb5bdef",
"name": "Waypoint: Say Hello to HTML Elements",
"dashedName": "waypoint-say-hello-to-html-elements",
"difficulty": 0.001,
"difficulty": 1.01,
"description": [
"Welcome to Free Code Camp's first coding challenge!",
"You can edit <code>code</code> in your <code>text editor</code>, which we've embedded into this web page.",
@ -55,7 +55,7 @@
"id": "bad87fee1348bd9aedf0887a",
"name": "Waypoint: Headline with the h2 Element",
"dashedName": "waypoint-headline-with-the-h2-element",
"difficulty": 0.002,
"difficulty": 1.02,
"description": [
"Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element.",
"The <code>h2</code> element you enter will create an <code>h2</code> element on the website.",
@ -99,7 +99,7 @@
"id": "bad87fee1348bd9aedf08801",
"name": "Waypoint: Inform with the Paragraph Element",
"dashedName": "waypoint-inform-with-the-paragraph-element",
"difficulty": 0.003,
"difficulty": 1.03,
"description": [
"Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\".",
"<code>p</code> elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
@ -140,7 +140,7 @@
"id": "bad87fee1348bd9aedf08802",
"name": "Waypoint: Uncomment HTML",
"dashedName": "waypoint-uncomment-html",
"difficulty": 0.005,
"difficulty": 1.04,
"description": [
"Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements.",
"Commenting is a way that you can leave comments within your code without affecting the code itself.",
@ -190,7 +190,7 @@
"id": "bad87fee1348bd9aedf08804",
"name": "Waypoint: Comment out HTML",
"dashedName": "waypoint-comment-out-html",
"difficulty": 0.006,
"difficulty": 1.05,
"description": [
"Comment out your <code>h1</code> element and your <code>p</code> element, but leave your <code>h2</code> element uncommented.",
"Remember that in order to start a comment, you need to use <code>&#60;!--</code> and to end a comment, you need to use <code>--&#62;</code>.",
@ -237,7 +237,7 @@
"id": "bad87fee1348bd9aedf08833",
"name": "Waypoint: Fill in the Blank with Placeholder Text",
"dashedName": "waypoint-fill-in-the-blank-with-placeholder-text",
"difficulty": 0.007,
"difficulty": 1.06,
"description": [
"Web developers traditionally use \"Lorem Ipsum\" text as placeholder text. It's called \"Lorem Ipsum\" text because those are the first two words of a famous passage by Cicero of Ancient Rome.",
"\"Lorem Ipsum\" text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
@ -284,7 +284,7 @@
"id": "bad87fed1348bd9aedf08833",
"name": "Waypoint: Delete HTML Elements",
"dashedName": "waypoint-delete-html-elements",
"difficulty": 0.008,
"difficulty": 1.07,
"description": [
"Delete your <code>h1</code> element so we can simplify our view.",
"Our phone doesn't have much vertical space.",
@ -328,7 +328,7 @@
"id": "bad87fee1348bd9aedf08803",
"name": "Waypoint: Change the Color of Text",
"dashedName": "waypoint-change-the-color-of-text",
"difficulty": 0.009,
"difficulty": 1.08,
"description": [
"Change your <code>h2</code> element's style so that its text color is red.",
"We can do this by changing the \"style\" of your <code>h2</code> element.",
@ -370,7 +370,7 @@
"id": "bad87fee1348bd9aedf08805",
"name": "Waypoint: Use CSS Selectors to Style Elements",
"dashedName": "waypoint-use-css-selectors-to-style-elements",
"difficulty": 0.010,
"difficulty": 1.09,
"description": [
"Delete your <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue.",
"With CSS, there are hundreds of CSS \"attributes\" that you can use to change the way an element looks on your page.",
@ -425,7 +425,7 @@
"id": "bad87fee1348bd9aecf08806",
"name": "Waypoint: Use a CSS Class to Style an Element",
"dashedName": "waypoint-use-a-css-class-to-style-an-element",
"difficulty": 0.011,
"difficulty": 1.11,
"description": [
"Create a CSS class called \"red-text\" and apply it to your <code>h2</code> element.",
"Classes are reusable styles that can be added to HTML elements.",
@ -479,7 +479,7 @@
"id": "bad87fee1348bd9aefe08806",
"name": "Waypoint: Style Multiple Elements with a CSS Class",
"dashedName": "waypoint－style－multiple-elements-with-a-css-class",
"difficulty": 0.012,
"difficulty": 1.12,
"description": [
"Apply the \"red-text\" class to your <code>h2</code> and <code>p</code> elements.",
"Remember that you can attach classes to HTML elements by using <code>class=\"your-class-here\"</code> within the relevant element's opening tag.",
@ -524,7 +524,7 @@
"id": "bad87fee1348bd9aedf08806",
"name": "Waypoint: Change the Font Size of an Element",
"dashedName": "waypoint-change-the-font-size-of-an-element",
"difficulty": 0.013,
"difficulty": 1.13,
"description": [
"Create a second <code>p</code> element with the following Kitty Ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
"Then, inside your <code>&#60;style&#62;</code> element, set the \"font-size\" of all <code>p</code> elements to 16 pixels.",
@ -571,7 +571,7 @@
"id": "bad87fee1348bd9aede08807",
"name": "Waypoint: Set the Font Family of an Element",
"dashedName": "waypoint-set-the-font-family-of-an-element",
"difficulty": 0.014,
"difficulty": 1.14,
"description": [
"Make all of your <code>p</code> elements use the \"Monospace\" font.",
"You can set an element's font by using the \"font-family\" attribute.",
@ -618,7 +618,7 @@
"id": "bad87fee1348bd9aedf08807",
"name": "Waypoint: Import a Google Font",
"dashedName": "waypoint-import-a-google-font",
"difficulty": 0.015,
"difficulty": 1.15,
"description": [
"Apply the <code>font-family</code> of \"Lobster\" to your <code>h2</code> element.",
"First, you'll need to make a \"call\" to Google to grab the \"Lobster\" font and load it into your HTML.",
@ -672,7 +672,7 @@
"id": "bad87fee1348bd9aedf08808",
"name": "Waypoint: Specify How Fonts Should Degrade",
"dashedName": "waypoint-specify-how-fonts-should-degrade",
"difficulty": 0.016,
"difficulty": 1.16,
"description": [
"There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". Leave \"Lobster\" as the font-family for your <code>h2</code> elements. Make them \"degrade\" to \"Monospace\" when \"Lobster\" isn't available.",
"For example, if you wanted an element to use the \"Helvetica\" font, but also degrade to the \"Sans-Serif\" font when \"Helvetica\" wasn't available, you could use this CSS style: <code>p { font-family: Helvetica, Sans-Serif; }</code>.",
@ -730,7 +730,7 @@
"id": "bad87fee1348bd9aedf08812",
"name": "Waypoint: Add Images to your Website",
"dashedName": "waypoint-add-images-to-your-website",
"difficulty": 0.017,
"difficulty": 1.17,
"description": [
"You can add images to your website by using the <code>img</code> element, and point to an specific image's URL using the <code>src</code> attribute.",
"An example of this would be <code>&#60img src=\"www.your-image-source.com/your-image.jpg\"/&#62</code>. Note that in most cases, <code>img</code> elements are self-closing.",
@ -785,7 +785,7 @@
"id": "bad87fee1348bd9acdf08812",
"name": "Waypoint: Size your Images",
"dashedName": "waypoint-size-your-images",
"difficulty": 0.018,
"difficulty": 1.18,
"description": [
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the image's width.",
"For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <code>&#60;style&#62; .larger-image { width: 500px; } &#60;/style&#62;</code>.",
@ -841,7 +841,7 @@
"id": "bad87fee1348bd9bedf08813",
"name": "Waypoint: Add Borders Around your Elements",
"dashedName": "waypoint-add-borders-around-your-elements",
"difficulty": 0.019,
"difficulty": 1.19,
"description": [
"CSS borders have attributes like style, color and width.",
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code>&#60;style&#62; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#60;/style&#62;</code>.",
@ -904,7 +904,7 @@
"id": "bad87fee1348bd9aedf08814",
"name": "Waypoint: Add Rounded Corners with a Border Radius",
"dashedName": "waypoint-add-rounded-corners-with-a-border-radius",
"difficulty": 0.020,
"difficulty": 1.20,
"description": [
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.",
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels.",
@ -970,7 +970,7 @@
"id": "bad87fee1348bd9aedf08815",
"name": "Waypoint: Make Circular Images with a Border Radius",
"dashedName": "waypoint-make-circular-images-with-a-border-radius",
"difficulty": 0.021,
"difficulty": 1.21,
"description": [
"In addition to pixels, you can also specify a <code>border-radius</code> using a percentage.",
"Give your cat photo a <code>border-radius</code> of 50%."
@ -1035,7 +1035,7 @@
"id": "bad87fee1348bd9aedf08816",
"name": "Waypoint: Link to External Pages with Anchor Elements",
"dashedName": "waypoint-link-to-external-pages-with-anchor-elements",
"difficulty": 0.022,
"difficulty": 1.22,
"description": [
"<code>a</code> elements or \"anchor\" elements, are used to link to content outside of the current page.",
"Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
@ -1106,7 +1106,7 @@
"id": "bad87fee1348bd9aede08817",
"name": "Waypoint: Wrap an Anchor Element within a Paragraph",
"dashedName": "waypoint-wrap-an-anchor-element-within-a-paragraph",
"difficulty": 0.023,
"difficulty": 1.23,
"description": [
"Again, here's a diagram of an <code>a</code> element for your reference:",
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
@ -1181,7 +1181,7 @@
"id": "bad87fee1348bd9aedf08817",
"name": "Waypoint: Make Dead Links using the Hash Symbol",
"dashedName": "waypoint-make-dead-links-using-the-hash-symbol",
"difficulty": 0.024,
"difficulty": 1.24,
"description": [
"Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
"This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
@ -1250,7 +1250,7 @@
"id": "bad87fee1348bd9aedf08820",
"name": "Waypoint: Turn an Image into a Link",
"dashedName": "waypoint-turn-an-image-into-a-link",
"difficulty": 0.025,
"difficulty": 1.25,
"description": [
"You can make elements into links by wrapping them within an <code>a</code> element.",
"Wrap your image within an <code>a</code> element. Here's an example: <code>&#60;a href='#'&#62;&#60;img src='http://bit.ly/fcc-kittens2'/&#62;&#60;/a&#62;</code>.",
@ -1323,7 +1323,7 @@
"id": "bad87fee1348bd9aedf08818",
"name": "Waypoint: Add Alt Text to an Image for Accessibility",
"dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility",
"difficulty": 0.026,
"difficulty": 1.26,
"description": [
"<code>alt</code> attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at <code>alt</code> attributes.",
"In short, every image should have an <code>alt</code> attribute!",
@ -1394,7 +1394,7 @@
"id": "bad87fee1348bd9aedf08827",
"name": "Waypoint: Create a Bulleted Unordered List",
"dashedName": "waypoint-create-a-bulleted-unordered-list",
"difficulty": 0.027,
"difficulty": 1.27,
"description": [
"HTML has a special element for creating unordered lists, or bullet point-style lists.",
"Unordered lists start with a <code>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
@ -1467,7 +1467,7 @@
"id": "bad87fee1348bd9aedf08828",
"name": "Waypoint: Create an Ordered List",
"dashedName": "waypoint-create-an-ordered-list",
"difficulty": 0.028,
"difficulty": 1.28,
"description": [
"HTML has a special element for creating ordered lists, or numbered-style lists.",
"Ordered lists start with a <code>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
@ -1547,7 +1547,7 @@
"id": "bad87fee1348bd9aedf08829",
"name": "Waypoint: Create a Text Field",
"dashedName": "waypoint-create-a-text-field",
"difficulty": 0.029,
"difficulty": 1.29,
"description": [
"Now let's create a web form.",
"Text inputs are a convenient way to get input from your user.",
@ -1626,7 +1626,7 @@
"id": "bad87fee1348bd9aedf08830",
"name": "Waypoint: Add Placeholder Text to a Text Field",
"dashedName": "waypoint-add-placeholder-text-to-a-text-field",
"difficulty": 0.030,
"difficulty": 1.30,
"description": [
"Your placeholder text is what appears in your text <code>input</code> before your user has inputed anything.",
"You can create placeholder text like so: <code>&#60;input type='text' placeholder='this is placeholder text'&#62;</code>.",
@ -1706,7 +1706,7 @@
"id": "bad87fee1348bd9aede08830",
"name": "Waypoint: Create a Form Element",
"dashedName": "waypoint-create-a-form-element",
"difficulty": 0.031,
"difficulty": 1.31,
"description": [
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
"For example: <code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>.",
@ -1788,7 +1788,7 @@
"id": "bad87fee1348bd9aedd08830",
"name": "Waypoint: Add a Submit Button to a Form",
"dashedName": "waypoint-add-a-submit-button-to-a-form",
"difficulty": 0.032,
"difficulty": 1.32,
"description": [
"Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
"Here's an example submit button: <code>&#60;button type='submit'&#62;this button submits the form&#60;/button&#62;</code>.",
@ -1872,7 +1872,7 @@
"id": "bad87fee1348bd9aedc08830",
"name": "Waypoint: Use HTML5 to Require a Field",
"dashedName": "waypoint-use-html5-to-require-a-field",
"difficulty": 0.033,
"difficulty": 1.33,
"description": [
"You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.",
"For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element, you would use: <code>&#60;input type='text' required&#62;</code>.",
@ -1954,7 +1954,7 @@
"id": "bad87fee1348bd9aedf08834",
"name": "Waypoint: Create a Set of Radio Buttons",
"dashedName": "waypoint-create-a-set-of-radio-buttons",
"difficulty": 0.034,
"difficulty": 1.34,
"description": [
"You can use \"radio buttons\" for questions where you want the user to only give you one answer.",
"Radio buttons are a type of <code>input</code>.",
@ -2047,7 +2047,7 @@
"id": "bad87fee1348bd9aedf08835",
"name": "Waypoint: Create a Set of Checkboxes",
"dashedName": "waypoint-create-a-set-of-checkboxes",
"difficulty": 0.035,
"difficulty": 1.35,
"description": [
"Forms commonly use \"checkboxes\" for questions that may have more than one answer.",
"Checkboxes are a type of <code>input</code>.",
@ -2137,7 +2137,7 @@
"id": "bad87fee1348bd9aedd08835",
"name": "Waypoint: Check Radio Buttons and Checkboxes by Default",
"dashedName": "waypoint-check-radio-buttons-and-checkboxes-by-default",
"difficulty": 0.037,
"difficulty": 1.37,
"description": [
"You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
"To do this, just add the word \"checked\" to the inside of an input element. For example, <code>&#60;input type='radio' name='test-name' checked&#62;</code>.",
@ -2225,7 +2225,7 @@
"id": "bad87fee1348bd9aede08835",
"name": "Waypoint: Wrap Many Elements within a Single Div Element",
"dashedName": "waypoint-wrap-many-elements-within-a-single-div-element",
"difficulty": 0.038,
"difficulty": 1.38,
"description": [
"The <code>div</code> element, or \"Division\" element, is a general purpose container for other elements.",
"The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
@ -2320,7 +2320,7 @@
"id": "bad87fed1348bd9aede07836",
"name": "Waypoint: Give a Background Color to a Div Element",
"dashedName": "waypoint-give-a-background-color-to-a-div-element",
"difficulty": 0.039,
"difficulty": 1.39,
"description": [
"You can set an element's background color with the \"background-color\" attribute.",
"For example, if you wanted an element's background color to be \"green\", you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.",
@ -2411,7 +2411,7 @@
"id": "bad87fee1348bd9aede07836",
"name": "Waypoint: Give a Background Color to a Div Element",
"dashedName": "waypoint-give-a-background-color-to-a-div-element",
"difficulty": 0.039,
"difficulty": 1.39,
"description": [
"You can set an element's background color with the \"background-color\" attribute.",
"For example, if you wanted an element's background color to be \"green\", you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.",
@ -2502,7 +2502,7 @@
"id": "bad87eee1348bd9aede07836",
"name": "Waypoint: Set the ID of an Element",
"dashedName": "waypoint-set-the-id-of-an-element",
"difficulty": 0.0391,
"difficulty": 1.391,
"description": [
"In addition to classes, each HTML element can also have an <code>id</code> attribute.",
"There are several benefits to using <code>id</code> attributes, and you'll learn more about them once you start using jQuery.",
@ -2590,7 +2590,7 @@
"id": "bad87dee1348bd9aede07836",
"name": "Waypoint: Use an ID Attribute to Style an Element",
"dashedName": "waypoint-use-an-id-attribute-to-style-an-element",
"difficulty": 0.0392,
"difficulty": 1.392,
"description": [
"One cool thing about <code>id</code> attributes is that, like classes, you can style them using CSS.",
"Here's an example of how you can take your element with the <code>id</code> attribute of \"cat-photo-element\" and give it the background color of green. In your <code>style</code> element: <code>#cat-photo-element { background-color: green; }></code>",
@ -2680,7 +2680,7 @@
"id": "bad88fee1348bd9aedf08825",
"name": "Waypoint: Adjusting the Padding of an Element",
"dashedName": "waypoint-adjusting-the-padding-of-an-element",
"difficulty": 0.040,
"difficulty": 1.40,
"description": [
"You may have already noticed this, but all HTML elements are essentially little rectangles.",
"Three important attributes control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
@ -2751,7 +2751,7 @@
"id": "bad87fee1348bd9aedf08822",
"name": "Waypoint: Adjust the Margin of an Element",
"dashedName": "waypoint-adjust-the-margin-of-an-element",
"difficulty": 0.041,
"difficulty": 1.41,
"description": [
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>margin</code> than the green box, making it appear smaller.",
@ -2822,7 +2822,7 @@
"id": "bad87fee1348bd9aedf08823",
"name": "Waypoint: Add a Negative Margin to an Element",
"dashedName": "waypoint-add-a-negative-margin-to-an-element",
"difficulty": 0.042,
"difficulty": 1.42,
"description": [
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
"If you set an element's <code>margin</code> to a negative value, the element will grow larger.",
@ -2892,7 +2892,7 @@
"id": "bad87fee1348bd9aedf08824",
"name": "Waypoint: Add Different Padding to Each Side of an Element",
"dashedName": "waypoint-add-different-padding-to-each-side-of-an-element",
"difficulty": 0.043,
"difficulty": 1.43,
"description": [
"Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.",
"CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes.",
@ -2964,7 +2964,7 @@
"id": "bad87fee1248bd9aedf08824",
"name": "Waypoint: Add Different Margins to Each Side of an Element",
"dashedName": "waypoint-add-different-margins-to-each-side-of-an-element",
"difficulty": 0.044,
"difficulty": 1.44,
"description": [
"Give the green box a <code>margin</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.",
@ -3035,7 +3035,7 @@
"id": "bad87fee1348bd9aedf08826",
"name": "Waypoint: Use Clockwise Notation to Specify the Padding of an Element",
"dashedName": "waypoint-use-clockwise-notation-to-specify-the-padding-of-an-element",
"difficulty": 0.044,
"difficulty": 1.44,
"description": [
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
@ -3104,7 +3104,7 @@
"id": "bad87fee1348bd9afdf08726",
"name": "Waypoint: Use Clockwise Notation to Specify the Margin of an Element",
"dashedName": "waypoint-use-clockwise-notation-to-specify-the-margin-of-an-element",
"difficulty": 0.045,
"difficulty": 1.45,
"description": [
"Let's try this again, but with <code>margin</code> this time.",
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>.",
@ -3175,7 +3175,7 @@
"id": "bad87fee1348bd9aedf08736",
"name": "Waypoint: Style the HTML Body Element",
"dashedName": "waypoint-style-the-html-body-element",
"difficulty": 0.046,
"difficulty": 1.46,
"description": [
"Now let's start fresh and talk about CSS inheritance.",
"Every HTML page has <code>body</code> element.",
@ -3208,7 +3208,7 @@
"id": "bad87fee1348bd9aedf08746",
"name": "Waypoint: Inherit Styles from the Body Element",
"dashedName": "waypoint-inherit-styles-from-the-body-element",
"difficulty": 0.047,
"difficulty": 1.47,
"description": [
"Now we've proven that every HTML page has a <code>body</code> element, and that its <code>body</code> element can also be styled with CSS.",
"Remember, you can style your <code>body</code> element just like any other HTML element, and all your other elements will inherit your <code>body</code> element's styles.",
@ -3251,7 +3251,7 @@
"id": "bad87fee1348bd9aedf08756",
"name": "Waypoint: Prioritize One Style Over Another",
"dashedName": "waypoint-prioritize-one-style-over-another",
"difficulty": 0.048,
"difficulty": 1.48,
"description": [
"Sometimes your HTML elements will receive multiple styles that conflict with one another.",
"For example, your <code>h1</code> element can't be both green and pink at the same time.",
@ -3291,7 +3291,7 @@
"id": "bad87fee1348bd9aedf04756",
"name": "Waypoint: Override Styles in Subsequent CSS",
"dashedName": "waypoint-override-styles-in-subsequent-css",
"difficulty": 0.049,
"difficulty": 1.49,
"description": [
"Our \"pink-text\" class overrode our <code>body</code> element's CSS declaration!",
"We just proved that our classes will override the <code>body</code> element's CSS. So the next logical question is, what can we do to override our \"pink-text\" class?",
@ -3334,7 +3334,7 @@
"id": "bad87fee1348bd8aedf06756",
"name": "Waypoint: Override Class Declarations by Styling ID Attributes",
"dashedName": "waypoint-override-class-declarations-by-styling-id-attributes",
"difficulty": 0.052,
"difficulty": 1.52,
"description": [
"We just proved that browsers read CSS from top to bottom. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last.",
"But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?",
@ -3383,7 +3383,7 @@
"id": "bad87fee1348bd9aedf06756",
"name": "Waypoint: Override Class Declarations with Inline Styles",
"dashedName": "waypoint-override-class-declarations-with-inline-styles",
"difficulty": 0.052,
"difficulty": 1.52,
"description": [
"So we've proven that id declarations override class declarations, regardless of where they are declared in your <code>style</code> element CSS.",
"There are other ways that you can override CSS. Do you remember inline styles?",
@ -3434,7 +3434,7 @@
"id": "bad87fee1348bd9aedf07756",
"name": "Waypoint: Override All Other Styles by using Important",
"dashedName": "waypoint-override-all-other-styles-by-using-important",
"difficulty": 0.053,
"difficulty": 1.53,
"description": [
"Yay! we just proved that in-line styles will override all the CSS declarations in your <code>style</code> element.",
"But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.",
@ -3488,7 +3488,7 @@
"id": "bad87fee1348bd9aedf08726",
"name": "Waypoint: Use Hex Code for Specific Colors",
"dashedName": "waypoint-use-hex-code-for-specific-colors",
"difficulty": 0.054,
"difficulty": 1.54,
"description": [
"Did you know there other ways to represent colors in CSS? One of these ways is called hexadecimal code, or \"hex code\" for short.",
"\"Decimal\" means the numbers zero through nine - the numbers that people use in everyday life. \"Hexadecimal\" includes these 10 numbers, plus the letters A, B, C, D, E and F. This means that Hexidecimal has a total of 16 possible values, instead of the 10 possible values that our normal base-10 number system gives us.",
@ -3524,7 +3524,7 @@
"id": "bad87fee1348bd9aedf08725",
"name": "Waypoint: Use Hex Code to Color Elements White",
"dashedName": "waypoint-use-hex-code-to-color-elements-white",
"difficulty": 0.055,
"difficulty": 1.55,
"description": [
"0 is the lowest number in hex code, and represents a complete absence of color.",
"F is the highest number in hex code, and it represents the maximum possible brightness.",
@ -3559,7 +3559,7 @@
"id": "bad87fee1348bd9aedf08724",
"name": "Waypoint: Use Hex Code to Color Elements Red",
"dashedName": "waypoint-use-hex-code-to-color-elements-red",
"difficulty": 0.056,
"difficulty": 1.56,
"description": [
"You may be wondering why we use 6 digits to represent a color instead of just one or two. The answer is that using 6 digits gives us a huge variety.",
"How many colors are possible? 16 colors and 6 positions means we have 16 to the 6th power, or more than 16 million possible colors!",
@ -3596,7 +3596,7 @@
"id": "bad87fee1348bd9aedf08723",
"name": "Waypoint: Use Hex Code to Color Elements Green",
"dashedName": "waypoint-use-hex-code-to-color-elements-green",
"difficulty": 0.057,
"difficulty": 1.57,
"description": [
"Remember that hex code follows the red-green-blue, or \"RGB\" format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
"So to get the absolute brightest green, you would just use F for the third and fourth digits (the highest possible value) and 0 for all the other digits (the lowest possible value).",
@ -3631,7 +3631,7 @@
"id": "bad87fee1348bd9aedf08722",
"name": "Waypoint: Use Hex Code to Color Elements Blue",
"dashedName": "waypoint-use-hex-code-to-color-elements-blue",
"difficulty": 0.058,
"difficulty": 1.58,
"description": [
"Hex code follows the red-green-blue, or \"RGB\" format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
"So to get the absolute brightest blue, we use F for the fifth and sixth digits (the highest possible value) and 0 for all the other digits (the lowest possible value).",
@ -3666,7 +3666,7 @@
"id": "bad87fee1348bd9aedf08721",
"name": "Waypoint: Use Hex Code to Mix Colors",
"dashedName": "waypoint-use-hex-code-to-mix-colors",
"difficulty": 0.059,
"difficulty": 1.59,
"description": [
"From these three pure colors (red, green and blue), we can create 16 million other colors.",
"For example, orange is pure red, mixed with some green, and no blue.",
@ -3701,7 +3701,7 @@
"id": "bad87fee1348bd9aede08720",
"name": "Waypoint: Use Hex Code to Color Elements Gray",
"dashedName": "waypoint-use-hex-code-to-color-elements-gray",
"difficulty": 0.060,
"difficulty": 1.60,
"description": [
"From these three pure colors (red, green and blue), we can create 16 million other colors.",
"We can also create different shades of gray by evenly mixing all three colors.",
@ -3736,7 +3736,7 @@
"id": "bad87fee1348bd9aedf08720",
"name": "Waypoint: Use Hex Code for Specific Shades of Gray",
"dashedName": "waypoint-use-hex-code-for-specific-shades-of-gray",
"difficulty": 0.061,
"difficulty": 1.61,
"description": [
"We can also create other shades of gray by evenly mixing all three colors. We can go very close to true black.",
"Make the <code>body</code> element's background color a dark gray by giving it the hex code value of <code>#111111</code>."
@ -3770,7 +3770,7 @@
"id": "bad87fee1348bd9aedf08719",
"name": "Waypoint: Use Abbreviated Hex Code",
"dashedName": "waypoint-use-abbreviated-hex-code",
"difficulty": 0.062,
"difficulty": 1.62,
"description": [
"Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.",
"For example, red, which is #FF0000 in hex code, can be shortened to #F00. That is, one digit for red, one digit for green, one digit for blue.",
@ -3806,7 +3806,7 @@
"id": "bad87fee1348bd9aede08718",
"name": "Waypoint: Use RGB values to Color Elements",
"dashedName": "waypoint-use-rgb-values-to-color-elements",
"difficulty": 0.063,
"difficulty": 1.63,
"description": [
"Another way you can represent colors in CSS is by using RGB values.",
"RGB values look like this: <code>rgb(0, 0, 0)</code> for black and <code>rgb(255, 255, 255)<code> for white.",
@ -3843,7 +3843,7 @@
"id": "bad88fee1348bd9aedf08726",
"name": "Waypoint: Use RGB to Color Elements White",
"dashedName": "waypoint-use-rgb-to-color-elements-white",
"difficulty": 0.064,
"difficulty": 1.64,
"description": [
"RGB values look like this: <code>rgb(0, 0, 0)</code> for black and <code>rgb(255, 255, 255)<code> for white.",
"Instead of using six hexadecimal digits like you do with hex code, with RGB you specify the brightness of each color with a number between 0 and 255.",
@ -3878,7 +3878,7 @@
"id": "bad89fee1348bd9aedf08724",
"name": "Waypoint: Use RGB to Color Elements Red",
"dashedName": "waypoint-use-rgb-to-color-elements-red",
"difficulty": 0.065,
"difficulty": 1.65,
"description": [
"Just like with hex code, you can represent different colors in RGB by using combinations of different values.",
"These values follow the pattern of RGB: the first number represents red, the second number represents green, and the third number represents blue.",
@ -3913,7 +3913,7 @@
"id": "bad80fee1348bd9aedf08723",
"name": "Waypoint: Use RGB to Color Elements Green",
"dashedName": "waypoint-use-rgb-to-color-elements-green",
"difficulty": 0.066,
"difficulty": 1.66,
"description": [
"Now change the <code>body</code> element's background color to the RGB value green: <code>rgb(0, 255, 0)</code>"
],
@ -3946,7 +3946,7 @@
"id": "bad81fee1348bd9aedf08722",
"name": "Waypoint: Use RGB to Color Elements Blue",
"dashedName": "waypoint-use-rgb-to-color-elements-blue",
"difficulty": 0.067,
"difficulty": 1.67,
"description": [
"Change the <code>body</code> element's background color to the RGB value blue: <code>rgb(0, 0, 255)</code>"
],
@ -3979,7 +3979,7 @@
"id": "bad82fee1348bd9aedf08721",
"name": "Waypoint: Use RGB to Mix Colors",
"dashedName": "waypoint-use-rgb-to-mix-colors",
"difficulty": 0.068,
"difficulty": 1.68,
"description": [
"Just like with hex code, you can mix colors in RGB by using combinations of different values.",
"Change the <code>body</code> element's background color to the RGB value orange: <code>rgb(255, 165, 0)</code>"
@ -4013,7 +4013,7 @@
"id": "bad83fee1348bd9aede08720",
"name": "Waypoint: Use RGB to Color Elements Gray",
"dashedName": "waypoint-use-rgb-to-color-elements-gray",
"difficulty": 0.069,
"difficulty": 1.69,
"description": [
"With RGB values, we can make an element gray by using combinations of the same value for all three colors.",
"Change the <code>body</code> element's background color to the RGB value for gray: <code>rgb(128, 128, 128)</code>"

708
challenges/jquery-ajax-and-json.json
View File

@ -7,10 +7,13 @@
"id": "bad87fee1348bd9acdd08826",
"name": "Waypoint: Learn how Script Tags and Document Ready Work",
"dashedName": "waypoint-learn-how-script-tags-and-document-ready-work",
"difficulty": 0.072,
"difficulty": 3.01,
"description": [
"We've simplified our Cat Photo App and removed our <code>style</code> element. Add a <code>script</code> element to your page and create a <code>$(document).ready</code> function within it.",
"Add <code>$(document).ready(function() {</code> to your <code>script</code> element, and then close it on the following line with <code>});</code>."
"Now we're ready to learn jQuery, the most popular JavaScript tool of all time. Don't worry about JavaScript itself - we will cover it soon.",
"Before we can start using jQuery, we need to add some things to our HTML.",
"First, add a <code>script</code> element at the top of your page. Be sure to close it on the following line.",
"Your browser will run any JavaScript inside a <code>script</code> element, including jQuery.",
"Inside your <code>script</code> element, add this code: <code>$(document).ready(function() {</code> to your <code>script</code>. Then close it on the following line (still inside your <code>script</code> element) with: <code>});</code>"
],
"tests": [
"assert(editor.match(/<script>/g), 'Create a <code>script</code> element.')",
@ -46,11 +49,15 @@
{
"id": "bad87fee1348bd9bedc08826",
"name": "Waypoint: Target Elements by Selectors Using jQuery",
"dashedName": "waypoint-target-elements-by-selectors-using-jquery",
"difficulty": 0.073,
"name": "Waypoint: Target HTML Elements with Selectors Using jQuery",
"dashedName": "waypoint-target-html-elements-with-selectors-using-jquery",
"difficulty": 3.02,
"description": [
"Make all <code>button</code> elements bounce <code>$('button').addClass('animated bounce')</code>."
"Now we have a \"document ready function\". We'll learn more about functions later. The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.",
"This is important because without your \"document ready function\", your code may run before your HTML is rendered, which would cause bugs.",
"Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a \"dollar sign operator\", or simply as \"bling\".",
"jQuery often \"selects\" an HTML element with a <code>selector</code>, then does something to that element.",
"For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your \"document ready function\": <code>$('button').addClass('animated bounce')</code>."
],
"tests": [
"assert($('button').hasClass('animated') && $('button').hasClass('bounce'), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"bounce\" to your <code>img</code> element.')",
@ -62,22 +69,27 @@
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<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 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>",
" <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 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>"
@ -89,9 +101,14 @@
"id": "bad87fee1348bd9aedc08826",
"name": "Waypoint: Target Elements by Class Using jQuery",
"dashedName": "waypoint-target-elements-by-class-using-jquery",
"difficulty": 0.074,
"difficulty": 3.03,
"description": [
"Make all the <code>div</code> elements with class \"well\" shake. <code>$('.well').addClass('animated shake')</code>"
"You see how we made all of your <code>button</code> elements bounce? We selected them with <code>$('button')</code>, then we added some CSS classes to them with <code>.addClass('animated bounce');</code>.",
"You just used jQuery's <code>.addClass()</code> function, which allows you to add classes to elements.",
"First, let's target your <code>div</code> elements with the class \"well\" by using the <code>$('.well')</code> selector.",
"Note that, just like with CSS declarations, you type a <code>.</code> before the class's name.",
"Then use jQuery's <code>.addClass()</code> function to add the classes \"animated\" and \"shake\".",
"Here's the full code that you'll want to type into your \"document ready function\": <code>$('.well').addClass('animated shake');</code>"
],
"tests": [
"assert($('.well').hasClass('animated') && $('.well').hasClass('shake'), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"shake\" to all your elements with the class \"well\".')",
@ -100,25 +117,30 @@
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" $('button').addClass('animated bounce');",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<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 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>",
" <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 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>"
@ -129,36 +151,47 @@
"id": "bad87fee1348bd9aeda08826",
"name": "Waypoint: Target Elements by ID Using jQuery",
"dashedName": "waypoint-target-elements-by-id-using-jquery",
"difficulty": 0.075,
"difficulty": 3.04,
"description": [
"Make all the <code>button</code> element with the id \"target3\" pulse. <code>$('#target3').addClass('animated pulse')</code>."
"You can also target elements by their id attributes.",
"First target your <code>div</code> element with the class \"target3\" by using the <code>$('#target3')</code> selector.",
"Note that, just like with CSS declarations, you type a <code>#</code> before the class's name.",
"Then use jQuery's <code>.addClass()</code> function to add the classes \"animated\" and \"fadeOut\".",
"Make all the <code>button</code> element with the id \"target3\" fadeOut. <code>$('#target3').addClass('animated fadeOut')</code>."
],
"tests": [
"$('#target3').hasClass('animated') && $('#target3').hasClass('pulse'), 'Select the <code>button</code>element with the <code>id</code> of \"target3\" and use the jQuery <code>addClass()</code> function to give it the classes of \"animated\" and \"pulse\".')",
"$('#target3').hasClass('animated') && $('#target3').hasClass('fadeOut'), 'Select the <code>button</code>element with the <code>id</code> of \"target3\" and use the jQuery <code>addClass()</code> function to give it the classes of \"animated\" and \"fadeOut\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('button').addClass('animated bounce');",
" $('.well').addClass('animated shake');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<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 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>",
" <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 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>"
@ -167,16 +200,74 @@
},
{
"id": "bad87fee1348bd9aed908826",
"name": "Waypoint: Change the CSS of an Element Using jQuery",
"dashedName": "waypoint-change-the-css-of-an-element-using-jquery",
"difficulty": 0.076,
"id": "bad87fee1348bd9aeda08726",
"name": "Waypoint: Delete your jQuery Functions",
"dashedName": "waypoint-delete-your-jquery-functions",
"difficulty": 3.05,
"description": [
"These animations were cool at first, but now they're getting kind of distracting.",
"Delete all three of these jQuery functions from your \"document ready function\", but leave your \"document ready function\" itself intact."
],
"tests": [
"assert(!editor.match(/nce\\'\\)\\;/g) && !editor.match(/ke\\'\\)\\;/g), 'Delete your <code>img</code> element selector statement and your \".btn\" selector statement.')",
"assert(editor.match(/css.*,.*background-color.*gray.\\);/g), 'Select the element with the <code>id</code> of \"cat-photo-form\" give it the background color of gray.')"
"assert(!editor.match(/e\\'\\);/g) && !editor.match(/t\\'\\);/g), 'Delete all three of your jQuery functions from your \"document ready function\".')",
"assert(editor.match(/<script>/g), 'Leave your <code>script</code> element intact.')",
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Leave your <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Leave your your \"document ready function\" closing <code>\\}\\);</code> intact.')",
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Leave your <code>script</code> element closing tag intact.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('button').addClass('animated bounce');",
" $('.well').addClass('animated shake');",
" $('#target3').addClass('animated fadeOut');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed908626",
"name": "Waypoint: Target the same element with multiple jQuery Selectors",
"dashedName": "waypoint-target-the-same-element-with-multiple-jQuery-Selectors",
"difficulty": 3.06,
"description": [
"Now you know three ways of targeting elements: by type (<code>$('button')</code>), by class (<code>($('.btn')</code>), and by id (<code>($'#target1')</code>).",
"Use each of these jQuery selectors to target your <code>button</code> element with the class \"btn\" and the id \"target1\".",
"Use the <code>addClass()</code> jQuery function to give the element one new class for each selector: \"animated\", \"shake\", and \"button-primary\"."
],
"tests": [
"assert(editor.match(/\\$\\(\\'button\\'\\)/g), 'Use the <code>$\\(\\'button\\'\\)</code> selector.')",
"assert(editor.match(/\\$\\(\\'\\.btn\\'\\)/g), 'Use the <code>$\\(\\'.btn\\'\\)</code> selector.')",
"assert(editor.match(/\\$\\(\\'#target1\\'\\)/g), 'Use the <code>$\\(\\'#target1\\'\\)</code> selector.')",
"assert(editor.match(/addClass/g) && editor.match(/addClass/g).length > 2, 'Only add one class with each of your three selectors.')",
"assert($('#target1').hasClass('animated') && $('#target1').hasClass('shake') && $('#target1').hasClass('btn-primary'), 'Your \"#target1\" element should have the classes \"animated\"&#130; \"shake\" and \"btn-primary\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
@ -184,22 +275,131 @@
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<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 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 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>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed918626",
"name": "Waypoint: Remove Classes from an element with jQuery",
"dashedName": "waypoint-remove-classes-from-an-element-with-jquery",
"difficulty": 3.07,
"description": [
"In the same way you can add classes to an element with jQuery's <code>addClass()</code> function, you can remove them with jQuery's <code>removeClass()</code> function.",
"Let's remove the \"btn-default\" class from all of our <code>button</code> elements.",
"Here's how you would do this for a specific button, add <code>$('#target2').removeClass('btn-default');</code>"
],
"tests": [
"assert($('.btn-default').length === 0, 'Remove the \"btn-default\" class from all of your <code>button</code> elements.')",
"assert(editor.match(/btn btn-default/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('button').addClass('animated bounce');",
" $('.well').addClass('animated shake');",
" $('#target3').addClass('animated fadeOut');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed908826",
"name": "Waypoint: Change the CSS of an Element Using jQuery",
"dashedName": "waypoint-change-the-css-of-an-element-using-jquery",
"difficulty": 3.08,
"description": [
"We can also change the CSS of an HTML element directly with jQuery.",
"Delete your jQuery selectors, leaving an empty \"document ready function\".",
"Select \"target1\" and change its color to red.",
"jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.",
"Here's how we would change its color to blue: <code>$('#target1').css('color', 'blue');</code>",
"This is slightly different from a normal CSS declaration, because the CSS attribute and its value are in quotes, and separated with a comma instead of a colon."
],
"tests": [
"assert($('#target1').css('color') === 'rgb(255, 0, 0)', 'Your \"target1\" element should have red text.')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('button').addClass('animated bounce');",
" $('.well').addClass('animated shake');",
" $('#target3').addClass('animated fadeOut');",
" $('button').removeClass('btn-default');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class='container-fluid'>",
" <h3 class='text-primary text-center'>jQuery Playground</h3>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
@ -211,36 +411,47 @@
"id": "bad87fee1348bd9aed808826",
"name": "Waypoint: Disable an Element Using jQuery",
"dashedName": "waypoint-disable-an-element-using-jquery",
"difficulty": 0.077,
"difficulty": 3.09,
"description": [
"You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.",
"When you disable a button, it will become grayed-out and can no longer be clicked.",
"jQuery has a function called <code>.prop()</code> that allows you to adjust the properties of elements.",
"Here's how you would disable all buttons: <code>$('#button').prop('disabled', true);</code>",
"Disable only the \"target1\" button."
],
"tests": [
"assert($('form button').attr('id') === 'submit-button', 'Add the ID of \"submit-button\" to your the <code>button</code> on your <code>form</code> element.')",
"assert($('#submit-button') && $('#submit-button').prop('disabled'), 'Disable your element with the id of \"submit-button\".')"
"assert($('#target1') && $('#target1').prop('disabled'), 'Disable your \"target1\" button.')",
"assert($('#target2') && !$('#target2').prop('disabled'), 'Do not disable any other buttons.')",
"assert(!editor.match(/disabled>/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<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 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>",
" <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 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>"
@ -252,36 +463,44 @@
"id": "bad87fee1348bd9aed708826",
"name": "Waypoint: Remove an Element Using jQuery",
"dashedName": "waypoint-remove-an-element-using-jquery",
"difficulty": 0.078,
"difficulty": 3.10,
"description": [
"Now let's remove an HTML element from your page using jQuery.",
"jQuery has a function called <code>.remove()</code> that will remove an HTML element entirely."
],
"tests": [
"assert($('img').length === 0, 'Use jQuery to remove your <code>img</code> element from your page.')",
"assert(editor.match(/<img/g), 'You should still have an <code>img</code> element in your HTML but jQuery should remove it.')"
"assert($('#target4').length === 0, 'Use jQuery to remove your \"target4\" element from your page.')",
"assert(editor.match(/id='target4/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<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 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>",
" <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 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>"
@ -293,36 +512,48 @@
"id": "bad87fee1348bd9aed608826",
"name": "Waypoint: Use appendTo to Move Elements with jQuery",
"dashedName": "waypoint-use-appendto-to-move-elements-with-jquery",
"difficulty": 0.079,
"difficulty": 3.11,
"description": [
"$('.btn').appendTo('#right-well')"
"Now let's try moving elements from one <code>div</code> to another.",
"jQuery has a function called <code>appendTo()</code> that allows you to select HTML elements and append them to another element.",
"For example, if we wanted to move \"target4\" from our right well to our left well, we would use <code>$('#target4').appendTo('#left-well');</code>",
"Move your \"target2\" element from your \"left-well\" to your \"right-well\"."
],
"tests": [
"assert($('#left-well').children().length === 0, 'Your left well should not have any buttons inside it.')",
"assert($('#right-well').children().length === 6, 'Your right well should have all 6 buttons inside it.')"
"assert($('#left-well').children('#target2').length === 0, 'Your \"target2\" element should not be inside your \"left-well\".')",
"assert($('#right-well').children('#target2').length > 0, 'Your \"target2\" element should be inside your \"right-well\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to move these elements.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<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 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>",
" <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 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>"
@ -334,35 +565,50 @@
"id": "bad87fee1348bd9aed508826",
"name": "Waypoint: Clone an Element Using jQuery",
"dashedName": "waypoint-clone-an-element-using-jquery",
"difficulty": 0.080,
"difficulty": 3.12,
"description": [
"Clone the #target1 element and append it to the #left-well element. $('#target1').clone().appendTo('#left-well')"
"In addition to moving elements, you can also copy them from one place to another.",
"jQuery has a function called <code>clone()</code> that makes a copy of an element.",
"For example, if we wanted to copy \"target2\" from our \"left-well\" to our \"right-well\", we would use <code>$('#target2').clone().appendTo('#right-well');</code>",
"Did you notice this involves sticking two jQuery functions together? This is called \"function chaining\" and it's a really convenient way to get things done with jQuery.",
"Clone your \"target5\" element and append it to your \"left-well\"."
],
"tests": [
"assert($('#left-well').children().length > 3, 'You should have at least 4 button elements in your #left-well element')"
"assert($('#right-well').children('#target5').length > 0, 'Your \"target5\" element should be inside your \"right-well\".')",
"assert($('#left-well').children('#target5').length > 0, 'A copy of your \"target5\" element should also be inside your \"left-well\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to move these elements.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
" $('#target2').appendTo('#right-well');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<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 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>",
" <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 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>"
@ -374,36 +620,51 @@
"id": "bad87fee1348bd9aed308826",
"name": "Waypoint: Target the Parent of an Element Using jQuery",
"dashedName": "waypoint-target-the-parent-of-an-element-using-jquery",
"difficulty": 0.082,
"difficulty": 3.13,
"description": [
"Change the parent of the #target1 element to have the background color of red.",
"$('#target1').parent().css('background-color', 'red')"
"Every HTML elements has a \"parent\" element from which it \"inherits\" properties.",
"For example, your \"jQuery Playground\" <code>h3</code> element has the parent element of <code>&#60;div class='container-fluid'&#62</code>, which itself has the parent <code>body</code>.",
"jQuery has a function called <code>parent()</code> that allows you to access the parent of whichever element you've selected.",
"Give the parent of the <code>#target1</code> element background-color of red.",
"Here's an example of how you would use the <code>parent()</code> function: <code>$('#left-well').parent().css('background-color', 'blue')</code>"
],
"tests": [
"assert($('#left-well').css('background-color') === 'rgb(255, 0, 0)', 'Your \"target1\" element should have red text.')",
"assert(!editor.match(/\\.parent\\(\\)\\.css/g), 'You should use the <code>parent()</code> function to modify this element.')",
"assert(!editor.match(/<div class=\\'well\\' id=\\'left-well\\'>/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
" $('#target2').appendTo('#right-well');",
" $('#target5').clone().appendTo('#left-well');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<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 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>",
" <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 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>"
@ -415,49 +676,63 @@
"id": "bad87fee1348bd9aed208826",
"name": "Waypoint: Target the Children of an Element Using jQuery",
"dashedName": "waypoint-target-the-children-of-an-element-using-jquery",
"difficulty": 0.083,
"difficulty": 3.14,
"description": [
"Change the color of all the #left-well element's children to blue.",
"$('#right-well').children().css('background-color', 'blue')"
"Many HTML elements has a \"children\" element from which they \"inherits\" properties.",
"For example, every HTML element is a child of your <code>body</code> element, and your \"jQuery Playground\" <code>h3</code> element is a child of your <code>&#60;div class='container-fluid'&#62</code> element.",
"jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.",
"Give all the children of your <code>#right-well</code> element a color of green.",
"Here's an example of how you would use the <code>children()</code> function: <code>$('#left-well').children().css('color', 'blue')</code>"
],
"tests": [
"assert($('#target6').css('color') === 'rgb(0, 0, 255)', 'Your \"target6\" element should have green text.')",
"assert(!editor.match(/\\.children\\(\\)\\.css/g), 'You should use the <code>children()</code> function to modify these elements.')",
"assert(!editor.match(/<div class=\\'well\\' id=\\'right-well\\'>/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
" $('#target2').appendTo('#right-well');",
" $('#target5').clone().appendTo('#left-well');",
" $('#target1').parent().css('background-color', 'red');",
"",
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<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 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>",
" <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 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>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed108826",
"name": "Waypoint: Target a Specific Child of an Element Using jQuery",
"dashedName": "waypoint-target-a-specific-child-of-an-element-using-jquery",
"difficulty": 0.084,
"difficulty": 3.15,
"description": [
],
@ -474,7 +749,7 @@
"id": "bad87fee1348bd9aed008826",
"name": "Waypoint: Target Even Numbered Elements Using jQuery",
"dashedName": "waypoint-target-even-numbered-elements-using-jquery",
"difficulty": 0.085,
"difficulty": 3.16,
"description": [
],
@ -491,7 +766,58 @@
"id": "bad87fee1348bd9aecc08826",
"name": "Waypoint: Read Data from an Element Using jQuery",
"dashedName": "Waypoint-read-data-from-an-element-using-jquery",
"difficulty": 0.086,
"difficulty": 3.17,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aecc08826",
"name": "Waypoint: Trigger onHover Events with jQuery",
"dashedName": "Waypoint-trigger-onhover-events-with-jquery",
"difficulty": 3.18,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aeca08826",
"name": "Waypoint: Trigger onClick Events with jQuery",
"dashedName": "Waypoint-trigger-onClick-events-with-jquery",
"difficulty": 3.19,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aecb08826",
"name": "Waypoint: Use jQuery to Modify the Entire Page",
"dashedName": "Waypoint-use-jquery-to-modify-the-entire-page",
"difficulty": 3.20,
"description": [
],
@ -508,7 +834,7 @@
"id": "bad87fee1348bd9aebc08826",
"name": "Waypoint: Get Data from an URL Using jQuery",
"dashedName": "waypoint-get-data-from-a-url-using-jquery",
"difficulty": 0.087,
"difficulty": 3.21,
"description": [
],
@ -525,7 +851,7 @@
"id": "bad87fee1348bd9ae9c08826",
"name": "Waypoint: Loop through JSON Data Using jQuery",
"dashedName": "waypoint-loop-through-json-data-using-jquery",
"difficulty": 0.088,
"difficulty": 3.22,
"description": [
],
@ -542,7 +868,7 @@
"id": "bad87fee1348bd9ae8c08826",
"name": "Waypoint: Setup Click Events Using jQuery",
"dashedName": "waypoint-setup-click-events-using-jquery",
"difficulty": 0.089,
"difficulty": 3.23,
"description": [
],
@ -565,7 +891,7 @@
"id": "bad88fee1348bd9ae8c08826",
"name": "Waypoint: Wire AJAX Call into a jQuery Click Event",
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
"difficulty": 0.090,
"difficulty": 3.24,
"description": [
"<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
],