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

Merge pull request #12761 from QuincyLarson/fix/instructions-become-hrs

Browse Source 
turn the "instructions" into an hr element
This commit is contained in:
mrugesh mohapatra
2017-01-24 18:16:54 +05:30
committed by GitHub
parent d4e1ac1290 33b778eed4
commit 9327aa60f2
14 changed files with 337 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
View File

@ -15,7 +15,7 @@
"You can make a multi-line comment beginning with <code>/*</code> and ending with <code>*/</code>:",
"<blockquote>/* This is a <br> multi-line comment */</blockquote>",
"<strong>Best Practice</strong><br>As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code&mdash;both for others <em>and</em> for your future self.",
"<h4>Instructions</h4>",
"<hr>",
"Try creating one of each type of comment."
],
"challengeSeed": [
@ -55,7 +55,7 @@
"<code>/*Voici un commentaire <br> sur plusieurs lignes */</code>",
"<strong>Conseils</strong>",
"Lorsque vous écrivez votre code, vous devriez ajouter régulièrement des commentaires pour clarifier l'objectif de certaines parties de votre code. De bons commentaires peuvent aider les autres <em>et</em> vous-même à mieux comprendre votre code.",
"<h4>Instructions</h4>",
"<hr>",
"Essayez de créer un commentaire de chaque type."
]
}
@ -73,7 +73,7 @@
"<blockquote>var ourName;</blockquote>",
"creates a <code>variable</code> called <code>ourName</code>. In JavaScript we end statements with semicolons.",
"<code>Variable</code> names can be made up of numbers, letters, and <code>$</code> or <code>_</code>, but may not contain spaces or start with a number.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>var</code> keyword to create a variable called <code>myName</code>.",
"<strong>Hint</strong><br>Look at the <code>ourName</code> example if you get stuck."
],
@ -117,7 +117,7 @@
"<code>var notreNom</code>;",
"crée une <code>variable</code> appelée <code>notreNom</code>.On termine nos expressions avec un point virgule en JavaScript.",
"Le nom d'une <code>variable</code> peut être composé de nombres, lettres et <code>$</code> ou <code>_</code>, mais ne peut contenir d'espaces ou commencer par un nombre.",
"<h4>Instructions</h4>",
"<hr>",
"Utilisez le mot-clé <code>var</code> pour créer une variable appelée <code>monNom</code>",
"<strong>Conseil</strong><br>Regardez à l'exemple de <code>notreNom</code> si vous vous êtes bloqué."
]
@ -134,7 +134,7 @@
"Assignment always goes from right to left. Everything to the right of the <code>=</code> operator is resolved before the value is assigned to the variable to the left of the operator.",
"<blockquote>myVar = 5;<br>myNum = myVar;</blockquote>",
"Assigns <code>5</code> to <code>myVar</code> and then resolves <code>myVar</code> to <code>5</code> again and assigns it to <code>myNum</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Assign the value <code>7</code> to variable <code>a</code>.",
"Assign the contents of <code>a</code> to variable <code>b</code>."
],
@ -193,7 +193,7 @@
"It is common to <dfn>initialize</dfn> a variable to an initial value in the same line as it is declared.",
"<code>var myVar = 0;</code>",
"Creates a new variable called <code>myVar</code> and assigns it an initial value of <code>0</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Define a variable <code>a</code> with <code>var</code> and initialize it to a value of <code>9</code>."
],
"releasedOn": "January 1, 2016",
@ -233,7 +233,7 @@
"title": "Understanding Uninitialized Variables",
"description": [
"When JavaScript variables are declared, they have an initial value of <code>undefined</code>. If you do a mathematical operation on an <code>undefined</code> variable your result will be <code>NaN</code> which means <dfn>\"Not a Number\"</dfn>. If you concatenate a string with an <code>undefined</code> variable, you will get a literal <dfn>string</dfn> of <code>\"undefined\"</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Initialize the three variables <code>a</code>, <code>b</code>, and <code>c</code> with <code>5</code>, <code>10</code>, and <code>\"I am a\"</code> respectively so that they will not be <code>undefined</code>."
],
"releasedOn": "January 1, 2016",
@ -285,7 +285,7 @@
"Write variable names in Javascript in <dfn>camelCase</dfn>. In <dfn>camelCase</dfn>, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized.",
"<strong>Examples:</strong>",
"<blockquote>var someVariable;<br>var anotherVariableName;<br>var thisVariableNameIsTooLong;</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Modify the existing declarations and assignments so their names use <dfn>camelCase</dfn>.<br>Do not create any new variables."
],
"releasedOn": "January 1, 2016",
@ -336,11 +336,9 @@
"<code>Number</code> is a data type in JavaScript which represents numeric data.",
"Now let's try to add two numbers using JavaScript.",
"JavaScript uses the <code>+</code> symbol as addition operation when placed between two numbers.",
"",
"<strong>Example</strong>",
"<blockquote>myVar = 5 + 10; // assigned 15</blockquote>",
"",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>0</code> so that sum will equal <code>20</code>."
],
"challengeSeed": [
@ -380,7 +378,7 @@
"<strong>Example</strong>",
"<blockquote>myVar = 12 - 6; // assigned 6</blockquote>",
"",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>0</code> so the difference is <code>12</code>."
],
"challengeSeed": [
@ -422,7 +420,7 @@
"<strong>Example</strong>",
"<blockquote>myVar = 13 * 13; // assigned 169</blockquote>",
"",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>0</code> so that product will equal <code>80</code>."
],
"challengeSeed": [
@ -463,7 +461,7 @@
"<strong>Example</strong>",
"<blockquote>myVar = 16 / 2; // assigned 8</blockquote>",
"",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>0</code> so that the <code>quotient</code> is equal to <code>2</code>."
],
"challengeSeed": [
@ -503,7 +501,7 @@
"is the equivalent of",
"<code>i = i + 1;</code>",
"<strong>Note</strong><br>The entire line becomes <code>i++;</code>, eliminating the need for the equal sign.",
"<h4>Instructions</h4>",
"<hr>",
"Change the code to use the <code>++</code> operator on <code>myVar</code>.",
"<strong>Hint</strong><br>Learn more about <a href=\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment_()\" target=\"_blank\">Arithmetic operators - Increment (++)</a>."
],
@ -553,7 +551,7 @@
"is the equivalent of",
"<code>i = i - 1;</code>",
"<strong>Note</strong><br>The entire line becomes <code>i--;</code>, eliminating the need for the equal sign.",
"<h4>Instructions</h4>",
"<hr>",
"Change the code to use the <code>--</code> operator on <code>myVar</code>."
],
"releasedOn": "January 1, 2016",
@ -598,7 +596,7 @@
"description": [
"We can store decimal numbers in variables too. Decimal numbers are sometimes referred to as <dfn>floating point</dfn> numbers or <dfn>floats</dfn>.",
"<strong>Note</strong><br>Not all real numbers can accurately be represented in <dfn>floating point</dfn>. This can lead to rounding errors. <a href=\"https://en.wikipedia.org/wiki/Floating_point#Accuracy_problems\" target=\"_blank\">Details Here</a>.",
"<h4>Instructions</h4>",
"<hr>",
"Create a variable <code>myDecimal</code> and give it a decimal value with a fractional part (e.g. <code>5.7</code>)."
],
"challengeSeed": [
@ -638,7 +636,7 @@
"description": [
"In JavaScript, you can also perform calculations with decimal numbers, just like whole numbers.",
"Let's multiply two decimals together to get their product.",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>0.0</code> so that product will equal <code>5.0</code>."
],
"challengeSeed": [
@ -675,7 +673,7 @@
"title": "Divide one Decimal by Another with JavaScript",
"description": [
"Now let's divide one decimal by another.",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>0.0</code> so that <code>quotient</code> will equal to <code>2.2</code>."
],
"challengeSeed": [
@ -716,7 +714,7 @@
"<strong>Usage</strong><br>In mathematics, a number can be checked to be even or odd by checking the remainder of the division of the number by <code>2</code>.",
"<blockquote>17 % 2 = 1 (17 is Odd)<br>48 % 2 = 0 (48 is Even)</blockquote>",
"<strong>Note</strong><br>The <dfn>remainder</dfn> operator is sometimes incorrectly referred to as the \"modulus\" operator. It is very similar to modulus, but does not work properly with negative numbers.",
"<h4>Instructions</h4>",
"<hr>",
"Set <code>remainder</code> equal to the remainder of <code>11</code> divided by <code>3</code> using the <dfn>remainder</dfn> (<code>%</code>) operator."
],
"releasedOn": "January 1, 2016",
@ -764,7 +762,7 @@
"to add <code>5</code> to <code>myVar</code>. Since this is such a common pattern, there are operators which do both a mathematical operation and assignment in one step.",
"One such operator is the <code>+=</code> operator.",
"<blockquote>var myVar = 1;<br>myVar += 5;<br>console.log(myVar); // Returns 6</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>+=</code> operator."
],
"releasedOn": "January 1, 2016",
@ -818,7 +816,7 @@
"<code>myVar = myVar - 5;</code>",
"will subtract <code>5</code> from <code>myVar</code>. This can be rewritten as: ",
"<code>myVar -= 5;</code>",
"<h4>Instructions</h4>",
"<hr>",
"Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>-=</code> operator."
],
"releasedOn": "January 1, 2016",
@ -872,7 +870,7 @@
"<code>myVar = myVar * 5;</code>",
"will multiply <code>myVar</code> by <code>5</code>. This can be rewritten as: ",
"<code>myVar *= 5;</code>",
"<h4>Instructions</h4>",
"<hr>",
"Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>*=</code> operator."
],
"releasedOn": "January 1, 2016",
@ -926,7 +924,7 @@
"<code>myVar = myVar / 5;</code>",
"Will divide <code>myVar</code> by <code>5</code>. This can be rewritten as: ",
"<code>myVar /= 5;</code>",
"<h4>Instructions</h4>",
"<hr>",
"Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>/=</code> operator."
],
"releasedOn": "January 1, 2016",
@ -1025,7 +1023,7 @@
"Previously we have used the code",
"<code>var myName = \"your name\";</code>",
"<code>\"your name\"</code> is called a <dfn>string</dfn> <dfn>literal</dfn>. It is a string because it is a series of zero or more characters enclosed in single or double quotes.",
"<h4>Instructions</h4>",
"<hr>",
"Create two new <code>string</code> variables: <code>myFirstName</code> and <code>myLastName</code> and assign them the values of your first and last name, respectively."
],
"challengeSeed": [
@ -1068,7 +1066,7 @@
"<code>var sampleStr = \"Alan said, \\\"Peter is learning JavaScript\\\".\";</code>",
"This signals to JavaScript that the following quote is not the end of the string, but should instead appear inside the string. So if you were to print this to the console, you would get:",
"<code>Alan said, \"Peter is learning JavaScript\".</code>",
"<h4>Instructions</h4>",
"<hr>",
"Use <dfn>backslashes</dfn> to assign a string to the <code>myStr</code> variable so that if you were to print it to the console, you would see:",
"<code>I am a \"double quoted\" string inside \"double quotes\".</code>"
],
@ -1119,7 +1117,7 @@
"The value in using one or the other has to do with the need to <dfn>escape</dfn> quotes of the same type. Unless they are escaped, you cannot have more than one pair of whichever quote type begins a string.",
"If you have a string with many double quotes, this can be difficult to read and write. Instead, use single quotes:",
"<code>'This string has \"double quotes\" in it. And \"probably\" lots of them.'</code>",
"<h4>Instructions</h4>",
"<hr>",
"Change the provided string from double to single quotes and remove the escaping."
],
"releasedOn": "January 1, 2016",
@ -1161,7 +1159,7 @@
"Quotes are not the only characters that can be <dfn>escaped</dfn> inside a string. There are two reasons to use escaping characters: First is to allow you to use characters you might not otherwise be able to type out, such as a backspace. Second is to allow you to represent multiple quotes in a string without JavaScript misinterpreting what you mean. We learned this in the previous challenge.",
"<table class=\"table table-striped\"><thead><tr><th>Code</th><th>Output</th></tr></thead><tbody><tr><td><code>\\'</code></td><td>single quote</td></tr><tr><td><code>\\\"</code></td><td>double quote</td></tr><tr><td><code>\\\\</code></td><td>backslash</td></tr><tr><td><code>\\n</code></td><td>newline</td></tr><tr><td><code>\\r</code></td><td>carriage return</td></tr><tr><td><code>\\t</code></td><td>tab</td></tr><tr><td><code>\\b</code></td><td>backspace</td></tr><tr><td><code>\\f</code></td><td>form feed</td></tr></tbody></table>",
"<em>Note that the backslash itself must be escaped in order to display as a backslash.</em>",
"<h4>Instructions</h4>",
"<hr>",
"Assign the following three lines of text into the single variable <code>myStr</code> using escape sequences.",
"<blockquote>FirstLine<br/>&nbsp;&nbsp;&nbsp;&nbsp;\\SecondLine<br/>ThirdLine</blockquote>",
"You will need to use escape sequences to insert special characters correctly. You will also need to follow the spacing as it looks above, with no spaces between escape sequences or words.",
@ -1211,7 +1209,7 @@
"<strong>Example</strong>",
"<blockquote>'My name is Alan,' + ' I concatenate.'</blockquote>",
"<strong>Note</strong><br>Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.",
"<h4>Instructions</h4>",
"<hr>",
"Build <code>myStr</code> from the strings <code>\"This is the start. \"</code> and <code>\"This is the end.\"</code> using the <code>+</code> operator."
],
"releasedOn": "January 1, 2016",
@ -1265,7 +1263,7 @@
"description": [
"We can also use the <code>+=</code> operator to <dfn>concatenate</dfn> a string onto the end of an existing string variable. This can be very helpful to break a long string over several lines.",
"<strong>Note</strong><br>Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.",
"<h4>Instructions</h4>",
"<hr>",
"Build <code>myStr</code> over several lines by concatenating these two strings:<br><code>\"This is the first sentence. \"</code> and <code>\"This is the second sentence.\"</code> using the <code>+=</code> operator."
],
"releasedOn": "January 1, 2016",
@ -1315,7 +1313,7 @@
"title": "Constructing Strings with Variables",
"description": [
"Sometimes you will need to build a string, <a href=\"https://en.wikipedia.org/wiki/Mad_Libs\" target=\"_blank\">Mad Libs</a> style. By using the concatenation operator (<code>+</code>), you can insert one or more variables into a string you're building.",
"<h4>Instructions</h4>",
"<hr>",
"Set <code>myName</code> to a string equal to your name and build <code>myStr</code> with <code>myName</code> between the strings <code>\"My name is \"</code> and <code>\" and I am well!\"</code>"
],
"releasedOn": "January 1, 2016",
@ -1371,7 +1369,7 @@
"title": "Appending Variables to Strings",
"description": [
"Just as we can build a string over multiple lines out of string <dfn>literals</dfn>, we can also append variables to a string using the plus equals (<code>+=</code>) operator.",
"<h4>Instructions</h4>",
"<hr>",
"Set <code>someAdjective</code> and append it to <code>myStr</code> using the <code>+=</code> operator."
],
"releasedOn": "January 1, 2016",
@ -1430,7 +1428,7 @@
"You can find the length of a <code>String</code> value by writing <code>.length</code> after the string variable or string literal.",
"<code>\"Alan Peter\".length; // 10</code>",
"For example, if we created a variable <code>var firstName = \"Charles\"</code>, we could find out how long the string <code>\"Charles\"</code> is by using the <code>firstName.length</code> property.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>.length</code> property to count the number of characters in the <code>lastName</code> variable and assign it to <code>lastNameLength</code>."
],
"challengeSeed": [
@ -1480,7 +1478,7 @@
"<code>Bracket notation</code> is a way to get a character at a specific <code>index</code> within a string.",
"Most modern programming languages, like JavaScript, don't start counting at 1 like humans do. They start at 0. This is referred to as <dfn>Zero-based</dfn> indexing.",
"For example, the character at index 0 in the word \"Charles\" is \"C\". So if <code>var firstName = \"Charles\"</code>, you can get the value of the first letter of the string by using <code>firstName[0]</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Use <dfn>bracket notation</dfn> to find the first character in the <code>lastName</code> variable and assign it to <code>firstLetterOfLastName</code>.",
"<strong>Hint</strong><br>Try looking at the <code>firstLetterOfFirstName</code> variable declaration if you get stuck."
],
@ -1534,7 +1532,7 @@
"<blockquote>var myStr = \"Bob\";<br>myStr[0] = \"J\";</blockquote>",
"cannot change the value of <code>myStr</code> to \"Job\", because the contents of <code>myStr</code> cannot be altered. Note that this does <em>not</em> mean that <code>myStr</code> cannot be changed, just that the individual characters of a <dfn>string literal</dfn> cannot be changed. The only way to change <code>myStr</code> would be to assign it with a new string, like this:",
"<blockquote>var myStr = \"Bob\";<br>myStr = \"Job\";</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Correct the assignment to <code>myStr</code> to achieve the desired effect that is intended by <code>myStr[0] = \"H\" ;</code>."
],
"releasedOn": "January 1, 2016",
@ -1581,7 +1579,7 @@
"description": [
"You can also use <dfn>bracket notation</dfn> to get the character at other positions within a string.",
"Remember that computers start counting at <code>0</code>, so the first character is actually the zeroth character.",
"<h4>Instructions</h4>",
"<hr>",
"Let's try to set <code>thirdLetterOfLastName</code> to equal the third letter of the <code>lastName</code> variable using bracket notation.",
"<strong>Hint</strong><br>Try looking at the <code>secondLetterOfFirstName</code> variable declaration if you get stuck."
],
@ -1629,7 +1627,7 @@
"description": [
"In order to get the last letter of a string, you can subtract one from the string's length.",
"For example, if <code>var firstName = \"Charles\"</code>, you can get the value of the last letter of the string by using <code>firstName[firstName.length - 1]</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Use <dfn>bracket notation</dfn> to find the last character in the <code>lastName</code> variable.",
"<strong>Hint</strong><br>Try looking at the <code>lastLetterOfFirstName</code> variable declaration if you get stuck."
],
@ -1677,7 +1675,7 @@
"description": [
"You can use the same principle we just used to retrieve the last character in a string to retrieve the Nth-to-last character.",
"For example, you can get the value of the third-to-last letter of the <code>var firstName = \"Charles\"</code> string by using <code>firstName[firstName.length - 3]</code>",
"<h4>Instructions</h4>",
"<hr>",
"Use <dfn>bracket notation</dfn> to find the second-to-last character in the <code>lastName</code> string.",
"<strong>Hint</strong><br>Try looking at the <code>thirdToLastLetterOfFirstName</code> variable declaration if you get stuck."
],
@ -1776,7 +1774,7 @@
"With JavaScript <code>array</code> variables, we can store several pieces of data in one place.",
"You start an array declaration with an opening square bracket, end it with a closing square bracket, and put a comma between each entry, like this: ",
"<code>var sandwich = [\"peanut butter\", \"jelly\", \"bread\"]</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the new array <code>myArray</code> so that it contains both a <code>string</code> and a <code>number</code> (in that order).",
"<strong>Hint</strong><br>Refer to the example code in the text editor if you get stuck."
],
@ -1819,7 +1817,7 @@
"title": "Nest one Array within Another Array",
"description": [
"You can also nest arrays within other arrays, like this: <code>[[\"Bulls\", 23], [\"White Sox\", 45]]</code>. This is also called a <dfn>Multi-dimensional Array<dfn>.",
"<h4>Instructions</h4>",
"<hr>",
"Create a nested array called <code>myArray</code>."
],
"challengeSeed": [
@ -1861,7 +1859,7 @@
"<strong>Example</strong>",
"<blockquote>var array = [1,2,3];<br>array[0]; // equals 1<br>var data = array[1]; // equals 2</blockquote>",
"<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0]</code>. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.",
"<h4>Instructions</h4>",
"<hr>",
"Create a variable called <code>myData</code> and set it to equal the first value of <code>myArray</code> using bracket notation."
],
"challengeSeed": [
@ -1911,7 +1909,7 @@
"<strong>Example</strong>",
"<blockquote>var ourArray = [3,2,1];<br>ourArray[0] = 1; // equals [1,2,1]</blockquote>",
"<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0]</code>. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the data stored at index <code>0</code> of <code>myArray</code> to a value of <code>3</code>."
],
"challengeSeed": [
@ -1960,7 +1958,7 @@
"<strong>Example</strong>",
"<blockquote>var arr = [<br> [1,2,3],<br> [4,5,6],<br> [7,8,9],<br> [[10,11,12], 13, 14]<br>];<br>arr[3]; // equals [[10,11,12], 13, 14]<br>arr[3][0]; // equals [10,11,12]<br>arr[3][0][1]; // equals 11</blockquote>",
"<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0][0]</code> and even this <code>array [0] [0]</code> is not allowed. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.",
"<h4>Instructions</h4>",
"<hr>",
"Using bracket notation select an element from <code>myArray</code> such that <code>myData</code> is equal to <code>8</code>."
],
"releasedOn": "January 1, 2016",
@ -2004,7 +2002,7 @@
"An easy way to append data to the end of an array is via the <code>push()</code> function.",
"<code>.push()</code> takes one or more <dfn>parameters</dfn> and \"pushes\" them onto the end of the array.",
"<blockquote>var arr = [1,2,3];<br>arr.push(4);<br>// arr is now [1,2,3,4]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Push <code>[\"dog\", 3]</code> onto the end of the <code>myArray</code> variable."
],
"challengeSeed": [
@ -2050,7 +2048,7 @@
"<code>.pop()</code> is used to \"pop\" a value off of the end of an array. We can store this \"popped off\" value by assigning it to a variable. In other words, <code>.pop()</code> removes the last element from an array and returns that element.",
"Any type of entry can be \"popped\" off of an array - numbers, strings, even nested arrays.",
"<blockquote><code>var threeArr = [1, 4, 6];<br> var oneDown = threeArr.pop();<br> console.log(oneDown); // Returns 6<br> console.log(threeArr); // Returns [1, 4]</code></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>.pop()</code> function to remove the last item from <code>myArray</code>, assigning the \"popped off\" value to <code>removedFromMyArray</code>."
],
"challengeSeed": [
@ -2099,7 +2097,7 @@
"description": [
"<code>pop()</code> always removes the last element of an array. What if you want to remove the first?",
"That's where <code>.shift()</code> comes in. It works just like <code>.pop()</code>, except it removes the first element instead of the last.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>.shift()</code> function to remove the first item from <code>myArray</code>, assigning the \"shifted off\" value to <code>removedFromMyArray</code>."
],
"challengeSeed": [
@ -2146,7 +2144,7 @@
"description": [
"Not only can you <code>shift</code> elements off of the beginning of an array, you can also <code>unshift</code> elements to the beginning of an array i.e. add elements in front of the array.",
"<code>.unshift()</code> works exactly like <code>.push()</code>, but instead of adding the element at the end of the array, <code>unshift()</code> adds the element at the beginning of the array.",
"<h4>Instructions</h4>",
"<hr>",
"Add <code>[\"Paul\",35]</code> to the beginning of the <code>myArray</code> variable using <code>unshift()</code>."
],
"challengeSeed": [
@ -2263,7 +2261,7 @@
"You can call or <dfn>invoke</dfn> this function by using its name followed by parentheses, like this:",
"<code>functionName();</code>",
"Each time the function is called it will print out the message <code>\"Hello World\"</code> on the dev console. All of the code between the curly braces will be executed every time the function is called.",
"<h4>Instructions</h4>",
"<hr>",
"<ol><li>Create a function called <code>reusableFunction</code> which prints <code>\"Hi World\"</code> to the dev console.</li><li>Call the function.</li></ol>"
],
"head": [
@ -2345,7 +2343,7 @@
"Then we can call <code>testFun</code>:",
"<code>testFun(\"Hello\", \"World\");</code>",
"We have passed two arguments, <code>\"Hello\"</code> and <code>\"World\"</code>. Inside the function, <code>param1</code> will equal \"Hello\" and <code>param2</code> will equal \"World\". Note that you could call <code>testFun</code> again with different arguments and the parameters would take on the value of the new arguments.",
"<h4>Instructions</h4>",
"<hr>",
"<ol><li>Create a function called <code>functionWithArgs</code> that accepts two arguments and outputs their sum to the dev console.</li><li>Call the function.</li></ol>"
],
"releasedOn": "January 1, 2016",
@ -2424,7 +2422,7 @@
"description": [
"In JavaScript, <dfn>scope</dfn> refers to the visibility of variables. Variables which are defined outside of a function block have <dfn>Global</dfn> scope. This means, they can be seen everywhere in your JavaScript code.",
"Variables which are used without the <code>var</code> keyword are automatically created in the <code>global</code> scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with <code>var</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Using <code>var</code>, declare a <code>global</code> variable <code>myGlobal</code> outside of any function. Initialize it with a value of <code>10</code>.",
"Inside function <code>fun1</code>, assign <code>5</code> to <code>oopsGlobal</code> <strong><em>without</em></strong> using the <code>var</code> keyword."
],
@ -2511,7 +2509,7 @@
"Here is a function <code>myTest</code> with a local variable called <code>loc</code>.",
"<blockquote>function myTest() {<br> var loc = \"foo\";<br> console.log(loc);<br>}<br>myTest(); // logs \"foo\"<br>console.log(loc); // loc is not defined</blockquote>",
"<code>loc</code> is not defined outside of the function.",
"<h4>Instructions</h4>",
"<hr>",
"Declare a local variable <code>myVar</code> inside <code>myLocalScope</code>. Run the tests and then follow the instructions commented out in the editor.",
"<strong>Hint</strong><br>Refreshing the page may help if you get stuck."
],
@ -2587,7 +2585,7 @@
"In this example:",
"<blockquote>var someVar = \"Hat\";<br>function myFun() {<br> var someVar = \"Head\";<br> return someVar;<br>}</blockquote>",
"The function <code>myFun</code> will return <code>\"Head\"</code> because the <code>local</code> version of the variable is present.",
"<h4>Instructions</h4>",
"<hr>",
"Add a local variable to <code>myOutfit</code> to override the value of <code>outerWear</code> with <code>\"sweater\"</code>."
],
"releasedOn": "January 1, 2016",
@ -2638,7 +2636,7 @@
"<strong>Example</strong>",
"<blockquote>function plusThree(num) {<br> return num + 3;<br>}<br>var answer = plusThree(5); // 8</blockquote>",
"<code>plusThree</code> takes an <dfn>argument</dfn> for <code>num</code> and returns a value equal to <code>num + 3</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Create a function <code>timesFive</code> that accepts one argument, multiplies it by <code>5</code>, and returns the new value."
],
"releasedOn": "January 1, 2016",
@ -2688,7 +2686,7 @@
"Assume we have pre-defined a function <code>sum</code> which adds two numbers together, then: ",
"<code>ourSum = sum(5, 12);</code>",
"will call <code>sum</code> function, which returns a value of <code>17</code> and assigns it to <code>ourSum</code> variable.",
"<h4>Instructions</h4>",
"<hr>",
"Call the <code>processArg</code> function with an argument of <code>7</code> and assign its return value to the variable <code>processed</code>."
],
"releasedOn": "January 1, 2016",
@ -2819,7 +2817,7 @@
"description": [
"Another data type is the <dfn>Boolean</dfn>. <code>Booleans</code> may only be one of two values: <code>true</code> or <code>false</code>. They are basically little on-off switches, where <code>true</code> is \"on\" and <code>false</code> is \"off.\" These two states are mutually exclusive.",
"<strong>Note</strong><br><code>Boolean</code> values are never written with quotes. The <code>strings</code> <code>\"true\"</code> and <code>\"false\"</code> are not <code>Boolean</code> and have no special meaning in JavaScript.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the <code>welcomeToBooleans</code> function so that it returns <code>true</code> instead of <code>false</code> when the run button is clicked."
],
"challengeSeed": [
@ -2867,7 +2865,7 @@
"<strong>Example</strong>",
"<blockquote>function test (myCondition) {<br> if (myCondition) {<br> return \"It was true\";<br> }<br> return \"It was false\";<br>}<br>test(true); // returns \"It was true\"<br>test(false); // returns \"It was false\"</blockquote>",
"When <code>test</code> is called with a value of <code>true</code>, the <code>if</code> statement evaluates <code>myCondition</code> to see if it is <code>true</code> or not. Since it is <code>true</code>, the function returns <code>\"It was true\"</code>. When we call <code>test</code> with a value of <code>false</code>, <code>myCondition</code> is <em>not</em> <code>true</code> and the statement in the curly braces is not executed and the function returns <code>\"It was false\"</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Create an <code>if</code> statement inside the function to return <code>\"Yes, that was true\"</code> if the parameter <code>wasThatTrue</code> is <code>true</code> and return <code>\"No, that was false\"</code> otherwise."
],
"challengeSeed": [
@ -2934,7 +2932,7 @@
"If <code>myVal</code> is equal to <code>10</code>, the equality operator returns <code>true</code>, so the code in the curly braces will execute, and the function will return <code>\"Equal\"</code>. Otherwise, the function will return <code>\"Not Equal\"</code>.",
"In order for JavaScript to compare two different <code>data types</code> (for example, <code>numbers</code> and <code>strings</code>), it must convert one type to another. Once it does, however, it can compare terms as follows:",
"<blockquote> 1 == 1 // true<br> 1 == 2 // false<br> 1 == '1' // true<br> \"3\" == 3 // true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>equality operator</code> to the indicated line so that the function will return \"Equal\" when <code>val</code> is equivalent to <code>12</code>"
],
"releasedOn": "January 1, 2016",
@ -2985,7 +2983,7 @@
"<strong>Examples</strong>",
"<blockquote>3 === 3 // true<br>3 === '3' // false</blockquote>",
"In the second example, <code>3</code> is a <code>Number</code> type and <code>'3'</code> is a <code>String</code> type.",
"<h4>Instructions</h4>",
"<hr>",
"Use the strict equality operator in the <code>if</code> statement so the function will return \"Equal\" when <code>val</code> is strictly equal to <code>7</code>"
],
"releasedOn": "January 1, 2016",
@ -3033,7 +3031,7 @@
"The inequality operator (<code>!=</code>) is the opposite of the equality operator. It means \"Not Equal\" and returns <code>false</code> where equality would return <code>true</code> and <em>vice versa</em>. Like the equality operator, the inequality operator will convert data types of values while comparing.",
"<strong>Examples</strong>",
"<blockquote>1 != 2 // true<br>1 != \"1\" // false<br>1 != '1' // false<br>1 != true // false<br>0 != false // false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the inequality operator <code>!=</code> in the <code>if</code> statement so that the function will return \"Not Equal\" when <code>val</code> is not equivalent to <code>99</code>"
],
"releasedOn": "January 1, 2016",
@ -3082,7 +3080,7 @@
"The strict inequality operator (<code>!==</code>) is the logical opposite of the strict equality operator. It means \"Strictly Not Equal\" and returns <code>false</code> where strict equality would return <code>true</code> and <em>vice versa</em>. Strict inequality will not convert data types.",
"<strong>Examples</strong>",
"<blockquote>3 !== 3 // false<br>3 !== '3' // true<br>4 !== 3 // true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>strict inequality operator</code> to the <code>if</code> statement so the function will return \"Not Equal\" when <code>val</code> is not strictly equal to <code>17</code>"
],
"releasedOn": "January 1, 2016",
@ -3139,7 +3137,7 @@
"Like the equality operator, greater than operator will convert data types of values while comparing.",
"<strong>Examples</strong>",
"<blockquote> 5 > 3 // true<br> 7 > '3' // true<br> 2 > 3 // false<br>'1' > 9 // false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>greater than</code> operator to the indicated lines so that the return statements make sense."
],
"releasedOn": "January 1, 2016",
@ -3196,7 +3194,7 @@
"Like the equality operator, <code>greater than or equal to</code> operator will convert data types while comparing.",
"<strong>Examples</strong>",
"<blockquote> 6 >= 6 // true<br> 7 >= '3' // true<br> 2 >= 3 // false<br>'7' >= 9 // false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>greater than or equal to</code> operator to the indicated lines so that the return statements make sense."
],
"releasedOn": "January 1, 2016",
@ -3252,7 +3250,7 @@
"The <dfn>less than</dfn> operator (<code>&lt;</code>) compares the values of two numbers. If the number to the left is less than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>. Like the equality operator, <dfn>less than</dfn> operator converts data types while comparing.",
"<strong>Examples</strong>",
"<blockquote> 2 &lt; 5 // true<br>'3' &lt; 7 // true<br> 5 &lt; 5 // false<br> 3 &lt; 2 // false<br>'8' &lt; 4 // false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>less than</code> operator to the indicated lines so that the return statements make sense."
],
"releasedOn": "January 1, 2016",
@ -3306,7 +3304,7 @@
"The <code>less than or equal to</code> operator (<code>&lt;=</code>) compares the values of two numbers. If the number to the left is less than or equal the number to the right, it returns <code>true</code>. If the number on the left is greater than the number on the right, it returns <code>false</code>. Like the equality operator, <code>less than or equal to</code> converts data types.",
"<strong>Examples</strong>",
"<blockquote> 4 &lt;= 5 // true<br>'7' &lt;= 7 // true<br> 5 &lt;= 5 // true<br> 3 &lt;= 2 // false<br>'8' &lt;= 4 // false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>less than or equal to</code> operator to the indicated lines so that the return statements make sense."
],
"releasedOn": "January 1, 2016",
@ -3364,7 +3362,7 @@
"<blockquote>if (num > 5) {<br> if (num < 10) {<br> return \"Yes\";<br> }<br>}<br>return \"No\";</blockquote>",
"will only return \"Yes\" if <code>num</code> is greater than <code>5</code> and less than <code>10</code>. The same logic can be written as:",
"<blockquote>if (num > 5 && num < 10) {<br> return \"Yes\";<br>}<br>return \"No\";</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Combine the two if statements into one statement which will return <code>\"Yes\"</code> if <code>val</code> is less than or equal to <code>50</code> and greater than or equal to <code>25</code>. Otherwise, will return <code>\"No\"</code>."
],
"releasedOn": "January 1, 2016",
@ -3426,7 +3424,7 @@
"<blockquote>if (num > 10) {<br> return \"No\";<br>}<br>if (num < 5) {<br> return \"No\";<br>}<br>return \"Yes\";</blockquote>",
"will return \"Yes\" only if <code>num</code> is between <code>5</code> and <code>10</code> (5 and 10 included). The same logic can be written as:",
"<blockquote>if (num > 10 || num < 5) {<br> return \"No\";<br>}<br>return \"Yes\";</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Combine the two <code>if</code> statements into one statement which returns <code>\"Outside\"</code> if <code>val</code> is not between <code>10</code> and <code>20</code>, inclusive. Otherwise, return <code>\"Inside\"</code>."
],
"releasedOn": "January 1, 2016",
@ -3487,7 +3485,7 @@
"description": [
"When a condition for an <code>if</code> statement is true, the block of code following it is executed. What about when that condition is false? Normally nothing would happen. With an <code>else</code> statement, an alternate block of code can be executed.",
"<blockquote>if (num > 10) {<br> return \"Bigger than 10\";<br>} else {<br> return \"10 or Less\";<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Combine the <code>if</code> statements into a single <code>if/else</code> statement."
],
"releasedOn": "January 1, 2016",
@ -3544,7 +3542,7 @@
"description": [
"If you have multiple conditions that need to be addressed, you can chain <code>if</code> statements together with <code>else if</code> statements.",
"<blockquote>if (num > 15) {<br> return \"Bigger than 15\";<br>} else if (num < 5) {<br> return \"Smaller than 5\";<br>} else {<br> return \"Between 5 and 15\";<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Convert the logic to use <code>else if</code> statements."
],
"releasedOn": "January 1, 2016",
@ -3604,7 +3602,7 @@
"<blockquote>function bar(x) {<br> if (x < 2) {<br> return \"Less than two\";<br> } else if (x < 1) {<br> return \"Less than one\";<br> } else {<br> return \"Greater than or equal to two\";<br> }<br>}</blockquote>",
"While these two functions look nearly identical if we pass a number to both we get different outputs.",
"<blockquote>foo(0) // \"Less than one\"<br>bar(0) // \"Less than two\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the order of logic in the function so that it will return the correct statements in all cases."
],
"challengeSeed": [
@ -3656,7 +3654,7 @@
"description": [
"<code>if/else</code> statements can be chained together for complex logic. Here is <dfn>pseudocode</dfn> of multiple chained <code>if</code> / <code>else if</code> statements:",
"<blockquote>if (<em>condition1</em>) {<br> <em>statement1</em><br>} else if (<em>condition2</em>) {<br> <em>statement2</em><br>} else if (<em>condition3</em>) {<br> <em>statement3</em><br>. . .<br>} else {<br> <em>statementN</em><br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Write chained <code>if</code>/<code>else if</code> statements to fulfill the following conditions:",
"<code>num &lt; 5</code> - return \"Tiny\"<br><code>num &lt; 10</code> - return \"Small\"<br><code>num &lt; 15</code> - return \"Medium\"<br><code>num &lt; 20</code> - return \"Large\"<br><code>num >= 20</code> - return \"Huge\""
],
@ -3766,7 +3764,7 @@
"Here is a <dfn>pseudocode</dfn> example:",
"<blockquote>switch (num) {<br> case value1:<br> statement1;<br> break;<br> case value2:<br> statement2;<br> break;<br>...<br> case valueN:<br> statementN;<br> break;<br>}</blockquote>",
"<code>case</code> values are tested with strict equality (<code>===</code>). The <code>break</code> tells JavaScript to stop executing statements. If the <code>break</code> is omitted, the next statement will be executed.",
"<h4>Instructions</h4>",
"<hr>",
"Write a switch statement which tests <code>val</code> and sets <code>answer</code> for the following conditions:<br><code>1</code> - \"alpha\"<br><code>2</code> - \"beta\"<br><code>3</code> - \"gamma\"<br><code>4</code> - \"delta\""
],
"releasedOn": "January 1, 2016",
@ -3822,7 +3820,7 @@
"In a <code>switch</code> statement you may not be able to specify all possible values as <code>case</code> statements. Instead, you can add the <code>default</code> statement which will be executed if no matching <code>case</code> statements are found. Think of it like the final <code>else</code> statement in an <code>if/else</code> chain.",
"A <code>default</code> statement should be the last case.",
"<blockquote>switch (num) {<br> case value1:<br> statement1;<br> break;<br> case value2:<br> statement2;<br> break;<br>...<br> default:<br> defaultStatement;<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Write a switch statement to set <code>answer</code> for the following conditions:<br><code>\"a\"</code> - \"apple\"<br><code>\"b\"</code> - \"bird\"<br><code>\"c\"</code> - \"cat\"<br><code>default</code> - \"stuff\""
],
"releasedOn": "January 1, 2016",
@ -3876,7 +3874,7 @@
"If the <code>break</code> statement is omitted from a <code>switch</code> statement's <code>case</code>, the following <code>case</code> statement(s) are executed until a <code>break</code> is encountered. If you have multiple inputs with the same output, you can represent them in a <code>switch</code> statement like this:",
"<blockquote>switch(val) {<br> case 1:<br> case 2:<br> case 3:<br> result = \"1, 2, or 3\";<br> break;<br> case 4:<br> result = \"4 alone\";<br>}</blockquote>",
"Cases for 1, 2, and 3 will all produce the same result.",
"<h4>Instructions</h4>",
"<hr>",
"Write a switch statement to set <code>answer</code> for the following ranges:<br><code>1-3</code> - \"Low\"<br><code>4-6</code> - \"Mid\"<br><code>7-9</code> - \"High\"",
"<strong>Note</strong><br>You will need to have a <code>case</code> statement for each number in the range."
],
@ -3936,7 +3934,7 @@
"<blockquote>if (val === 1) {<br> answer = \"a\";<br>} else if (val === 2) {<br> answer = \"b\";<br>} else {<br> answer = \"c\";<br>}</blockquote>",
"can be replaced with:",
"<blockquote>switch (val) {<br> case 1:<br> answer = \"a\";<br> break;<br> case 2:<br> answer = \"b\";<br> break;<br> default:<br> answer = \"c\";<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the chained <code>if</code>/<code>else if</code> statements into a <code>switch</code> statement."
],
"releasedOn": "January 1, 2016",
@ -4005,7 +4003,7 @@
"<blockquote>function isEqual(a,b) {<br> if (a === b) {<br> return true;<br> } else {<br> return false;<br> }<br>}</blockquote>",
"But there's a better way to do this. Since <code>===</code> returns <code>true</code> or <code>false</code>, we can return the result of the comparison:",
"<blockquote>function isEqual(a,b) {<br> return a === b;<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fix the function <code>isLess</code> to remove the <code>if/else</code> statements."
],
"releasedOn": "January 1, 2016",
@ -4058,7 +4056,7 @@
"<strong>Example</strong>",
"<blockquote>function myFun() {<br> console.log(\"Hello\");<br> return \"World\";<br> console.log(\"byebye\")<br>}<br>myFun();</blockquote>",
"The above outputs \"Hello\" to the console, returns \"World\", but <code>\"byebye\"</code> is never output, because the function exits at the <code>return</code> statement.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the function <code>abTest</code> so that if <code>a</code> or <code>b</code> are less than <code>0</code> the function will immediately exit with a value of <code>undefined</code>.",
"<strong>Hint</strong><br>Remember that <a href='http://www.freecodecamp.com/challenges/understanding-uninitialized-variables' target='_blank'><code>undefined</code> is a keyword</a>, not a string."
],
@ -4172,7 +4170,7 @@
"Here's a sample object:",
"<blockquote>var cat = {<br> \"name\": \"Whiskers\",<br> \"legs\": 4,<br> \"tails\": 1,<br> \"enemies\": [\"Water\", \"Dogs\"]<br>};</blockquote>",
"Objects are useful for storing data in a structured way, and can represent real world objects, like a cat.",
"<h4>Instructions</h4>",
"<hr>",
"Make an object that represents a dog called <code>myDog</code> which contains the properties <code>\"name\"</code> (a string), <code>\"legs\"</code>, <code>\"tails\"</code> and <code>\"friends\"</code>.",
"You can set these object properties to whatever values you want, as long <code>\"name\"</code> is a string, <code>\"legs\"</code> and <code>\"tails\"</code> are numbers, and <code>\"friends\"</code> is an array."
],
@ -4237,7 +4235,7 @@
"The dot operator is what you use when you know the name of the property you're trying to access ahead of time.",
"Here is a sample of using the dot operator (<code>.</code>) to read an object property:",
"<blockquote>var myObj = {<br> prop1: \"val1\",<br> prop2: \"val2\"<br>};<br>var prop1val = myObj.prop1; // val1<br>var prop2val = myObj.prop2; // val2</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Read in the property values of <code>testObj</code> using dot notation. Set the variable <code>hatValue</code> equal to the object property <code>hat</code> and set the variable <code>shirtValue</code> equal to the object property <code>shirt</code>."
],
"releasedOn": "January 1, 2016",
@ -4291,7 +4289,7 @@
"Here is a sample of using bracket notation to read an object property:",
"<blockquote>var myObj = {<br> \"Space Name\": \"Kirk\",<br> \"More Space\": \"Spock\"<br>};<br>myObj[\"Space Name\"]; // Kirk<br>myObj['More Space']; // Spock</blockquote>",
"Note that property names with spaces in them must be in quotes (single or double).",
"<h4>Instructions</h4>",
"<hr>",
"Read the values of the properties <code>\"an entree\"</code> and <code>\"the drink\"</code> of <code>testObj</code> using bracket notation and assign them to <code>entreeValue</code> and <code>drinkValue</code> respectively."
],
"releasedOn": "January 1, 2016",
@ -4347,7 +4345,7 @@
"Here is one more:",
"<blockquote>var myDog = \"Hunter\";<br>var dogs = {<br> Fido: \"Mutt\",\n Hunter: \"Doberman\",\n Snoopie: \"Beagle\"<br >}<br>var breed = dogs[myDog];<br>console.log(breed);// \"Doberman\"</blockquote>",
"Note that we do <em>not</em> use quotes around the variable name when using it to access the property because we are using the <em>value</em> of the variable, not the <em>name</em>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>playerNumber</code> variable to lookup player <code>16</code> in <code>testObj</code> using bracket notation. Then assign that name to the <code>player</code> variable."
],
"releasedOn": "January 1, 2016",
@ -4406,7 +4404,7 @@
"<code>ourDog.name = \"Happy Camper\";</code> or",
"<code>ourDog[\"name\"] = \"Happy Camper\";</code>",
"Now when we evaluate <code>ourDog.name</code>, instead of getting \"Camper\", we'll get his new name, \"Happy Camper\".",
"<h4>Instructions</h4>",
"<hr>",
"Update the <code>myDog</code> object's name property. Let's change her name from \"Coder\" to \"Happy Coder\". You can use either dot or bracket notation."
],
"challengeSeed": [
@ -4475,7 +4473,7 @@
"or",
"<code>ourDog[\"bark\"] = \"bow-wow\";</code>",
"Now when we evaluate <code>ourDog.bark</code>, we'll get his bark, \"bow-wow\".",
"<h4>Instructions</h4>",
"<hr>",
"Add a <code>\"bark\"</code> property to <code>myDog</code> and set it to a dog sound, such as \"woof\". You may use either dot or bracket notation."
],
"challengeSeed": [
@ -4532,7 +4530,7 @@
"description": [
"We can also delete properties from objects like this:",
"<code>delete ourDog.bark;</code>",
"<h4>Instructions</h4>",
"<hr>",
"Delete the <code>\"tails\"</code> property from <code>myDog</code>. You may use either dot or bracket notation."
],
"challengeSeed": [
@ -4591,7 +4589,7 @@
"Objects can be thought of as a key/value storage, like a dictionary. If you have tabular data, you can use an object to \"lookup\" values rather than a <code>switch</code> statement or an <code>if/else</code> chain. This is most useful when you know that your input data is limited to a certain range.",
"Here is an example of a simple reverse alphabet lookup:",
"<blockquote>var alpha = {<br> 1:\"Z\",<br> 2:\"Y\",<br> 3:\"X\",<br> 4:\"W\",<br> ...<br> 24:\"C\",<br> 25:\"B\",<br> 26:\"A\"<br>};<br>alpha[2]; // \"Y\"<br>alpha[24]; // \"C\"<br><br>var value = 2;<br>alpha[value]; // \"Y\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Convert the switch statement into a lookup table called <code>lookup</code>. Use it to lookup <code>val</code> and assign the associated string to the <code>result</code> variable."
],
"releasedOn": "January 1, 2016",
@ -4664,7 +4662,7 @@
"Sometimes it is useful to check if the property of a given object exists or not. We can use the <code>.hasOwnProperty(propname)</code> method of objects to determine if that object has the given property name. <code>.hasOwnProperty()</code> returns <code>true</code> or <code>false</code> if the property is found or not.",
"<strong>Example</strong>",
"<blockquote>var myObj = {<br> top: \"hat\",<br> bottom: \"pants\"<br>};<br>myObj.hasOwnProperty(\"top\"); // true<br>myObj.hasOwnProperty(\"middle\"); // false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Modify the function <code>checkObj</code> to test <code>myObj</code> for <code>checkProp</code>. If the property is found, return that property's value. If not, return <code>\"Not Found\"</code>."
],
"releasedOn": "January 1, 2016",
@ -4723,7 +4721,7 @@
"<a href='http://www.json.org/' target=_blank>JavaScript Object Notation</a> or <code>JSON</code> is a related data interchange format used to store data.",
"<blockquote>{<br> \"artist\": \"Daft Punk\",<br> \"title\": \"Homework\",<br> \"release_year\": 1997,<br> \"formats\": [ <br> \"CD\",<br> \"Cassette\",<br> \"LP\"<br> ],<br> \"gold\": true<br>}</blockquote>",
"<strong>Note</strong><br>You will need to place a comma after every object in the array, unless it is the last object in the array.",
"<h4>Instructions</h4>",
"<hr>",
"Add a new album to the <code>myMusic</code> array. Add <code>artist</code> and <code>title</code> strings, <code>release_year</code> number, and a <code>formats</code> array of strings."
],
"releasedOn": "January 1, 2016",
@ -4784,7 +4782,7 @@
"The sub-properties of objects can be accessed by chaining together the dot or bracket notation.",
"Here is a nested object:",
"<blockquote>var ourStorage = {<br> \"desk\": {<br> \"drawer\": \"stapler\"<br> },<br> \"cabinet\": {<br> \"top drawer\": { <br> \"folder1\": \"a file\",<br> \"folder2\": \"secrets\"<br> },<br> \"bottom drawer\": \"soda\"<br> }<br>};<br>ourStorage.cabinet[\"top drawer\"].folder2; // \"secrets\"<br>ourStorage.desk.drawer; // \"stapler\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Access the <code>myStorage</code> object and assign the contents of the <code>glove box</code> property to the <code>gloveBoxContents</code> variable. Use bracket notation for properties with a space in their name."
],
"releasedOn": "January 1, 2016",
@ -4844,7 +4842,7 @@
"As we have seen in earlier examples, objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays.",
"Here is an example of how to access a nested array:",
"<blockquote>var ourPets = [<br> {<br> animalType: \"cat\",<br> names: [<br> \"Meowzer\",<br> \"Fluffy\",<br> \"Kit-Cat\"<br> ]<br> },<br> {<br> animalType: \"dog\",<br> names: [<br> \"Spot\",<br> \"Bowser\",<br> \"Frankie\"<br> ]<br> }<br>];<br>ourPets[0].names[1]; // \"Fluffy\"<br>ourPets[1].names[0]; // \"Spot\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Retrieve the second tree from the variable <code>myPlants</code> using object dot and array bracket notation."
],
"releasedOn": "January 1, 2016",
@ -5003,7 +5001,7 @@
"Another type of JavaScript loop is called a \"<code>while loop</code>\", because it runs \"while\" a specified condition is true and stops once that condition is no longer true.",
"<blockquote>var ourArray = [];<br>var i = 0;<br>while(i &#60; 5) {<br> ourArray.push(i);<br> i++;<br>}</blockquote>",
"Let's try getting a while loop to work by pushing values to an array.",
"<h4>Instructions</h4>",
"<hr>",
"Push the numbers 0 through 4 to <code>myArray</code> using a <code>while</code> loop."
],
"challengeSeed": [
@ -5059,7 +5057,7 @@
"In the following example we initialize with <code>i = 0</code> and iterate while our condition <code>i &#60; 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>.",
"<blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 5; i++) {<br> ourArray.push(i);<br>}</blockquote>",
"<code>ourArray</code> will now contain <code>[0,1,2,3,4]</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Use a <code>for</code> loop to work to push the values 1 through 5 onto <code>myArray</code>."
],
"challengeSeed": [
@ -5121,7 +5119,7 @@
"<blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 10; i += 2) {<br> ourArray.push(i);<br>}</blockquote>",
"<code>ourArray</code> will now contain <code>[0,2,4,6,8]</code>.",
"Let's change our <code>initialization</code> so we can count by odd numbers.",
"<h4>Instructions</h4>",
"<hr>",
"Push the odd numbers from 1 through 9 to <code>myArray</code> using a <code>for</code> loop."
],
"challengeSeed": [
@ -5179,7 +5177,7 @@
"<blockquote>var ourArray = [];<br>for (var i=10; i &#62; 0; i-=2) {<br> ourArray.push(i);<br>}</blockquote>",
"<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 by odd numbers.",
"<h4>Instructions</h4>",
"<hr>",
"Push the odd numbers from 9 through 1 to <code>myArray</code> using a <code>for</code> loop."
],
"challengeSeed": [
@ -5236,7 +5234,7 @@
"A common task in JavaScript is to iterate through the contents of an array. One way to do that is with a <code>for</code> loop. This code will output each element of the array <code>arr</code> to the console:",
"<blockquote>var arr = [10,9,8,7,6];<br>for (var i = 0; i < arr.length; i++) {<br> console.log(arr[i]);<br>}</blockquote>",
"Remember that Arrays have zero-based numbering, which means the last index of the array is length - 1. Our <dfn>condition</dfn> for this loop is <code>i < arr.length</code>, which stops when <code>i</code> is at length - 1.",
"<h4>Instructions</h4>",
"<hr>",
"Declare and initialize a variable <code>total</code> to <code>0</code>. Use a <code>for</code> loop to add the value of each element of the <code>myArr</code> array to <code>total</code>."
],
"releasedOn": "January 1, 2016",
@ -5290,7 +5288,7 @@
"If you have a multi-dimensional array, you can use the same logic as the prior waypoint to loop through both the array and any sub-arrays. Here is an example:",
"<blockquote>var arr = [<br> [1,2], [3,4], [5,6]<br>];<br>for (var i=0; i &lt; arr.length; i++) {<br> for (var j=0; j &lt; arr[i].length; j++) {<br> console.log(arr[i][j]);<br> }<br>}</blockquote>",
"This outputs each sub-element in <code>arr</code> one at a time. Note that for the inner loop, we are checking the <code>.length</code> of <code>arr[i]</code>, since <code>arr[i]</code> is itself an array.",
"<h4>Instructions</h4>",
"<hr>",
"Modify function <code>multiplyAll</code> so that it multiplies the <code>product</code> variable by each number in the sub-arrays of <code>arr</code>"
],
"releasedOn": "January 1, 2016",
@ -5419,7 +5417,7 @@
"Random numbers are useful for creating random behavior.",
"JavaScript has a <code>Math.random()</code> function that generates a random decimal number between <code>0</code> (inclusive) and not quite up to <code>1</code> (exclusive). Thus <code>Math.random()</code> can return a <code>0</code> but never quite return a <code>1</code>",
"<strong>Note</strong><br>Like <a href='storing-values-with-the-assignment-operator' target='_blank'>Storing Values with the Equal Operator</a>, all function calls will be resolved before the <code>return</code> executes, so we can <code>return</code> the value of the <code>Math.random()</code> function.",
"<h4>Instructions</h4>",
"<hr>",
"Change <code>randomFraction</code> to return a random number instead of returning <code>0</code>."
],
"challengeSeed": [
@ -5468,7 +5466,7 @@
"Putting everything together, this is what our code looks like:",
"<code>Math.floor(Math.random() * 20);</code>",
"We are calling <code>Math.random()</code>, multiplying the result by 20, then passing the value to <code>Math.floor()</code> function to round the value down to the nearest whole number.",
"<h4>Instructions</h4>",
"<hr>",
"Use this technique to generate and return a random whole number between <code>0</code> and <code>9</code>."
],
"challengeSeed": [
@ -5522,7 +5520,7 @@
"To do this, we'll define a minimum number <code>min</code> and a maximum number <code>max</code>.",
"Here's the formula we'll use. Take a moment to read it and try to understand what this code is doing:",
"<code>Math.floor(Math.random() * (max - min + 1)) + min</code>",
"<h4>Instructions</h4>",
"<hr>",
"Create a function called <code>randomRange</code> that takes a range <code>myMin</code> and <code>myMax</code> and returns a random number that's greater than or equal to <code>myMin</code>, and is less than or equal to <code>myMax</code>, inclusive."
],
"challengeSeed": [

22
challenges/02-javascript-algorithms-and-data-structures/debugging.json
View File

@ -55,7 +55,7 @@
"The <code>console.log()</code> method, which \"prints\" the output of what's within its parentheses to the console, will likely be the most helpful debugging tool. Placing it at strategic points in your code can show you the intermediate values of variables. It's good practice to have an idea of what the output should be before looking at what it is. Having check points to see the status of your calculations throughout your code will help narrow down where the problem is.",
"Here's an example to print 'Hello world!' to the console:",
"<code>console.log('Hello world!');</code>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>console.log()</code> method to print the value of the variable <code>a</code> where noted in the code."
],
"challengeSeed": [
@ -104,7 +104,7 @@
"Here are some examples using <code>typeof</code>:",
"<blockquote>console.log(typeof \"\"); // outputs \"string\"<br>console.log(typeof 0); // outputs \"number\"<br>console.log(typeof []); // outputs \"object\"<br>console.log(typeof {}); // outputs \"object\"</blockquote>",
"JavaScript recognizes six primitive (immutable) data types: <code>Boolean</code>, <code>Null</code>, <code>Undefined</code>, <code>Number</code>, <code>String</code>, and <code>Symbol</code> (new with ES6) and one type for mutable items: <code>Object</code>. Note that in JavaScript, arrays are technically a type of object.",
"<h4>Instructions</h4>",
"<hr>",
"Add two <code>console.log()</code> statements to check the <code>typeof</code> each of the two variables <code>seven</code> and <code>three</code> in the code."
],
"challengeSeed": [
@ -149,7 +149,7 @@
"description": [
"The <code>console.log()</code> and <code>typeof</code> methods are the two primary ways to check intermediate values and types of program output. Now it's time to get into the common forms that bugs take. One syntax-level issue that fast typers can commiserate with is the humble spelling error.",
"Transposed, missing, or mis-capitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - and complain in the form of a reference error. JavaScript variable and function names are case-sensitive.",
"<h4>Instructions</h4>",
"<hr>",
"Fix the two spelling errors in the code so the <code>netWorkingCapital</code> calculation works."
],
"challengeSeed": [
@ -196,7 +196,7 @@
"description": [
"Another syntax error to be aware of is that all opening parentheses, brackets, curly braces, and quotes have a closing pair. Forgetting a piece tends to happen when you're editing existing code and inserting items with one of the pair types. Also, take care when nesting code blocks into others, such as adding a callback function as an argument to a method.",
"One way to avoid this mistake is as soon as the opening character is typed, immediately include the closing match, then move the cursor back between them and continue coding. Fortunately, most modern code editors generate the second half of the pair automatically.",
"<h4>Instructions</h4>",
"<hr>",
"Fix the two pair errors in the code."
],
"challengeSeed": [
@ -242,7 +242,7 @@
"<blockquote>// These are correct:<br>const grouchoContraction = \"I've had a perfectly wonderful evening, but this wasn't it.\";<br>const quoteInString = \"Groucho Marx once said 'Quote me as saying I was mis-quoted.'\";<br>// This is incorrect:<br>const uhOhGroucho = 'I've had a perfectly wonderful evening, but this wasn't it.';</blockquote>",
"Of course, it is okay to use only one style of quotes. You can escape the quotes inside the string by using the backslash (\\) escape character:",
"<blockquote>// Correct use of same quotes:<br>const allSameQuotes = 'I\\'ve had a perfectly wonderful evening, but this wasn\\'t it.';</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fix the string so it either uses different quotes for the <code>href</code> value, or escape the existing ones. Keep the double quote marks around the entire string."
],
"challengeSeed": [
@ -286,7 +286,7 @@
"As covered in previous challenges, the assignment operator (<code>=</code>) in JavaScript assigns a value to a variable name. And the <code>==</code> and <code>===</code> operators check for equality (the triple <code>===</code> tests for strict equality, meaning both value and type are the same).",
"The code below assigns <code>x</code> to be 2, which evaluates as <code>true</code>. Almost every value on its own in JavaScript evaluates to <code>true</code>, except what are known as the \"falsy\" values: <code>false</code>, <code>0</code>, <code>\"\"</code> (an empty string), <code>NaN</code>, <code>undefined</code>, and <code>null</code>.",
"<blockquote>let x = 1;<br>let y = 2;<br>if (x = y) {<br>&nbsp;&nbsp;// this code block will run for any value of y (unless y were originally set as a falsy)<br>} else {<br>&nbsp;&nbsp;// this code block is what should run (but won't) in this example<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fix the condition so the program runs the right branch, and the appropriate value is assigned to <code>result</code>."
],
"challengeSeed": [
@ -337,7 +337,7 @@
"When a function or method doesn't take any arguments, you may forget to include the (empty) opening and closing parentheses when calling it. Often times the result of a function call is saved in a variable for other use in your code. This error can be detected by logging variable values (or their types) to the console and seeing that one is set to a function reference, instead of the expected value the function returns.",
"The variables in the following example are different:",
"<blockquote>function myFunction() {<br>&nbsp;&nbsp;return \"You rock!\";<br>}<br>let varOne = myFunction; // set to equal a function<br>let varTwo = myFunction(); // set to equal the string \"You rock!\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fix the code so the variable <code>result</code> is set to the value returned from calling the function <code>getNine</code>."
],
"challengeSeed": [
@ -383,7 +383,7 @@
"title": "Catch Arguments Passed in the Wrong Order When Calling a Function",
"description": [
"Continuing the discussion on calling functions, the next bug to watch out for is when a function's arguments are supplied in the incorrect order. If the arguments are different types, such as a function expecting an array and an integer, this will likely throw a runtime error. If the arguments are the same type (all integers, for example), then the logic of the code won't make sense. Make sure to supply all required arguments, in the proper order to avoid these issues.",
"<h4>Instructions</h4>",
"<hr>",
"The following function <code>positivePowers</code> raises a base to a positive exponent. Unfortunately, it's not called properly - fix the code so the value of <code>power</code> is the expected 8."
],
"challengeSeed": [
@ -436,7 +436,7 @@
"<code>Off by one errors</code> (sometimes called OBOE) crop up when you're trying to target a specific index of a string or array (to slice or access a segment), or when looping over the indices of them. JavaScript indexing starts at zero, not one, which means the last index is always one less than the length of the item. If you try to access an index equal to the length, the program may throw an \"index out of range\" reference error or print <code>undefined</code>.",
"When you use string or array methods that take index ranges as arguments, it helps to read the documentation and understand if they are inclusive (the item at the given index is part of what's returned) or not. Here are some examples of off by one errors:",
"<blockquote>let alphabet = \"abcdefghijklmnopqrstuvwxyz\";<br>let len = alphabet.length;<br>for (let i = 0; i <= len; i++) {<br>&nbsp;&nbsp;// loops one too many times at the end<br>&nbsp;&nbsp;console.log(alphabet[i]);<br>}<br>for (let j = 1; j < len; j++) {<br>&nbsp;&nbsp;// loops one too few times and misses the first character at index 0<br>&nbsp;&nbsp;console.log(alphabet[j]);<br>}<br>for (let k = 0; k < len; k++) {<br>&nbsp;&nbsp;// Goldilocks approves - this is just right<br>&nbsp;&nbsp;console.log(alphabet[k]);<br>}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fix the two indexing errors in the following function so all the numbers 1 through 5 are printed to the console."
],
"challengeSeed": [
@ -486,7 +486,7 @@
"description": [
"Sometimes it's necessary to save information, increment counters, or re-set variables within a loop. A potential issue is when variables either should be reinitialized, and aren't, or vice versa. This is particularly dangerous if you accidentally reset the variable being used for the terminal condition, causing an infinite loop.",
"Printing variable values with each cycle of your loop by using <code>console.log()</code> can uncover buggy behavior related to resetting, or failing to reset a variable.",
"<h4>Instructions</h4>",
"<hr>",
"The following function is supposed to create a two-dimensional array with <code>m</code> rows and <code>n</code> columns of zeroes. Unfortunately, it's not producing the expected output because the <code>row</code> variable isn't being reinitialized (set back to an empty array) in the outer loop. Fix the code so it returns a correct 3x2 array of zeroes, which looks like <code>[[0, 0], [0, 0], [0, 0]]</code>."
],
"challengeSeed": [
@ -547,7 +547,7 @@
"There was an example of an infinite loop in the introduction to this section - it had no terminal condition to break out of the <code>while</code> loop inside <code>loopy()</code>. Do NOT call this function!",
"<blockquote>function loopy() {<br>&nbsp;&nbsp;while(true) {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Hello, world!\");<br>&nbsp;&nbsp;}<br>}</blockquote>",
"It's the programmer's job to ensure that the terminal condition, which tells the program when to break out of the loop code, is eventually reached. One error is incrementing or decrementing a counter variable in the wrong direction from the terminal condition. Another one is accidentally resetting a counter or index variable within the loop code, instead of incrementing or decrementing it.",
"<h4>Instructions</h4>",
"<hr>",
"The <code>myFunc()</code> function contains an infinite loop because the terminal condition <code>i != 4</code> will never evaluate to <code>false</code> (and break the looping) - <code>i</code> will increment by 2 each pass, and jump right over 4 since <code>i</code> is odd to start. Fix the comparison operator in the terminal condition so the loop only runs for <code>i</code> less than or equal to 4."
],
"challengeSeed": [

44
challenges/02-javascript-algorithms-and-data-structures/functional-programming.json
View File

@ -43,7 +43,7 @@
"1) Isolated functions - there is no dependence on the state of the program, which includes global variables that are subject to change",
"2) Pure functions - the same input always gives the same output",
"3) Functions with limited side effects - any changes, or mutations, to the state of the program outside the function are carefully controlled",
"<h4>Instructions</h4>",
"<hr>",
"The members of Free Code Camp happen to love tea.",
"In the code editor, the <code>prepareTea</code> and <code>getTea</code> functions are already defined for you. Call the <code>getTea</code> function to get 40 cups of tea for the team, and store them in the <code>tea4TeamFCC</code> variable."
],
@ -116,7 +116,7 @@
"Functions that can be assigned to a variable, passed into another function, or returned from another function just like any other normal value, are called <code>first class</code> functions. In JavaScript, all functions are <code>first class</code> functions.",
"The functions that take a function as an argument, or return a function as a return value are called <code>higher order</code> functions.",
"When the functions are passed in to another function or returned from another function, then those functions which gets passed in or returned can be called a <code>lambda</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Prepare 27 cups of green tea and 13 cups of black tea and store them in <code>tea4GreenTeamFCC</code> and <code>tea4BlackTeamFCC</code> variables, respectively. Note that the <code>getTea</code> function has been modified so it now takes a function as the first argument.",
"Note: The data (the number of cups of tea) is supplied as the last argument. We'll discuss this more in later lessons."
],
@ -283,7 +283,7 @@
"The previous example didn't have any complicated operations but the <code>splice</code> method changed the original array, and resulted in a bug.",
"Recall that in functional programming, changing or altering things is called <code>mutation</code>, and the outcome is called a <code>side effect</code>. A function, ideally, should be a <code>pure function</code>, meaning that it does not cause any side effects.",
"Let's try to master this discipline and not alter any variable or object in our code.",
"<h4>Instructions</h4>",
"<hr>",
"Fill in the code for the function <code>incrementer</code> so it returns the value of the global variable <code>fixedValue</code> increased by one."
],
"challengeSeed": [
@ -337,7 +337,7 @@
"There are several good consequences from this principle. The function is easier to test, you know exactly what input it takes, and it won't depend on anything else in your program.",
"This can give you more confidence when you alter, remove, or add new code. You would know what you can or cannot change and you can see where the potential traps are.",
"Finally, the function would always produce the same output for the same set of inputs, no matter what part of the code executes it.",
"<h4>Instructions</h4>",
"<hr>",
"Let's update the <code>incrementer</code> function to clearly declare its dependencies.",
"Write the <code>incrementer</code> function so it takes an argument, and then increases the value by one."
],
@ -391,7 +391,7 @@
"1) Don't alter a variable or object - create new variables and objects and return them if need be from a function.",
"2) Declare function arguments - any computation inside a function depends only on the arguments, and not on any global object or variable.",
"Adding one to a number is not very exciting, but we can apply these principles when working with arrays or more complex objects.",
"<h4>Instructions</h4>",
"<hr>",
"Refactor (rewrite) the code so the global array <code>bookList</code> is not changed inside either function. The <code>add</code> function should add the given <code>bookName</code> to the end of an array. The <code>remove</code> function should remove the given <code>bookName</code> from an array. Both functions should return an array, and any new parameters should be added before the <code>bookName</code> one."
],
"challengeSeed": [
@ -470,7 +470,7 @@
"It would make sense to be able to pass them as arguments to other functions, and return a function from another function. Functions are considered <code>First Class Objects</code> in JavaScript, which means they can be used like any other object. They can be saved in variables, stored in an object, or passed as function arguments.",
"Let's start with some simple array functions, which are methods on the array object prototype. In this exercise we are looking at <code>Array.prototype.map()</code>, or more simply <code>map</code>.",
"Remember that the <code>map</code> method is a way to iterate over each item in an array. It creates a new array (without changing the original one) after applying a callback function to every element.",
"<h4>Instructions</h4>",
"<hr>",
"The <code>watchList</code> array holds objects with information on several movies. Use <code>map</code> to pull the title and rating from <code>watchList</code> and save the new array in the <code>rating</code> variable. The code in the editor currently uses a <code>for</code> loop to do this, replace the loop functionality with your <code>map</code> expression."
],
"challengeSeed": [
@ -636,7 +636,7 @@
"In other words, <code>map</code> is a pure function, and its output depends solely on its inputs. Plus, it takes another function as its argument.",
"It would teach us a lot about <code>map</code> to try to implement a version of it that behaves exactly like the <code>Array.prototype.map()</code> with a <code>for</code> loop or <code>Array.prototype.forEach()</code>.",
"Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.",
"<h4>Instructions</h4>",
"<hr>",
"Write your own <code>Array.prototype.myMap()</code>, which should behave exactly like <code>Array.prototype.map()</code>. You may use a <code>for</code> loop or the <code>forEach</code> method."
],
"challengeSeed": [
@ -689,7 +689,7 @@
"description": [
"Another useful array function is <code>Array.prototype.filter()</code>, or simply <code>filter()</code>. The <code>filter</code> method returns a new array which is at most as long as the original array, but usually has fewer items.",
"<code>Filter</code> doesn't alter the original array, just like <code>map</code>. It takes a callback function that applies the logic inside the callback on each element of the array. If an element returns true based on the criteria in the callback function, then it is included in the new array.",
"<h4>Instructions</h4>",
"<hr>",
"The variable <code>watchList</code> holds an array of objects with information on several movies. Use a combination of <code>filter</code> and <code>map</code> to return a new array of objects with only <code>title</code> and <code>rating</code> keys, but where <code>imdbRating</code> is greater than or equal to 8.0. Note that the rating values are saved as strings in the object and you may want to convert them into numbers to perform mathematical operations on them."
],
"challengeSeed": [
@ -850,7 +850,7 @@
"description": [
"It would teach us a lot about the <code>filter</code> method if we try to implement a version of it that behaves exactly like <code>Array.prototype.filter()</code>. It can use either a <code>for</code> loop or <code>Array.prototype.forEach()</code>.",
"Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.",
"<h4>Instructions</h4>",
"<hr>",
"Write your own <code>Array.prototype.myFilter()</code>, which should behave exactly like <code>Array.prototype.filter()</code>. You may use a <code>for</code> loop or the <code>Array.prototype.forEach()</code> method."
],
"challengeSeed": [
@ -904,7 +904,7 @@
"The <code>slice</code> method returns a copy of certain elements of an array. It can take two arguments, the first gives the index of where to begin the slice, the second is the index for where to end the slice (and it's non-inclusive). If the arguments are not provided, the default is to start at the beginning of the array through the end, which is an easy way to make a copy of the entire array. The <code>slice</code> method does not mutate the original array, but returns a new one.",
"Here's an example:",
"<blockquote>var arr = [\"Cat\", \"Dog\", \"Tiger\", \"Zebra\"];<br>var newArray = arr.slice(1, 3);<br>// Sets newArray to [\"Dog\", \"Tiger\"]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>slice</code> method in the <code>sliceArray</code> function to return part of the <code>anim</code> array given the provided <code>beginSlice</code> and <code>endSlice</code> indices. The function should return an array."
],
"challengeSeed": [
@ -954,7 +954,7 @@
"A common pattern while working with arrays is when you want to remove items and keep the rest of the array. JavaScript offers the <code>splice</code> method for this, which takes arguments for the index of where to start removing items, then the number of items to remove. If the second argument is not provided, the default is to remove items through the end. However, the <code>splice</code> method mutates the original array it is called on. Here's an example:",
"<blockquote>var cities = [\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"];<br>cities.splice(3, 1); // Returns \"London\" and deletes it from the cities array<br>// cities is now [\"Chicago\", \"Delhi\", \"Islamabad\", \"Berlin\"]</blockquote>",
"As we saw in the last challenge, the <code>slice</code> method does not mutate the original array, but returns a new one which can be saved into a variable. Recall that the <code>slice</code> method takes two arguments for the indices to begin and end the slice (the end is non-inclusive), and returns those items in a new array. Using the <code>slice</code> method instead of <code>splice</code> helps to avoid any array-mutating side effects.",
"<h4>Instructions</h4>",
"<hr>",
"Rewrite the function <code>nonMutatingSplice</code> by using <code>slice</code> instead of <code>splice</code>. It should limit the provided <code>cities</code> array to a length of 3, and return a new array with only the first three items.",
"Do not mutate the original array provided to the function."
],
@ -1003,7 +1003,7 @@
"description": [
"<code>Concatenation</code> means to join items end to end. JavaScript offers the <code>concat</code> method for both strings and arrays that work in the same way. For arrays, the method is called on one, then another array is provided as the argument to <code>concat</code>, which is added to the end of the first array. It returns a new array and does not mutate either of the original arrays. Here's an example:",
"<blockquote>[1, 2, 3].concat([4, 5, 6]);<br>// Returns a new array [1, 2, 3, 4, 5, 6]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>concat</code> method in the <code>nonMutatingConcat</code> function to concatenate <code>attach</code> to the end of <code>original</code>. The function should return the concatenated array."
],
"challengeSeed": [
@ -1054,7 +1054,7 @@
"The last challenge introduced the <code>concat</code> method as a way to combine arrays into a new one without mutating the original arrays. Compare <code>concat</code> to the <code>push</code> method. <code>Push</code> adds an item to the end of the same array it is called on, which mutates that array. Here's an example:",
"<blockquote>var arr = [1, 2, 3];<br>arr.push([4, 5, 6]);<br>// arr is changed to [1, 2, 3, 4, 5, 6]<br>// Not the functional programming way</blockquote>",
"<code>Concat</code> offers a way to add new items to the end of an array without any mutating side effects.",
"<h4>Instructions</h4>",
"<hr>",
"Change the <code>nonMutatingPush</code> function so it uses <code>concat</code> to add <code>newItem</code> to the end of <code>original</code> instead of <code>push</code>. The function should return an array."
],
"challengeSeed": [
@ -1106,7 +1106,7 @@
"This is not the case with the <code>filter</code> and <code>map</code> methods since they do not allow interaction between two different elements of the array. For example, if you want to compare elements of the array, or add them together, <code>filter</code> or <code>map</code> could not process that.",
"The <code>reduce</code> method allows for more general forms of array processing, and it's possible to show that both <code>filter</code> and <code>map</code> can be derived as a special application of <code>reduce</code>.",
"However, before we get there, let's practice using <code>reduce</code> first.",
"<h4>Instructions</h4>",
"<hr>",
"The variable <code>watchList</code> holds an array of objects with information on several movies. Use <code>reduce</code> to find the average IMDB rating of the movies directed by Christopher Nolan. Recall from prior challenges how to <code>filter</code> data and <code>map</code> over it to pull what you need. You may need to create other variables, but save the final average into the variable <code>averageRating</code>. Note that the rating values are saved as strings in the object and need to be converted into numbers before they are used in any mathematical operations."
],
"challengeSeed": [
@ -1273,7 +1273,7 @@
"For example:",
"<blockquote>function ascendingOrder(arr) {<br>&nbsp;&nbsp;return arr.sort(function(a, b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return a - b;<br>&nbsp;&nbsp;});<br>}<br>ascendingOrder([1, 5, 2, 3, 4]);<br>// Returns [1, 2, 3, 4, 5]<br><br>function reverseAlpha(arr) {<br>&nbsp;&nbsp;return arr.sort(function(a, b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return a < b;<br>&nbsp;&nbsp;});<br>}<br>reverseAlpha(['l', 'h', 'z', 'b', 's']);<br>// Returns ['z', 's', 'l', 'h', 'b']</blockquote>",
"Note: It's encouraged to provide a callback function to specify how to sort the array items. JavaScript's default sorting method is by string Unicode point value, which may return unexpected results.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>sort</code> method in the <code>alphabeticalOrder</code> function to sort the elements of <code>arr</code> in alphabetical order."
],
"challengeSeed": [
@ -1319,7 +1319,7 @@
"title": "Return a Sorted Array Without Changing the Original Array",
"description": [
"A side effect of the <code>sort</code> method is that it changes the order of the elements in the original array. In other words, it mutates the array in place. One way to avoid this is to first concatenate an empty array to the one being sorted (remember that <code>concat</code> returns a new array), then run the <code>sort</code> method.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>sort</code> method in the <code>nonMutatingSort</code> function to sort the elements of an array in ascending order. The function should return a new array, and not mutate the <code>globalArray</code> variable."
],
"challengeSeed": [
@ -1369,7 +1369,7 @@
"Here are two examples that split one string by spaces, then another by digits using a regular expression:",
"<blockquote>var str = \"Hello World\";<br>var bySpace = str.split(\" \");<br>// Sets bySpace to [\"Hello\", \"World\"]<br><br>var otherString = \"How9are7you2today\";<br>var byDigits = str.split(/\\d/);<br>// Sets byDigits to [\"How\", \"are\", \"you\", \"today\"]</blockquote>",
"Since strings are immutable, the <code>split</code> method makes it easier to work with them.",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>split</code> method inside the <code>splitify</code> function to split <code>str</code> into an array of words. The function should return the array. Note that the words are not always separated by spaces, and the array should not contain punctuation."
],
"challengeSeed": [
@ -1419,7 +1419,7 @@
"The <code>join</code> method is used to join the elements of an array together to create a string. It takes an argument for the delimiter that is used to separate the array elements in the string.",
"Here's an example:",
"<blockquote>var arr = [\"Hello\", \"World\"];<br>var str = arr.join(\" \");<br>// Sets str to \"Hello World\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>join</code> method (among others) inside the <code>sentensify</code> function to make a sentence from the words in the string <code>str</code>. The function should return a string. For example, \"I-like-Star-Wars\" would be converted to \"I like Star Wars\". For this challenge, do not use the <code>replace</code> method."
],
"challengeSeed": [
@ -1471,7 +1471,7 @@
"The last several challenges covered a number of useful array and string methods that follow functional programming principles. We've also learned about <code>reduce</code>, which is a powerful method used to reduce problems to simpler forms. From computing averages to sorting, any array operation can be achieved by applying it. Recall that <code>map</code> and <code>filter</code> are special cases of <code>reduce</code>.",
"Let's combine what we've learned to solve a practical problem.",
"Many content management sites (CMS) have the titles of a post added to part of the URL for simple bookmarking purposes. For example, if you write a Medium post titled \"Stop Using Reduce\", it's likely the URL would have some form of the title string in it (\".../stop-using-reduce\"). You may have already noticed this on the Free Code Camp site.",
"<h4>Instructions</h4>",
"<hr>",
"Fill in the <code>urlSlug</code> function so it converts a string <code>title</code> and returns the hyphenated version for the URL. You can use any of the methods covered in this section, and don't use <code>replace</code>. Here are the requirements:",
"The input is a string with spaces and title-cased words",
"The output is a string with the spaces between words replaced by a hyphen (<code>-</code>)",
@ -1532,7 +1532,7 @@
"The <code>every</code> method works with arrays to check if <em>every</em> element passes a particular test. It returns a Boolean value - <code>true</code> if all values meet the criteria, <code>false</code> if not.",
"For example, the following code would check if every element in the <code>numbers</code> array is less than 10:",
"<blockquote>var numbers = [1, 5, 8, 0, 10, 11];<br>numbers.every(function(currentValue) {<br>&nbsp;&nbsp;return currentValue < 10;<br>});<br>// Returns false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>every</code> method inside the <code>checkPositive</code> function to check if every element in <code>arr</code> is positive. The function should return a Boolean value."
],
"challengeSeed": [
@ -1580,7 +1580,7 @@
"The <code>some</code> method works with arrays to check if <em>any</em> element passes a particular test. It returns a Boolean value - <code>true</code> if any of the values meet the criteria, <code>false</code> if not.",
"For example, the following code would check if any element in the <code>numbers</code> array is less than 10:",
"<blockquote>var numbers = [10, 50, 8, 220, 110, 11];<br>numbers.some(function(currentValue) {<br>&nbsp;&nbsp;return currentValue < 10;<br>});<br>// Returns true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>some</code> method inside the <code>checkPositive</code> function to check if any element in <code>arr</code> is positive. The function should return a Boolean value."
],
"challengeSeed": [
@ -1634,7 +1634,7 @@
"Similarly, <code>partial application</code> can be described as applying a few arguments to a function at a time and returning another function that is applied to more arguments.",
"Here's an example:",
"<blockquote>//Impartial function<br>function impartial(x, y, z) {<br>&nbsp;&nbsp;return x + y + z;<br>}<br>var partialFn = impartial.bind(this, 1, 2);<br>partialFn(10); // Returns 13</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fill in the body of the <code>add</code> function so it uses currying to add parameters <code>x</code>, <code>y</code>, and <code>z</code>."
],
"challengeSeed": [

52
challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json
View File

@ -44,7 +44,7 @@
"<code>Objects</code> in JavaScript are used to model real-world objects, giving them <code>properties</code> and behavior just like their real-world counterparts. Here's an example using these concepts to create a <code>duck</code> <code>object</code>:",
"<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2<br>};</blockquote>",
"This <code>duck</code> <code>object</code> has two property/value pairs: a <code>name</code> of \"Aflac\" and a <code>numLegs</code> of 2.",
"<h4>Instructions</h4>",
"<hr>",
"Create a <code>dog</code> <code>object</code> with <code>name</code> and <code>numLegs</code> properties, and set them to a string and a number, respectively."
],
"challengeSeed": [
@ -87,7 +87,7 @@
"The last challenge created an <code>object</code> with various <code>properties</code>, now you'll see how to access the values of those <code>properties</code>. Here's an example:",
"<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2<br>};<br>console.log(duck.name);<br>// This prints \"Aflac\" to the console</blockquote>",
"Dot notation is used on the <code>object</code> name, <code>duck</code>, followed by the name of the <code>property</code>, <code>name</code>, to access the value of \"Aflac\".",
"<h4>Instructions</h4>",
"<hr>",
"Print both <code>properties</code> of the <code>dog</code> object below to your console."
],
"challengeSeed": [
@ -135,7 +135,7 @@
"<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2,<br>&nbsp;&nbsp;sayName: function() {return \"The name of this duck is \" + duck.name + \".\";}<br>};<br>duck.sayName();<br>// Returns \"The name of this duck is Aflac.\"</blockquote>",
"The example adds the <code>sayName</code> <code>method</code>, which is a function that returns a sentence giving the name of the <code>duck</code>.",
"Notice that the <code>method</code> accessed the <code>name</code> property in the return statement using <code>duck.name</code>. The next challenge will cover another way to do this.",
"<h4>Instructions</h4>",
"<hr>",
"Using the <code>dog</code> <code>object</code>, give it a method called <code>sayLegs</code>. The method should return the sentence \"This dog has 4 legs.\""
],
"challengeSeed": [
@ -185,7 +185,7 @@
"<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2,<br>&nbsp;&nbsp;sayName: function() {return \"The name of this duck is \" + this.name + \".\";}<br>};</blockquote>",
"<code>This</code> is a deep topic, and the above example is only one way to use it. In the current context, <code>this</code> refers to the object that the method is associated with: <code>duck</code>.",
"If the object's name is changed to <code>mallard</code>, it is not necessary to find all the references to <code>duck</code> in the code. It makes the code reusable and easier to read.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the <code>dog.sayLegs</code> method to remove any references to <code>dog</code>. Use the <code>duck</code> example for guidance."
],
"challengeSeed": [
@ -239,7 +239,7 @@
"<li><code>Constructors</code> use the keyword <code>this</code> to set properties of the object they will create. Inside the <code>constructor</code>, <code>this</code> refers to the new object it will create.</li>",
"<li><code>Constructors</code> define properties and behaviors instead of returning a value as other functions might.</li>",
"</ul>",
"<h4>Instructions</h4>",
"<hr>",
"Create a <code>constructor</code>, <code>Dog</code>, with properties <code>name</code>, <code>color</code>, and <code>numLegs</code> that are set to a string, a string, and a number, respectively."
],
"challengeSeed": [
@ -286,7 +286,7 @@
"<blockquote>blueBird.name; // => Albert<br>blueBird.color; // => blue<br>blueBird.numLegs; // => 2</blockquote>",
"Just like any other object, its properties can be accessed and modified:",
"<blockquote>blueBird.name = 'Elvira';<br>blueBird.name; // => Elvira</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>Dog</code> constructor from the last lesson to create a new instance of <code>Dog</code>, assigning it to a variable <code>hound</code>."
],
"challengeSeed": [
@ -341,7 +341,7 @@
"The <code>cardinal</code> has these properties:",
"<blockquote>cardinal.name // => Bruce<br>cardinal.color // => red<br>cardinal.numLegs // => 2</blockquote>",
"The constructor is more flexible. It's now possible to define the properties for each <code>Bird</code> at the time it is created, which is one way that JavaScript constructors are so useful. They group objects together based on shared characteristics and behavior and define a blueprint that automates their creation.",
"<h4>Instructions</h4>",
"<hr>",
"Create another <code>Dog</code> constructor. This time, set it up to take the parameters <code>name</code> and <code>color</code>, and have the property <code>numLegs</code> fixed at 4. Then create a new <code>Dog</code> saved in a variable <code>terrier</code>. Pass it two strings as arguments for the <code>name</code> and <code>color</code> properties."
],
"challengeSeed": [
@ -388,7 +388,7 @@
"<blockquote>let Bird = function(name, color) {<br>&nbsp;&nbsp;this.name = name;<br>&nbsp;&nbsp;this.color = color;<br>&nbsp;&nbsp;this.numLegs = 2;<br>}<br><br>let crow = new Bird(\"Alexis\", \"black\");<br><br>crow instanceof Bird; // => true</blockquote>",
"If an object is created without using a constructor, <code>instanceof</code> will verify that it is not an instance of that constructor:",
"<blockquote>let canary = {<br>&nbsp;&nbsp;name: \"Mildred\",<br>&nbsp;&nbsp;color: \"Yellow\",<br>&nbsp;&nbsp;numLegs: 2<br>};<br><br>canary instanceof Bird; // => false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Create a new instance of the <code>House</code> constructor, calling it <code>myHouse</code> and passing a number of bedrooms. Then, use <code>instanceof</code> to verify that it is an instance of <code>House</code>."
],
"challengeSeed": [
@ -437,7 +437,7 @@
"In fact every instance of <code>Bird</code> will have its own copy of these properties.",
"The following code adds all of the <code>own</code> properties of <code>duck</code> to the array <code>ownProps</code>:",
"<blockquote>let ownProps = [];<br><br>for (let property in duck) {<br>&nbsp;&nbsp;if(duck.hasOwnProperty(property)) {<br>&nbsp;&nbsp;&nbsp;&nbsp;ownProps.push(property);<br>&nbsp;&nbsp;}<br>}<br><br>console.log(ownProps); // prints [ \"name\", \"numLegs\" ]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add the <code>own</code> properties of <code>canary</code> to the array <code>ownProps</code>."
],
"challengeSeed": [
@ -491,7 +491,7 @@
"<blockquote>console.log(duck.numLegs); // prints 2<br>console.log(canary.numLegs); // prints 2</blockquote>",
"Since all instances automatically have the properties on the <code>prototype</code>, think of a <code>prototype</code> as a \"recipe\" for creating objects.",
"Note that the <code>prototype</code> for <code>duck</code> and <code>canary</code> is part of the <code>Bird</code> constructor as <code>Bird.prototype</code>. Nearly every object in JavaScript has a <code>prototype</code> property which is part of the constructor function that created it.",
"<h4>Instructions</h4>",
"<hr>",
"Add a <code>numLegs</code> property to the <code>prototype</code> of <code>Dog</code>"
],
"challengeSeed": [
@ -541,7 +541,7 @@
"<blockquote>function Bird(name) {<br>&nbsp;&nbsp;this.name = name; //own property<br>}<br><br>Bird.prototype.numLegs = 2; // prototype property<br><br>let duck = new Bird(\"Donald\");</blockquote>",
"Here is how you add <code>duck’s</code> <code>own</code> properties to the array <code>ownProps</code> and <code>prototype</code> properties to the array <code>prototypeProps</code>:",
"<blockquote>let ownProps = [];<br>let prototypeProps = [];<br><br>for (let property in duck) {<br>&nbsp;&nbsp;if(duck.hasOwnProperty(property)) {<br>&nbsp;&nbsp;&nbsp;&nbsp;ownProps.push(property);<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;prototypeProps.push(property);<br>&nbsp;&nbsp;}<br>}<br><br>console.log(ownProps); // prints [\"name\"]<br>console.log(prototypeProps); // prints [\"numLegs\"]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add all of the <code>own</code> properties of <code>beagle</code> to the array <code>ownProps</code>. Add all of the <code>prototype</code> properties of <code>Dog</code> to the array <code>prototypeProps</code>."
],
"challengeSeed": [
@ -598,7 +598,7 @@
"The advantage of the <code>constructor</code> property is that it's possible to check for this property to find out what kind of object it is. Here's an example of how this could be used:",
"<blockquote>function joinBirdFraternity(candidate) {<br>&nbsp;&nbsp;if (candidate.constructor === Bird) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return true;<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;return false;<br>&nbsp;&nbsp;}<br>}</blockquote>",
"<strong>Note</strong><br>Since the <code>constructor</code> property can be overwritten (which will be covered in the next two challenges) it’s generally better to use the <code>instanceof</code> method to check the type of an object.",
"<h4>Instructions</h4>",
"<hr>",
"Write a <code>joinDogFraternity</code> function that takes a <code>candidate</code> parameter and returns <code>true</code> if the candidate is a <code>Dog</code> and returns <code>false</code> otherwise."
],
"challengeSeed": [
@ -649,7 +649,7 @@
"<blockquote>Bird.prototype.eat = function() {<br>&nbsp;&nbsp;console.log(\"nom nom nom\");<br>}<br><br>Bird.prototype.describe = function() {<br>&nbsp;&nbsp;console.log(\"My name is \" + this.name);<br>}</blockquote>",
"A more efficient way is to set the <code>prototype</code> to a new object that already contains the properties. This way, the properties are added all at once:",
"<blockquote>Bird.prototype = {<br>&nbsp;&nbsp;numLegs: 2, <br>&nbsp;&nbsp;eat: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"nom nom nom\");<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;describe = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"My name is \" + this.name);<br>&nbsp;&nbsp;}<br>};</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add three properties <code>numLegs</code>, <code>eat</code>, and <code>describe</code> to the <code>prototype</code> of <code>Dog</code> by setting the <code>prototype</code> to a new object. The properties can be set to any values."
],
"challengeSeed": [
@ -699,7 +699,7 @@
"<blockquote>console.log(duck.constructor)<br>// prints ‘undefined’ - Oops!</blockquote>",
"To fix this, whenever a prototype is manually set to a new object, remember to define the constructor property:",
"<blockquote>Bird.prototype = {<br>&nbsp;&nbsp;constructor: Bird, // define the constructor property<br>&nbsp;&nbsp;numLegs: 2,<br>&nbsp;&nbsp;eat: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"nom nom nom\");<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;describe: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"My name is \" + this.name); <br>&nbsp;&nbsp;}<br>};</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Define the constructor property on the <code>Dog</code> <code>prototype</code>."
],
"challengeSeed": [
@ -753,7 +753,7 @@
"<blockquote>function Bird(name) {<br>&nbsp;&nbsp;this.name = name;<br>}<br><br>let duck = new Bird(\"Donald\");</blockquote>",
"<code>duck</code> inherits its <code>prototype</code> from the <code>Bird</code> constructor function. You can show this relationship with the <code>isPrototypeOf</code> method:",
"<blockquote>Bird.prototype.isPrototypeOf(duck);<br>// returns true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use <code>isPrototypeOf</code> to check the <code>prototype</code> of <code>beagle</code>."
],
"challengeSeed": [
@ -806,7 +806,7 @@
"The <code>hasOwnProperty</code> method is defined in <code>Object.prototype</code>, which can be accessed by <code>Bird.prototype</code>, which can then be accessed by <code>duck</code>. This is an example of the <code>prototype</code> chain.",
"In this <code>prototype</code> chain, <code>Bird</code> is the <code>supertype</code> for <code>duck</code>, while <code>duck</code> is the <code>subtype</code>. <code>Object</code> is a <code>supertype</code> for both <code>Bird</code> and <code>duck</code>.",
"<code>Object</code> is a <code>supertype</code> for all objects in JavaScript. Therefore, any object can use the <code>hasOwnProperty</code> method.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the code to show the correct prototype chain."
],
"challengeSeed": [
@ -859,7 +859,7 @@
"<blockquote>function Animal() { };<br><br>Animal.prototype = {<br>&nbsp;&nbsp;constructor: Animal, <br>&nbsp;&nbsp;describe: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"My name is \" + this.name);<br>&nbsp;&nbsp;}<br>};</blockquote>",
"Since <code>Animal</code> includes the <code>describe</code> method, you can remove it from <code>Bird</code> and <code>Dog</code>:",
"<blockquote>Bird.prototype = {<br>&nbsp;&nbsp;constructor: Bird<br>};<br><br>Dog.prototype = {<br>&nbsp;&nbsp;constructor: Dog<br>};</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"The <code>eat</code> method is repeated in both <code>Cat</code> and <code>Bear</code>. Edit the code in the spirit of <code>DRY</code> by moving the <code>eat</code> method to the <code>Animal</code> <code>supertype</code>."
],
"challengeSeed": [
@ -934,7 +934,7 @@
"<blockquote>let animal = Object.create(Animal.prototype);</blockquote>",
"<code>Object.create(obj)</code> creates a new object, and sets <code>obj</code> as the new object's <code>prototype</code>. Recall that the <code>prototype</code> is like the \"recipe\" for creating an object. By setting the <code>prototype</code> of <code>animal</code> to be <code>Animal's</code> <code>prototype</code>, you are effectively giving the <code>animal</code> instance the same \"recipe\" as any other instance of <code>Animal</code>.",
"<blockquote>animal.eat(); // prints \"nom nom nom\"<br>animal instanceof Animal; // => true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use <code>Object.create</code> to make two instances of <code>Animal</code> named <code>duck</code> and <code>beagle</code>."
],
"challengeSeed": [
@ -994,7 +994,7 @@
"Remember that the <code>prototype</code> is like the \"recipe\" for creating an object. In a way, the recipe for <code>Bird</code> now includes all the key \"ingredients\" from <code>Animal</code>.",
"<blockquote>let duck = new Bird(\"Donald\");<br>duck.eat(); // prints \"nom nom nom\"</blockquote>",
"<code>duck</code> inherits all of <code>Animal's</code> properties, including the <code>eat</code> method.",
"<h4>Instructions</h4>",
"<hr>",
"Modify the code so that instances of <code>Dog</code> inherit from <code>Animal</code>."
],
"challengeSeed": [
@ -1050,7 +1050,7 @@
"<blockquote>function Bird() { }<br>Bird.prototype = Object.create(Animal.prototype);<br>let duck = new Bird();<br>duck.constructor // function Animal(){...}</blockquote>",
"But <code>duck</code> and all instances of <code>Bird</code> should show that they were constructed by <code>Bird</code> and not <code>Animal</code>. To do so, you can manually set <code>Bird's</code> constructor property to the <code>Bird</code> object:",
"<blockquote>Bird.prototype.constructor = Bird;<br>duck.constructor // function Bird(){...}</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Fix the code so <code>duck.constructor</code> and <code>beagle.constructor</code> return their respective constructors."
],
"challengeSeed": [
@ -1108,7 +1108,7 @@
"<blockquote>Bird.prototype.fly = function() {<br>&nbsp;&nbsp;console.log(\"I'm flying!\");<br>};</blockquote>",
"Now instances of <code>Bird</code> will have both <code>eat()</code> and <code>fly()</code> methods:",
"<blockquote>let duck = new Bird();<br>duck.eat(); // prints \"nom nom nom\"<br>duck.fly(); // prints \"I'm flying!\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Add all necessary code so the <code>Dog</code> object inherits from <code>Animal</code> and the <code>Dog's</code> <code>prototype</code> constructor is set to Dog. Then add a <code>bark()</code> method to the <code>Dog</code> object so that <code>beagle</code> can both <code>eat()</code> and <code>bark()</code>. The <code>bark()</code> method should print \"Woof!\" to the console."
],
"challengeSeed": [
@ -1177,7 +1177,7 @@
"2. Bird => Is eat() defined here? => Yes. Execute it and stop searching.",
"3. Animal => eat() is also defined, but JavaScript stopped searching before reaching this level.",
"4. Object => JavaScript stopped searching before reaching this level.",
"<h4>Instructions</h4>",
"<hr>",
"Override the <code>fly()</code> method for <code>Penguin</code> so that it returns \"Alas, this is a flightless bird.\""
],
"challengeSeed": [
@ -1237,7 +1237,7 @@
"Here <code>bird</code> and <code>plane</code> are passed into <code>flyMixin</code>, which then assigns the <code>fly</code> function to each object. Now <code>bird</code> and <code>plane</code> can both fly:",
"<blockquote>bird.fly(); // prints \"Flying, wooosh!\"<br>plane.fly(); // prints \"Flying, wooosh!\"</blockquote>",
"Note how the <code>mixin</code> allows for the same <code>fly</code> method to be reused by unrelated objects <code>bird</code> and <code>plane</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Create a <code>mixin</code> named <code>glideMixin</code> that defines a method named <code>glide</code>. Then use the <code>glideMixin</code> to give both <code>bird</code> and <code>boat</code> the ability to glide."
],
"challengeSeed": [
@ -1297,7 +1297,7 @@
"The simplest way to make properties private is by creating a variable within the constructor function. This changes the scope of that variable to be within the constructor function versus available globally. This way, the property can only be accessed and changed by methods also within the constructor function.",
"<blockquote>function Bird() {<br>&nbsp;&nbsp;let hatchedEgg = 10; // private property<br><br>&nbsp;&nbsp;this.getHatchedEggCount = function() { // publicly available method that a bird object can use<br>&nbsp;&nbsp;&nbsp;&nbsp;return hatchedEgg;<br>&nbsp;&nbsp;};<br>}<br>let ducky = new Bird();<br>ducky.getHatchedEggCount(); // returns 10</blockquote>",
"Here <code>getHachedEggCount</code> is a privileged method, because it has access to the private variable <code>hatchedEgg</code>. This is possible because <code>hatchedEgg</code> is declared in the same context as <code>getHachedEggCount</code>. In JavaScript, a function always has access to the context in which it was created. This is called <code>closure</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Change how <code>weight</code> is declared in the <code>Bird</code> function so it is a private variable. Then, create a method <code>getWeight</code> that returns the value of <code>weight</code>."
],
"challengeSeed": [
@ -1342,7 +1342,7 @@
"A common pattern in JavaScript is to execute a function as soon as it is declared:",
"<blockquote>(function () {<br>&nbsp;&nbsp;console.log(\"Chirp, chirp!\")<br>})(); // this is an anonymous function expression that executes right away<br>// Outputs \"Chirp, chirp!\" immediately</blockquote>",
"Note that the function has no name and is not stored in a variable. The two parentheses () at the end of the function expression cause it to be immediately executed or invoked. This pattern is known as an <code>immediately invoked function expression</code> or <code>IIFE</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Rewrite the function <code>makeNest</code> and remove its call so instead it's an anonymous <code>immediately invoked function expression</code> (<code>IIFE</code>)."
],
"challengeSeed": [
@ -1390,7 +1390,7 @@
"Note that you have an <code>immediately invoked function expression</code> (<code>IIFE</code>) that returns an object <code>motionModule</code>. This returned object contains all of the <code>mixin</code> behaviors as properties of the object.",
"The advantage of the <code>module</code> pattern is that all of the motion behaviors can be packaged into a single object that can then be used by other parts of your code. Here is a example using it:",
"<blockquote>motionModule.glideMixin(duck);<br>duck.glide();</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Create a <code>module</code> named <code>funModule</code> to wrap the two <code>mixins</code> <code>isCuteMixin</code> and <code>singMixin</code>. <code>funModule</code> should return an object."
],
"challengeSeed": [

64
challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json
View File

@ -42,7 +42,7 @@
"If you want to find the word <code>\"the\"</code> in the string <code>\"The dog chased the cat\"</code>, you could use the following regular expression: <code>/the/</code>. Notice that quote marks are not required within the regular expression.",
"JavaScript has multiple ways to use regexes. One way to test a regex is using the <code>.test()</code> method. The <code>.test()</code> method takes the regex, applies it to a string (which is placed inside the parentheses), and returns <code>true</code> or <code>false</code> if your pattern finds something or not.",
"<blockquote>let testStr = \"FreeCodeCamp\";<br>let testRegex = /Code/;<br>testRegex.test(testStr);<br>// Returns true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Apply the regex <code>myRegex</code> on the string <code>myString</code> using the <code>.test()</code> method."
],
"challengeSeed": [
@ -93,7 +93,7 @@
"<blockquote>let testStr = \"Hello, my name is Kevin.\";<br>let testRegex = /Kevin/;<br>testRegex.test(testStr);<br>// Returns true</blockquote>",
"Any other forms of <code>\"the\"</code> will not match. For example, the regex <code>/the/</code> will not match <code>\"The\"</code> or <code>\"THE\"</code>. A future challenge shows how to match these versions as well.",
"<blockquote>let wrongRegex = /kevin/;<br>wrongRegex.test(testStr);<br>// Returns false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Complete the regex <code>waldoRegex</code> to find <code>\"Waldo\"</code> in the string <code>waldoIsHiding</code> with a literal match."
],
"challengeSeed": [
@ -145,7 +145,7 @@
"This is powerful to search single strings, but it's limited to only one pattern. You can search for multiple patterns using the <code>alternation</code> or <code>OR</code> operator: <code>|</code>.",
"This operator matches patterns either before or after it. For example, if you wanted to match <code>\"yes\"</code> or <code>\"no\"</code>, the regex you want is <code>/yes|no/</code>.",
"You can also search for more than just two patterns. You can do this by adding more patterns with more <code>OR</code> operators separating them, like <code>/yes|no|maybe/</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Complete the regex <code>petRegex</code> to match the pets <code>\"dog\"</code>, <code>\"cat\"</code>, <code>\"bird\"</code>, or <code>\"fish\"</code>."
],
"challengeSeed": [
@ -201,7 +201,7 @@
"Case (or sometimes letter case) is the difference between uppercase letters and lowercase letters. Examples of uppercase are <code>\"A\"</code>, <code>\"B\"</code>, and <code>\"C\"</code>. Examples of lowercase are <code>\"a\"</code>, <code>\"b\"</code>, and <code>\"c\"</code>.",
"You can match both cases using what is called a flag. There are other flags but here you'll focus on the flag that ignores case.",
"The flag that ignores case is the <code>i</code> flag. You can use it by appending it to the regex. An example of using this flag is <code>/ignorecase/i</code>. This regex can match the strings <code>\"ignorecase\"</code>, <code>\"igNoreCase\"</code>, and <code>\"IgnoreCase\"</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Write a regex <code>fccRegex</code> to match <code>\"FreeCodeCamp\"</code>, no matter its case. Your regex should not match any abbreviations or variations with spaces."
],
"challengeSeed": [
@ -259,7 +259,7 @@
"So far, you have only been checking if a pattern exists or not within a string. You can also extract the actual matches you found with the <code>.match()</code> method.",
"To use the <code>.match()</code> method, apply the method on a string and pass in the regex inside the parentheses. Here's an example:",
"<blockquote>\"Hello, World!\".match(/Hello/);<br>// Returns [\"Hello\"]<br>let ourStr = \"Regular expressions\";<br>let ourRegex = /expressions/;<br>ourStr.match(ourRegex);<br>// Returns [\"expressions\"]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Apply the <code>.match()</code> method to extract the word <code>coding</code>."
],
"challengeSeed": [
@ -311,7 +311,7 @@
"<blockquote>let testStr = \"Repeat, Repeat, Repeat\";<br>let ourRegex = /Repeat/;<br>testStr.match(ourRegex);<br>// Returns [\"Repeat\"]</blockquote>",
"To search or extract a pattern more than once, you can use the <code>g</code> flag.",
"<blockquote>let repeatRegex = /Repeat/g;<br>testStr.match(repeatRegex);<br>// Returns [\"Repeat\", \"Repeat\", \"Repeat\"]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Using the regex <code>starRegex</code>, find and extract both <code>\"Twinkle\"</code> words from the string <code>twinkleStar</code>.",
"<strong>Note</strong><br>You can have multiple flags on your regex like <code>/search/gi</code>"
],
@ -364,7 +364,7 @@
"Sometimes you won't (or don't need to) know the exact characters in your patterns. Thinking of all words that match, say, a misspelling would take a long time. Luckily, you can save time using the wildcard character: <code>.</code>",
"The wildcard character <code>.</code> will match any one character. The wildcard is also called <code>dot</code> and <code>period</code>. You can use the wildcard character just like any other character in the regex. For example, if you wanted to match <code>\"hug\"</code>, <code>\"huh\"</code>, <code>\"hut\"</code>, and <code>\"hum\"</code>, you can use the regex <code>/hu./</code> to match all four words.",
"<blockquote>let humStr = \"I'll hum a song\";<br>let hugStr = \"Bear hug\";<br>let huRegex = /hu./;<br>humStr.match(huRegex); // Returns [\"hum\"]<br>hugStr.match(huRegex); // Returns [\"hug\"]</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Complete the regex <code>unRegex</code> so that it matches the strings <code>\"run\"</code>, <code>\"sun\"</code>, <code>\"fun\"</code>, <code>\"pun\"</code>, <code>\"nun\"</code>, and <code>\"bun\"</code>. Your regex should use the wildcard character."
],
"challengeSeed": [
@ -423,7 +423,7 @@
"You can search for a literal pattern with some flexibility with <code>character classes</code>. Character classes allow you to define a group of characters you wish to match by placing them inside square (<code>[</code> and <code>]</code>) brackets.",
"For example, you want to match <code>\"bag\"</code>, <code>\"big\"</code>, and <code>\"bug\"</code> but not <code>\"bog\"</code>. You can create the regex <code>/b[aiu]g/</code> to do this. The <code>[aiu]</code> is the character class that will only match the characters <code>\"a\"</code>, <code>\"i\"</code>, or <code>\"u\"</code>.",
"<blockquote>let bigStr = \"big\";<br>let bagStr = \"bag\";<br>let bugStr = \"bug\";<br>let bogStr = \"bog\";<br>let bgRegex = /b[aiu]g/;<br>bigStr.match(bgRegex); // Returns [\"big\"]<br>bagStr.match(bgRegex); // Returns [\"bag\"]<br>bugStr.match(bgRegex); // Returns [\"bug\"]<br>bogStr.match(bgRegex); // Returns null</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use a character class with vowels (<code>a</code>, <code>e</code>, <code>i</code>, <code>o</code>, <code>u</code>) in your regex <code>vowelRegex</code> to count the number of vowels in the string <code>quoteSample</code>.",
"<strong>Note</strong><br>Be sure to match both upper- and lowercase vowels."
],
@ -478,7 +478,7 @@
"Inside a <code>character set</code>, you can define a range of characters to match using a <code>hyphen</code> character: <code>-</code>.",
"For example, to match lowercase letters <code>a</code> through <code>e</code> you would use <code>[a-e]</code>.",
"<blockquote>let catStr = \"cat\";<br>let batStr = \"bat\";<br>let matStr = \"mat\";<br>let bgRegex = /[a-e]at/;<br>catStr.match(bgRegex); // Returns [\"cat\"]<br>batStr.match(bgRegex); // Returns [\"bat\"]<br>matStr.match(bgRegex); // Returns null</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Match all the letters in the string <code>quoteSample</code>.",
"<strong>Note</strong><br>Be sure to match both upper- and lowercase vowels."
],
@ -531,7 +531,7 @@
"For example, <code>/[0-5]/</code> matches any number between <code>0</code> and <code>5</code>, including the <code>0</code> and <code>5</code>.",
"Also, it is possible to combine a range of letters and numbers in a single character set.",
"<blockquote>let jennyStr = \"Jenny8675309\";<br>let myRegex = /[a-z0-9]/ig;<br>jennyStr.match(myRegex); // matches all letters and numbers in jennyStr</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Create a single regex that matches a range of letters between <code>h</code> and <code>s</code>, and a range of numbers between <code>2</code> and <code>6</code>. Remember to include the appropriate flags in the regex."
],
"challengeSeed": [
@ -582,7 +582,7 @@
"So far, you have created a set of characters that you want to match, but you could also create a set of characters that you do not want to match. These types of character sets are called <code>negated character sets</code>.",
"To create a <code>negated character set</code>, you place a <code>caret</code> character (<code>^</code>) after the opening bracket and before the characters you do not want to match.",
"For example, <code>/[^aeiou]/gi</code> matches all characters that are not a vowel. Note that characters like <code>.</code>, <code>!</code>, <code>[</code>, <code>@</code>, <code>/</code> and white space are matched - the negated vowel character set only excludes the vowel characters.",
"<h4>Instructions</h4>",
"<hr>",
"Create a single regex that matches all characters that are not a number or a vowel. Remember to include the appropriate flags in the regex."
],
"challengeSeed": [
@ -633,7 +633,7 @@
"Sometimes, you need to match a character (or group of characters) that appears one or more times in a row. This means it occurs at least once, and may be repeated.",
"You can use the <code>+</code> character to check if that is the case. Remember, the character or pattern has to be present consecutively. That is, the character has to repeat one after the other.",
"For example, <code>/a+/g</code> would find one match in <code>\"abc\"</code> and return <code>[\"a\"]</code>. It would also find one match in <code>\"aabc\"</code> and return <code>[\"aa\"]</code>. If it were checking the string <code>\"abab\"</code>, it would find two matches and return <code>[\"a\", \"a\"]</code> because the <code>a</code> characters are not in a row - there is a <code>b</code> between them. Finally, since there is no <code>\"a\"</code> in the string <code>\"bcd\"</code>, it wouldn't find a match.",
"<h4>Instructions</h4>",
"<hr>",
"You want to find matches when the letter <code>s</code> occurs one or more times in <code>\"Mississippi\"</code>. Write a regex that uses the <code>+</code> sign."
],
"challengeSeed": [
@ -684,7 +684,7 @@
"The last challenge used the plus <code>+</code> sign to look for characters that occur one or more times. There's also an option that matches characters that occur zero or more times.",
"The character to do this is the <code>asterisk</code> or <code>star</code>: <code>*</code>.",
"<blockquote>let sWord1 = \"seed\";<br>let sWord2 = \"saw\";<br>let kWord = \"kite\";<br>let sRegex = /s.*/; // Searches for words starting with s<br>sRegex.test(sWord1); // Returns true<br>sRegex.test(sWord2); // Returns true<br>sRegex.test(kWord); // Returns false<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Create a regex <code>starWarsRegex</code> that uses the <code>*</code> character to match all the movie titles that start with <code>\"Star Wars\"</code>. Your regex does not need flags."
],
"challengeSeed": [
@ -741,7 +741,7 @@
"You can apply the regex <code>/t[a-z]*i/</code> to the string <code>\"titanic\"</code>. This regex is basically a pattern that starts with <code>t</code>, ends with <code>i</code>, and has some letters in between.",
"Regular expressions are by default <code>greedy</code>, so the match would return <code>[\"titani\"]<c/ode>. It finds the largest sub-string possible to fit the pattern.",
"However, you can use the <code>?</code> character to change it to <code>lazy</code> matching. <code>\"titanic\"</code> matched against the adjusted regex of <code>/t[a-z]*?i/</code> returns <code>[\"ti\"]</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Fix the regex <code>/&lt;.*&gt;/</code> to return the HTML tag <code>&lt;h1&gt;</code> and not the text <code>\"&lt;h1&gt;Winter is coming&lt;/h1&gt;\"</code>. Remember the wildcard <code>.</code> in a regular expression matches any character."
],
"challengeSeed": [
@ -793,7 +793,7 @@
"<blockquote>\"z\"<br>\"zzzzzz\"<br>\"ABCzzzz\"<br>\"zzzzABC\"<br>\"abczzzzzzzzzzzzzzzzzzzzzabc\"</blockquote>",
"But it does not find matches in the following strings since there are no letter <code>z</code> characters:",
"<blockquote>\"\"<br>\"ABC\"<br>\"abcabc\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Write a <code>greedy</code> regex that finds one or more criminals within a group of other people. A criminal is represented by the capital letter <code>C</code>."
],
"challengeSeed": [
@ -852,7 +852,7 @@
"Prior challenges showed that regular expressions can be used to look for a number of matches. They are also used to search for patterns in specific positions in strings.",
"In an earlier challenge, you used the <code>caret</code> character (<code>^</code>) inside a <code>character set</code> to create a <code>negated character set</code> in the form <code>[^thingsThatWillNotBeMatched]</code>. Outside of a <code>character set</code>, the <code>caret</code> is used to search for patterns at the beginning of strings.",
"<blockquote>let firstString = \"Ricky is first and can be found.\";<br>let firstRegex = /^Ricky/;<br>firstRegex.test(firstString);<br>// Returns true<br>let notFirst = \"You can't find Ricky now.\";<br>firstRegex.test(notFirst);<br>// Returns false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the <code>caret</code> character in a regex to find <code>\"Cal\"</code> only in the beginning of the string <code>rickyAndCal</code>."
],
"challengeSeed": [
@ -904,7 +904,7 @@
"In the last challenge, you learned to use the <code>caret</code> character to search for patterns at the beginning of strings. There is also a way to search for patterns at the end of strings.",
"You can search the end of strings using the <code>dollar sign</code> character <code>$</code> at the end of the regex.",
"<blockquote>let theEnding = \"This is a never ending story\";<br>let storyRegex = /story$/;<br>storyRegex.test(theEnding);<br>// Returns true<br>let noEnding = \"Sometimes a story will have to end\";<br>storyRegex.test(noEnding);<br>// Returns false<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the anchor character (<code>$</code>) to match the string <code>\"caboose\"</code> at the end of the string <code>caboose</code>."
],
"challengeSeed": [
@ -956,7 +956,7 @@
"The closest character class in JavaScript to match the alphabet is <code>\\w</code>. This shortcut is equal to <code>[A-Za-z0-9_]</code>. This character class matches upper and lowercase letters plus numbers. Note, this character class also includes the underscore character (<code>_</code>).",
"<blockquote>let longHand = /[A-Za-z0-9_]+/;<br>let shortHand = /\\w+/;<br>let numbers = \"42\";<br>let varNames = \"important_var\";<br>longHand.test(numbers); // Returns true<br>shortHand.test(numbers); // Returns true<br>longHand.test(varNames); // Returns true<br>shortHand.test(varNames); // Returns true</blockquote>",
"These shortcut character classes are also known as <code>shorthand character classes</code>.",
"<h4>Instructions</h4>",
"<hr>",
"Use the shorthand character class <code>\\w</code> to count the number of alphanumeric characters in various quotes and strings."
],
"challengeSeed": [
@ -1010,7 +1010,7 @@
"You've learned that you can use a shortcut to match alphanumerics <code>[A-Za-z0-9_]</code> using <code>\\w</code>. A natural pattern you might want to search for is the opposite of alphanumerics.",
"You can search for the opposite of the <code>\\w</code> with <code>\\W</code>. Note, the opposite pattern uses a capital letter. This shortcut is the same as <code>[^A-Za-z0-9_]</code>.",
"<blockquote>let shortHand = /\\W/;<br>let numbers = \"42%\";<br>let sentence = \"Coding!\";<br>numbers.match(shortHand); // Returns [\"%\"]<br>sentence.match(shortHand); // Returns [\"!\"]<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use the shorthand character class <code>\\W</code> to count the number of non-alphanumeric characters in various quotes and strings."
],
"challengeSeed": [
@ -1062,7 +1062,7 @@
"description": [
"You've learned shortcuts for common string patterns like alphanumerics. Another common pattern is looking for just digits or numbers.",
"The shortcut to look for digit characters is <code>\\d</code>, with a lowercase <code>d</code>. This is equal to the character class <code>[0-9]</code>, which looks for a single character of any number between zero and nine.",
"<h4>Instructions</h4>",
"<hr>",
"Use the shorthand character class <code>\\d</code> to count how many digits are in movie titles. Written out numbers (\"six\" instead of 6) do not count."
],
"challengeSeed": [
@ -1117,7 +1117,7 @@
"description": [
"The last challenge showed how to search for digits using the shortcut <code>\\d</code> with a lowercase <code>d</code>. You can also search for non-digits using a similar shortcut that uses an uppercase <code>D</code> instead.",
"The shortcut to look for non-digit characters is <code>\\D</code>. This is equal to the character class <code>[^0-9]</code>, which looks for a single character that is not a number between zero and nine.",
"<h4>Instructions</h4>",
"<hr>",
"Use the shorthand character class for non-digits <code>\\D</code> to count how many non-digits are in movie titles."
],
"challengeSeed": [
@ -1175,7 +1175,7 @@
"1) The only numbers in the username have to be at the end. There can be zero or more of them at the end.",
"2) Username letters can be lowercase and uppercase.",
"3) Usernames have to be at least two characters long. A two-letter username can only use alphabet letter characters.",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>userCheck</code> to fit the constraints listed above."
],
"challengeSeed": [
@ -1229,7 +1229,7 @@
"The challenges so far have covered matching letters of the alphabet and numbers. You can also match the whitespace or spaces between letters.",
"You can search for whitespace using <code>\\s</code>, which is a lowercase <code>s</code>. This pattern not only matches whitespace, but also carriage return, tab, form feed, and new line characters. You can think of it as similar to the character class <code>[ \\r\\t\\f\\n\\v]</code>.",
"<blockquote>let whiteSpace = \"Whitespace. Whitespace everywhere!\"<br>let spaceRegex = /\\s/g;<br>whiteSpace.match(spaceRegex);<br>// Returns [\" \", \" \"]<br></blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>countWhiteSpace</code> to look for multiple whitespace characters in a string."
],
"challengeSeed": [
@ -1281,7 +1281,7 @@
"You learned about searching for whitespace using <code>\\s</code>, with a lowercase <code>s</code>. You can also search for everything except whitespace.",
"Search for non-whitespace using <code>\\S</code>, which is an uppercase <code>s</code>. This pattern will not match whitespace, carriage return, tab, form feed, and new line characters. You can think of it being similar to the character class <code>[^ \\r\\t\\f\\n\\v]</code>.",
"<blockquote>let whiteSpace = \"Whitespace. Whitespace everywhere!\"<br>let nonSpaceRegex = /\\S/g;<br>whiteSpace.match(nonSpaceRegex).length; // Returns 32</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>countNonWhiteSpace</code> to look for multiple non-whitespace characters in a string."
],
"challengeSeed": [
@ -1334,7 +1334,7 @@
"You can specify the lower and upper number of patterns with <code>quantity specifiers</code>. Quantity specifiers are used with curly brackets (<code>{</code> and <code>}</code>). You put two numbers between the curly brackets - for the lower and upper number of patterns.",
"For example, to match only the letter <code>a</code> appearing between <code>3</code> and <code>5</code> times in the string <code>\"ah\"</code>, your regex would be <code>/a{3,5}h/</code>.",
"<blockquote>let A4 = \"aaaah\";<br>let A2 = \"aah\";<br>let multipleA = /a{3,5}h/;<br>multipleA.test(A4); // Returns true<br>multipleA.test(A2); // Returns false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>ohRegex</code> to match only <code>3</code> to <code>6</code> letter <code>h</code>'s in the word <code>\"Oh no\"</code>."
],
"challengeSeed": [
@ -1390,7 +1390,7 @@
"To only specify the lower number of patterns, keep the first number followed by a comma.",
"For example, to match only the string <code>\"hah\"</code> with the letter <code>a</code> appearing at least <code>3</code> times, your regex would be <code>/ha{3,}h/</code>.",
"<blockquote>let A4 = \"haaaah\";<br>let A2 = \"haah\";<br>let A100 = \"h\" + \"a\".repeat(100) + \"h\";<br>let multipleA = /ha{3,}h/;<br>multipleA.test(A4); // Returns true<br>multipleA.test(A2); // Returns false<br>multipleA.test(A100); // Returns true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>haRegex</code> to match the word <code>\"Hazzah\"</code> only when it has four or more letter <code>z</code>'s."
],
"challengeSeed": [
@ -1446,7 +1446,7 @@
"To specify a certain number of patterns, just have that one number between the curly brackets.",
"For example, to match only the word <code>\"hah\"</code> with the letter <code>a</code> <code>3</code> times, your regex would be <code>/ha{3}h/</code>.",
"<blockquote>let A4 = \"haaaah\";<br>let A3 = \"haaah\";<br>let A100 = \"h\" + \"a\".repeat(100) + \"h\";<br>let multipleHA = /a{3}h/;<br>multipleHA.test(A4); // Returns false<br>multipleHA.test(A3); // Returns true<br>multipleHA.test(A100); // Returns false</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>timRegex</code> to match the word <code>\"Timber\"</code> only when it has four letter <code>m</code>'s."
],
"challengeSeed": [
@ -1501,7 +1501,7 @@
"You can specify the possible existence of an element with a question mark, <code>?</code>. This checks for zero or one of the preceding element. You can think of this symbol as saying the previous element is optional.",
"For example, there are slight differences in American and British English and you can use the question mark to match both spellings.",
"<blockquote>let american = \"color\";<br>let british = \"colour\";<br>let rainbowRegex= /colou?r/;<br>rainbowRegex.test(american); // Returns true<br>rainbowRegex.test(british); // Returns true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Change the regex <code>favRegex</code> to match both the American English (favorite) and the British English (favourite) version of the word."
],
"challengeSeed": [
@ -1558,7 +1558,7 @@
"<blockquote>let quit = \"qu\";<br>let noquit = \"qt\";<br>let quRegex= /q(?=u)/;<br>let qRegex = /q(?!u)/;<br>quit.match(quRegex); // Returns [\"q\"]<br>noquit.match(qRegex); // Returns [\"q\"]</blockquote>",
"A more practical use of <code>lookaheads</code> is to check two or more patterns in one string. Here is a (naively) simple password checker that looks for between 3 and 6 characters and at least one number:",
"<blockquote>let password = \"abc123\";<br>let checkPass = /(?=\\w{3,6})(?=\\D*\\d)/;<br>checkPass.test(password); // Returns true</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Use <code>lookaheads</code> in the <code>pwRegex</code> to match passwords that are greater than 5 characters long and have two consecutive digits."
],
"challengeSeed": [
@ -1616,7 +1616,7 @@
"The example below matches any word that occurs twice separated by a space:",
"<blockquote>let repeatStr = \"regex regex\";<br>let repeatRegex = /(\\w+)\\s\\1/;<br>repeatRegex.test(repeatStr); // Returns true<br>repeatStr.match(repeatRegex); // Returns [\"regex regex\", \"regex\"]</blockquote>",
"Using the <code>.match()</code> method on a string will return an array with the string it matches, along with its capture group.",
"<h4>Instructions</h4>",
"<hr>",
"Use <code>capture groups</code> in <code>reRegex</code> to match numbers that appear three times in a string each separated by a space."
],
"challengeSeed": [
@ -1673,7 +1673,7 @@
"<blockquote>let wrongText = \"The sky is silver.\";<br>let silverRegex = /silver/;<br>wrongText.replace(silverRegex, \"blue\");<br>// Returns \"The sky is blue.\"</blockquote>",
"You can also access capture groups in the replacement string with dollar signs (<code>$</code>).",
"<blockquote>\"Code Camp\".replace(/(\\w+)\\s(\\w+)/, '$2 $1');<br>// Returns \"Camp Code\"</blockquote>",
"<h4>Instructions</h4>",
"<hr>",
"Write a regex so that it will search for the string <code>\"good\"</code>. Then update the <code>replaceText</code> variable to replace <code>\"good\"</code> with <code>\"okey-dokey\"</code>."
],
"challengeSeed": [
@ -1723,7 +1723,7 @@
"title": "Remove Whitespace from Start and End",
"description": [
"Sometimes whitespace characters around strings are not wanted but are there. Typical processing of strings is to remove the whitespace at the start and end of it.",
"<h4>Instructions</h4>",
"<hr>",
"Write a regex and use the appropriate string methods to remove whitespace at the beginning and end of strings.",
"<strong>Note</strong><br>The <code>.trim()</code> method would work here, but you'll need to complete this challenge using regular expressions."
],