"title":"Learn how Script Tags and Document Ready Work",
"difficulty":3.01,
"description":[
"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.')",
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Make sure your <code>script</code> element has a closing tag.')",
"assert(editor.match(/\\$\\s*?\\(\\s*?document\\)\\.ready\\s*?\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'You should add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
"assert(editor.match(/\\n*?\\s*?\\}\\s*?\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>});</code>.')"
"Now we have a <code>document ready function</code>. We'll learn more about <code>functions</code> later. The important thing to know is that code you put inside this <code>function</code> will run as soon as your browser has loaded your page.",
"This is important because without your <code>document ready function</code>, 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 <code>dollar sign operator</code>, or simply as <code>bling</code>.",
"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 <code>document ready function</code>: <code>$(\"button\").addClass(\"animated bounce\")</code>.",
"Note that we've already included both the jQuery library and the Animate.css library in your code editor. So you are using jQuery to apply the Animate.css <code>bounce</code> class to your <code>button</code> elements."
"assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.')",
"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.",
"Then use jQuery's <code>.addClass()</code> function to add the classes <code>animated</code> and <code>shake</code>.",
"For example, you could make all the elements with the class <code>text-primary</code> shake by adding the following to your <code>document ready function</code>: <code>$(\".text-primary\").addClass(\"animated shake\");</code>"
"assert($(\".well\").hasClass(\"animated\") && $(\".well\").hasClass(\"shake\"), 'Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>shake</code> to all your elements with the class <code>well</code>.')",
"Then use jQuery's <code>.addClass()</code> function to add the classes <code>animated</code> and <code>fadeOut</code>.",
"Here's how you'd make the <code>button</code> element with the id <code>target6</code> fade out: <code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
"assert($(\"#target3\").hasClass(\"animated\"), 'Select the <code>button</code>element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class of <code>animated</code>.')",
"assert(($(\"#target3\").hasClass(\"fadeOut\") || $(\"#target3\").hasClass(\"fadeout\")) && editor.match(/\\$\\(.#target3.\\)/g), 'Target the element with the id <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class <code>fadeOut</code>.')",
"Delete all three of these jQuery functions from your <code>document ready function</code>, but leave your <code>document ready function</code> itself intact."
"assert(!editor.match(/e\"\\);/g) && !editor.match(/t\"\\);/g), 'Delete all three of your jQuery functions from your <code>document ready function</code>.')",
"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(/<\\/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.')"
"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 <code>btn</code> and the id <code>target1</code>.",
"Use the <code>addClass()</code> jQuery function to give the element one new class for each selector: <code>animated</code>, <code>shake</code>, and <code>btn-primary</code>."
"assert($(\"#target1\").hasClass(\"animated\") && $(\"#target1\").hasClass(\"shake\") && $(\"#target1\").hasClass(\"btn-primary\"), 'Your <code>#target1</code> element should have the classes <code>animated</code>‚ <code>shake</code> and <code>btn-primary</code>.')",
"title":"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.",
"This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.",
"Delete your jQuery selectors, leaving an empty <code>document ready function</code>.",
"Select <code>target1</code> and change its color to red."
"For example, if we wanted to move <code>target4</code> from our right well to our left well, we would use <code>$(\"#target4\").appendTo(\"#left-well\");</code>",
"Move your <code>target2</code> element from your <code>left-well</code> to your <code>right-well</code>."
"assert($(\"#left-well\").children(\"#target2\").length === 0, 'Your <code>target2</code> element should not be inside your <code>left-well</code>.')",
"assert($(\"#right-well\").children(\"#target2\").length > 0, 'Your <code>target2</code> element should be inside your <code>right-well</code>.')",
"For example, if we wanted to copy <code>target2</code> from our <code>left-well</code> to our <code>right-well</code>, we would use <code>$(\"#target2\").clone().appendTo(\"#right-well\");</code>",
"Did you notice this involves sticking two jQuery functions together? This is called <code>function chaining</code> and it's a convenient way to get things done with jQuery.",
"Clone your <code>target5</code> element and append it to your <code>left-well</code>."
"assert($(\"#right-well\").children(\"#target5\").length > 0, 'Your <code>target5</code> element should be inside your <code>right-well</code>.')",
"assert($(\"#left-well\").children(\"#target5\").length > 0, 'A copy of your <code>target5</code> element should also be inside your <code>left-well</code>.')",
"For example, your <code>jQuery Playground</code> <code>h3</code> element has the parent element of <code><div class=\"container-fluid\"></code>, which itself has the parent <code>body</code>.",
"Here's an example of how you would use the <code>parent()</code> function if you wanted to give the parent element of the <code>left-well</code> element a background color of blue: <code>$(\"#left-well\").parent().css(\"background-color\", \"blue\")</code>",
"Give the parent of the <code>#target1</code> element a background-color of red."
"assert($(\"#left-well\").css(\"background-color\") === 'red' || $(\"#left-well\").css(\"background-color\") === 'rgb(255, 0, 0)' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#ff0000' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#f00', 'Your <code>left-well</code> element should have a red background.')",
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")\\s*?\\)\\.parent/gi), 'The <code>.parent()</code> method should be called on the <code>#target1</code> element.')",
"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><div class=\"container-fluid\"></code> element.",
"jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.",
"Here's an example of how you would use the <code>children()</code> function to give the children of your <code>left-well</code> element the background color of blue: <code>$(\"#left-well\").children().css(\"color\", \"blue\")</code>",
"Give all the children of your <code>#right-well</code> element a color of green."
"jQuery uses CSS Selectors to target elements. <code>target:nth-child(n)</code> css selector allows you to select all the nth element with the target class or element type.",
"assert($(\".target:nth-child(2)\").hasClass(\"animated\") && $(\".target:nth-child(2)\").hasClass(\"bounce\"), 'The second element in each of your <code>well</code> elements should bounce.')",
"Here's how you would target all the odd-numbered elements with class <code>target</code> and give them classes: <code>$(\".target:odd\").addClass(\"animated shake\");</code>",
"Try selecting all the even-numbered elements - that is, what your browser will consider even-numbered elements - and giving them the classes of <code>animated</code> and <code>shake</code>."
"assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'), 'All the <code>target</code> elements that computer considers even should shake.')",
"assert($('body').hasClass('animated') && $('body').hasClass('hinge'), 'Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element.')"