Fix Sidebar Code Indentation Character

Closes #3988
pull/4114/head
Logan Tegman 2015-11-01 17:11:23 -08:00
parent 1f61c4be02
commit 4959675d74
4 changed files with 63 additions and 63 deletions

View File

@ -653,7 +653,7 @@
"In JavaScript, we can divide up our code into reusable parts called functions.",
"Here's an example of a function:",
"<code>function functionName(a, b) {</code>",
"<code>&thinsp;&thinsp;return a + b;</code>",
"<code>&nbsp;&nbsp;return a + b;</code>",
"<code>}</code>",
"After writing the above lines in our code, we can then pass values to our function and the result following the <code>return</code> statement will be returned.",
"For example, we can pass numbers <code>4</code> and <code>2</code> by “calling” the function later in our code like this: <code>functionName(4, 2)</code>.",
@ -694,10 +694,10 @@
"Objects are similar to <code>arrays</code>, except that instead of using indexes to access and modify their data, you access the data in objects through what are called <code>properties</code>.",
"Here's a sample object:",
"<code>var cat = {</code>",
"<code>&thinsp;&thinsp;\"name\": \"Whiskers\",</code>",
"<code>&thinsp;&thinsp;\"legs\": 4,</code>",
"<code>&thinsp;&thinsp;\"tails\": 1,</code>",
"<code>&thinsp;&thinsp;\"enemies\": [\"Water\", \"Dogs\"]</code>",
"<code>&nbsp;&nbsp;\"name\": \"Whiskers\",</code>",
"<code>&nbsp;&nbsp;\"legs\": 4,</code>",
"<code>&nbsp;&nbsp;\"tails\": 1,</code>",
"<code>&nbsp;&nbsp;\"enemies\": [\"Water\", \"Dogs\"]</code>",
"<code>};</code>",
"</code>",
"Objects are useful for storing data in a structured way, and can represent real world objects, like a cat.",
@ -741,10 +741,10 @@
"After you've created a JavaScript object, you can update its properties at any time just like you would update any other variable.",
"For example, let's look at <code>ourDog</code>:",
"<code>var ourDog = {</code>",
"<code>&thinsp;&thinsp;\"name\": \"Camper\",</code>",
"<code>&thinsp;&thinsp;\"legs\": 4,</code>",
"<code>&thinsp;&thinsp;\"tails\": 1,</code>,",
"<code>&thinsp;&thinsp;\"friends\": [\"everything!\"]</code>",
"<code>&nbsp;&nbsp;\"name\": \"Camper\",</code>",
"<code>&nbsp;&nbsp;\"legs\": 4,</code>",
"<code>&nbsp;&nbsp;\"tails\": 1,</code>,",
"<code>&nbsp;&nbsp;\"friends\": [\"everything!\"]</code>",
"<code>};</code>",
"Since he's a particularly happy dog, let's change his name to \"Happy Camper\". Here's how we update his object's name property:",
"<code>ourDog.name = \"Happy Camper\";</code>",
@ -874,7 +874,7 @@
"In the following example we initialize with <code>i = 0</code> and iterate while our condition <code>i < 5</code> is true. We'll increment <code>i</code> by <code>1</code> in each loop iteration with <code>i++</code> as our <code>final-expression</code>.",
"<code>var ourArray = [];</code>",
"<code>for(var i = 0; i < 5; i++) {</code>",
"<code>&thinsp;&thinsp;ourArray.push(i);</code>",
"<code>&nbsp;&nbsp;ourArray.push(i);</code>",
"<code>}</code>",
"<code>ourArray</code> will now contain <code>[0,1,2,3,4]</code>.",
"Let's try getting a <code>for</code> loop to work by pushing values to an array."
@ -912,7 +912,7 @@
"We'll start at <code>i = 0</code> and loop while <code>i < 10</code>. We'll increment <code>i</code> by 2 each loop with <code>i += 2</code>.",
"<code>var ourArray = [];</code>",
"<code>for(var i = 0; i < 10; i += 2) {</code>",
"<code>&thinsp;&thinsp;ourArray.push(i);</code>",
"<code>&nbsp;&nbsp;ourArray.push(i);</code>",
"<code>}</code>",
"<code>ourArray</code> will now contain [0,2,4,6,8] ",
"Let's change our <code>initialization</code> and <code>final-expression</code> so we can count by odd numbers.",
@ -952,7 +952,7 @@
"We'll start at <code>i = 10</code> and loop while <code>i > 0</code>. We'll decrement <code>i</code> by 2 each loop with <code>i -= 2</code>.",
"<code>var ourArray = [];</code>",
"<code>for(var i = 10; i > 0; i -= 2) {</code>",
"<code>&thinsp;&thinsp;ourArray.push(i);</code>",
"<code>&nbsp;&nbsp;ourArray.push(i);</code>",
"<code>}</code>",
"<code>ourArray</code> will now contain <code>[10,8,6,4,2]</code>",
"Let's change our <code>initialization</code> and <code>final-expression</code> so we can count backward by twos for numbers.",
@ -992,8 +992,8 @@
"<code>var ourArray = [];</code>",
"<code>var i = 0;</code>",
"<code>while(i < 5) {</code>",
"<code>&thinsp;&thinsp;ourArray.push(i);</code>",
"<code>&thinsp;&thinsp;i++;</code>",
"<code>&nbsp;&nbsp;ourArray.push(i);</code>",
"<code>&nbsp;&nbsp;i++;</code>",
"<code>}</code>",
"Let's try getting a while loop to work by pushing values to an array.",
"Push the numbers 0 through 4 to <code>myArray</code> using a <code>while loop</code>."
@ -1140,9 +1140,9 @@
"<code>if</code> statements require some sort of boolean condition to evaluate.",
"For example:",
"<code>if (1 === 2) {</code>",
"<code>&thinsp;&thinsp;return true;</code>",
"<code>&nbsp;&nbsp;return true;</code>",
"<code>} else {</code>",
"<code>&thinsp;&thinsp;return false;</code>",
"<code>&nbsp;&nbsp;return false;</code>",
"<code>}</code>",
"Let's use <code>if</code> and <code>else</code> statements to make a coin-flip game.",
"Create <code>if</code> and <code>else</code> statements to return the string <code>\"heads\"</code> if the flip variable is zero, or else return the string <code>\"tails\"</code> if the flip variable is not zero."
@ -1460,7 +1460,7 @@
"If all three numbers match, we should return the number that we have in three of slots or leave it as <code>null</code>.",
"Let's create an <code>if statement</code> with multiple conditions in order to check whether all numbers are equal.",
"<code>if(slotOne !== slotTwo || slotTwo !== slotThree){</code>",
"<code>&thinsp;&thinsp;return null;</code>",
"<code>&nbsp;&nbsp;return null;</code>",
"<code>}</code>"
],
"tests": [

View File

@ -381,7 +381,7 @@
"<code>&#60;/style&#62;</code>",
"Inside that style element, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, your style element would look like this:",
"<code>&#60;style&#62;</code>",
"&thinsp;&thinsp;<code>h2 {color: red;}</code>",
"&nbsp;&nbsp;<code>h2 {color: red;}</code>",
"<code>&#60;/style&#62;</code>",
"Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles.",
"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."
@ -436,9 +436,9 @@
"Classes are reusable styles that can be added to HTML elements.",
"Here's an example CSS class declaration:",
"<code>&#60;style&#62;</code>",
"<code>&thinsp;&thinsp;.blue-text {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;color: blue;</code>",
"<code>&thinsp;&thinsp;}</code>",
"<code>&nbsp;&nbsp;.blue-text {</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;color: blue;</code>",
"<code>&nbsp;&nbsp;}</code>",
"<code>&#60;/style&#62;</code>",
"You can see that we've created a CSS class called <code>blue-text</code> within the <code>&#60;style&#62;</code> tag.",
"You can apply a class to an HTML element like this:",
@ -504,7 +504,7 @@
"Remember that you can attach classes to HTML elements by using <code>class=\"your-class-here\"</code> within the relevant element's opening tag.",
"Remember that CSS class selectors require a period at the beginning like this:",
"<code>.blue-text {</code>",
"<code>&thinsp;&thinsp;color: blue;</code>",
"<code>&nbsp;&nbsp;color: blue;</code>",
"<code>}</code>",
"But also remember that class declarations don't use a period, like this:",
"<code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;h2&#62;</code>",
@ -556,7 +556,7 @@
"description": [
"Font size is controlled by the <code>font-size</code> CSS property, like this:",
"<code>h1 {</code>",
"<code>&thinsp;&thinsp;font-size: 30px;</code>",
"<code>&nbsp;&nbsp;font-size: 30px;</code>",
"}</code>",
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code>&#60;style&#62;</code> tag that we created for your <code>red-text</code> class.",
"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>",
@ -611,7 +611,7 @@
"You can set an element's font by using the <code>font-family</code> property.",
"For example, if you wanted to set your <code>h2</code> element's font to <code>Sans-serif</code>, you would use the following CSS:",
"<code>h2 {</code>",
"<code>&thinsp;&thinsp;font-family: Sans-serif;</code>",
"<code>&nbsp;&nbsp;font-family: Sans-serif;</code>",
"<code>}</code>",
"Make all of your <code>p</code> elements use the <code>Monospace</code> font."
],
@ -715,7 +715,7 @@
"When one font isn't available, you can tell the browser to \"degrade\" to another font.",
"For example, if you wanted an element to use the <code>Helvetica</code> font, but also degrade to the <code>Sans-Serif</code> font when <code>Helvetica</code> wasn't available, you could use this CSS style:",
"<code>p {</code>",
"<code>&thinsp;&thinsp;font-family: Helvetica, Sans-Serif;</code>",
"<code>&nbsp;&nbsp;font-family: Helvetica, Sans-Serif;</code>",
"<code>}</code>",
"Now comment out your call to Google Fonts, so that the <code>Lobster</code> font isn't available. Notice how it degrades to the <code>Monospace</code> font."
],
@ -832,9 +832,9 @@
"CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
"For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use:",
"<code>&#60;style&#62;</code>",
"<code>&thinsp;&thinsp;.larger-image {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;width: 500px;</code>",
"<code>&thinsp;&thinsp;}</code>",
"<code>&nbsp;&nbsp;.larger-image {</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;</code>",
"<code>&nbsp;&nbsp;}</code>",
"<code>&#60;/style&#62;</code>",
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
],
@ -892,11 +892,11 @@
"CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>",
"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;</code>",
"<code>&thinsp;&thinsp;.thin-red-border {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;border-color: red;</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;border-width: 5px;</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;border-style: solid;</code>",
"<code>&thinsp;&thinsp;}</code>",
"<code>&nbsp;&nbsp;.thin-red-border {</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;</code>",
"<code>&nbsp;&nbsp;}</code>",
"<code>&#60;/style&#62;</code>",
"Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo.",
"Remember that you can apply multiple classes to an element by separating each class with a space within its <code>class</code> attribute. For example:",
@ -1453,8 +1453,8 @@
"Unordered lists start with a <code>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
"For example: ",
"<code>&#60;ul&#62;</code>",
"&thinsp;&thinsp;<code>&#60;li&#62;milk&#60;/li&#62;</code>",
"&thinsp;&thinsp;<code>&#60;li&#62;cheese&#60;/li&#62;</code>",
"&nbsp;&nbsp;<code>&#60;li&#62;milk&#60;/li&#62;</code>",
"&nbsp;&nbsp;<code>&#60;li&#62;cheese&#60;/li&#62;</code>",
"<code>&#60;/ul&#62;</code>",
"would create a bullet point-style list of \"milk\" and \"cheese\".",
"Replace your <code>p</code> elements with an unordered list of three things that cats love."
@ -1530,8 +1530,8 @@
"Ordered lists start with a <code>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
"For example:",
"<code>&#60;ol&#62;</code>",
"&thinsp;&thinsp;<code>&#60;li&#62;Garfield&#60;/li&#62;</code>",
"&thinsp;&thinsp;<code>&#60;li&#62;Sylvester&#60;/li&#62;</code>",
"&nbsp;&nbsp;<code>&#60;li&#62;Garfield&#60;/li&#62;</code>",
"&nbsp;&nbsp;<code>&#60;li&#62;Sylvester&#60;/li&#62;</code>",
"<code>&#60;/ol&#62;</code>",
"would create a numbered list of \"Garfield\" and \"Sylvester\".",
"Create an ordered list of the top 3 things cats hate the most."
@ -2386,7 +2386,7 @@
"You can set an element's background color with the <code>background-color</code> property.",
"For example, if you wanted an element's background color to be <code>green</code>, you'd put this within your <code>style</code> element:",
"<code>.green-background {</code>",
"<code>&thinsp;&thinsp;background-color: green;</code>",
"<code>&nbsp;&nbsp;background-color: green;</code>",
"<code>}</code>",
"Create a class called <code>gray-background</code> with the <code>background-color</code> of gray. Assign this class to your <code>div</code> element."
],
@ -2566,7 +2566,7 @@
"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 <code>cat-photo-element</code> and give it the background color of green. In your <code>style</code> element:",
"<code>#cat-photo-element {</code>",
"<code>&thinsp;&thinsp;background-color: green;</code>",
"<code>&nbsp;&nbsp;background-color: green;</code>",
"<code>}</code>",
"Note that inside your <code>style</code> element, you always reference classes by putting a <code>.</code> in front of their names. You always reference ids by putting a <code>#</code> in front of their names.",
"Try giving your form, which now has the <code>id</code> attribute of <code>cat-photo-form</code>, a green background."
@ -3153,7 +3153,7 @@
"We can prove that the <code>body</code> element exists here by giving it a <code>background-color</code> of black.",
"We can do this by adding the following to our <code>style</code> element:",
"<code>body {</code>",
"<code>&thinsp;&thinsp;background-color: black;</code>",
"<code>&nbsp;&nbsp;background-color: black;</code>",
"<code>}</code>"
],
"tests": [
@ -3316,7 +3316,7 @@
"Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.",
"Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's an example of what this looks like:",
"<code>#brown-text {</code>",
"<code>&thinsp;&thinsp;color: brown;</code>",
"<code>&nbsp;&nbsp;color: brown;</code>",
"<code>}</code>"
],
"tests": [

View File

@ -58,7 +58,7 @@
"When our click event happens, we can use Ajax to update an HTML element.",
"Let's make it so that when a user clicks the \"Get Message\" button, we change the text of the element with the class <code>message</code> to say \"Here is the message\".",
"We can do this by adding the following code within our click event:",
"<code>&thinsp;&thinsp;$(\".message\").html(\"Here is the message\");</code>"
"<code>&nbsp;&nbsp;$(\".message\").html(\"Here is the message\");</code>"
],
"tests": [
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?\\.html\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'Clicking the \"Get Message\" button should give the element with the class <code>message</code> the text \"Here is the message\".')"
@ -107,9 +107,9 @@
"These properties and their values are often referred to as \"key-value pairs\".",
"Let's get the JSON from Free Code Camp's Cat Photo API.",
"Here's the code you can put in your click event to do this:",
"<code>&thinsp;&thinsp;$.getJSON(\"/json/cats.json\", function(json) {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;$(\".message\").html(JSON.stringify(json));</code>",
"<code>&thinsp;&thinsp;});</code>",
"<code>&nbsp;&nbsp;$.getJSON(\"/json/cats.json\", function(json) {</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;$(\".message\").html(JSON.stringify(json));</code>",
"<code>&nbsp;&nbsp;});</code>",
"Once you've added this, click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the Free Code Camp Cat Photo API."
],
"tests": [
@ -165,12 +165,12 @@
"Then, let's loop through our JSON, adding more HTML to that variable. When the loop is finished, we'll render it.",
"Here's the code that does this:",
"<code>json.map(function(val) {</code>",
"<code>&thinsp;&thinsp;var keys = Object.keys(val);</code>",
"<code>&thinsp;&thinsp;html += \"&lt;div class = 'cat'&gt;\";</code>",
"<code>&thinsp;&thinsp;keys.map(function(key) {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;html += \"&lt;b&gt;\" + key + \"&lt;/b&gt;: \" + val[key] + \"&lt;br&gt;\";</code>",
"<code>&thinsp;&thinsp;});</code>",
"<code>&thinsp;&thinsp;html += \"&lt;/div&gt;&lt;br&gt;\";</code>",
"<code>&nbsp;&nbsp;var keys = Object.keys(val);</code>",
"<code>&nbsp;&nbsp;html += \"&lt;div class = 'cat'&gt;\";</code>",
"<code>&nbsp;&nbsp;keys.map(function(key) {</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;html += \"&lt;b&gt;\" + key + \"&lt;/b&gt;: \" + val[key] + \"&lt;br&gt;\";</code>",
"<code>&nbsp;&nbsp;});</code>",
"<code>&nbsp;&nbsp;html += \"&lt;/div&gt;&lt;br&gt;\";</code>",
"<code>});</code>"
],
"tests": [
@ -225,7 +225,7 @@
"We've seen from the last two lessons that each object in our JSON array contains an <code>imageLink</code> key with a value that is the url of a cat's image.",
"When we're looping through these objects, let's use this <code>imageLink</code> property to display this image in an <code>img</code> element.",
"Here's the code that does this:",
"<code>&thinsp;&thinsp;html += \"&lt;img src = '\" + val.imageLink + \"'&gt;\";</code>"
"<code>&nbsp;&nbsp;html += \"&lt;img src = '\" + val.imageLink + \"'&gt;\";</code>"
],
"tests": [
"assert(editor.match(/val.imageLink/gi), 'You should have used the <code>imageLink</code> property to display the images.')"
@ -289,7 +289,7 @@
"Let's filter out the cat who's \"id\" key has a value of 1.",
"Here's the code to do this:",
"<code>json = json.filter(function(val) {</code>",
"<code>&thinsp;&thinsp;return(val.id !== 1);</code>",
"<code>&nbsp;&nbsp;return(val.id !== 1);</code>",
"<code>});</code>"
],
"tests": [
@ -358,9 +358,9 @@
"By selecting allow you will see the text on the output phone change to your latitude and longitude",
"Here's some code that does this:",
"<code>if (navigator.geolocation) {</code>",
"<code>&thinsp;&thinsp;navigator.geolocation.getCurrentPosition(function(position) {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;$(\"#data\").html(\"latitude: \" + position.coords.latitude + \"&lt;br&gt;longitude: \" + position.coords.longitude);</code>",
"<code>&thinsp;&thinsp;});</code>",
"<code>&nbsp;&nbsp;navigator.geolocation.getCurrentPosition(function(position) {</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;$(\"#data\").html(\"latitude: \" + position.coords.latitude + \"&lt;br&gt;longitude: \" + position.coords.longitude);</code>",
"<code>&nbsp;&nbsp;});</code>",
"<code>}</code>"
],
"tests": [

View File

@ -54,9 +54,9 @@
"We are also able to create objects using <code>constructor</code> functions.",
"Here's an example of a constructor function:",
"<code>var Car = function() {</code>",
"<code>&thinsp;&thinsp;this.wheels = 4;</code>",
"<code>&thinsp;&thinsp;this.engines = 1;</code>",
"<code>&thinsp;&thinsp;this.seats = 1;</code>",
"<code>&nbsp;&nbsp;this.wheels = 4;</code>",
"<code>&nbsp;&nbsp;this.engines = 1;</code>",
"<code>&nbsp;&nbsp;this.seats = 1;</code>",
"<code>};</code>",
"Give your <code>myMotorBike</code> object a <code>wheels</code>, <code>engines</code> and <code>seats</code> attribute and set them to numbers.",
"You may be confused by the <code>this</code> keyword here. Don't worry, we will get to that very soon."
@ -190,7 +190,7 @@
"description":[
"The <code>map</code> method is a convenient way to iterate through arrays. Here's an example usage:",
"<code>var timesFour = oldArray.map(function(val){</code>",
"<code>&thinsp;&thinsp;return val * 4;</code>",
"<code>&nbsp;&nbsp;return val * 4;</code>",
"<code>});</code>",
"",
"The <code>map</code> method will iterate through every element of the array, creating a new array with values that have been modified by the callback function, and return it.",
@ -228,7 +228,7 @@
"<code>reduce</code> has an optional second argument which can be used to set the initial value of the accumulator. If no initial value is specified it will be the first array element and currentVal will start with the second array element.",
"Here is an example of <code>reduce</code> being used to subtract all the values of an array:",
"<code>var singleVal = array.reduce(function(previousVal, currentVal) {</code>",
"<code>&thinsp;&thinsp;return previousVal - currentVal;</code>",
"<code>&nbsp;&nbsp;return previousVal - currentVal;</code>",
"<code>}, 0);</code>",
"Use the <code>reduce</code> method to sum all the values in <code>array</code> and assign it to <code>singleVal</code>."
],
@ -263,7 +263,7 @@
"The following code is an example of using filter to remove array elements that are not even numbers:",
"Note: We omit the second and third arguments since we only need the value",
"<code>array = array.filter(function(val) {</code>",
"<code>&thinsp;&thinsp;return val % 2 === 0;</code>",
"<code>&nbsp;&nbsp;return val % 2 === 0;</code>",
"<code>});</code>",
"Use <code>filter</code> to remove all elements from <code>array</code> that are greater than 5."
],
@ -296,7 +296,7 @@
"Here is an example of using sort with a compare function that will sort the elements from smallest to largest number:",
"<code>var array = [1, 12, 21, 2];</code>",
"<code>array.sort(function(a, b) {</code>",
"<code>&thinsp;&thinsp;return a - b;</code>",
"<code>&nbsp;&nbsp;return a - b;</code>",
"<code>});</code>",
"Use <code>sort</code> to sort <code>array</code> from largest to smallest."
],