4888 lines
239 KiB
JSON
Raw Normal View History

2015-07-05 17:12:52 -07:00
{
"name": "Basic JavaScript",
"time": "10h",
"order": 6,
2015-07-05 17:12:52 -07:00
"challenges": [
{
"id": "bd7123c9c441eddfaeb4bdef",
2015-08-07 23:37:32 -07:00
"title": "Comment your JavaScript Code",
"description": [
"Comments are lines of code that your computer will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.",
2015-08-14 14:40:02 -07:00
"Let's take a look at the two ways you can write comments in JavaScript.",
"The double-slash comment will comment out the remainder of the text on the current line:",
"<code>// This is a comment.</code>",
"The slash-star-star-slash comment will comment out everything between the <code>/*</code> and the <code>*/</code> characters:",
"<code>/* This is also a comment */</code>",
"<h4>Instructions</h4>",
"Try creating one of each type of comment."
],
2015-12-27 16:56:28 -08:00
"challengeSeed": [
2015-12-31 22:04:22 -08:00
""
2015-12-27 16:56:28 -08:00
],
2015-12-29 15:43:21 -08:00
"solutions": [
"// Fake Comment\n/* Another Comment */"
],
"tests": [
2015-12-28 12:17:06 -08:00
"assert(code.match(/(\\/\\/)...../g), 'message: Create a <code>//</code> style comment that contains at least five letters.');",
"assert(code.match(/(\\/\\*)[\\w\\W]{5,}(?=\\*\\/)/gm), 'message: Create a <code>/* */</code> style comment that contains at least five letters.');",
"assert(code.match(/(\\*\\/)/g), 'message: Make sure that you close the comment with a <code>*/</code>.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
2015-07-05 17:12:52 -07:00
{
"id": "bd7123c9c441eddfaeb5bdef",
2015-08-07 23:37:32 -07:00
"title": "Understand Boolean Values",
2015-07-05 17:12:52 -07:00
"description": [
2015-12-24 04:39:38 +05:30
"Computers are not inherently smart. Hence, javascript developers made it easy for us to represent data to computer. <code>Data</code> is anything that is meaningful to the computer.",
"In computer science, <code>Data types</code> are things that represent various types of data. JavaScript has seven data types which are <code>Undefined</code>, <code>Null</code>, <code>Boolean</code>, <code>String</code>, <code>Symbol</code>, <code>Number</code>, and <code>Object</code>. For example, the <code>Number</code> data type represents numbers.",
"Now let's learn about the most basic one: the <code>Boolean</code> data type. Booleans represent a <code>true</code> or <code>false</code> value. They are basically little on-off switches.",
"<h4>Instructions</h4>",
2015-12-24 04:39:38 +05:30
"Modify the <code>welcomeToBooleans</code> function so that it returns <code>true</code> instead of <code>false</code> when the run button is clicked."
2015-07-05 17:12:52 -07:00
],
"challengeSeed": [
"function welcomeToBooleans() {",
"",
"// Only change code below this line.",
"",
2015-12-31 22:04:22 -08:00
"return false; // Change this line",
"",
2015-08-15 13:57:44 -07:00
"// Only change code above this line.",
"}"
],
"tail": [
2015-07-05 17:12:52 -07:00
"welcomeToBooleans();"
],
2015-12-29 15:43:21 -08:00
"solutions": [
"function welcomeToBooleans() {\n return true; // Change this line\n}"
],
"tests": [
"assert(typeof(welcomeToBooleans()) === 'boolean', 'message: The <code>welcomeToBooleans()</code> function should return a boolean &#40;true/false&#41; value.');",
"assert(welcomeToBooleans() === true, 'message: <code>welcomeToBooleans()</code> should return true.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
2015-07-05 17:12:52 -07:00
},
{
"id": "bd7123c9c443eddfaeb5bdef",
2015-08-07 23:37:32 -07:00
"title": "Declare JavaScript Variables",
2015-07-05 17:12:52 -07:00
"description": [
"It's nice to have seven different ways of representing data. But to use them in other parts of code, we must store the data somewhere. In computer science, the placeholder where data is stored for further use is known as a <code>variable</code>.",
2015-12-24 04:40:12 +05:30
"These variables are no different from the x and y variables you use in Maths. Which means they're just a simple name to represent the data we want to refer to.",
"Now let's create our first variable and call it \"myName\".",
"You'll notice that in <code>myName</code>, we didn't use a space, and that the \"N\" is capitalized. In JavaScript, we write variable names in \"camelCase\".",
"<h4>Instructions</h4>",
2015-12-24 04:40:12 +05:30
"Use the <code>var</code> keyword to create a variable called <code>myName</code>. Set its value to your name, wrapped in double quotes.",
2015-12-21 09:26:28 -08:00
"<strong>Hint</strong>",
2015-07-05 17:12:52 -07:00
"Look at the <code>ourName</code> example if you get stuck."
],
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"// Example",
2015-10-28 05:13:49 -07:00
"var ourName = \"Free Code Camp\";",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
""
],
"tail": [
2015-12-21 09:26:28 -08:00
"if(typeof(myName) !== \"undefined\"){(function(v){return v;})(myName);}"
2015-07-05 17:12:52 -07:00
],
2015-12-29 15:43:21 -08:00
"solutions": [
"var myName = \"Test Testerson\";"
2015-07-05 17:12:52 -07:00
],
"tests": [
2015-12-29 15:43:21 -08:00
"assert((function(){if(typeof(myName) !== \"undefined\" && typeof(myName) === \"string\" && myName.length > 0){return true;}else{return false;}})(), 'message: <code>myName</code> should be a string that contains at least one character in it.');"
2015-07-05 17:12:52 -07:00
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
2015-07-05 17:12:52 -07:00
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244a8",
"title": "Storing Values with the Equal Operator",
2015-07-05 17:12:52 -07:00
"description": [
2015-12-31 00:55:29 +05:30
"In JavaScript, you can store a value in a variable with the <dfn>assignment</dfn> or <code>equal</code> (<code>=</code>) operator.",
2015-12-21 09:26:28 -08:00
"<code>myVariable = 5;</code>",
2015-12-24 04:40:12 +05:30
"Assigns the <code>Number</code> value <code>5</code> to <code>myVariable</code>.",
2015-12-31 22:04:22 -08:00
"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.",
2015-12-21 09:26:28 -08:00
"<code>myVar = 5;</code>",
"<code>myNum = myVar;</code>",
"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>",
2015-12-31 00:55:29 +05:30
"Assign the value <code>7</code> to variable <code>a</code>",
2015-12-21 09:26:28 -08:00
"Assign the contents of <code>a</code> to variable <code>b</code>."
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-07-05 17:12:52 -07:00
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"// Setup",
"var a;",
"var b = 2;",
2015-07-05 17:12:52 -07:00
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
""
2015-07-05 17:12:52 -07:00
],
2015-12-21 09:26:28 -08:00
"tail": [
"(function(a,b){return \"a = \" + a + \", b = \" + b;})(a,b);"
2015-07-05 17:12:52 -07:00
],
2015-12-21 09:26:28 -08:00
"solutions": [
2015-12-28 21:15:50 -08:00
"var a;\nvar b = 2;\na = 7;\nb = a;"
2015-07-05 17:12:52 -07:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(/var a;/.test(code) && /var b = 2;/.test(code), 'message: Do not change code above the line');",
"assert(typeof a === 'number' && a === 7, 'message: <code>a</code> should have a value of 7');",
"assert(typeof b === 'number' && b === 7, 'message: <code>b</code> should have a value of 7');",
2015-12-29 22:35:03 -08:00
"assert(/b\\s*=\\s*a\\s*;/g.test(code), 'message: <code>a</code> should be assigned to <code>b</code> with <code>=</code>');"
2015-07-05 17:12:52 -07:00
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
2015-07-05 17:12:52 -07:00
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244a9",
"title": "Initializing Variables with the Equal Operator",
2015-07-05 17:12:52 -07:00
"description": [
"It is common to <dfn>initialize</dfn> a variable to an initial value in the same line as it is declared.",
2015-07-05 17:12:52 -07:00
"",
2015-12-21 09:26:28 -08:00
"<code>var myVar = 0;</code>",
2015-12-29 22:35:03 -08:00
"Creates a new variable called <code>myVar</code> and assigns it an initial value of <code>0</code>.",
2015-07-05 17:12:52 -07:00
"",
"<h4>Instructions</h4>",
"Define a variable <code>a</code> with <code>var</code> and initialize it to a value of <code>9</code>."
2015-07-05 17:12:52 -07:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-07-05 17:12:52 -07:00
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"// Example",
"var ourVar = 19;",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
""
],
"tail": [
"if(typeof a !== 'undefined') {(function(a){return \"a = \" + a;})(a);} else { (function() {return 'a is undefined';})(); }"
],
"solutions": [
"var a = 9;"
2015-07-05 17:12:52 -07:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(/var\\s+a\\s*=\\s*9\\s*/.test(code), 'message: Initialize <code>a</code> to a value of <code>9</code>');"
2015-07-05 17:12:52 -07:00
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
2015-07-05 17:12:52 -07:00
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244aa",
"title": "Understanding Uninitialized Variables",
2015-07-05 17:12:52 -07:00
"description": [
2015-12-31 22:04:22 -08:00
"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>",
"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>."
2015-07-05 17:12:52 -07:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-07-05 17:12:52 -07:00
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"// Initialize these three variables",
"var a;",
"var b;",
"var c;",
2015-07-05 17:12:52 -07:00
"",
2015-12-21 09:26:28 -08:00
"// Do not change code below this line",
"",
2015-12-21 09:26:28 -08:00
"a = a + 1;",
"b = b + 5;",
"c = c + \" String!\";",
""
],
"tail": [
"(function(a,b,c){ return \"a = \" + a + \", b = \" + b + \", c = '\" + c + \"'\"; })(a,b,c);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var a = 5;\nvar b = 10;\nvar c = \"I am a\";\na = a + 1;\nb = b + 5;\nc = c + \" String!\";"
2015-07-05 17:12:52 -07:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(typeof a === 'number' && a === 6, 'message: <code>a</code> should be defined and have a value of <code>6</code>');",
"assert(typeof b === 'number' && b === 15, 'message: <code>b</code> should be defined and have a value of <code>15</code>');",
"assert(!/undefined/.test(c) && c === \"I am a String!\", 'message: <code>c</code> should not contain <code>undefined</code> and should have a value of \"I am a String!\"');",
"assert(/a = a \\+ 1;/.test(code) && /b = b \\+ 5;/.test(code) && /c = c \\+ \" String!\";/.test(code), 'message: Do not change code below the line');"
2015-07-05 17:12:52 -07:00
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
2015-07-05 17:12:52 -07:00
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244ab",
"title": "Understanding Case Sensitivity in Variables",
2015-07-05 17:12:52 -07:00
"description": [
2015-12-31 22:04:22 -08:00
"In JavaScript all variables and function names are case sensitive. This means that capitalization matters.",
"<code>MYVAR</code> is not the same as <code>MyVar</code> nor <code>myvar</code>. It is possible to have multiple distinct variables with the same name but different casing. It is strongly recommended that for the sake of clarity, you <em>do not</em> use this language feature.",
2015-12-31 10:53:00 -08:00
"<h4>Best Practice</h4>",
"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.",
2015-12-26 23:30:01 -08:00
"<strong>Examples:</strong>",
"<blockquote>var someVariable;<br>var anotherVariableName;<br>var thisVariableNameIsTooLong;</blockquote>",
"<h4>Instructions</h4>",
2015-12-31 10:53:00 -08:00
"Fix the variable declarations and assignments so their names use <dfn>camelCase</dfn>."
2015-07-05 17:12:52 -07:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-07-05 17:12:52 -07:00
"challengeSeed": [
2015-12-31 10:53:00 -08:00
"// Declarations",
2015-12-21 09:26:28 -08:00
"var StUdLyCapVaR;",
"var properCamelCase;",
"var TitleCaseOver;",
"",
2015-12-31 10:53:00 -08:00
"// Assignments",
2015-12-21 09:26:28 -08:00
"STUDLYCAPVAR = 10;",
"PRoperCAmelCAse = \"A String\";",
2015-12-31 10:53:00 -08:00
"tITLEcASEoVER = 9000;"
2015-12-21 09:26:28 -08:00
],
"solutions": [
2015-12-31 10:53:00 -08:00
"var studlyCapVar;\nvar properCamelCase;\nvar titleCaseOver;\n\nstudlyCapVar = 10;\nproperCamelCase = \"A String\";\ntitleCaseOver = 9000;"
],
2015-12-29 15:43:21 -08:00
"tests": [
2015-12-31 10:53:00 -08:00
"assert(typeof studlyCapVar !== 'undefined' && studlyCapVar === 10, 'message: <code>studlyCapVar</code> is defined and has a value of <code>10</code>');",
"assert(typeof properCamelCase !== 'undefined' && properCamelCase === \"A String\", 'message: <code>properCamelCase</code> is defined and has a value of <code>\"A String\"</code>');",
"assert(typeof titleCaseOver !== 'undefined' && titleCaseOver === 9000, 'message: <code>titleCaseOver</code> is defined and has a value of <code>9000</code>');",
"assert(code.match(/studlyCapVar/g).length === 2, 'message: <code>studlyCapVar</code> should use camelCase in both declaration and assignment sections.');",
"assert(code.match(/properCamelCase/g).length === 2, 'message: <code>properCamelCase</code> should use camelCase in both declaration and assignment sections.');",
"assert(code.match(/titleCaseOver/g).length === 2, 'message: <code>titleCaseOver</code> should use camelCase in both declaration and assignment sections.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
"id": "cf1111c1c11feddfaeb3bdef",
2015-08-07 23:37:32 -07:00
"title": "Add Two Numbers with JavaScript",
"description": [
"<code>Number</code> is another 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.",
"",
2015-12-26 23:30:01 -08:00
"<strong>Example</strong>",
2015-12-27 12:23:58 -08:00
"<blockquote>myVar = 5 + 10; // assigned 15</blockquote>",
"",
"<h4>Instructions</h4>",
"Change the <code>0</code> so that sum will equal <code>20</code>."
],
"challengeSeed": [
"var sum = 10 + 0;",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
2015-08-27 22:18:09 +02:00
"(function(z){return 'sum='+z;})(sum);"
],
2015-12-29 15:43:21 -08:00
"solutions": [
"var sum = 10 + 10;"
],
"tests": [
"assert(sum === 20, 'message: <code>sum</code> should equal <code>20</code>');",
"assert(/\\+/.test(code), 'message: Use the <code>+</code> operator');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
"id": "cf1111c1c11feddfaeb4bdef",
2015-08-07 23:37:32 -07:00
"title": "Subtract One Number from Another with JavaScript",
"description": [
"We can also subtract one number from another.",
2015-09-17 01:04:00 -07:00
"JavaScript uses the <code>-</code> symbol for subtraction.",
"",
2015-12-26 23:30:01 -08:00
"<strong>Example</strong>",
2015-12-31 18:55:11 -08:00
"<blockquote>myVar = 12 - 6; // assigned 6</blockquote>",
"",
"<h4>Instructions</h4>",
2015-12-27 12:23:58 -08:00
"Change the <code>0</code> so the difference is <code>12</code>."
],
"challengeSeed": [
2015-10-28 05:13:49 -07:00
"var difference = 45 - 0;",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
2015-08-27 22:18:09 +02:00
"(function(z){return 'difference='+z;})(difference);"
],
2015-12-21 09:26:28 -08:00
"solutions": [
"var difference = 45 - 33;"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(difference === 12, 'message: Make the variable <code>difference</code> equal 12.');",
"assert((code).match(/difference/g).length === 1,'message: Only change the first line');",
"assert(/\\d+\\s*-\\s*\\d+/.test(code),'message: Use the <code>-</code> operator');"
2015-12-29 15:43:21 -08:00
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-07-25 20:22:13 -07:00
"id": "cf1231c1c11feddfaeb5bdef",
2015-08-07 23:37:32 -07:00
"title": "Multiply Two Numbers with JavaScript",
"description": [
"We can also multiply one number by another.",
2015-12-24 11:58:47 +05:30
"JavaScript uses the <code>*</code> symbol for multiplication of two numbers.",
"",
2015-12-26 23:30:01 -08:00
"<strong>Example</strong>",
2015-12-27 12:23:58 -08:00
"<blockquote>myVar = 13 * 13; // assigned 169</blockquote>",
2015-12-24 11:58:47 +05:30
"",
"<h4>Instructions</h4>",
"Change the <code>0</code> so that product will equal <code>80</code>."
],
"challengeSeed": [
"var product = 8 * 0;",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"(function(z){return 'product = '+z;})(product);"
],
"solutions": [
"var product = 8 * 10;"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(product === 80,'message: Make the variable <code>product</code> equal 80');",
"assert(/\\*/.test(code), 'message: Use the <code>*</code> operator');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
"id": "cf1111c1c11feddfaeb6bdef",
2015-08-07 23:37:32 -07:00
"title": "Divide One Number by Another with JavaScript",
"description": [
"We can also divide one number by another.",
2015-09-17 01:04:00 -07:00
"JavaScript uses the <code>/</code> symbol for division.",
"",
2015-12-26 23:30:01 -08:00
"<strong>Example</strong>",
2015-12-27 12:23:58 -08:00
"<blockquote>myVar = 16 / 2; // assigned 8</blockquote>",
"",
"<h4>Instructions</h4>",
2015-12-27 12:23:58 -08:00
"Change the <code>0</code> so that the <code>quotient</code> is equal to <code>2</code>."
],
"challengeSeed": [
"var quotient = 66 / 0;",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"(function(z){return 'quotient = '+z;})(quotient);"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"solutions": [
"var quotient = 66 / 33;"
],
"tests": [
2015-12-29 15:43:21 -08:00
"assert(quotient === 2, 'message: Make the variable <code>quotient</code> equal to 2.');",
"assert(/\\d+\\s*\\/\\s*\\d+/.test(code), 'message: Use the <code>/</code> operator');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244ac",
"title": "Increment a Number with Javascript",
"description": [
2015-12-24 12:50:21 +05:30
"You can easily <dfn>increment</dfn> or add one to a variable with the <code>++</code> operator.",
2015-12-21 09:26:28 -08:00
"<code>i++;</code>",
2015-12-27 12:23:58 -08:00
"is the equivalent of",
2015-12-21 09:26:28 -08:00
"<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>",
2016-01-02 15:21:33 -08:00
"Change the code to use the <code>++</code> operator on <code>myVar</code>."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"var myVar = 87;",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"myVar = myVar + 1;",
""
],
"tail": [
"(function(z){return 'myVar = ' + z;})(myVar);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var myVar = 87;\nmyVar++;"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myVar === 88, 'message: <code>myVar</code> should equal <code>88</code>');",
"assert(/myVar\\s*[+]{2}/.test(code), 'message: Use the <code>++</code> operator');",
2015-12-29 15:43:21 -08:00
"assert(/var myVar = 87;/.test(code), 'message: Do not change code above the line');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244ad",
"title": "Decrement a Number with Javascript",
"description": [
2015-12-24 12:59:03 +05:30
"You can easily <dfn>decrement</dfn> or decrease a variable by one with the <code>--</code> operator.",
2015-12-21 09:26:28 -08:00
"<code>i--;</code>",
2015-12-27 12:23:58 -08:00
"is the equivalent of",
2015-12-21 09:26:28 -08:00
"<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>",
2016-01-02 15:21:33 -08:00
"Change the code to use the <code>--</code> operator on <code>myVar</code>."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"var myVar = 11;",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"myVar = myVar - 1;",
""
],
"tail": [
"(function(z){return 'myVar = ' + z;})(myVar);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var myVar = 11;\nmyVar--;"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myVar === 10, 'message: <code>myVar</code> should equal <code>10</code>');",
"assert(/myVar\\s*[-]{2}/.test(code), 'message: Use the <code>--</code> operator on <code>myVar</code>');",
2015-12-29 15:43:21 -08:00
"assert(/var myVar = 11;/.test(code), 'message: Do not change code above the line');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-07-25 20:22:13 -07:00
"id": "cf1391c1c11feddfaeb4bdef",
2015-08-07 23:37:32 -07:00
"title": "Create Decimal Numbers with JavaScript",
"description": [
2015-12-31 22:04:22 -08:00
"We can store decimal numbers in variables too. Decimal numbers are sometimes refered to as <dfn>floating point</dfn> numbers or <dfn>floats</dfn>.",
2015-12-21 09:26:28 -08:00
"<strong>Note</strong>",
2015-12-31 22:04:22 -08:00
"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>.",
2015-12-27 12:23:58 -08:00
"<h4>Instructions</h4>",
"Create a variable <code>myDecimal</code> and give it a decimal value."
],
"challengeSeed": [
"var ourDecimal = 5.7;",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
2015-11-20 23:39:25 -08:00
"(function(){if(typeof myDecimal !== \"undefined\"){return myDecimal;}})();"
],
2015-12-29 15:43:21 -08:00
"solutions": [
"var myDecimal = 9.9;"
],
"tests": [
"assert(typeof myDecimal === \"number\", 'message: <code>myDecimal</code> should be a number.');",
"assert(myDecimal % 1 != 0, 'message: <code>myDecimal</code> should have a decimal point'); "
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
"id": "bd7993c9c69feddfaeb7bdef",
"title": "Multiply Two Decimals with JavaScript",
"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.",
2015-12-27 12:23:58 -08:00
"<h4>Instructions</h4>",
"Change the <code>0.0</code> so that product will equal <code>5.0</code>."
],
"challengeSeed": [
"var product = 2.0 * 0.0;",
"",
2015-12-21 09:26:28 -08:00
""
],
2015-12-29 15:43:21 -08:00
"tail": [
"(function(y){return 'product = '+y;})(product);"
],
"solutions": [
"var product = 2.0 * 2.5;"
],
"tests": [
"assert(product === 5.0, 'message: The variable <code>product</code> should equal <code>5.0</code>.');",
"assert(/\\*/.test(code), 'message: You should use the <code>*</code> operator');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
"id": "bd7993c9ca9feddfaeb7bdef",
"title": "Divide one Decimal by Another with JavaScript",
"description": [
"Now let's divide one decimal by another.",
2015-12-27 12:23:58 -08:00
"<h4>Instructions</h4>",
"Change the <code>0.0</code> so that <code>quotient</code> will equal to <code>2.2</code>."
],
"challengeSeed": [
2015-10-28 05:13:49 -07:00
"var quotient = 0.0 / 2.0;",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"(function(y){return 'quotient = '+y;})(quotient);"
],
2015-12-29 15:43:21 -08:00
"solutions": [
"var quotient = 4.4 / 2.0;"
],
"tests": [
"assert(quotient === 2.2, 'message: The variable <code>quotient</code> should equal <code>2.2</code>.');",
"assert(/\\//.test(code), 'message: You should use the <code>/</code> operator');"
],
"type": "waypoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244ae",
2015-12-27 12:23:58 -08:00
"title": "Finding a Remainder in Javascript",
"description": [
2015-12-31 22:04:22 -08:00
"The <dfn>remainder</dfn> operator <code>%</code> gives the remainder of the division of two numbers.",
2015-12-26 23:30:01 -08:00
"<strong>Example</strong>",
"<blockquote>5 % 2 = 1 because<br>Math.floor(5 / 2) = 2 (Quotient)<br>2 * 2 = 4<br>5 - 4 = 1 (Remainder)</blockquote>",
2015-12-21 09:26:28 -08:00
"<strong>Usage</strong>",
2015-12-31 22:04:22 -08:00
"In mathematics, a number can be checked even or odd by checking the remainder of the division of the number by <code>2</code>.",
2015-12-24 22:30:22 +05:30
"<blockquote>17 % 2 = 1 (17 is Odd)<br>48 % 2 = 0 (48 is Even)</blockquote>",
2015-12-27 12:23:58 -08:00
"<strong>Note</strong>",
2015-12-31 22:04:22 -08:00
"The <dfn>remainder</dfn> operator is sometimes incorrectly refered to as the \"modulus\" operator. It is very similar to modulus, but does not work properly with negative numbers.",
"<h4>Instructions</h4>",
2015-12-27 12:23:58 -08:00
"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."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"",
2015-12-21 09:26:28 -08:00
"var remainder;",
""
],
"tail": [
"(function(y){return 'remainder = '+y;})(remainder);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var remainder = 11 % 3;"
],
"tests": [
2015-12-29 15:43:21 -08:00
"assert(remainder === 2, 'message: The value of <code>remainder</code> should be <code>2</code>');",
"assert(/\\d+\\s*%\\s*\\d+/.test(code), 'message: You should use the <code>%</code> operator');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244af",
"title": "Assignment with Plus Equals",
"description": [
2015-12-25 00:18:31 +05:30
"In programming, it is common to use assignments to modify the contents of a variable. Remember that everything to the right of the equals sign is evaluated first, so we can say:",
2015-12-21 09:26:28 -08:00
"<code>myVar = myVar + 5;</code>",
2015-12-25 00:18:31 +05:30
"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.",
2015-12-21 09:26:28 -08:00
"One such operator is the <code>+=</code> operator.",
"<code>myVar += 5;</code> will add <code>5</code> to <code>myVar</code>.",
"<h4>Instructions</h4>",
2015-12-25 00:18:31 +05:30
"Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>+=</code> operator."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"var a = 3;",
"var b = 17;",
"var c = 12;",
"",
2015-12-21 09:26:28 -08:00
"// Only modify code below this line",
"",
2015-12-21 09:26:28 -08:00
"a = a + 12;",
"b = 9 + b;",
"c = c + 7;",
""
],
"tail": [
"(function(a,b,c){ return \"a = \" + a + \", b = \" + b + \", c = '\" + c + \"'\"; })(a,b,c);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var a = 3;\nvar b = 17;\nvar c = 12;\n\na += 12;\nb += 9;\nc += 7;"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(a === 15, 'message: <code>a</code> should equal <code>15</code>');",
"assert(b === 26, 'message: <code>b</code> should equal <code>26</code>');",
"assert(c === 19, 'message: <code>c</code> should equal <code>19</code>');",
"assert(code.match(/\\+=/g).length === 3, 'message: You should use the <code>+=</code> operator for each variable');",
"assert(/var a = 3;/.test(code) && /var b = 17;/.test(code) && /var c = 12;/.test(code), 'message: Do not modify the code above the line');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244b0",
"title": "Assignment with Minus Equals",
"description": [
2015-12-21 09:26:28 -08:00
"Like the <code>+=</code> operator, <code>-=</code> subtracts a number from a variable.",
"<code>myVar = myVar - 5;</code>",
2015-12-25 01:26:37 +05:30
"will subtract <code>5</code> from <code>myVar</code>. This can be rewritten as: ",
2015-12-21 09:26:28 -08:00
"<code>myVar -= 5;</code>",
"<h4>Instructions</h4>",
2015-12-25 01:26:37 +05:30
"Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>-=</code> operator."
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"var a = 11;",
"var b = 9;",
"var c = 3;",
"",
2015-12-21 09:26:28 -08:00
"// Only modify code below this line",
"",
2015-12-21 09:26:28 -08:00
"a = a - 6;",
"b = b - 15;",
"c = c - 1;",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"(function(a,b,c){ return \"a = \" + a + \", b = \" + b + \", c = '\" + c + \"'\"; })(a,b,c);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var a = 11;\nvar b = 9;\nvar c = 3;\n\na -= 6;\nb -= 15;\nc -= 1;\n\n"
],
"tests": [
2015-12-29 15:43:21 -08:00
"assert(a === 5, 'message: <code>a</code> should equal <code>5</code>');",
"assert(b === -6, 'message: <code>b</code> should equal <code>-6</code>');",
"assert(c === 2, 'message: <code>c</code> should equal <code>2</code>');",
"assert(code.match(/-=/g).length === 3, 'message: You should use the <code>-=</code> operator for each variable');",
"assert(/var a = 11;/.test(code) && /var b = 9;/.test(code) && /var c = 3;/.test(code), 'message: Do not modify the code above the line');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244b1",
"title": "Assignment with Times Equals",
"description": [
2015-12-25 02:33:21 +05:30
"The <code>*=</code> operator multiplies a variable by a number.",
2015-12-21 09:26:28 -08:00
"<code>myVar = myVar * 5;</code>",
2015-12-25 02:33:21 +05:30
"will multiply <code>myVar</code> by <code>5</code>. This can be rewritten as: ",
2015-12-21 09:26:28 -08:00
"<code>myVar *= 5;</code>",
"<h4>Instructions</h4>",
2015-12-25 02:33:21 +05:30
"Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>*=</code> operator."
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"var a = 5;",
"var b = 12;",
"var c = 4.6;",
"",
2015-12-21 09:26:28 -08:00
"// Only modify code below this line",
"",
2015-12-21 09:26:28 -08:00
"a = a * 5;",
"b = 3 * b;",
"c = c * 10;",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"(function(a,b,c){ return \"a = \" + a + \", b = \" + b + \", c = '\" + c + \"'\"; })(a,b,c);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var a = 5;\nvar b = 12;\nvar c = 4.6;\n\na *= 5;\nb *= 3;\nc *= 10;"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(a === 25, 'message: <code>a</code> should equal <code>25</code>');",
"assert(b === 36, 'message: <code>b</code> should equal <code>36</code>');",
"assert(c === 46, 'message: <code>c</code> should equal <code>46</code>');",
"assert(code.match(/\\*=/g).length === 3, 'message: You should use the <code>*=</code> operator for each variable');",
"assert(/var a = 5;/.test(code) && /var b = 12;/.test(code) && /var c = 4\\.6;/.test(code), 'message: Do not modify the code above the line');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244b2",
"title": "Assignment with Divided by Equals",
"description": [
2015-12-21 09:26:28 -08:00
"The <code>/=</code> operator divides a variable by another number.",
"<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>",
"Convert the assignments for <code>a</code>, <code>b</code>, and <code>c</code> to use the <code>/=</code> operator."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"var a = 48;",
"var b = 108;",
"var c = 33;",
"",
"// Only modify code below this line",
"",
"a = a / 12;",
"b = b / 4;",
"c = c / 11;",
""
],
"tail": [
"(function(a,b,c){ return \"a = \" + a + \", b = \" + b + \", c = \" + c; })(a,b,c);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var a = 48;\nvar b = 108;\nvar c = 33;\n\na /= 12;\nb /= 4;\nc /= 11;"
],
"tests": [
2015-12-29 15:43:21 -08:00
"assert(a === 4, 'message: <code>a</code> should equal <code>4</code>');",
"assert(b === 27, 'message: <code>b</code> should equal <code>27</code>');",
"assert(c === 3, 'message: <code>c</code> should equal <code>3</code>');",
"assert(code.match(/\\/=/g).length === 3, 'message: You should use the <code>/=</code> operator for each variable');",
"assert(/var a = 48;/.test(code) && /var b = 108;/.test(code) && /var c = 33;/.test(code), 'message: Do not modify the code above the line');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244b3",
"title": "Convert Celsius to Fahrenheit",
"description": [
2015-12-31 22:04:22 -08:00
"To test your learning you will create a solution \"from scratch\". Place your code between the indicated lines and it will be tested against multiple test cases.",
2015-12-21 09:26:28 -08:00
"The algorithm to convert from Celsius to Fahrenheit is the temperature in Celsius times 9/5, plus 32.",
2015-12-31 22:04:22 -08:00
"You are given a variable <code>celsius</code> representing a temperature in Celsius. Create a variable <code>fahrenheit</code> and apply the algorithm to assign it the corresponding temperature in Fahrenheit."
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
"function convert(celsius) {",
2015-12-21 09:26:28 -08:00
" // Only change code below this line",
2015-12-25 02:57:04 +05:30
" ",
2015-12-21 09:26:28 -08:00
"",
" // Only change code above this line",
" if ( typeof fahrenheit !== 'undefined' ) {",
" return fahrenheit;",
2015-12-21 09:26:28 -08:00
" } else {",
" return 'fahrenheit not defined';",
2015-12-21 09:26:28 -08:00
" }",
"}",
2015-10-28 05:13:49 -07:00
"",
2015-12-21 09:26:28 -08:00
"// Change the inputs below to test your code",
"convert(30);"
],
"solutions": [
"function convert(celsius) {\n var fahrenheit = celsius * 9/5 + 32;\n if ( typeof fahrenheit !== 'undefined' ) {\n return fahrenheit;\n } else {\n return 'fahrenheit not defined';\n }\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(typeof convert(0) === 'number', 'message: <code>convert(0)</code> should return a number');",
"assert(convert(-30) === -22, 'message: <code>convert(-30)</code> should return a value of <code>-22</code>');",
"assert(convert(-10) === 14, 'message: <code>convert(-10)</code> should return a value of <code>14</code>');",
"assert(convert(0) === 32, 'message: <code>convert(0)</code> should return a value of <code>32</code>');",
"assert(convert(20) === 68, 'message: <code>convert(20)</code> should return a value of <code>68</code>');",
"assert(convert(30) === 86, 'message: <code>convert(30)</code> should return a value of <code>86</code>');"
],
2016-01-01 21:10:08 -08:00
"type": "checkpoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "bd7123c9c444eddfaeb5bdef",
"title": "Declare String Variables",
"description": [
2015-12-25 03:36:25 +05:30
"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>",
2015-12-25 03:36:25 +05:30
"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."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"var firstName = \"Alan\";",
"var lastName = \"Turing\";",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(){return myFirstName + ', ' + myLastName;})();}"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var myFirstName = \"Alan\";\nvar myLastName = \"Turing\";"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert((function(){if(typeof(myFirstName) !== \"undefined\" && typeof(myFirstName) === \"string\" && myFirstName.length > 0){return true;}else{return false;}})(), 'message: <code>myFirstName</code> should be a string with at least one character in it.');",
"assert((function(){if(typeof(myLastName) !== \"undefined\" && typeof(myLastName) === \"string\" && myLastName.length > 0){return true;}else{return false;}})(), 'message: <code>myLastName</code> should be a string with at least one character in it.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244b5",
"title": "Escaping Literal Quotes in Strings",
"description": [
2015-12-31 22:04:22 -08:00
"When you are defining a string you must start and end with a single or double quote. What happens when you need a literal quote: <code>\"</code> or <code>'</code> inside of your string?",
2015-12-25 03:52:26 +05:30
"In JavaScript, you can <dfn>escape</dfn> a quote from considering it as an end of string quote by placing a <dfn>backslash</dfn> (<code>\\</code>) in front of the quote.",
"<code>\"Alan said, \\\"Peter is learning JavaScript\\\".\"</code>",
"This signals JavaScript that the following quote is not the end of the string, but should instead appear inside the string.",
"<h4>Instruction</h4>",
2015-12-25 03:52:26 +05:30
"Use <dfn>backslashes</dfn> to assign the following to <code>myStr</code> variable:",
"<code>\"I am a \"double quoted\" string inside \"double quotes\"\"</code>"
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"var myStr; // Change this line",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"(function(){",
" if(typeof myStr === 'string') {",
" return \"myStr = \" + myStr;",
" } else {",
" return \"myStr is undefined\";",
" }",
"})();"
],
2015-12-21 09:26:28 -08:00
"solutions": [
"var myStr = \"I am a \\\"double quoted\\\" string inside \\\"double quotes\\\"\";"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(code.match(/\\\\\"/g).length === 4 && code.match(/[^\\\\]\"/g).length === 2, 'message: You should use two double quotes (<code>&quot;</code>) and four escaped double quotes (<code>&#92;&quot;</code>) ');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244b4",
"title": "Quoting Strings with Single Quotes",
"description": [
2015-12-31 22:04:22 -08:00
"<dfn>String</dfn> values in JavaScript may be written with single or double quotes, so long as you start and end with the same type of quote. Unlike some languages, single and double quotes are functionally identical in Javascript.",
2015-12-21 09:26:28 -08:00
"<code>\"This string has \\\"double quotes\\\" in it\"</code>",
2015-12-31 22:04:22 -08:00
"The value in using one or the other has to do with the need to <dfn>escape</dfn> quotes of the same type. If you have a string with many double quotes, this can be difficult to read and write. Instead, use single quotes:",
2015-12-25 04:05:40 +05:30
"<code>'This string has \"double quotes\" in it. And \"probably\" lots of them.'</code>",
"<h4>Instructions</h4>",
"Change the provided string from double to single quotes and remove the escaping."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"var myStr = \"<a href=\\\"http://www.example.com\\\" target=\\\"_blank\\\">Link</a>\";",
"",
2015-12-21 09:26:28 -08:00
""
],
2015-12-27 12:23:58 -08:00
"tail": [
"(function() { return \"myStr = \" + myStr; })();"
],
2015-12-21 09:26:28 -08:00
"solutions": [
"var myStr = '<a href=\"http://www.example.com\" target=\"_blank\">Link</a>';"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(!/\\\\/g.test(code), 'message: Remove all the <code>backslashes</code> (<code>\\</code>)');",
"assert(code.match(/\"/g).length === 4 && code.match(/'/g).length === 2, 'message: You should have two single quotes <code>&#39;</code> and four double quotes <code>&quot;</code>');",
"assert(myStr === '<a href=\"http://www.example.com\" target=\"_blank\">Link</a>', 'message: Only remove the backslashes <code>\\</code> used to escape quotes.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244b6",
"title": "Escape Sequences in Strings",
"description": [
2015-12-31 22:04:22 -08:00
"Quotes are not the only characters that can be <dfn>escaped</dfn> inside a string. Here is a table of common escape sequences:",
2015-12-21 09:26:28 -08:00
"<table class=\"table table-striped\"><thead><tr><th>Code</th><th>Output</th></tr></thead><tbody><tr><td>\\'</td><td>single quote</td></tr><tr><td>\\\"</td><td>double quote</td></tr><tr><td>\\\\</td><td>backslash</td></tr><tr><td>\\n</td><td>new line</td></tr><tr><td>\\r</td><td>carriage return</td></tr><tr><td>\\t</td><td>tab</td></tr><tr><td>\\b</td><td>backspace</td></tr><tr><td>\\f</td><td>form feed</td></tr></tbody></table>",
2015-12-24 15:58:49 -08:00
"<em>Note that the backslash itself must be escaped in order to display as a backslash.</em>",
"<h4>Instructions</h4>",
2015-12-25 04:13:44 +05:30
"Encode the following sequence, separated by spaces:<br><code>backslash tab tab carriage-return new-line</code> and assign it to <code>myStr</code>"
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"var myStr; // Change this line",
"",
""
],
"solutions": [
2015-12-25 04:13:44 +05:30
"var myStr = \"\\\\ \\t \\t \\r \\n\";"
],
"tests": [
2015-12-29 15:43:21 -08:00
"assert(myStr === \"\\\\ \\t \\t \\r \\n\", 'message: <code>myStr</code> should have the escape sequences for <code>backslash tab tab carriage-return new-line</code> separated by spaces');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244b7",
"title": "Concatenating Strings with Plus Operator",
2015-12-21 09:26:28 -08:00
"description": [
2015-12-28 12:17:06 -08:00
"In JavaScript, when the <code>+</code> operator is used with a <code>String</code> value, it is called the <dfn>concatenation</dfn> operator. You can build a new string out of other strings by <dfn>concatenating</dfn> them together.",
"<strong>Example</strong>",
"<blockquote>'My name is Alan,' + ' I concatenate.'</blockquote>",
2015-12-31 22:04:22 -08:00
"<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>",
2015-12-28 12:17:06 -08:00
"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."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"// Example",
"var ourStr = \"I come first. \" + \"I come second.\";",
2015-10-28 05:13:49 -07:00
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"",
2015-12-21 09:26:28 -08:00
"var myStr;",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"(function(){",
" if(typeof myStr === 'string') {",
" return 'myStr = \"' + myStr + '\"';",
" } else {",
" return 'myStr is not a string';",
" }",
"})();"
],
2015-12-21 09:26:28 -08:00
"solutions": [
2015-12-28 22:35:05 -08:00
"var ourStr = \"I come first. \" + \"I come second.\";\nvar myStr = \"This is the start. \" + \"This is the end.\";"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myStr === \"This is the start. This is the end.\", 'message: <code>myStr</code> should have a value of <code>This is the start. This is the end.</code>');",
"assert(/var\\s+myStr\\s*=\\s*([\"'])This is the start\\. \\1\\s*\\+\\s*([\"'])This is the end\\.([\"'])/.test(code), 'message: Use the <code>+</code> operator to build <code>myStr</code>');"
2015-12-29 15:43:21 -08:00
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244b8",
"title": "Concatenating Strings with the Plus Equals Operator",
2015-12-21 09:26:28 -08:00
"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.",
2015-12-31 22:04:22 -08:00
"<strong>Note</strong><br>Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.",
2015-12-21 09:26:28 -08:00
"<h4>Instructions</h4>",
2015-12-29 22:35:03 -08:00
"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."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Example",
"var ourStr = \"I come first. \";",
"ourStr += \"I come second.\";",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"",
2015-12-21 09:26:28 -08:00
"var myStr;",
2015-10-28 05:13:49 -07:00
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"(function(){",
" if(typeof myStr === 'string') {",
" return 'myStr = \"' + myStr + '\"';",
" } else {",
" return 'myStr is not a string';",
" }",
"})();"
],
2015-12-21 09:26:28 -08:00
"solutions": [
2015-12-29 22:35:03 -08:00
"var ourStr = \"I come first. \";\nourStr += \"I come second.\";\n\nvar myStr = \"This is the first sentence. \";\nmyStr += \"This is the second sentence.\";"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
2015-12-29 22:35:03 -08:00
"assert(myStr === \"This is the first sentence. This is the second sentence.\", 'message: <code>myStr</code> should have a value of <code>This is the first sentence. This is the second sentence.</code>');",
2015-12-31 16:03:10 -08:00
"assert(code.match(/\\w\\s*\\+=\\s*[\"']/g).length > 1 && code.match(/\\w\\s*\\=\\s*[\"']/g).length > 1, 'message: Use the <code>+=</code> operator to build <code>myStr</code>');"
2015-12-29 15:43:21 -08:00
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244b9",
"title": "Constructing Strings with Variables",
"description": [
2015-12-25 14:04:33 +05:30
"Sometimes you will need to build a string, <a href=\"https://en.wikipedia.org/wiki/Mad_Libs\">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>",
"Set <code>myName</code> and build <code>myStr</code> with <code>myName</code> between the strings <code>\"My name is \"</code> and <code>\" and I am swell!\"</code>"
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Example",
"var ourName = \"Free Code Camp\";",
"var ourStr = \"Hello, our name is \" + ourName + \", how are you?\";",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"var myName;",
"var myStr;",
"",
""
],
"tail": [
"(function(){",
" var output = [];",
" if(typeof myName === 'string') {",
" output.push('myName = \"' + myName + '\"');",
" } else {",
" output.push('myName is not a string');",
" }",
" if(typeof myStr === 'string') {",
" output.push('myStr = \"' + myStr + '\"');",
" } else {",
" output.push('myStr is not a string');",
" }",
" return output.join('\\n');",
"})();"
],
2015-12-21 09:26:28 -08:00
"solutions": [
2015-12-28 21:15:50 -08:00
"var myName = \"Bob\";\nvar myStr = \"My name is \" + myName + \" and I am swell!\";"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(typeof myName !== 'undefined' && myName.length > 2, 'message: <code>myName</code> should be set to a string at least 3 characters long');",
"assert(code.match(/[\"']\\s*\\+\\s*myName\\s*\\+\\s*[\"']/g).length > 0, 'message: Use two <code>+</code> operators to build <code>myStr</code> with <code>myName<code> inside it');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244ed",
"title": "Appending Variables to Strings",
"description": [
2015-12-21 09:26:28 -08:00
"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>",
"Set <code>someAdjective</code> and append it to <code>myStr</code> using the <code>+=</code> operator."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Example",
"var anAdjective = \"awesome!\";",
"var ourStr = \"Free Code Camp is \";",
"ourStr += anAdjective;",
"",
"// Only change code below this line",
"",
"var someAdjective;",
"var myStr = \"Learning to code is \";",
""
],
"tail": [
"(function(){",
" var output = [];",
" if(typeof someAdjective === 'string') {",
" output.push('someAdjective = \"' + someAdjective + '\"');",
" } else {",
" output.push('someAdjective is not a string');",
" }",
" if(typeof myStr === 'string') {",
" output.push('myStr = \"' + myStr + '\"');",
" } else {",
" output.push('myStr is not a string');",
" }",
" return output.join('\\n');",
"})();"
],
2015-12-21 09:26:28 -08:00
"solutions": [
2015-12-28 21:15:50 -08:00
"var anAdjective = \"awesome!\";\nvar ourStr = \"Free Code Camp is \";\nourStr += anAdjective;\n\nvar someAdjective = \"neat\";\nvar myStr = \"Learning to code is \";\nmyStr += someAdjective;"
],
"tests": [
2015-12-29 15:43:21 -08:00
"assert(typeof someAdjective !== 'undefined' && someAdjective.length > 2, 'message: <code>someAdjective</code> should be set to a string at least 3 characters long');",
"assert(code.match(/\\w\\s*\\+=\\s*someAdjective\\s*;/).length > 0, 'message: Append <code>someAdjective</code> to <code>myStr</code> using the <code>+=</code> operator');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "bd7123c9c448eddfaeb5bdef",
2015-12-27 13:49:22 -08:00
"title": "Find the Length of a String",
2015-12-21 09:26:28 -08:00
"description": [
2015-12-25 15:57:42 +05:30
"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>",
"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": [
2015-12-21 09:26:28 -08:00
"// Example",
"var firstNameLength = 0;",
"var firstName = \"Ada\";",
2015-10-28 05:13:49 -07:00
"",
2015-12-21 09:26:28 -08:00
"firstNameLength = firstName.length;",
"",
2015-12-21 09:26:28 -08:00
"// Setup",
"var lastNameLength = 0;",
"var lastName = \"Lovelace\";",
"",
2015-08-15 13:57:44 -07:00
"// Only change code below this line.",
"",
2015-12-21 09:26:28 -08:00
"lastNameLength = lastName;",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"if(typeof(lastNameLength) !== \"undefined\"){(function(){return lastNameLength;})();}"
],
2015-12-29 15:43:21 -08:00
"solutions": [
"var firstNameLength = 0;\nvar firstName = \"Ada\";\nfirstNameLength = firstName.length;\n\nvar lastNameLength = 0;\nvar lastName = \"Lovelace\";\nlastNameLength = lastName.length;"
],
"tests": [
"assert((function(){if(typeof(lastNameLength) !== \"undefined\" && typeof(lastNameLength) === \"number\" && lastNameLength === 8){return true;}else{return false;}})(), 'message: <code>lastNameLength</code> should be equal to eight.');",
"assert((function(){if(code.match(/\\.length/gi) && code.match(/\\.length/gi).length >= 2 && code.match(/var lastNameLength \\= 0;/gi) && code.match(/var lastNameLength \\= 0;/gi).length >= 1){return true;}else{return false;}})(), 'message: You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "bd7123c9c549eddfaeb5bdef",
"title": "Use Bracket Notation to Find the First Character in a String",
"description": [
2015-12-21 09:26:28 -08:00
"<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 refered to as <dfn>Zero-based</dfn> indexing.",
2015-12-21 09:26:28 -08:00
"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>",
"Use <dfn>bracket notation</dfn> to find the first character in the <code>lastName</code> variable and assign it to <code>firstLetterOfLastName</code>.",
2015-12-26 23:30:01 -08:00
"<strong>Hint</strong>",
"<br>Try looking at the <code>firstLetterOfFirstName</code> variable declaration if you get stuck."
],
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"// Example",
"var firstLetterOfFirstName = \"\";",
"var firstName = \"Ada\";",
"",
2015-12-21 09:26:28 -08:00
"firstLetterOfFirstName = firstName[0];",
"",
2015-12-21 09:26:28 -08:00
"// Setup",
"var firstLetterOfLastName = \"\";",
"var lastName = \"Lovelace\";",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"firstLetterOfLastName = lastName;",
""
],
"tail": [
"(function(v){return v;})(firstLetterOfLastName);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var firstLetterOfLastName = \"\";\nvar lastName = \"Lovelace\";\n\n// Only change code below this line\nfirstLetterOfLastName = lastName[0];"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert((function(){if(typeof(firstLetterOfLastName) !== \"undefined\" && code.match(/\\[0\\]/gi) && typeof(firstLetterOfLastName) === \"string\" && firstLetterOfLastName === \"L\"){return true;}else{return false;}})(), 'message: The <code>firstLetterOfLastName</code> variable should have the value of <code>L</code>.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244ba",
"title": "Understand String Immutability",
"description": [
2015-12-25 16:29:13 +05:30
"In Javascript, <code>String</code> values are <dfn>immutable</dfn>, which means that they cannot be altered once created.",
"For example, the following code:",
"<blockquote><code>var myStr = \"Bob\";<br>myStr[0] = \"J\";</code></blockquote>",
"cannot change the value of <code>myStr</code> to \"Job\", because the contents of myStr 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><code>var myStr = \"Bob\";<br>myStr = \"Job\";</code></blockquote>",
"<h4>Instructions</h4>",
"Correct the assignment to <code>myStr</code> to achieve the desired effect."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
"var myStr = \"Jello World\";",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"",
2015-12-21 09:26:28 -08:00
"myStr[0] = \"H\"; // Fix Me",
"",
2015-12-21 09:26:28 -08:00
""
],
2015-12-29 15:43:21 -08:00
"tail": [
"(function(v){return \"myStr = \" + v;})(myStr);"
],
2015-12-21 09:26:28 -08:00
"solutions": [
2015-12-28 21:15:50 -08:00
"var myStr = \"Jello World\";\nmyStr = \"Hello World\";"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myStr === \"Hello World\", 'message: <code>myStr</code> should have a value of <code>Hello World</code>');",
"assert(/myStr = \"Jello World\"/.test(code), 'message: Do not change the code above the line');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "bd7123c9c450eddfaeb5bdef",
"title": "Use Bracket Notation to Find the Nth Character in a String",
"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>",
"Let's try to set <code>thirdLetterOfLastName</code> to equal the third letter of the <code>lastName</code> variable.",
2015-12-26 23:30:01 -08:00
"<strong>Hint</strong>",
"<br>Try looking at the <code>secondLetterOfFirstName</code> variable declaration if you get stuck."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"var firstName = \"Ada\";",
"var secondLetterOfFirstName = firstName[1];",
"",
2015-12-21 09:26:28 -08:00
"// Setup",
"var lastName = \"Lovelace\";",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line.",
"var thirdLetterOfLastName = lastName;",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"(function(v){return v;})(thirdLetterOfLastName);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var lastName = \"Lovelace\";\nvar thirdLetterOfLastName = lastName[2];"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(thirdLetterOfLastName === 'v', 'message: The <code>thirdLetterOfLastName</code> variable should have the value of <code>v</code>.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "bd7123c9c451eddfaeb5bdef",
"title": "Use Bracket Notation to Find the Last Character in a String",
"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>",
"Use <dfn>bracket notation</dfn> to find the last character in the <code>lastName</code> variable.",
2015-12-26 23:30:01 -08:00
"<strong>Hint</strong>",
"<br>Try looking at the <code>lastLetterOfFirstName</code> variable declaration if you get stuck."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"var firstName = \"Ada\";",
"var lastLetterOfFirstName = firstName[firstName.length - 1];",
"",
"// Setup",
"var lastName = \"Lovelace\";",
"",
"// Only change code below this line.",
"var lastLetterOfLastName = lastName;",
"",
""
],
"tail": [
"(function(v){return v;})(lastLetterOfLastName);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var firstName = \"Ada\";\nvar lastLetterOfFirstName = firstName[firstName.length - 1];\n\nvar lastName = \"Lovelace\";\nvar lastLetterOfLastName = lastName[lastName.length - 1];"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(lastLetterOfLastName === \"e\", 'message: <code>lastLetterOfLastName</code> should be \"e\".');",
"assert(code.match(/\\.length/g).length === 2, 'message: You have to use <code>.length</code> to get the last letter.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "bd7123c9c452eddfaeb5bdef",
"title": "Use Bracket Notation to Find the Nth-to-Last Character in a String",
"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>",
"Use <dfn>bracket notation</dfn> to find the second-to-last character in the <code>lastName</code> string.",
2015-12-26 23:30:01 -08:00
" <strong>Hint</strong>",
"<br>Try looking at the <code>thirdToLastLetterOfFirstName</code> variable declaration if you get stuck."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"var firstName = \"Ada\";",
"var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];",
"",
"// Setup",
"var lastName = \"Lovelace\";",
"",
"// Only change code below this line",
"var secondToLastLetterOfLastName = lastName;",
"",
""
],
"tail": [
"(function(v){return v;})(secondToLastLetterOfLastName);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var firstName = \"Ada\";\nvar thirdToLastLetterOfFirstName = firstName[firstName.length - 3];\n\nvar lastName = \"Lovelace\";\nvar secondToLastLetterOfLastName = lastName[lastName.length - 2];"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(secondToLastLetterOfLastName === 'c', 'message: <code>secondToLastLetterOfLastName</code> should be \"c\".');",
"assert(code.match(/\\.length/g).length === 2, 'message: You have to use <code>.length</code> to get the second last letter.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244bb",
"title": "Word Blanks",
"description": [
2015-12-31 22:04:22 -08:00
"We will now use our knowledge of strings to build a \"<a href='https://en.wikipedia.org/wiki/Mad_Libs' target='_blank'>Mad Libs</a>\" style word game we're calling \"Word Blanks\". You will create an (optionally humorous) \"Fill in the Blanks\" style sentence.",
"You will need to use string operators to build a new string, <code>result</code>, using the provided variables: <code>myNoun</code>, <code>myAdjective</code>, <code>myVerb</code>, and <code>myAdverb</code>.",
2015-12-30 18:56:56 -08:00
"You will also need to provide additional strings, which will not change, in between the provided words.",
"We have provided a framework for testing your results with different words. The tests will run your function with several different inputs to make sure all of the provided words appear in the output, as well as your extra strings."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
2015-12-25 22:20:26 +05:30
"function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {",
2015-12-21 09:26:28 -08:00
" var result = \"\";",
" // Your code below this line",
2015-12-25 22:20:26 +05:30
" ",
2015-12-21 09:26:28 -08:00
"",
" // Your code above this line",
2015-12-28 22:35:05 -08:00
" return result;",
2015-12-21 09:26:28 -08:00
"}",
"",
"// Change the words here to test your function",
"wordBlanks(\"dog\", \"big\", \"ran\", \"quickly\");"
],
"tail": [
"var test1 = wordBlanks(\"dog\", \"big\", \"ran\", \"quickly\");",
"var test2 = wordBlanks(\"cat\", \"little\", \"hit\", \"slowly\");"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {\n var result = \"\";\n\n result = \"Once there was a \" + myNoun + \" which was very \" + myAdjective + \". \";\n result += \"It \" + myVerb + \" \" + myAdverb + \" around the yard.\";\n\n return result;\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
2015-12-31 13:42:03 -08:00
"assert(typeof wordBlanks(\"\",\"\",\"\",\"\") === 'string', 'message: <code>wordBlanks(\"\",\"\",\"\",\"\")</code> should return a string.');",
"assert(/\\bdog\\b/.test(test1) && /\\bbig\\b/.test(test1) && /\\bran\\b/.test(test1) && /\\bquickly\\b/.test(test1),'message: <code>wordBlanks(\"dog\", \"big\", \"ran\", \"quickly\")</code> should contain all of the passed words separated by non-word characters (and any additional words in your madlib).');",
"assert(/\\bcat\\b/.test(test2) && /\\blittle\\b/.test(test2) && /\\bhit\\b/.test(test2) && /\\bslowly\\b/.test(test2),'message: <code>wordBlanks(\"cat\", \"little\", \"hit\", \"slowly\")</code> should contain all of the passed words separated by non-word characters (and any additional words in your madlib).');"
2015-12-29 15:43:21 -08:00
],
2016-01-01 21:10:08 -08:00
"type": "checkpoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "bd7993c9c69feddfaeb8bdef",
"title": "Store Multiple Values in one Variable using JavaScript Arrays",
"description": [
"With JavaScript <code>array</code> variables, we can store several pieces of data in one place.",
2015-12-26 23:30:01 -08:00
"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:<br><code>var sandwich = [\"peanut butter\", \"jelly\", \"bread\"]</code>.",
"<h4>Instructions</h4>",
"Create a new array called <code>myArray</code> that contains both a <code>string</code> and a <code>number</code> (in that order).",
2015-12-26 23:30:01 -08:00
"<strong>Hint</strong>",
"<br>Refer to the example code in the text editor if you get stuck."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"var array = [\"John\", 23];",
"",
"// Only change code below this line.",
"var myArray = [];",
""
],
"tail": [
"(function(z){return z;})(myArray);"
],
"solutions": [
"var myArray = [\"The Answer\", 42];"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(typeof(myArray) == 'object', 'message: <code>myArray</code> should be an <code>array</code>.');",
"assert(typeof(myArray[0]) !== 'undefined' && typeof(myArray[0]) == 'string', 'message: The first item in <code>myArray</code> should be a <code>string</code>.');",
"assert(typeof(myArray[1]) !== 'undefined' && typeof(myArray[1]) == 'number', 'message: The second item in <code>myArray</code> should be a <code>number</code>.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "cf1111c1c11feddfaeb7bdef",
"title": "Nest one Array within Another Array",
"description": [
"You can also nest arrays within other arrays, like this: <code>[[\"Bulls\", 23]]</code>. This is also called a <dfn>Multi-dimensional Array<dfn>.",
"<h4>Instructions</h4>",
"Create a nested array called <code>myArray</code>."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"var ourArray = [[\"the universe\", \"everything\", 42]];",
"",
"// Only change code below this line.",
"var myArray = [];",
""
],
"tail": [
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
],
"solutions": [
"var myArray = [[1,2,3]];"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(Array.isArray(myArray) && myArray.some(Array.isArray), 'message: <code>myArray</code> should have at least one array nested within another array.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "bg9997c9c79feddfaeb9bdef",
"title": "Access Array Data with Indexes",
"description": [
"We can access the data inside arrays using <code>indexes</code>.",
2015-12-31 22:04:22 -08:00
"Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array. Like strings, arrays use <dfn>zero-based</dfn> indexing, so the first element in an array is element <code>0</code>.",
2015-12-26 23:30:01 -08:00
"<strong>Example</strong>",
"<blockquote>var array = [1,2,3];<br>array[0]; // equals 1<br>var data = array[1]; // equals 2</blockquote>",
"<h4>Instructions</h4>",
"Create a variable called <code>myData</code> and set it to equal the first value of <code>myArray</code>."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"var ourArray = [1,2,3];",
"var ourData = ourArray[0]; // equals 1",
"",
"// Setup",
"var myArray = [1,2,3];",
"",
"// Only change code below this line.",
""
],
"tail": [
"if(typeof(myArray) !== \"undefined\" && typeof(myData) !== \"undefined\"){(function(y,z){return 'myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z);})(myArray, myData);}"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var myArray = [1,2,3];\nvar myData = myArray[0];"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert((function(){if(typeof(myArray) != 'undefined' && typeof(myData) != 'undefined' && myArray[0] == myData){return true;}else{return false;}})(), 'message: The variable <code>myData</code> should equal the first value of <code>myArray</code>.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "cf1111c1c11feddfaeb8bdef",
"title": "Modify Array Data With Indexes",
"description": [
2015-12-25 23:46:12 +05:30
"Unlike strings, the entries of arrays are <dfn>mutable</dfn> and can be changed freely.",
2015-12-26 23:30:01 -08:00
"<strong>Example</strong>",
"<blockquote>var ourArray = [3,2,1];<br>ourArray[0] = 1; // equals [1,2,1]</blockquote>",
"<h4>Instructions</h4>",
"Modify the data stored at index <code>0</code> of <code>myArray</code> to a value of <code>3</code>."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"var ourArray = [1,2,3];",
"ourArray[1] = 3; // ourArray now equals [1,3,3].",
"",
"// Setup",
"var myArray = [1,2,3];",
"",
"// Only change code below this line.",
"",
""
],
"tail": [
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var myArray = [1,2,3];\nmyArray[0] = 3;"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert((function(){if(typeof(myArray) != 'undefined' && myArray[0] == 3 && myArray[1] == 2 && myArray[2] == 3){return true;}else{return false;}})(), 'message: <code>myArray</code> should now be [3,2,3].');",
"assert((function(){if(code.match(/myArray\\[0\\]\\s?=\\s?/g)){return true;}else{return false;}})(), 'message: You should be using correct index to modify the value in <code>myArray</code>.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56592a60ddddeae28f7aa8e1",
"title": "Access Multi-Dimensional Arrays With Indexes",
"description": [
2015-12-28 12:17:06 -08:00
"One way to think of a <dfn>multi-dimensional</dfn> array, is as an <em>array of arrays</em>. When you use brackets to access your array, the first set of bracket refers to the entries in the outer-most array, and each subsequent level of brackets refers to the next level of entries inside.",
2015-12-26 23:30:01 -08:00
"<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><code>arr[0]; // equals [1,2,3]</code><br><code>arr[1][2]; // equals 6</code><br><code>arr[3][0][1]; // equals 11</code></blockquote>",
"<h4>Instructions</h4>",
"Read from <code>myArray</code> using bracket notation so that myData is equal to <code>8</code>"
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
"var myArray = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]];",
2015-12-21 09:26:28 -08:00
"",
"// Only change code below this line.",
"var myData = myArray[0][0];",
""
],
"tail": [
"if(typeof(myArray) !== \"undefined\"){(function(){return \"myData: \" + myData + \" myArray: \" + JSON.stringify(myArray);})();}"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var myArray = [[1,2,3],[4,5,6], [7,8,9], [[10,11,12], 13, 14]];\nvar myData = myArray[2][1];"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myData === 8, 'message: <code>myData</code> should be equal to <code>8</code>.');",
"assert(/myArray\\[2\\]\\[1\\]/g.test(code), 'message: You should be using bracket notation to read the value from <code>myArray</code>.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "bg9995c9c69feddfaeb9bdef",
"title": "Manipulate Arrays With push()",
"description": [
2015-12-26 00:11:21 +05:30
"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>parameter</dfn> and \"pushes\" it onto the end of the array.",
2015-12-21 09:26:28 -08:00
"<code>var arr = [1,2,3];</code>",
"<code>arr.push(4);</code>",
"<code>// arr is now [1,2,3,4]</code>",
"<h4>Instructions</h4>",
"Push <code>[\"dog\", 3]</code> onto the end of the <code>myArray</code> variable."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"var ourArray = [\"Stimpson\", \"J\", \"cat\"];",
"ourArray.push([\"happy\", \"joy\"]); ",
"// ourArray now equals [\"Stimpson\", \"J\", \"cat\", [\"happy\", \"joy\"]]",
"",
"// Setup",
"var myArray = [[\"John\", 23], [\"cat\", 2]];",
"",
"// Only change code below this line.",
"",
2015-12-28 22:35:05 -08:00
""
2015-12-21 09:26:28 -08:00
],
"tail": [
"(function(z){return 'myArray = ' + JSON.stringify(z);})(myArray);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var myArray = [[\"John\", 23], [\"cat\", 2]];\nmyArray.push([\"dog\",3]);"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert((function(d){if(d[2] != undefined && d[0][0] == 'John' && d[0][1] == 23 && d[2][0] == 'dog' && d[2][1] == 3 && d[2].length == 2){return true;}else{return false;}})(myArray), 'message: <code>myArray</code> should now equal <code>[[\"John\", 23], [\"cat\", 2], [\"dog\", 3]]</code>.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "bg9994c9c69feddfaeb9bdef",
2015-08-07 23:37:32 -07:00
"title": "Manipulate Arrays With pop()",
"description": [
2015-12-26 01:18:31 +05:30
"Another way to change the data in an array is with the <code>.pop()</code> function.",
"<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.",
"Any type of entry can be \"popped\" off of an array - numbers, strings, even nested arrays.",
"For example, for the code<br><code>var oneDown = [1, 4, 6].pop();</code><br>the variable <code>oneDown</code> now holds the value <code>6</code> and the array becomes <code>[1, 4]</code>.",
"<h4>Instructions</h4>",
"Use the <code>.pop()</code> function to remove the last item from <code>myArray</code>, assigning the \"popped off\" value to <code>removedFromMyArray</code>."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"var ourArray = [1,2,3];",
"var removedFromOurArray = ourArray.pop(); ",
"// removedFromOurArray now equals 3, and ourArray now equals [1,2]",
"",
"// Setup",
"var myArray = [[\"John\", 23], [\"cat\", 2]];",
"",
"// Only change code below this line.",
"var removedFromMyArray;",
"",
""
],
"tail": [
"(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removedFromMyArray = ' + JSON.stringify(z);})(myArray, removedFromMyArray);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var myArray = [[\"John\", 23], [\"cat\", 2]];\nvar removedFromMyArray = myArray.pop();"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert((function(d){if(d[0][0] == 'John' && d[0][1] == 23 && d[2] == undefined){return true;}else{return false;}})(myArray), 'message: <code>myArray</code> should only contain <code>[[\"John\", 23]]</code>.');",
"assert((function(d){if(d[0] == 'cat' && d[1] == 2 && d[2] == undefined){return true;}else{return false;}})(removedFromMyArray), 'message: <code>removedFromMyArray</code> should only contain <code>[\"cat\", 2]</code>.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "bg9996c9c69feddfaeb9bdef",
"title": "Manipulate Arrays With shift()",
"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>",
"Use the <code>.shift()</code> function to remove the first item from <code>myArray</code>, assigning the \"shifted off\" value to <code>removedFromMyArray</code>."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
"removedFromOurArray = ourArray.shift();",
"// removedFromOurArray now equals \"Stimpson\" and ourArray now equals [\"J\", [\"cat\"]].",
"",
"// Setup",
"var myArray = [[\"John\", 23], [\"dog\", 3]];",
"",
"// Only change code below this line.",
"var removedFromMyArray;",
"",
""
],
"tail": [
"(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removedFromMyArray = ' + JSON.stringify(z);})(myArray, removedFromMyArray);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var myArray = [[\"John\", 23], [\"dog\", 3]];\n\n// Only change code below this line.\nvar removedFromMyArray = myArray.shift();"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert((function(d){if(d[0][0] == 'dog' && d[0][1] == 3 && d[1] == undefined){return true;}else{return false;}})(myArray), 'message: <code>myArray</code> should now equal <code>[[\"dog\", 3]]</code>.');",
"assert((function(d){if(d[0] === 'John' && d[1] === 23 && typeof(removedFromMyArray) === 'object'){return true;}else{return false;}})(removedFromMyArray), 'message: <code>removedFromMyArray</code> should contain <code>[\"John\", 23]</code>.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "bg9997c9c69feddfaeb9bdef",
"title": "Manipulate Arrays With unshift()",
"description": [
2015-12-26 03:01:57 +05:30
"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>",
2015-12-24 19:27:02 +11:00
"Add <code>[\"Paul\",35]</code> to the beginning of the <code>myArray</code> variable using <code>unshift()</code>."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"var ourArray = [\"Stimpson\", \"J\", \"cat\"];",
"ourArray.shift(); // ourArray now equals [\"J\", \"cat\"]",
"ourArray.unshift(\"Happy\"); ",
"// ourArray now equals [\"Happy\", \"J\", \"cat\"]",
"",
"// Setup",
"var myArray = [[\"John\", 23], [\"dog\", 3]];",
"myArray.shift();",
"",
"// Only change code below this line.",
"",
""
],
"tail": [
"(function(y, z){return 'myArray = ' + JSON.stringify(y);})(myArray);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var myArray = [[\"John\", 23], [\"dog\", 3]];\nmyArray.shift();\nmyArray.unshift([\"Paul\", 35]);"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert((function(d){if(typeof(d[0]) === \"object\" && d[0][0].toLowerCase() == 'paul' && d[0][1] == 35 && d[1][0] != undefined && d[1][0] == 'dog' && d[1][1] != undefined && d[1][1] == 3){return true;}else{return false;}})(myArray), 'message: <code>myArray</code> should now have [[\"Paul\", 35], [\"dog\", 3]]).');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244bc",
"title": "Shopping List",
"description": [
2015-12-31 22:04:22 -08:00
"Create a shopping list in the variable <code>myList</code>. The list should be a multi-dimensional array containing several sub-arrays.",
2015-12-26 03:33:06 +05:30
"The first element in each sub-array should contain a string with the name of the item. The second element should be a number representing the quantity i.e.",
2015-12-21 09:26:28 -08:00
"<code>[\"Chocolate Bar\", 15]</code>",
"There should be at least 5 sub-arrays in the list."
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"var myList = [];",
"",
""
],
"tail": [
"var count = 0;",
2016-01-02 23:55:04 +01:00
"var isArray = false;",
"var hasString = false;",
"var hasNumber = false;",
2015-12-21 09:26:28 -08:00
"(function(list){",
" if(Array.isArray(myList)) {",
2016-01-02 23:55:04 +01:00
" isArray = true;",
" if(myList.length > 0) {",
" hasString = true;",
" hasNumber = true;",
" myList.forEach(function(elem) {",
" if(typeof elem[0] !== 'string') {",
" hasString = false;",
" }",
" if(typeof elem[1] !== 'number') {",
" hasNumber = false;",
" }",
" });",
" }",
2015-12-21 09:26:28 -08:00
" count = myList.length;",
" return JSON.stringify(myList);",
" } else {",
" return \"myList is not an array\";",
" }",
"",
"})(myList);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var myList = [\n [\"Candy\", 10],\n [\"Potatoes\", 12],\n [\"Eggs\", 12],\n [\"Catfood\", 1],\n [\"Toads\", 9]\n];"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(isArray, 'message: <code>myList</code> should be an array');",
"assert(hasString, 'message: The first elements in each of your sub-arrays must all be strings');",
"assert(hasNumber, 'message: The second elements in each of your sub-arrays must all be numbers');",
"assert(count > 4, 'message: You must have at least 5 items in your list');"
],
2016-01-01 21:10:08 -08:00
"type": "checkpoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "bg9997c9c89feddfaeb9bdef",
"title": "Write Reusable JavaScript with Functions",
"description": [
"In JavaScript, we can divide up our code into reusable parts called <dfn>functions</dfn>.",
"Here's an example of a function:",
2015-12-26 23:30:01 -08:00
"<blockquote>function functionName() {<br> console.log(\"Hello World\");<br>}</blockquote>",
2015-12-21 13:50:45 -08:00
"You can call or <dfn>invoke</dfn> this function by using its name followed by parentheses, like this:",
2015-12-21 09:26:28 -08:00
"<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>",
"<ol><li>Create a function called <code>myFunction</code> which prints <code>\"Hi World\"</code> to the dev console.</li><li>Call the function.</li></ol>"
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"function ourFunction() {",
" console.log(\"Heyya, World\");",
"}",
"",
2015-12-21 13:50:45 -08:00
"ourFunction();",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"",
""
],
"tail": [
"var logOutput = \"\";",
"var oldLog = console.log;",
"function capture() {",
" console.log = function (message) {",
" logOutput = message.trim();",
" oldLog.apply(console, arguments);",
" };",
"}",
"",
"function uncapture() {",
" console.log = oldLog;",
"}",
"",
"if (typeof myFunction !== \"function\") { ",
" (function() { return \"myFunction is not defined\"; })();",
"} else {",
" capture();",
" myFunction(); ",
" uncapture();",
" (function() { return logOutput || \"console.log never called\"; })();",
"}"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myFunction() {\n console.log(\"Hi World\");\n}\nmyFunction();"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(typeof myFunction === 'function', 'message: <code>myFunction</code> should be a function');",
"assert(\"Hi World\" === logOutput, 'message: <code>myFunction</code> should output \"Hi World\" to the dev console');",
"assert(/^\\s*myFunction\\(\\)\\s*;/m.test(code), 'message: Call <code>myFunction</code> after you define it');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244bd",
"title": "Passing Values to Functions with Arguments",
"description": [
"<dfn>Parameters</dfn> are variables that act as placeholders for the values that are to be input to a function when it is called. When a function is defined, it is typically defined along with one or more parameters. The actual values that are input (or <dfn>\"passed\"</dfn>) into a function when it is called are known as <dfn>arguments</dfn>.",
2015-12-28 12:17:06 -08:00
"Here is a function with two parameters, <code>param1</code> and <code>param2</code>:",
"<blockquote>function testFun(param1, param2) {<br> console.log(param1, param2);<br>}</blockquote>",
2015-12-21 13:50:45 -08:00
"Then we can call <code>testFun</code>:",
"<code>testFun(\"Hello\", \"World\");</code>",
2015-12-31 22:04:22 -08:00
"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>",
"<ol><li>Create a function called <code>myFunction</code> that accepts two arguments and outputs their sum to the dev console.</li><li>Call the function.</li></ol>"
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 13:50:45 -08:00
"head": [
"var logOutput = \"\";",
"var oldLog = console.log;",
"function capture() {",
" console.log = function (message) {",
" logOutput = message + ''.trim();",
" oldLog.apply(console, arguments);",
" };",
"}",
"",
"function uncapture() {",
" console.log = oldLog;",
"}",
"",
"capture();"
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"function ourFunction(a, b) {",
" console.log(a - b);",
"}",
"ourFunction(10, 5); // Outputs 5",
"",
"// Only change code below this line.",
"",
""
],
"tail": [
2015-12-21 13:50:45 -08:00
"uncapture();",
"",
"if (typeof myFunction !== \"function\") { ",
" (function() { return \"myFunction is not defined\"; })();",
"} else {",
" (function() { return logOutput || \"console.log never called\"; })();",
"}"
2015-12-21 09:26:28 -08:00
],
"solutions": [
2015-12-29 15:43:21 -08:00
"function myFunction(a, b) {\n console.log(a + b);\n}\nmyFunction(10, 5);"
],
"tests": [
"assert(typeof myFunction === 'function', 'message: <code>myFunction</code> should be a function');",
"if(typeof myFunction === \"function\") { capture(); myFunction(1,2); uncapture(); } assert(logOutput == 3, 'message: <code>myFunction(1,2)</code> should output <code>3</code>');",
"if(typeof myFunction === \"function\") { capture(); myFunction(7,9); uncapture(); } assert(logOutput == 16, 'message: <code>myFunction(7,9)</code> should output <code>16</code>');",
"assert(/^\\s*myFunction\\s*\\([\\w\\W]+\\)\\s*;/m.test(code), 'message: Call <code>myFunction</code> after you define it.');"
2015-12-21 09:26:28 -08:00
],
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244be",
"title": "Global Scope and Functions",
"description": [
2015-12-31 00:55:29 +05:30
"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.",
2015-12-26 05:11:41 +05:30
"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>",
"Declare a <code>global</code> variable <code>myGlobal</code> outside of any function. Initialize it to have a value of <code>10</code> ",
2015-12-21 13:50:45 -08:00
"Inside function <code>fun1</code>, assign <code>5</code> to <code>oopsGlobal</code> <strong><em>without</em></strong> using the <code>var</code> keyword."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 13:50:45 -08:00
"head": [
"var logOutput = \"\";",
"var oldLog = console.log;",
"function capture() {",
" console.log = function (message) {",
" logOutput = message;",
" oldLog.apply(console, arguments);",
" };",
"}",
"",
"function uncapture() {",
" console.log = oldLog;",
"}",
2015-12-29 15:43:21 -08:00
"var oopsGlobal;",
2015-12-21 13:50:45 -08:00
"capture();"
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
2015-12-21 13:50:45 -08:00
"// Declare your variable here",
2015-12-21 09:26:28 -08:00
"",
"",
2015-12-21 13:50:45 -08:00
"function fun1() {",
" // Assign 5 to oopsGlobal Here",
2015-12-26 05:11:41 +05:30
" ",
2015-12-21 13:50:45 -08:00
"}",
"",
"// Only change code above this line",
"function fun2() {",
" var output = \"\";",
" if(typeof myGlobal != \"undefined\") {",
" output += \"myGlobal: \" + myGlobal;",
" }",
" if(typeof oopsGlobal != \"undefined\") {",
" output += \" oopsGlobal: \" + oopsGlobal;",
" }",
" console.log(output);",
"}"
2015-12-21 09:26:28 -08:00
],
"tail": [
2015-12-21 13:50:45 -08:00
"fun1();",
"fun2();",
"uncapture();",
"(function() { return logOutput || \"console.log never called\"; })();"
2015-12-21 09:26:28 -08:00
],
"solutions": [
2015-12-29 15:43:21 -08:00
"// Declare your variable here\nvar myGlobal = 10;\n\nfunction fun1() {\n // Assign 5 to oopsGlobal Here\n oopsGlobal = 5;\n}\n\n// Only change code above this line\nfunction fun2() {\n var output = \"\";\n if(typeof myGlobal != \"undefined\") {\n output += \"myGlobal: \" + myGlobal;\n }\n if(typeof oopsGlobal != \"undefined\") {\n output += \" oopsGlobal: \" + oopsGlobal;\n }\n console.log(output);\n}"
],
"tests": [
"assert(typeof myGlobal != \"undefined\", 'message: <code>myGlobal</code> should be defined');",
"assert(myGlobal === 10, 'message: <code>myGlobal</code> should have a value of <code>10</code>');",
"assert(/var\\s+myGlobal/.test(code), 'message: <code>myGlobal</code> should be declared using the <code>var</code> keyword');",
"assert(typeof oopsGlobal != \"undefined\" && oopsGlobal === 5, 'message: <code>oopsGlobal</code> should have a value of <code>5</code>');",
2015-12-31 00:55:29 +05:30
"assert(!/var\\s+oopsGlobal/.test(code), 'message: Do not declare <code>oopsGlobal</code> using the <code>var</code> keyword');"
2015-12-21 09:26:28 -08:00
],
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244bf",
"title": "Local Scope and Functions",
"description": [
2015-12-31 22:04:22 -08:00
"Variables which are declared within a function, as well as the function parameters have <dfn>local</dfn> scope. That means, they are only visible within that function.",
2015-12-21 13:50:45 -08:00
"Here is a function <code>myTest</code> with a local variable called <code>loc</code>.",
2015-12-26 06:48:38 +05:30
"<blockquote>function myTest() {<br> var loc = \"foo\";<br> console.log(loc);<br>}<br>myTest(); // \"foo\"<br>console.log(loc); // \"undefined\"</blockquote>",
"<code>loc</code> is not defined outside of the function.",
"<h4>Instructions</h4>",
"Declare a local variable <code>myVar</code> inside <code>myFunction</code>"
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-31 01:49:33 +05:30
"head": [
"var logOutput = \"\";",
"var oldLog = console.log;",
"function capture() {",
" console.log = function (message) {",
" logOutput = message;",
" oldLog.apply(console, arguments);",
" };",
"}",
"",
"function uncapture() {",
" console.log = oldLog;",
"}",
""
],
2015-12-21 09:26:28 -08:00
"challengeSeed": [
2015-12-22 00:59:26 -08:00
"function myFunction() {",
2015-12-31 01:49:33 +05:30
" 'use strict';",
" ",
2015-12-22 00:59:26 -08:00
" ",
" console.log(myVar);",
"}",
2015-12-26 06:48:38 +05:30
"myFunction();",
2015-12-21 09:26:28 -08:00
"",
2015-12-26 06:48:38 +05:30
"// run and check the console ",
"// myVar is not defined outside of myFunction",
2015-12-22 00:59:26 -08:00
"console.log(myVar);",
2015-12-26 06:48:38 +05:30
"",
2015-12-31 01:49:33 +05:30
"// now remove the console log line to pass the test",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
2015-12-31 01:49:33 +05:30
"typeof myFunction === 'function' && (capture(), myFunction(), uncapture());",
"(function() { return logOutput || \"console.log never called\"; })();"
2015-12-21 09:26:28 -08:00
],
"solutions": [
2015-12-31 01:49:33 +05:30
"function myFunction() {\n 'use strict';\n \n var myVar;\n console.log(myVar);\n}\nmyFunction();"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
2015-12-31 01:49:33 +05:30
"assert(typeof myVar === 'undefined', 'message: No global <code>myVar</code> variable');",
"assert(/var\\s+myVar/.test(code), 'message: Add a local <code>myVar</code> variable');"
2015-12-29 15:43:21 -08:00
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244c0",
"title": "Global vs. Local Scope in Functions",
"description": [
"It is possible to have both <dfn>local</dfn> and <dfn>global</dfn> variables with the same name. When you do this, the <code>local</code> variable takes precedence over the <code>global</code> variable.",
"In this example:",
2015-12-26 23:30:01 -08:00
"<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>",
2015-12-22 14:44:48 -08:00
"Add a local variable to <code>myFunction</code> to override the value of <code>outerWear</code> with <code>\"sweater\"</code>."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
2015-12-22 14:44:48 -08:00
"// Setup",
"var outerWear = \"T-Shirt\";",
2015-12-21 09:26:28 -08:00
"",
2015-12-22 14:44:48 -08:00
"function myFunction() {",
" // Only change code below this line",
2015-12-26 06:59:21 +05:30
" ",
" ",
" ",
2015-12-22 14:44:48 -08:00
" // Only change code above this line",
" return outerWear;",
"}",
"",
"myFunction();"
2015-12-21 09:26:28 -08:00
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var outerWear = \"T-Shirt\";\nfunction myFunction() {\n var outerWear = \"sweater\";\n return outerWear;\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(outerWear === \"T-Shirt\", 'message: Do not change the value of the global <code>outerWear</code>');",
"assert(myFunction() === \"sweater\", 'message: <code>myFunction</code> should return <code>\"sweater\"</code>');",
"assert(/return outerWear/.test(code), 'message: Do not change the return statement');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244c2",
"title": "Return a Value from a Function with Return",
"description": [
2015-12-31 22:04:22 -08:00
"We can pass values into a function with <dfn>arguments</dfn>. You can use a <code>return</code> statement to send a value back out of a function.",
2015-12-26 23:30:01 -08:00
"<strong>Example</strong>",
"<blockquote>function plusThree(num) {<br> return num + 3;<br>}<br>var answer = plusThree(5); // 8</blockquote>",
2015-12-21 09:26:28 -08:00
"<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>",
"Create a function <code>timesFive</code> that accepts one argument, multiplies it by <code>5</code>, and returns the new value."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Example",
"function minusSeven(num) {",
" return num - 7;",
"}",
"",
"// Only change code below this line",
"",
""
],
"tail": [
"(function() { if(typeof timesFive === 'function'){ return \"timesfive(5) === \" + timesFive(5); } else { return \"timesFive is not a function\"} })();"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function timesFive(num) {\n return num * 5;\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(typeof timesFive === 'function', 'message: <code>timesFive</code> should be a function');",
"assert(timesFive(5) === 25, 'message: <code>timesFive(5)</code> should return <code>25</code>');",
"assert(timesFive(2) === 10, 'message: <code>timesFive(2)</code> should return <code>10</code>');",
"assert(timesFive(0) === 0, 'message: <code>timesFive(0)</code> should return <code>0</code>');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244c3",
"title": "Assignment with a Returned Value",
"description": [
2015-12-31 22:04:22 -08:00
"If you'll recall from our discussion of <a href=\"waypoint-storing-values-with-the-equal-operator\" target=\"_blank\">Storing Values with the Equal Operator</a>, everything to the right of the equal sign is resolved before the value is assigned. This means we can take the return value of a function and assign it to a variable.",
2015-12-21 09:26:28 -08:00
"Assume we have pre-defined a function <code>sum</code> which adds two numbers together, then: ",
"<code>var ourSum = sum(5, 12);</code>",
2015-12-26 07:31:34 +05:30
"will call <code>sum</code> function, which returns a value of <code>17</code> and assigns it to <code>ourSum</code> variable.",
2015-12-22 14:44:48 -08:00
"<h4>Instructions</h4>",
2015-12-28 12:17:06 -08:00
"Call the <code>process</code> function with an argument of <code>7</code> and assign its return value to the variable <code>processed</code>."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
2015-12-22 14:44:48 -08:00
"var processed = 0;",
"",
2015-12-21 09:26:28 -08:00
"function process(num) {",
" return (num + 3) / 5;",
"}",
"",
"// Only change code below this line",
"",
""
],
"tail": [
2015-12-28 12:17:06 -08:00
"(function(){return \"processed = \" + processed})();"
2015-12-21 09:26:28 -08:00
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var processed = 0;\n\nfunction process(num) {\n return (num + 3) / 5;\n}\n\nprocessed = process(7);"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(processed === 2, 'message: <code>processed</code> should have a value of <code>2</code>');",
"assert(/processed\\s*=\\s*process\\(\\s*7\\s*\\)\\s*;/.test(code), 'message: You should assign <code>process</code> to <code>processed</code>');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244c6",
2015-12-23 18:50:43 -08:00
"title": "Stand in Line",
2015-12-21 09:26:28 -08:00
"description": [
2015-12-26 08:06:56 +05:30
"In Computer Science a <dfn>queue</dfn> is an abstract <dfn>Data Structure</dfn> where items are kept in order. New items can be added at the back of the <code>queue</code> and old items are taken off from the front of the <code>queue</code>.",
2015-12-31 22:04:22 -08:00
"Write a function <code>queue</code> which takes an \"array\" and an \"item\" as arguments. Add the item onto the end of the array, then remove the first element of the array. The queue function should return the element that was removed."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-23 18:50:43 -08:00
"head": [
"var logOutput = [];",
"var oldLog = console.log;",
"function capture() {",
" console.log = function (message) {",
" logOutput.push(message);",
" oldLog.apply(console, arguments);",
" };",
"}",
"",
"function uncapture() {",
" console.log = oldLog;",
"}",
"",
"capture();"
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
2015-12-23 18:50:43 -08:00
"// Setup",
"var myArr = [1,2,3,4,5];",
2015-12-21 09:26:28 -08:00
"",
2015-12-23 18:50:43 -08:00
"function queue(arr, item) {",
" // Your code here",
" ",
" return item; // Change this line",
"}",
2015-12-21 09:26:28 -08:00
"",
2015-12-23 18:50:43 -08:00
"// Display Code",
"console.log(\"Before: \" + JSON.stringify(myArr));",
"console.log(queue(myArr, 6)); // Modify this line to test",
"console.log(\"After: \" + JSON.stringify(myArr));"
2015-12-21 09:26:28 -08:00
],
"tail": [
2015-12-23 18:50:43 -08:00
"uncapture();",
"myArr = [1,2,3,4,5];",
"(function() { return logOutput.join(\"\\n\");})();"
2015-12-21 09:26:28 -08:00
],
"solutions": [
2015-12-28 23:43:12 -08:00
"var myArr = [ 1,2,3,4,5];\n\nfunction queue(myArr, item) {\n myArr.push(item);\n return myArr.shift();\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(queue([],1) === 1, 'message: <code>queue([], 1)</code> should return <code>1</code>');",
"assert(queue([2],1) === 2, 'message: <code>queue([2], 1)</code> should return <code>2</code>');",
"queue(myArr, 10); assert(myArr[4] === 10, 'message: After <code>queue(myArr, 10)</code>, <code>myArr[4]</code> should be <code>10</code>');"
],
2016-01-01 21:10:08 -08:00
"type": "checkpoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "cf1111c1c12feddfaeb3bdef",
"title": "Use Conditional Logic with If Statements",
"description": [
2015-12-31 18:29:00 -05:00
"We can use <code>if</code> statements in JavaScript to execute code only if the specified condition is met.",
2015-12-31 22:04:22 -08:00
"Each <code>if</code> statement requires a <dfn>boolean</dfn> condition to evaluate. If the boolean evaluates to <code>true</code>, the statements inside the curly braces will execute. Otherwise, if it evaluates to <code>false</code>, the code will not execute.",
2015-12-26 23:30:01 -08:00
"<strong>Example</strong>",
"<blockquote>function test(myVal) {<br> if (myVal > 10) {<br> return \"Greater Than\";<br> }<br> return \"Not Greater Than\";<br>}</blockquote>",
2015-12-31 22:04:22 -08:00
"If <code>myVal</code> is greater than <code>10</code>, the function will return <code>\"Greater Than\"</code>. If it is not, the function will return <code>\"Not Greater Than\"</code>.",
"<h4>Instructions</h4>",
2015-12-31 22:04:22 -08:00
"Create an <code>if</code> statement inside the function to return <code>\"Yes\"</code> if <code>testMe</code> is greater than <code>5</code>. Return <code>\"No\"</code> if it is less than or equal to <code>5</code>."
2015-12-21 09:26:28 -08:00
],
"challengeSeed": [
"// Example",
"function ourFunction(testMe) {",
" if (testMe > 10) { ",
" return \"Yes\";",
" }",
" return \"No\";",
"}",
"",
"// Setup",
"function myFunction(testMe) {",
"",
" // Only change code below this line.",
" ",
" ",
" ",
2015-12-21 09:26:28 -08:00
" // Only change code above this line.",
"",
"}",
"",
"// Change this value to test",
"myFunction(10);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myFunction(testMe) {\n if (testMe > 5) {\n return 'Yes';\n }\n return 'No';\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(typeof myFunction === \"function\", 'message: <code>myFunction</code> should be a function');",
"assert(typeof myFunction(4) === \"string\", 'message: <code>myFunction(4)</code> should return a string');",
"assert(typeof myFunction(6) === \"string\", 'message: <code>myFunction(6)</code> should return a string');",
"assert(myFunction(4) === \"No\", 'message: <code>myFunction(4)</code> should \"No\"');",
"assert(myFunction(5) === \"No\", 'message: <code>myFunction(5)</code> should \"No\"');",
"assert(myFunction(6) === \"Yes\", 'message: <code>myFunction(6)</code> should \"Yes\"');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244d0",
"title": "Comparison with the Equality Operator",
"description": [
2015-12-26 09:24:16 +05:30
"There are many <dfn>Comparison Operators</dfn> in JavaScript. All of these operators return a boolean <code>true</code> or <code>false</code> value.",
"The most basic operator is the equality operator <code>==</code>. The equality operator compares two values and returns <code>true</code> if they're equivalent or <code>false</code> if they are not. Note that equality is different from assignment (<code>=</code>), which assigns the value at the right of the operator to a variable in the left.",
2015-12-26 09:24:16 +05:30
"<blockquote>function equalityTest(myVal) {<br> if (myVal == 10) {<br> return \"Equal\";<br> }<br> return \"Not Equal\";<br>}</blockquote>",
2015-12-31 22:04:22 -08:00
"If <code>myVal</code> is equal to <code>10</code>, the function will return \"Equal\". If it is not, the function will return \"Not Equal\".",
"The equality operator will do its best to convert values for comparison, for example:",
2015-12-26 09:24:16 +05:30
"<blockquote> 1 == 1 // true<br> \"1\" == 1 // true<br> 1 == '1' // true<br> 0 == false // true<br> 0 == null // false<br> 0 == undefined // false<br> null == undefined // true</blockquote>",
"<h4>Instructions</h4>",
2015-12-26 09:24:16 +05:30
"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>"
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
"function myTest(val) {",
" if (val) { // Change this line",
" return \"Equal\";",
" }",
" return \"Not Equal\";",
"}",
"",
"// Change this value to test",
"myTest(10);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n if (val == 12) {\n return \"Equal\";\n }\n return \"Not Equal\";\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myTest(10) === \"Not Equal\", 'message: <code>myTest(10)</code> should return \"Not Equal\"');",
"assert(myTest(12) === \"Equal\", 'message: <code>myTest(12)</code> should return \"Equal\"');",
"assert(myTest(\"12\") === \"Equal\", 'message: <code>myTest(\"12\")</code> should return \"Equal\"');",
"assert(code.match(/val\\s*==\\s*\\d+/g).length > 0, 'message: You should use the <code>==</code> operator');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244d1",
"title": "Comparison with the Strict Equality Operator",
"description": [
2015-12-31 22:04:22 -08:00
"Strict equality (<code>===</code>) is the counterpart to the equality operator (<code>==</code>). Unlike the equality operator, strict equality tests both the <dfn>type</dfn> and <dfn>value</dfn> of the compared elements.",
2015-12-26 23:30:01 -08:00
"<strong>Examples</strong>",
"<blockquote>3 === 3 // true<br>3 === '3' // false</blockquote>",
"<em>In the second example, <code>3</code> is a <code>Number</code> type and <code>'3'</code> is a <code>String</code> type.</em>",
"<h4>Instructions</h4>",
"Use strict equality operator in <code>if</code> statement so the function will return \"Equal\" when <code>val</code> is strictly equal to <code>7</code>"
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
"function myTest(val) {",
" if (val) { // Change this line",
" return \"Equal\";",
" }",
" return \"Not Equal\";",
"}",
"",
"// Change this value to test",
"myTest(10);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"function myTest(val) {\n if (val === 7) {\n return \"Equal\";\n }\n return \"Not Equal\";\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myTest(10) === \"Not Equal\", 'message: <code>myTest(10)</code> should return \"Not Equal\"');",
"assert(myTest(7) === \"Equal\", 'message: <code>myTest(7)</code> should return \"Equal\"');",
"assert(myTest(\"7\") === \"Not Equal\", 'message: <code>myTest(\"7\")</code> should return \"Not Equal\"');",
"assert(code.match(/val\\s*===\\s*\\d+/g).length > 0, 'message: You should use the <code>===</code> operator');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244d2",
"title": "Comparison with the Inequality Operator",
"description": [
2015-12-31 22:04:22 -08:00
"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.",
2015-12-26 23:30:01 -08:00
"<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>",
"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>"
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
"function myTest(val) {",
" if (val) { // Change this line",
" return \"Not Equal\";",
" }",
" return \"Equal\";",
"}",
"",
"// Change this value to test",
"myTest(10);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n if (val != 99) {\n return \"Not Equal\";\n }\n return \"Equal\";\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myTest(99) === \"Equal\", 'message: <code>myTest(99)</code> should return \"Equal\"');",
"assert(myTest(\"99\") === \"Equal\", 'message: <code>myTest(\"99\")</code> should return \"Equal\"');",
"assert(myTest(12) === \"Not Equal\", 'message: <code>myTest(12)</code> should return \"Not Equal\"');",
"assert(myTest(\"12\") === \"Not Equal\", 'message: <code>myTest(\"12\")</code> should return \"Not Equal\"');",
"assert(myTest(\"bob\") === \"Not Equal\", 'message: <code>myTest(\"bob\")</code> should return \"Not Equal\"');",
"assert(code.match(/val\\s*!=\\s*\\d+/g).length > 0, 'message: You should use the <code>!=</code> operator');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244d3",
"title": "Comparison with the Strict Inequality Operator",
"description": [
2015-12-28 12:17:06 -08:00
"The strict inequality operator (<code>!==</code>) is the 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.",
2015-12-26 23:30:01 -08:00
"<strong>Examples</strong>",
"<blockquote>3 !== 3 // false<br>3 !== '3' // true<br>4 !== 3 // true</blockquote>",
"<h4>Instructions</h4>",
"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>"
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
"function myTest(val) {",
" // Only Change Code Below this Line",
" ",
" if (val) {",
"",
" // Only Change Code Above this Line",
"",
" return \"Not Equal\";",
" }",
" return \"Equal\";",
"}",
"",
"// Change this value to test",
"myTest(10);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"function myTest(val) {\n if (val !== 17) {\n return \"Not Equal\";\n }\n return \"Equal\";\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myTest(17) === \"Equal\", 'message: <code>myTest(17)</code> should return \"Equal\"');",
"assert(myTest(\"17\") === \"Not Equal\", 'message: <code>myTest(\"17\")</code> should return \"Not Equal\"');",
"assert(myTest(12) === \"Not Equal\", 'message: <code>myTest(12)</code> should return \"Not Equal\"');",
"assert(myTest(\"bob\") === \"Not Equal\", 'message: <code>myTest(\"bob\")</code> should return \"Not Equal\"');",
"assert(code.match(/val\\s*!==\\s*\\d+/g).length > 0, 'message: You should use the <code>!==</code> operator');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244d4",
"title": "Comparison with the Greater Than Operator",
"description": [
"The greater than operator (<code>&gt;</code>) compares the values of two numbers. If the number to the left is greater than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.<br>Like the equality operator, greater than operator will convert data types of values while comparing.",
2015-12-26 23:30:01 -08:00
"<strong>Examples</strong>",
"<blockquote> 5 > 3 // true<br> 7 > '3' // true<br> 2 > 3 // false<br>'1' > 9 // false</blockquote>",
"<h4>Instructions</h4>",
"Add the <code>greater than</code> operator to the indicated lines so that the return statements make sense."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"function myTest(val) {",
" if (val) { // Change this line",
" return \"Over 100\";",
" }",
" ",
" if (val) { // Change this line",
" return \"Over 10\";",
" }",
"",
" return \"10 or Under\";",
"}",
"",
"// Change this value to test",
"myTest(10);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n if (val > 100) { // Change this line\n return \"Over 100\";\n }\n if (val > 10) { // Change this line\n return \"Over 10\";\n }\n return \"10 or Under\";\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myTest(0) === \"10 or Under\", 'message: <code>myTest(0)</code> should return \"10 or Under\"');",
"assert(myTest(10) === \"10 or Under\", 'message: <code>myTest(10)</code> should return \"10 or Under\"');",
"assert(myTest(11) === \"Over 10\", 'message: <code>myTest(11)</code> should return \"Over 10\"');",
"assert(myTest(99) === \"Over 10\", 'message: <code>myTest(99)</code> should return \"Over 10\"');",
"assert(myTest(100) === \"Over 10\", 'message: <code>myTest(100)</code> should return \"Over 10\"');",
"assert(myTest(101) === \"Over 100\", 'message: <code>myTest(101)</code> should return \"Over 100\"');",
"assert(myTest(150) === \"Over 100\", 'message: <code>myTest(150)</code> should return \"Over 100\"');",
"assert(code.match(/val\\s*>\\s*\\d+/g).length > 1, 'message: You should use the <code>&gt;</code> operator at least twice');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244d5",
"title": "Comparison with the Greater Than Equal To Operator",
"description": [
"The greater than equal to operator (<code>&gt;=</code>) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>.<br>Like the equality operator, greater than equal to operator will convert data types while comparing.",
2015-12-26 23:30:01 -08:00
"<strong>Examples</strong>",
"<blockquote> 6 >= 6 // true<br> 7 >= '3' // true<br> 2 >= 3 // false<br>'7' >= 9 // false</blockquote>",
"<h4>Instructions</h4>",
"Add the <code>greater than equal to</code> operator to the indicated lines so that the return statements make sense."
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"function myTest(val) {",
" if (val) { // Change this line",
" return \"20 or Over\";",
" }",
" ",
" if (val) { // Change this line",
" return \"10 or Over\";",
" }",
"",
2015-12-21 09:26:28 -08:00
" return \"9 or Under\";",
"}",
"",
2015-12-21 09:26:28 -08:00
"// Change this value to test",
"myTest(10);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n if (val >= 20) { // Change this line\n return \"20 or Over\";\n }\n \n if (val >= 10) { // Change this line\n return \"10 or Over\";\n }\n\n return \"9 or Under\";\n}"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myTest(0) === \"9 or Under\", 'message: <code>myTest(0)</code> should return \"9 or Under\"');",
"assert(myTest(9) === \"9 or Under\", 'message: <code>myTest(9)</code> should return \"9 or Under\"');",
"assert(myTest(10) === \"10 or Over\", 'message: <code>myTest(10)</code> should return \"10 or Over\"');",
"assert(myTest(11) === \"10 or Over\", 'message: <code>myTest(10)</code> should return \"10 or Over\"');",
"assert(myTest(19) === \"10 or Over\", 'message: <code>myTest(19)</code> should return \"10 or Over\"');",
"assert(myTest(20) === \"20 or Over\", 'message: <code>myTest(100)</code> should return \"20 or Over\"');",
"assert(myTest(21) === \"20 or Over\", 'message: <code>myTest(101)</code> should return \"20 or Over\"');",
"assert(code.match(/val\\s*>=\\s*\\d+/g).length > 1, 'message: You should use the <code>&gt;=</code> operator at least twice');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244d6",
"title": "Comparison with the Less Than Operator",
"description": [
2015-12-31 22:04:22 -08:00
"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.",
2015-12-26 23:30:01 -08:00
"<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>",
"Add the <code>less than</code> operator to the indicated lines so that the return statements make sense."
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"function myTest(val) {",
" if (val) { // Change this line",
" return \"Under 25\";",
" }",
" ",
" if (val) { // Change this line",
" return \"Under 55\";",
" }",
"",
2015-12-21 09:26:28 -08:00
" return \"55 or Over\";",
"}",
"",
2015-12-21 09:26:28 -08:00
"// Change this value to test",
"myTest(10);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n if (val < 25) { // Change this line\n return \"Under 25\";\n }\n \n if (val < 55) { // Change this line\n return \"Under 55\";\n }\n\n return \"55 or Over\";\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myTest(0) === \"Under 25\", 'message: <code>myTest(0)</code> should return \"Under 25\"');",
"assert(myTest(24) === \"Under 25\", 'message: <code>myTest(24)</code> should return \"Under 25\"');",
"assert(myTest(25) === \"Under 55\", 'message: <code>myTest(25)</code> should return \"Under 55\"');",
"assert(myTest(54) === \"Under 55\", 'message: <code>myTest(54)</code> should return \"Under 55\"');",
"assert(myTest(55) === \"55 or Over\", 'message: <code>myTest(55)</code> should return \"55 or Over\"');",
"assert(myTest(99) === \"55 or Over\", 'message: <code>myTest(99)</code> should return \"55 or Over\"');",
"assert(code.match(/val\\s*<\\s*\\d+/g).length > 1, 'message: You should use the <code>&lt;</code> operator at least twice');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244d7",
"title": "Comparison with the Less Than Equal To Operator",
"description": [
2015-12-31 22:04:22 -08:00
"The <code>less than 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 equal to</code> converts data types.",
2015-12-26 23:30:01 -08:00
"<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>",
"Add the <code>less than equal to</code> operator to the indicated lines so that the return statements make sense."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"function myTest(val) {",
" if (val) { // Change this line",
" return \"Smaller Than or Equal to 12\";",
2015-12-21 09:26:28 -08:00
" }",
" ",
" if (val) { // Change this line",
" return \"Smaller Than or Equal to 24\";",
2015-12-21 09:26:28 -08:00
" }",
"",
2015-12-21 09:26:28 -08:00
" return \"25 or More\";",
"}",
"",
2015-12-21 09:26:28 -08:00
"// Change this value to test",
"myTest(10);",
""
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n if (val <= 12) { // Change this line\n return \"Smaller Than or Equal to 12\";\n }\n \n if (val <= 24) { // Change this line\n return \"Smaller Than or Equal to 24\";\n }\n\n return \"25 or More\";\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myTest(0) === \"Smaller Than or Equal to 12\", 'message: <code>myTest(0)</code> should return \"Smaller Than or Equal to 12\"');",
"assert(myTest(11) === \"Smaller Than or Equal to 12\", 'message: <code>myTest(11)</code> should return \"Smaller Than or Equal to 12\"');",
"assert(myTest(12) === \"Smaller Than or Equal to 12\", 'message: <code>myTest(12)</code> should return \"Smaller Than or Equal to 12\"');",
"assert(myTest(23) === \"Smaller Than or Equal to 24\", 'message: <code>myTest(23)</code> should return \"Smaller Than or Equal to 24\"');",
"assert(myTest(24) === \"Smaller Than or Equal to 24\", 'message: <code>myTest(24)</code> should return \"Smaller Than or Equal to 24\"');",
"assert(myTest(25) === \"25 or More\", 'message: <code>myTest(25)</code> should return \"25 or More\"');",
"assert(myTest(55) === \"25 or More\", 'message: <code>myTest(55)</code> should return \"25 or More\"');",
"assert(code.match(/val\\s*<=\\s*\\d+/g).length > 1, 'message: You should use the <code>&lt;=</code> operator at least twice');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244d8",
"title": "Comparisons with the Logical And Operator",
"description": [
2015-12-31 22:04:22 -08:00
"Sometimes you will need to test more than one thing at a time. The <dfn>logical and</dfn> operator (<code>&&</code>) returns <code>true</code> if and only if the <dfn>operands</dfn> to the left and right of it are true.",
2015-12-21 09:26:28 -08:00
"The same effect could be achieved by nesting an if statement inside another if:",
"<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 between <code>6</code> and <code>9</code> (6 and 9 included). The same logic can be written as:",
"<blockquote>if (num > 5 && num < 10) {<br> return \"Yes\";<br>}<br>return \"No\";</blockquote>",
"<h4>Instructions</h4>",
2015-12-31 22:04:22 -08:00
"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>."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"function myTest(val) {",
" // Only change code below this line",
"",
2015-12-21 09:26:28 -08:00
" if (val) {",
" if (val) {",
" return \"Yes\";",
2015-12-28 22:35:05 -08:00
" }",
2015-12-21 09:26:28 -08:00
" }",
"",
2015-12-21 09:26:28 -08:00
" // Only change code above this line",
" return \"No\";",
"}",
"",
2015-12-21 09:26:28 -08:00
"// Change this value to test",
"myTest(10);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n if (val >= 25 && val <= 50) {\n return \"Yes\";\n }\n return \"No\";\n}"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(code.match(/&&/g).length === 1, 'message: You should use the <code>&&</code> operator once');",
"assert(code.match(/if/g).length === 1, 'message: You should only have one <code>if</code> statement');",
"assert(myTest(0) === \"No\", 'message: <code>myTest(0)</code> should return \"No\"');",
"assert(myTest(24) === \"No\", 'message: <code>myTest(24)</code> should return \"No\"');",
"assert(myTest(25) === \"Yes\", 'message: <code>myTest(25)</code> should return \"Yes\"');",
"assert(myTest(49) === \"Yes\", 'message: <code>myTest(30)</code> should return \"Yes\"');",
"assert(myTest(50) === \"Yes\", 'message: <code>myTest(50)</code> should return \"Yes\"');",
"assert(myTest(51) === \"No\", 'message: <code>myTest(51)</code> should return \"No\"');",
"assert(myTest(75) === \"No\", 'message: <code>myTest(75)</code> should return \"No\"');",
"assert(myTest(51) === \"No\", 'message: <code>myTest(51)</code> should return \"No\"');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244d9",
"title": "Comparisons with the Logical Or Operator",
"description": [
2015-12-28 12:17:06 -08:00
"The <dfn>logical or</dfn> operator (<code>||</code>) returns <code>true</code> if either of the <dfn>operands</dfn> is <code>true</code>. Otherwise, it returns <code>false</code>.",
2015-12-21 09:26:28 -08:00
"The pattern below should look familiar from prior waypoints:",
"<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>",
2015-12-31 22:04:22 -08:00
"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>."
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"function myTest(val) {",
" // Only change code below this line",
"",
2015-12-21 09:26:28 -08:00
" if (val) {",
" return \"Outside\";",
" }",
"",
2015-12-21 09:26:28 -08:00
" if (val) {",
" return \"Outside\";",
" }",
"",
2015-12-21 09:26:28 -08:00
" // Only change code above this line",
" return \"Inside\";",
"}",
"",
2015-12-21 09:26:28 -08:00
"// Change this value to test",
"myTest(15);"
],
2015-12-21 09:26:28 -08:00
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n if (val < 10 || val > 20) {\n return \"Outside\";\n }\n return \"Inside\";\n}"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(code.match(/\\|\\|/g).length === 1, 'message: You should use the <code>||</code> operator once');",
"assert(code.match(/if/g).length === 1, 'message: You should only have one <code>if</code> statement');",
"assert(myTest(0) === \"Outside\", 'message: <code>myTest(0)</code> should return \"Outside\"');",
"assert(myTest(9) === \"Outside\", 'message: <code>myTest(9)</code> should return \"Outside\"');",
"assert(myTest(10) === \"Inside\", 'message: <code>myTest(10)</code> should return \"Inside\"');",
"assert(myTest(15) === \"Inside\", 'message: <code>myTest(15)</code> should return \"Inside\"');",
"assert(myTest(19) === \"Inside\", 'message: <code>myTest(19)</code> should return \"Inside\"');",
"assert(myTest(20) === \"Inside\", 'message: <code>myTest(20)</code> should return \"Inside\"');",
"assert(myTest(21) === \"Outside\", 'message: <code>myTest(21)</code> should return \"Outside\"');",
"assert(myTest(25) === \"Outside\", 'message: <code>myTest(25)</code> should return \"Outside\"');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
2015-12-21 09:26:28 -08:00
{
"id": "56533eb9ac21ba0edf2244da",
"title": "Introducing Else Statements",
"description": [
2015-12-31 22:04:22 -08:00
"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.",
2015-12-26 23:30:01 -08:00
"<blockquote>if (num > 10) {<br> return \"Bigger than 10\";<br>} else {<br> return \"10 or Less\";<br>}</blockquote>",
"<h4>Instructions</h4>",
"Combine the <code>if</code> statements into a single statement."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"function myTest(val) {",
" var result = \"\";",
" // Only change code below this line",
"",
2015-12-21 09:26:28 -08:00
" if(val > 5) {",
" result = \"Bigger than 5\";",
" }",
" ",
" if(val <= 5) {",
" result = \"5 or Smaller\";",
" }",
" ",
" // Only change code above this line",
" return result;",
"}",
" ",
"// Change this value to test",
"myTest(4);",
""
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n var result = \"\";\n if(val > 5) {\n result = \"Bigger than 5\";\n } else {\n result = \"5 or Smaller\";\n }\n return result;\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(code.match(/if/g).length === 1, 'message: You should only have one <code>if</code> statement');",
"assert(/else/g.test(code), 'message: You should use an <code>else</code> statement');",
"assert(myTest(4) === \"5 or Smaller\", 'message: <code>myTest(4)</code> should return \"5 or Smaller\"');",
"assert(myTest(5) === \"5 or Smaller\", 'message: <code>myTest(5)</code> should return \"5 or Smaller\"');",
"assert(myTest(6) === \"Bigger than 5\", 'message: <code>myTest(6)</code> should return \"Bigger than 5\"');",
"assert(myTest(10) === \"Bigger than 5\", 'message: <code>myTest(10)</code> should return \"Bigger than 5\"');",
"assert(/var result = \"\";/.test(code) && /return result;/.test(code), 'message: Do not change the code above or below the lines.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244db",
"title": "Introducing Else If Statements",
"description": [
2015-12-26 23:34:57 +05:30
"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>",
"Convert the logic to use <code>else if</code> statements."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"function myTest(val) {",
" if(val > 10) {",
" return \"Greater than 10\";",
2015-12-21 09:26:28 -08:00
" }",
" ",
" if(val < 5) {",
" return \"Smaller than 5\";",
" }",
" ",
" return \"Between 5 and 10\";",
"}",
" ",
"// Change this value to test",
"myTest(7);",
""
],
"solutions": [
"function myTest(val) {\n if(val > 10) {\n return \"Greater than 10\";\n } else if(val < 5) {\n return \"Smaller than 5\";\n } else {\n return \"Between 5 and 10\";\n }\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(code.match(/else/g).length > 1, 'message: You should have at least two <code>else</code> statements');",
"assert(code.match(/if/g).length > 1, 'message: You should have at least two <code>if</code> statements');",
"assert(myTest(0) === \"Smaller than 5\", 'message: <code>myTest(0)</code> should return \"Smaller than 5\"');",
"assert(myTest(5) === \"Between 5 and 10\", 'message: <code>myTest(5)</code> should return \"Between 5 and 10\"');",
2015-12-29 15:43:21 -08:00
"assert(myTest(7) === \"Between 5 and 10\", 'message: <code>myTest(7)</code> should return \"Between 5 and 10\"');",
"assert(myTest(10) === \"Between 5 and 10\", 'message: <code>myTest(10)</code> should return \"Between 5 and 10\"');",
"assert(myTest(12) === \"Greater than 10\", 'message: <code>myTest(12)</code> should return \"Greater than 10\"');"
2015-12-29 15:43:21 -08:00
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244dc",
2015-12-28 12:17:06 -08:00
"title": "Chaining If Else Statements",
2015-12-21 09:26:28 -08:00
"description": [
2015-12-28 12:17:06 -08:00
"<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>",
"Write chained <code>if</code>/<code>else if</code> statements to fulfill the following conditions:",
2015-12-27 01:04:23 +05:30
"<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\""
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"function myTest(num) {",
" // Only change code below this line",
2015-12-27 01:04:23 +05:30
" ",
" ",
2015-12-21 09:26:28 -08:00
" return \"Change Me\";",
" // Only change code above this line",
"}",
"",
2015-12-21 09:26:28 -08:00
"// Change this value to test",
"myTest(7);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(num) {\n if (num < 5) {\n return \"Tiny\";\n } else if (num < 10) {\n return \"Small\";\n } else if (num < 15) {\n return \"Medium\";\n } else if (num < 20) {\n return \"Large\";\n } else {\n return \"Huge\";\n }\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(code.match(/else/g).length > 3, 'message: You should have at least four <code>else</code> statements');",
"assert(code.match(/if/g).length > 3, 'message: You should have at least four <code>if</code> statements');",
"assert(code.match(/return/g).length >= 5, 'message: You should have at least five <code>return</code> statements');",
2015-12-29 15:43:21 -08:00
"assert(myTest(0) === \"Tiny\", 'message: <code>myTest(0)</code> should return \"Tiny\"');",
"assert(myTest(4) === \"Tiny\", 'message: <code>myTest(4)</code> should return \"Tiny\"');",
"assert(myTest(5) === \"Small\", 'message: <code>myTest(5)</code> should return \"Small\"');",
"assert(myTest(8) === \"Small\", 'message: <code>myTest(8)</code> should return \"Small\"');",
"assert(myTest(10) === \"Medium\", 'message: <code>myTest(10)</code> should return \"Medium\"');",
"assert(myTest(14) === \"Medium\", 'message: <code>myTest(14)</code> should return \"Medium\"');",
"assert(myTest(15) === \"Large\", 'message: <code>myTest(15)</code> should return \"Large\"');",
"assert(myTest(17) === \"Large\", 'message: <code>myTest(17)</code> should return \"Large\"');",
"assert(myTest(20) === \"Huge\", 'message: <code>myTest(20)</code> should return \"Huge\"');",
"assert(myTest(25) === \"Huge\", 'message: <code>myTest(25)</code> should return \"Huge\"');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
2015-12-27 12:23:58 -08:00
{
"id": "5664820f61c48e80c9fa476c",
"title": "Golf Code",
"description": [
"In the game of <a href=\"https://en.wikipedia.org/wiki/Golf\">golf</a> each hole has a <dfn>par</dfn> for the average number of <dfn>strokes</dfn> needed to sink the ball. Depending on how far above or below <code>par</code> your <code>strokes</code> are, there is a different nickname.",
"Your function will be passed a <code>par</code> and <code>strokes</code>. Return strings according to this table (based on order of priority - top (highest) to bottom (lowest)):",
"<table class=\"table table-striped\"><thead><tr><th>Strokes</th><th>Return</th></tr></thead><tbody><tr><td>1</td><td>\"Hole-in-one!\"</td></tr><tr><td>&lt;= par - 2</td><td>\"Eagle\"</td></tr><tr><td>par - 1</td><td>\"Birdie\"</td></tr><tr><td>par</td><td>\"Par\"</td></tr><tr><td>par + 1</td><td>\"Bogey\"</td></tr><tr><td>par + 2</td><td>\"Double Bogey\"</td></tr><tr><td>&gt;= par + 3</td><td>\"Go Home!\"</td></tr></tbody></table>",
"<code>par</code> and <code>strokes</code> will always be numeric and positive."
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-27 12:23:58 -08:00
"challengeSeed": [
"function golfScore(par, strokes) {",
" // Only change code below this line",
" ",
" ",
" return \"Change Me\";",
" // Only change code above this line",
"}",
"",
"// Change these values to test",
"golfScore(5, 4);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function golfScore(par, strokes) {\n if (strokes === 1) {\n return \"Hole-in-one!\";\n }\n \n if (strokes <= par - 2) {\n return \"Eagle\";\n }\n \n if (strokes === par - 1) {\n return \"Birdie\";\n }\n \n if (strokes === par) {\n return \"Par\";\n }\n \n if (strokes === par + 1) {\n return \"Bogey\";\n }\n \n if(strokes === par + 2) {\n return \"Double Bogey\";\n }\n \n return \"Go Home!\";\n}"
2015-12-27 12:23:58 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(golfScore(4, 1) === \"Hole-in-one!\", 'message: <code>golfScore(4, 1)</code> should return \"Hole-in-one!\"');",
"assert(golfScore(4, 2) === \"Eagle\", 'message: <code>golfScore(4, 2)</code> should return \"Eagle\"');",
"assert(golfScore(5, 2) === \"Eagle\", 'message: <code>golfScore(5, 2)</code> should return \"Eagle\"');",
"assert(golfScore(4, 3) === \"Birdie\", 'message: <code>golfScore(4, 3)</code> should return \"Birdie\"');",
"assert(golfScore(4, 4) === \"Par\", 'message: <code>golfScore(4, 4)</code> should return \"Par\"');",
"assert(golfScore(1, 1) === \"Hole-in-one!\", 'message: <code>golfScore(1, 1)</code> should return \"Hole-in-one!\"');",
"assert(golfScore(5, 5) === \"Par\", 'message: <code>golfScore(5, 5)</code> should return \"Par\"');",
"assert(golfScore(4, 5) === \"Bogey\", 'message: <code>golfScore(4, 5)</code> should return \"Bogey\"');",
"assert(golfScore(4, 6) === \"Double Bogey\", 'message: <code>golfScore(4, 6)</code> should return \"Double Bogey\"');",
"assert(golfScore(4, 7) === \"Go Home!\", 'message: <code>golfScore(4, 7)</code> should return \"Go Home!\"');",
"assert(golfScore(5, 9) === \"Go Home!\", 'message: <code>golfScore(5, 9)</code> should return \"Go Home!\"');"
],
2016-01-01 21:10:08 -08:00
"type": "checkpoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244dd",
"title": "Selecting from many options with Switch Statements",
"description": [
2015-12-31 22:04:22 -08:00
"If you have many options to choose from, use a <code>switch</code> statement. A <code>switch</code> statement tests a value and can have many <code>case</code> statements which defines various possible values. Statements are executed from the first matched <code>case</code> value until a <code>break</code> is encountered.",
2015-12-28 12:17:06 -08:00
"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>",
2015-12-31 22:04:22 -08:00
"<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>",
2015-12-28 12:17:06 -08:00
"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\""
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"function myTest(val) {",
" var answer = \"\";",
" // Only change code below this line",
" ",
" ",
" ",
2015-12-21 09:26:28 -08:00
" // Only change code above this line ",
" return answer; ",
"}",
"",
2015-12-21 09:26:28 -08:00
"// Change this value to test",
"myTest(1);",
""
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n var answer = \"\";\n\n switch (val) {\n case 1:\n answer = \"alpha\";\n break;\n case 2:\n answer = \"beta\";\n break;\n case 3:\n answer = \"gamma\";\n break;\n case 4:\n answer = \"delta\";\n }\n return answer; \n}"
],
"tests": [
2015-12-29 15:43:21 -08:00
"assert(myTest(1) === \"alpha\", 'message: <code>myTest(1) should have a value of \"alpha\"');",
"assert(myTest(2) === \"beta\", 'message: <code>myTest(2) should have a value of \"beta\"');",
"assert(myTest(3) === \"gamma\", 'message: <code>myTest(3) should have a value of \"gamma\"');",
"assert(myTest(4) === \"delta\", 'message: <code>myTest(4) should have a value of \"delta\"');",
"assert(!/else/g.test(code) || !/if/g.test(code), 'message: You should not use any <code>if</code> or <code>else</code> statements');",
"assert(code.match(/break/g).length > 2, 'message: You should have at least 3 <code>break</code> statements');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244de",
"title": "Adding a default option in Switch statements",
"description": [
2015-12-28 12:17:06 -08:00
"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>",
"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\""
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"function myTest(val) {",
" var answer = \"\";",
" // Only change code below this line",
" ",
" ",
" ",
2015-12-21 09:26:28 -08:00
" // Only change code above this line ",
" return answer; ",
"}",
"",
2015-12-21 09:26:28 -08:00
"// Change this value to test",
"myTest(1);",
""
],
2015-12-21 09:26:28 -08:00
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n var answer = \"\";\n\n switch(val) {\n case \"a\":\n answer = \"apple\";\n break;\n case \"b\":\n answer = \"bird\";\n break;\n case \"c\":\n answer = \"cat\";\n break;\n default:\n answer = \"stuff\";\n }\n return answer; \n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myTest(\"a\") === \"apple\", 'message: <code>myTest(\"a\") should have a value of \"apple\"');",
"assert(myTest(\"b\") === \"bird\", 'message: <code>myTest(\"b\") should have a value of \"bird\"');",
"assert(myTest(\"c\") === \"cat\", 'message: <code>myTest(\"c\") should have a value of \"cat\"');",
"assert(myTest(\"d\") === \"stuff\", 'message: <code>myTest(\"d\") should have a value of \"stuff\"');",
"assert(myTest(4) === \"stuff\", 'message: <code>myTest(4) should have a value of \"stuff\"');",
"assert(!/else/g.test(code) || !/if/g.test(code), 'message: You should not use any <code>if</code> or <code>else</code> statements');",
"assert(code.match(/break/g).length > 2, 'message: You should have at least 3 <code>break</code> statements');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244df",
"title": "Multiple Identical Options in Switch Statements",
"description": [
2015-12-31 22:04:22 -08:00
"If the <code>break</code> statement is ommitted 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:",
2015-12-26 23:30:01 -08:00
"<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>",
2015-12-21 09:26:28 -08:00
"Cases for 1, 2, and 3 will all produce the same result.",
"<h4>Instructions</h4>",
2015-12-26 23:30:01 -08:00
"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>",
"You will need to have a <code>case</code> statement for each number in the range."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"function myTest(val) {",
" var answer = \"\";",
" // Only change code below this line",
" ",
" ",
" ",
2015-12-21 09:26:28 -08:00
" // Only change code above this line ",
" return answer; ",
"}",
"",
2015-12-21 09:26:28 -08:00
"// Change this value to test",
"myTest(1);",
""
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n var answer = \"\";\n \n switch (val) {\n case 1:\n case 2:\n case 3:\n answer = \"Low\";\n break;\n case 4:\n case 5:\n case 6:\n answer = \"Mid\";\n break;\n case 7:\n case 8:\n case 9:\n answer = \"High\";\n }\n \n return answer; \n}"
],
"tests": [
2015-12-29 15:43:21 -08:00
"assert(myTest(1) === \"Low\", 'message: <code>myTest(1)</code> should return \"Low\"');",
"assert(myTest(2) === \"Low\", 'message: <code>myTest(2)</code> should return \"Low\"');",
"assert(myTest(3) === \"Low\", 'message: <code>myTest(3)</code> should return \"Low\"');",
"assert(myTest(4) === \"Mid\", 'message: <code>myTest(4)</code> should return \"Mid\"');",
"assert(myTest(5) === \"Mid\", 'message: <code>myTest(5)</code> should return \"Mid\"');",
"assert(myTest(6) === \"Mid\", 'message: <code>myTest(6)</code> should return \"Mid\"');",
"assert(myTest(7) === \"High\", 'message: <code>myTest(7)</code> should return \"High\"');",
"assert(myTest(8) === \"High\", 'message: <code>myTest(8)</code> should return \"High\"');",
"assert(myTest(9) === \"High\", 'message: <code>myTest(9)</code> should return \"High\"');",
"assert(!/else/g.test(code) || !/if/g.test(code), 'message: You should not use any <code>if</code> or <code>else</code> statements');",
"assert(code.match(/case/g).length === 9, 'message: You should have nine <code>case</code> statements');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-12-21 09:26:28 -08:00
"id": "56533eb9ac21ba0edf2244e0",
"title": "Replacing If Else Chains with Switch",
"description": [
2015-12-31 22:04:22 -08:00
"If you have many options to choose from, a <code>switch</code> statement can be easier to write than many chained <code>if</code>/<code>if else</code> statements. The following:",
2015-12-27 02:28:55 +05:30
"<blockquote>if(val === 1) {<br> answer = \"a\";<br>} else if(val === 2) {<br> answer = \"b\";<br>} else {<br> answer = \"c\";<br>}</blockquote>",
2015-12-21 09:26:28 -08:00
"can be replaced with:",
2015-12-27 02:28:55 +05:30
"<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>",
"Change the chained <code>if</code>/<code>if else</code> statements into a <code>switch</code> statement."
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"function myTest(val) {",
" var answer = \"\";",
" // Only change code below this line",
" ",
" if(val === \"bob\") {",
" answer = \"Marley\";",
" } else if(val === 42) {",
" answer = \"The Answer\";",
" } else if(val === 1) {",
" answer = \"There is no #1\";",
" } else if(val === 99) {",
" answer = \"Missed me by this much!\";",
" } else if(val === 7) {",
" answer = \"Ate Nine\";",
" }",
2015-12-27 02:28:55 +05:30
" ",
2015-12-21 09:26:28 -08:00
" // Only change code above this line ",
" return answer; ",
"}",
"",
2015-12-21 09:26:28 -08:00
"// Change this value to test",
"myTest(7);",
""
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function myTest(val) {\n var answer = \"\";\n\n switch (val) {\n case \"bob\":\n answer = \"Marley\";\n break;\n case 42:\n answer = \"The Answer\";\n break;\n case 1:\n answer = \"There is no #1\";\n break;\n case 99:\n answer = \"Missed me by this much!\";\n break;\n case 7:\n answer = \"Ate Nine\";\n }\n return answer; \n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(!/else/g.test(code), 'message: You should not use any <code>else</code> statements');",
"assert(!/if/g.test(code), 'message: You should not use any <code>if</code> statements');",
2016-01-01 14:13:36 +11:00
"assert(code.match(/break/g).length >= 4, 'message: You should have at least four <code>break</code> statements');",
2015-12-29 15:43:21 -08:00
"assert(myTest(\"bob\") === \"Marley\", 'message: <code>myTest(\"bob\")</code> should be \"Marley\"');",
"assert(myTest(42) === \"The Answer\", 'message: <code>myTest(42)</code> should be \"The Answer\"');",
"assert(myTest(1) === \"There is no #1\", 'message: <code>myTest(1)</code> should be \"There is no #1\"');",
"assert(myTest(99) === \"Missed me by this much!\", 'message: <code>myTest(99)</code> should be \"Missed me by this much!\"');",
"assert(myTest(7) === \"Ate Nine\", 'message: <code>myTest(7)</code> should be \"Ate Nine\"');",
"assert(myTest(\"John\") === \"\", 'message: <code>myTest(\"John\")</code> should be \"\" (empty string)');",
"assert(myTest(156) === \"\", 'message: <code>myTest(156)</code> should be \"\" (empty string)');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
2015-12-22 14:44:48 -08:00
"id": "5679ceb97cbaa8c51670a16b",
"title": "Returning Boolean Values from Functions",
"description": [
"You may recall from <a href=\"waypoint-comparison-with-the-equality-operator\" target=\"_blank\">Comparison with the Equality Operator</a> that all comparison operators return a boolean <code>true</code> or <code>false</code> value.",
2015-12-23 18:50:43 -08:00
"A common <dfn>anti-pattern</dfn> is to use an <code>if/else</code> statement to do a comparison and then <code>return</code> <code>true</code>/<code>false</code>:",
"<blockquote>function isEqual(a,b) {<br> if(a === b) {<br> return true;<br> } else {<br> return false;<br> }<br>}</blockquote>",
"Since <code>===</code> returns <code>true</code> or <code>false</code>, we can simply return the result of the comparison:",
2015-12-26 23:30:01 -08:00
"<blockquote>function isEqual(a,b) {<br> return a === b;<br>}</blockquote>",
2015-12-23 18:50:43 -08:00
"<h4>Instructions</h4>",
"Fix the function <code>isLess</code> to remove the <code>if/else</code> statements."
2015-12-22 14:44:48 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-22 14:44:48 -08:00
"challengeSeed": [
2015-12-23 18:50:43 -08:00
"function isLess(a, b) {",
" // Fix this code",
" if(a < b) {",
" return true;",
" } else {",
" return false;",
" }",
"}",
2015-12-22 14:44:48 -08:00
"",
2015-12-23 18:50:43 -08:00
"// Change these values to test",
"isLess(10, 15);"
2015-12-22 14:44:48 -08:00
],
"tail": [
""
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function isLess(a, b) {\n return a < b;\n}"
],
"tests": [
2015-12-29 15:43:21 -08:00
"assert(isLess(10,15) === true, 'message: <code>isLess(10,15)</code> should return <code>true</code>');",
"assert(isLess(15, 10) === false, 'message: <code>isLess(15,10)</code> should return <code>false</code>');",
2015-12-29 15:43:21 -08:00
"assert(!/if|else/g.test(code), 'message: You should not use any <code>if</code> or <code>else</code> statements');"
],
2015-12-22 14:44:48 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-22 14:44:48 -08:00
},
{
"id": "56533eb9ac21ba0edf2244c4",
"title": "Return Early Pattern for Functions",
"description": [
2015-12-26 23:30:01 -08:00
"When a <code>return</code> statement is reached, the execution of the current function stops and control returns to the calling location.",
"<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>",
"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>."
2015-12-22 14:44:48 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
"challengeSeed": [
2015-12-26 23:30:01 -08:00
"// Setup",
"function abTest(a, b) {",
" // Only change code below this line",
" ",
" ",
" ",
" // Only change code above this line",
2015-12-22 14:44:48 -08:00
"",
2015-12-26 23:30:01 -08:00
" return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));",
"}",
"",
2015-12-26 23:30:01 -08:00
"// Change values below to test your code",
"abTest(2,2);"
2015-12-22 14:44:48 -08:00
],
"tail": [
""
],
"solutions": [
2015-12-28 21:15:50 -08:00
"function abTest(a, b) {\n if(a < 0 || b < 0) {\n return undefined;\n } \n return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));\n}"
2015-12-22 14:44:48 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(typeof abTest(2,2) === 'number' , 'message: <code>abTest(2,2)</code> should return a number');",
"assert(abTest(2,2) === 8 , 'message: <code>abTest(2,2)</code> should return <code>8</code>');",
"assert(abTest(-2,2) === undefined , 'message: <code>abTest(-2,2)</code> should return <code>undefined</code>');",
"assert(abTest(2,-2) === undefined , 'message: <code>abTest(2,-2)</code> should return <code>undefined</code>');",
"assert(abTest(2,8) === 18 , 'message: <code>abTest(2,8)</code> should return <code>18</code>');",
"assert(abTest(3,3) === 12 , 'message: <code>abTest(3,3)</code> should return <code>12</code>');"
],
2015-12-22 14:44:48 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-22 14:44:48 -08:00
},
2015-12-21 09:26:28 -08:00
{
"id": "565bbe00e9cc8ac0725390f4",
"title": "Counting Cards",
"description": [
2015-12-31 22:04:22 -08:00
"In the casino game Blackjack, a player can gain an advantage over the house by keeping track of the relative number of high and low cards remaining in the deck. This is called <a href=\"https://en.wikipedia.org/wiki/Card_counting\">Card Counting</a>.",
"Having more high cards remaining in the deck favors the player. Each card is assigned a value according to the table below. When the count is positive, the player should bet high. When the count is zero or negative, the player should bet low.",
2015-12-21 09:26:28 -08:00
"<table class=\"table table-striped\"><thead><tr><th>Value</th><th>Cards</th></tr></thead><tbody><tr><td>+1</td><td>2, 3, 4, 5, 6</td></tr><tr><td>0</td><td>7, 8, 9</td></tr><tr><td>-1</td><td>10, 'J', 'Q', 'K','A'</td></tr></tbody></table>",
2015-12-31 22:04:22 -08:00
"You will write a card counting function. It will receive a <code>card</code> parameter and increment or decrement the global <code>count</code> variable according to the card's value (see table). The function will then return the current count and the string <code>\"Bet\"</code> if the count is positive, or <code>\"Hold\"</code> if the count is zero or negative.",
2015-12-21 09:26:28 -08:00
"<strong>Example Output</strong>",
2015-12-26 23:30:01 -08:00
"<code>-3 Hold</code><br><code>5 Bet</code>"
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"var count = 0;",
"",
2015-12-21 09:26:28 -08:00
"function cc(card) {",
" // Only change code below this line",
2015-12-27 19:21:43 +05:30
" ",
" ",
2015-12-21 09:26:28 -08:00
" return \"Change Me\";",
" // Only change code above this line",
"}",
"",
2015-12-31 22:04:22 -08:00
"// Add/remove calls to test your function.",
2015-12-21 09:26:28 -08:00
"// Note: Only the last will display",
"cc(2); cc(3); cc(7); cc('K'); cc('A');"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var count = 0;\nfunction cc(card) {\n switch(card) {\n case 2:\n case 3:\n case 4:\n case 5:\n case 6:\n count++;\n break;\n case 10:\n case 'J':\n case 'Q':\n case 'K':\n case 'A':\n count--;\n }\n if(count > 0) {\n return count + \" Bet\";\n } else {\n return count + \" Hold\";\n }\n}"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert((function(){ count = 0; cc(2);cc(3);cc(4);cc(5);var out = cc(6); if(out === \"5 Bet\") {return true;} return false; })(), 'message: Cards Sequence 2, 3, 4, 5, 6 should return <code>\"5 Bet\"</code>');",
"assert((function(){ count = 0; cc(7);cc(8);var out = cc(9); if(out === \"0 Hold\") {return true;} return false; })(), 'message: Cards Sequence 7, 8, 9 should return <code>\"0 Hold\"</code>');",
"assert((function(){ count = 0; cc(10);cc('J');cc('Q');cc('K');var out = cc('A'); if(out === \"-5 Hold\") {return true;} return false; })(), 'message: Cards Sequence 10, J, Q, K, A should return <code>\"-5 Hold\"</code>');",
"assert((function(){ count = 0; cc(3);cc(2);cc('A');cc(10);var out = cc('K'); if(out === \"-1 Hold\") {return true;} return false; })(), 'message: Cards Sequence 3, 2, A, 10, K should return <code>\"-1 Hold\"</code>');"
],
2016-01-01 21:10:08 -08:00
"type": "checkpoint",
"challengeType": 1
},
{
"id": "bg9998c9c99feddfaeb9bdef",
2015-08-07 23:37:32 -07:00
"title": "Build JavaScript Objects",
"description": [
"You may have heard the term <code>object</code> before.",
"Objects are similar to <code>arrays</code>, except that instead of using indexes to access and modify their data, you access the data in objects through what are called <code>properties</code>.",
"Here's a sample object:",
2015-12-26 23:30:01 -08:00
"<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>",
"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."
],
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"// Example",
"var ourDog = {",
" \"name\": \"Camper\",",
" \"legs\": 4,",
" \"tails\": 1,",
" \"friends\": [\"everything!\"]",
"};",
"",
2015-08-15 13:57:44 -07:00
"// Only change code below this line.",
"",
"var myDog = {",
2015-12-27 19:41:21 +05:30
" ",
" ",
" ",
" ",
2015-12-21 09:26:28 -08:00
"};"
],
"tail": [
"(function(z){return z;})(myDog);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var myDog = {\n \"name\": \"Camper\",\n \"legs\": 4,\n \"tails\": 1,\n \"friends\": [\"everything!\"] \n};"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert((function(z){if(z.hasOwnProperty(\"name\") && z.name !== undefined && typeof(z.name) === \"string\"){return true;}else{return false;}})(myDog), 'message: <code>myDog</code> should contain the property <code>name</code> and it should be a <code>string</code>.');",
"assert((function(z){if(z.hasOwnProperty(\"legs\") && z.legs !== undefined && typeof(z.legs) === \"number\"){return true;}else{return false;}})(myDog), 'message: <code>myDog</code> should contain the property <code>legs</code> and it should be a <code>number</code>.');",
"assert((function(z){if(z.hasOwnProperty(\"tails\") && z.tails !== undefined && typeof(z.tails) === \"number\"){return true;}else{return false;}})(myDog), 'message: <code>myDog</code> should contain the property <code>tails</code> and it should be a <code>number</code>.');",
"assert((function(z){if(z.hasOwnProperty(\"friends\") && z.friends !== undefined && Array.isArray(z.friends)){return true;}else{return false;}})(myDog), 'message: <code>myDog</code> should contain the property <code>friends</code> and it should be an <code>array</code>.');",
"assert((function(z){return Object.keys(z).length === 4;})(myDog), 'message: <code>myDog</code> should only contain all the given properties.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244c7",
"title": "Accessing Objects Properties with the Dot Operator",
"description": [
"There are two ways to access the properties of an object: the dot operator (<code>.</code>) and bracket notation (<code>[]</code>), similar to an array.",
"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:",
2015-12-26 23:30:01 -08:00
"<blockquote>var myObj = {<br> prop1: \"val1\",<br> prop2: \"val2\"<br>};<br>myObj.prop1; // val1<br>myObj.prop2; // val2</blockquote>",
"<h4>Instructions</h4>",
"Read the values of the properties <code>hat</code> and <code>shirt</code> of <code>testObj</code> using dot notation."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
"var testObj = {",
" \"hat\": \"ballcap\",",
" \"shirt\": \"jersey\",",
" \"shoes\": \"cleats\"",
"};",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"",
2015-12-21 09:26:28 -08:00
"var hatValue = testObj; // Change this line",
"var shirtValue = testObj; // Change this line"
],
"tail": [
"(function(a,b) { return \"hatValue = '\" + a + \"', shirtValue = '\" + b + \"'\"; })(hatValue,shirtValue);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var testObj = {\n \"hat\": \"ballcap\",\n \"shirt\": \"jersey\",\n \"shoes\": \"cleats\"\n};\n\nvar hatValue = testObj.hat; \nvar shirtValue = testObj.shirt;"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(typeof hatValue === 'string' , 'message: <code>hatValue</code> should be a string');",
"assert(hatValue === 'ballcap' , 'message: The value of <code>hatValue</code> should be <code>\"ballcap\"</code>');",
"assert(typeof shirtValue === 'string' , 'message: <code>shirtValue</code> should be a string');",
"assert(shirtValue === 'jersey' , 'message: The value of <code>shirtValue</code> should be <code>\"jersey\"</code>');",
"assert(code.match(/testObj\\.\\w+/g).length > 1, 'message: You should use dot notation twice');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244c8",
"title": "Accessing Objects Properties with Bracket Notation",
"description": [
2015-12-31 22:04:22 -08:00
"The second way to access the properties of an object is bracket notation (<code>[]</code>). If the property of the object you are trying to access has a space in it, you will need to use bracket notation.",
2015-12-21 09:26:28 -08:00
"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>",
2015-12-21 09:26:28 -08:00
"Note that property names with spaces in them must be in quotes (single or double).",
"<h4>Instructions</h4>",
"Read the values of the properties <code>\"an entree\"</code> and <code>\"the drink\"</code> of <code>testObj</code> using bracket notation."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
"var testObj = {",
" \"an entree\": \"hamburger\",",
" \"my side\": \"veggies\",",
" \"the drink\": \"water\"",
"};",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"",
2015-12-21 09:26:28 -08:00
"var entreeValue = testObj; // Change this line",
"var drinkValue = testObj; // Change this line"
],
"tail": [
"(function(a,b) { return \"entreeValue = '\" + a + \"', drinkValue = '\" + b + \"'\"; })(entreeValue,drinkValue);"
2015-12-21 09:26:28 -08:00
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var testObj = {\n \"an entree\": \"hamburger\",\n \"my side\": \"veggies\",\n \"the drink\": \"water\"\n};\nvar entreeValue = testObj[\"an entree\"];\nvar drinkValue = testObj['the drink'];"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(typeof entreeValue === 'string' , 'message: <code>entreeValue</code> should be a string');",
"assert(entreeValue === 'hamburger' , 'message: The value of <code>entreeValue</code> should be <code>\"hamburger\"</code>');",
"assert(typeof drinkValue === 'string' , 'message: <code>drinkValue</code> should be a string');",
"assert(drinkValue === 'water' , 'message: The value of <code>drinkValue</code> should be <code>\"water\"</code>');",
"assert(code.match(/testObj\\s*?\\[('|\")[^'\"]+\\1\\]/g).length > 1, 'message: You should use bracket notation twice');"
2015-12-29 15:43:21 -08:00
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244c9",
"title": "Accessing Objects Properties with Variables",
"description": [
2015-12-31 00:55:29 +05:30
"Another use of bracket notation on objects is to use a variable to access a property. This can be very useful for iterating through lists of the object properties or for doing the lookup.",
2015-12-21 09:26:28 -08:00
"Here is an example of using a variable to access a property:",
2015-12-26 23:30:01 -08:00
"<blockquote>var someProp = \"propName\";<br>var myObj = {<br> propName: \"Some Value\"<br >}<br>myObj[someProp]; // \"Some Value\"</blockquote>",
2015-12-21 09:26:28 -08:00
"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>",
"Use the <code>playerNumber</code> variable to lookup player <code>16</code> in <code>testObj</code> using bracket notation."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
"var testObj = {",
" 12: \"Namath\",",
" 16: \"Montana\",",
" 19: \"Unitas\"",
"};",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line;",
2015-10-28 05:13:49 -07:00
"",
2015-12-21 09:26:28 -08:00
"var playerNumber; // Change this Line",
"var player = testObj; // Change this Line"
],
"tail": [
""
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var testObj = {\n 12: \"Namath\",\n 16: \"Montana\",\n 19: \"Unitas\"\n};\nvar playerNumber = 16;\nvar player = testObj[playerNumber];"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(typeof playerNumber === 'number', 'message: <code>playerNumber</code> should be a number');",
"assert(typeof player === 'string', 'message: The variable <code>player</code> should be a string');",
"assert(player === 'Montana', 'message: The value of <code>player</code> should be \"Montana\"');",
"assert(/testObj\\s*?\\[\\s*playerNumber\\s*\\]/.test(code),'message: You should use bracket notation to access <code>testObj</code>');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
"id": "bg9999c9c99feddfaeb9bdef",
2015-12-21 09:26:28 -08:00
"title": "Updating Object Properties",
"description": [
2015-12-31 22:04:22 -08:00
"After you've created a JavaScript object, you can update its properties at any time just like you would update any other variable. You can use either dot or bracket notation to update.",
"For example, let's look at <code>ourDog</code>:",
2015-12-26 23:30:01 -08:00
"<blockquote>var ourDog = {<br> \"name\": \"Camper\",<br> \"legs\": 4,<br> \"tails\": 1,<br> \"friends\": [\"everything!\"]<br>};</blockquote>",
"Since he's a particularly happy dog, let's change his name to \"Happy Camper\". Here's how we update his object's name property:",
2015-12-21 09:26:28 -08:00
"<code>ourDog.name = \"Happy Camper\";</code> or",
2015-12-27 21:02:36 +05:30
"<code>ourDog[\"name\"] = \"Happy Camper\";</code>",
2015-12-21 09:26:28 -08:00
"Now when we evaluate <code>ourDog.name</code>, instead of getting \"Camper\", we'll get his new name, \"Happy Camper\".",
"<h4>Instructions</h4>",
2015-12-31 22:04:22 -08:00
"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": [
2015-12-21 09:26:28 -08:00
"// Example",
"var ourDog = {",
" \"name\": \"Camper\",",
" \"legs\": 4,",
" \"tails\": 1,",
" \"friends\": [\"everything!\"]",
"};",
"",
"ourDog.name = \"Happy Camper\";",
2015-07-10 00:56:30 +01:00
"",
2015-12-21 09:26:28 -08:00
"// Setup",
2015-07-10 00:56:30 +01:00
"var myDog = {",
" \"name\": \"Coder\",",
" \"legs\": 4,",
" \"tails\": 1,",
" \"friends\": [\"Free Code Camp Campers\"]",
2015-07-10 00:56:30 +01:00
"};",
2015-08-15 13:57:44 -07:00
"",
"// Only change code below this line.",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
2015-08-27 22:18:09 +02:00
"(function(z){return z;})(myDog);"
2015-07-10 00:56:30 +01:00
],
2015-12-29 15:43:21 -08:00
"solutions": [
"var myDog = {\n \"name\": \"Coder\",\n \"legs\": 4,\n \"tails\": 1,\n \"friends\": [\"Free Code Camp Campers\"]\n};\nmyDog.name = \"Happy Coder\";"
],
"tests": [
"assert(/happy coder/gi.test(myDog.name), 'message: Update <code>myDog</code>&apos;s <code>\"name\"</code> property to equal \"Happy Coder\".');",
"assert(/\"name\": \"Coder\"/.test(code), 'message: Do not edit the <code>myDog</code> definition');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
2015-07-10 00:56:30 +01:00
},
{
"id": "bg9999c9c99feedfaeb9bdef",
"title": "Add New Properties to a JavaScript Object",
"description": [
2015-12-31 22:04:22 -08:00
"You can add new properties to existing JavaScript objects the same way you would modify them.",
"Here's how we would add a <code>\"bark\"</code> property to <code>ourDog</code>:",
2015-12-21 09:26:28 -08:00
"<code>ourDog.bark = \"bow-wow\";</code> ",
"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>",
"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": [
2015-12-21 09:26:28 -08:00
"// Example",
"var ourDog = {",
" \"name\": \"Camper\",",
" \"legs\": 4,",
" \"tails\": 1,",
" \"friends\": [\"everything!\"]",
"};",
"",
"ourDog.bark = \"bow-wow\";",
"",
2015-12-21 09:26:28 -08:00
"// Setup",
"var myDog = {",
" \"name\": \"Happy Coder\",",
" \"legs\": 4,",
" \"tails\": 1,",
" \"friends\": [\"Free Code Camp Campers\"]",
"};",
"",
"// Only change code below this line.",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"(function(z){return z;})(myDog);"
],
2015-12-21 09:26:28 -08:00
"solutions": [
2015-12-28 21:15:50 -08:00
"var myDog = {\n \"name\": \"Happy Coder\",\n \"legs\": 4,\n \"tails\": 1,\n \"friends\": [\"Free Code Camp Campers\"]\n};\nmyDog.bark = \"Woof Woof\";"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myDog.bark !== undefined, 'message: Add the property <code>\"bark\"</code> to <code>myDog</code>.');",
"assert(!/bark[^\\n]:/.test(code), 'message: Do not add <code>\"bark\"</code> to the setup section');"
],
"type": "waypoint",
"challengeType": 1
},
{
"id": "bg9999c9c99fdddfaeb9bdef",
"title": "Delete Properties from a JavaScript Object",
"description": [
"We can also delete properties from objects like this:",
"<code>delete ourDog.bark;</code>",
"<h4>Instructions</h4>",
"Delete the <code>\"tails\"</code> property from <code>myDog</code>. You may use either dot or bracket notation."
],
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"// Example",
"var ourDog = {",
" \"name\": \"Camper\",",
" \"legs\": 4,",
" \"tails\": 1,",
2015-10-28 05:13:49 -07:00
" \"friends\": [\"everything!\"],",
" \"bark\": \"bow-wow\"",
"};",
"",
"delete ourDog.bark;",
"",
2015-12-21 09:26:28 -08:00
"// Setup",
"var myDog = {",
" \"name\": \"Happy Coder\",",
" \"legs\": 4,",
" \"tails\": 1,",
2015-10-28 05:13:49 -07:00
" \"friends\": [\"Free Code Camp Campers\"],",
" \"bark\": \"woof\"",
"};",
"",
"// Only change code below this line.",
"",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"(function(z){return z;})(myDog);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var ourDog = {\n \"name\": \"Camper\",\n \"legs\": 4,\n \"tails\": 1,\n \"friends\": [\"everything!\"],\n \"bark\": \"bow-wow\"\n};\n\nvar myDog = {\n \"name\": \"Happy Coder\",\n \"legs\": 4,\n \"tails\": 1,\n \"friends\": [\"Free Code Camp Campers\"],\n \"bark\": \"woof\"\n};\n\ndelete myDog.tails;"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(myDog.tails === undefined, 'message: Delete the property <code>\"tails\"</code> from <code>myDog</code>.');",
"assert(code.match(/\"tails\": 1/g).length > 1, 'message: Do not modify the <code>myDog</code> setup');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244ca",
"title": "Using Objects for Lookups",
"description": [
2015-12-31 22:10:38 -08:00
"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.",
2015-12-21 09:26:28 -08:00
"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>",
2015-12-31 22:04:22 -08:00
"Convert the switch statement into a lookup table called <code>lookup</code>. Use it to lookup <code>val</code> and return the associated string."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
2015-12-29 04:49:09 +05:30
"function phoneticLookup(val) {",
2015-12-21 09:26:28 -08:00
" var result = \"\";",
"",
" // Only change code below this line",
" switch(val) {",
2015-12-29 04:49:09 +05:30
" case \"alpha\": ",
" result = \"Adams\";",
2015-12-21 09:26:28 -08:00
" break;",
2015-12-29 04:49:09 +05:30
" case \"bravo\": ",
" result = \"Boston\";",
2015-12-21 09:26:28 -08:00
" break;",
2015-12-29 04:49:09 +05:30
" case \"charlie\": ",
" result = \"Chicago\";",
2015-12-21 09:26:28 -08:00
" break;",
2015-12-29 04:49:09 +05:30
" case \"delta\": ",
" result = \"Denver\";",
2015-12-21 09:26:28 -08:00
" break;",
2015-12-29 04:49:09 +05:30
" case \"echo\": ",
" result = \"Easy\";",
2015-12-21 09:26:28 -08:00
" break;",
2015-12-29 04:49:09 +05:30
" case \"foxtrot\": ",
" result = \"Frank\";",
2015-12-21 09:26:28 -08:00
" }",
"",
2015-12-21 09:26:28 -08:00
" // Only change code above this line",
" return result;",
"}",
"",
"// Change this value to test",
"phoneticLookup(\"charlie\");"
2015-12-21 09:26:28 -08:00
],
"solutions": [
2015-12-28 22:35:05 -08:00
"function phoneticLookup(val) {\n var result = \"\";\n\n var lookup = {\n alpha: \"Adams\",\n bravo: \"Boston\",\n charlie: \"Chicago\",\n delta: \"Denver\",\n echo: \"Easy\",\n foxtrot: \"Frank\"\n };\n\n result = lookup[val];\n\n return result;\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(phoneticLookup(\"alpha\") === 'Adams', 'message: <code>phoneticLookup(\"alpha\")</code> should equal <code>\"Adams\"</code>');",
"assert(phoneticLookup(\"bravo\") === 'Boston', 'message: <code>phoneticLookup(\"bravo\")</code> should equal <code>\"Boston\"</code>');",
"assert(phoneticLookup(\"charlie\") === 'Chicago', 'message: <code>phoneticLookup(\"charlie\")</code> should equal <code>\"Chicago\"</code>');",
"assert(phoneticLookup(\"delta\") === 'Denver', 'message: <code>phoneticLookup(\"delta\")</code> should equal <code>\"Denver\"</code>');",
"assert(phoneticLookup(\"echo\") === 'Easy', 'message: <code>phoneticLookup(\"echo\")</code> should equal <code>\"Easy\"</code>');",
"assert(phoneticLookup(\"foxtrot\") === 'Frank', 'message: <code>phoneticLookup(\"foxtrot\")</code> should equal <code>\"Frank\"</code>');",
"assert(typeof phoneticLookup(\"\") === 'undefined', 'message: <code>phoneticLookup(\"\")</code> should equal <code>undefined</code>');",
"assert(!/case|switch|if/g.test(code), 'message: You should not use <code>case</code>, <code>switch</code>, or <code>if</code> statements'); "
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
2015-12-23 18:50:43 -08:00
{
"id": "567af2437cbaa8c51670a16c",
"title": "Testing Objects for Properties",
"description": [
2015-12-31 22:04:22 -08:00
"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.",
2015-12-26 23:30:01 -08:00
"<strong>Example</strong>",
"<blockquote>var myObj = {<br> top: \"hat\",<br> bottom: \"pants\"<br>};<br>myObj.hasOwnProperty(\"top\"); // true<br>myObj.hasOwnProperty(\"middle\"); // false</blockquote>",
2015-12-23 18:50:43 -08:00
"<h4>Instructions</h4>",
2015-12-31 22:04:22 -08:00
"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>."
2015-12-23 18:50:43 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-23 18:50:43 -08:00
"challengeSeed": [
"// Setup",
"var myObj = {",
" gift: \"pony\",",
" pet: \"kitten\",",
" bed: \"sleigh\"",
"};",
"",
"function checkObj(checkProp) {",
" // Your Code Here",
2015-12-31 00:55:29 +05:30
" ",
2015-12-23 18:50:43 -08:00
" return \"Change Me!\";",
"}",
"",
"// Test your code by modifying these values",
"checkObj(\"gift\");"
],
"tail": [
""
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var myObj = {\n gift: \"pony\",\n pet: \"kitten\",\n bed: \"sleigh\"\n};\nfunction checkObj(checkProp) {\n if(myObj.hasOwnProperty(checkProp)) {\n return myObj[checkProp];\n } else {\n return \"Not Found\";\n }\n}"
2015-12-23 18:50:43 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(checkObj(\"gift\") === \"pony\", 'message: <code>checkObj(\"gift\")</code> should return <code>\"pony\"</code>.');",
"assert(checkObj(\"pet\") === \"kitten\", 'message: <code>checkObj(\"pet\")</code> should return <code>\"kitten\"</code>.');",
2015-12-29 15:43:21 -08:00
"assert(checkObj(\"house\") === \"Not Found\", 'message: <code>checkObj(\"house\")</code> should return <code>\"Not Found\"</code>.');"
],
2015-12-23 18:50:43 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-23 18:50:43 -08:00
},
2015-12-21 09:26:28 -08:00
{
"id": "56533eb9ac21ba0edf2244cb",
"title": "Introducing JavaScript Object Notation (JSON)",
"description": [
2015-12-31 00:55:29 +05:30
"JavaScript Object Notation or <code>JSON</code> uses the format of JavaScript Objects to store data. JSON is flexible because it allows for <dfn>Data Structures</dfn> with arbitrary combinations of <dfn>strings</dfn>, <dfn>numbers</dfn>, <dfn>booleans</dfn>, <dfn>arrays</dfn>, and <dfn>objects</dfn>.",
2015-12-21 09:26:28 -08:00
"Here is an example of a JSON object:",
2015-12-26 23:30:01 -08:00
"<blockquote>var ourMusic = [<br> {<br> \"artist\": \"Daft Punk\",<br> \"title\": \"Homework\",<br> \"release_year\": 1997,<br> \"formats\": [ <br> \"CD\", <br> \"Cassette\", <br> \"LP\" ],<br> \"gold\": true<br> }<br>];</blockquote>",
2015-12-31 00:55:29 +05:30
"This is an array of objects and the object has various pieces of <dfn>metadata</dfn> about an album. It also has a nested <code>formats</code> array. Additional album records could be added to the top level array.",
"<h4>Instructions</h4>",
2015-12-31 00:55:29 +05:30
"Add a new album to the <code>myMusic</code> JSON object. Add <code>artist</code> and <code>title</code> strings, <code>release_year</code> year, and a <code>formats</code> array of strings."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"var myMusic = [",
" {",
2015-12-28 22:35:05 -08:00
" \"artist\": \"Billy Joel\",",
2015-12-21 09:26:28 -08:00
" \"title\": \"Piano Man\",",
" \"release_year\": 1993,",
" \"formats\": [ ",
" \"CS\", ",
" \"8T\", ",
" \"LP\" ],",
" \"gold\": true",
" }",
" // Add record here",
"];",
""
],
"tail": [
"(function(x){ if (Array.isArray(x)) { return JSON.stringify(x); } return \"myMusic is not an array\"})(myMusic);"
],
"solutions": [
2015-12-28 22:35:05 -08:00
"var myMusic = [\n {\n \"artist\": \"Billy Joel\",\n \"title\": \"Piano Man\",\n \"release_year\": 1993,\n \"formats\": [ \n \"CS\", \n \"8T\", \n \"LP\" ],\n \"gold\": true\n }, \n {\n \"artist\": \"ABBA\",\n \"title\": \"Ring Ring\",\n \"release_year\": 1973,\n \"formats\": [ \n \"CS\", \n \"8T\", \n \"LP\",\n \"CD\",\n ]\n }\n];"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(Array.isArray(myMusic), 'message: <code>myMusic</code> should be an array');",
"assert(myMusic.length > 1, 'message: <code>myMusic</code> should have at least two elements');",
"assert(typeof myMusic[1] === 'object', 'message: <code>myMusic[1]</code> should be an object');",
"assert(Object.keys(myMusic[1]).length > 3, 'message: <code>myMusic[1]</code> should have at least 4 properties');",
"assert(myMusic[1].hasOwnProperty('artist') && typeof myMusic[1].artist === 'string', 'message: <code>myMusic[1]</code> should contain an <code>artist</code> property which is a string');",
"assert(myMusic[1].hasOwnProperty('title') && typeof myMusic[1].title === 'string', 'message: <code>myMusic[1]</code> should contain a <code>title</code> property which is a string');",
"assert(myMusic[1].hasOwnProperty('release_year') && typeof myMusic[1].release_year === 'number', 'message: <code>myMusic[1]</code> should contain a <code>release_year</code> property which is a number');",
"assert(myMusic[1].hasOwnProperty('formats') && Array.isArray(myMusic[1].formats), 'message: <code>myMusic[1]</code> should contain a <code>formats</code> property which is an array');",
"assert(myMusic[1].formats.every(function(item) { return (typeof item === \"string\")}) && myMusic[1].formats.length > 1, 'message: <code>formats</code> should be an array of strings with at least two elements');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244cc",
"title": "Accessing Nested Objects in JSON",
"description": [
"The properties and sub-properties of JSON objects can be accessed by chaining together the dot or bracket notation.",
"Here is a nested JSON 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>",
2015-12-31 22:04:22 -08:00
"Access the <code>myStorage</code> JSON object to retrieve the contents of the <code>glove box</code>. Only use object notation for properties with a space in their name."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
"var myStorage = {",
" \"car\": {",
" \"inside\": {",
" \"glove box\": \"maps\",",
" \"passenger seat\": \"crumbs\"",
" },",
" \"outside\": {",
" \"trunk\": \"jack\"",
" }",
" }",
"};",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
"",
"var gloveBoxContents = \"\"; // Change this line",
""
],
"tail": [
2015-12-28 22:35:05 -08:00
"(function(x) { ",
" if(typeof x != 'undefined') { ",
" return \"gloveBoxContents = \" + x;",
" }",
2015-12-28 23:43:12 -08:00
" return \"gloveBoxContents is undefined\";",
2015-12-28 22:35:05 -08:00
"})(gloveBoxContents);"
2015-12-21 09:26:28 -08:00
],
"solutions": [
2015-12-29 10:53:21 -08:00
"var myStorage = { \n \"car\":{ \n \"inside\":{ \n \"glove box\":\"maps\",\n \"passenger seat\":\"crumbs\"\n },\n \"outside\":{ \n \"trunk\":\"jack\"\n }\n }\n};\nvar gloveBoxContents = myStorage.car.inside[\"glove box\"];"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(gloveBoxContents === \"maps\", 'message: <code>gloveBoxContents</code> should equal \"maps\"');",
"assert(/=\\s*myStorage\\.car\\.inside\\[(\"|')glove box\\1\\]/g.test(code), 'message: Use dot and bracket notation to access <code>myStorage</code>');"
],
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244cd",
"title": "Accessing Nested Arrays in JSON",
"description": [
2015-12-31 22:04:22 -08:00
"As we have seen in earlier examples, JSON objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays.",
2015-12-21 09:26:28 -08:00
"Here is an example of how to access a nested array:",
2016-01-01 17:38:08 -05:00
"<blockquote>var ourPets = { <br> \"cats\": [<br> \"Meowzer\",<br> \"Fluffy\",<br> \"Kit-Cat\"<br> ],<br> \"dogs\": [<br> \"Spot\",<br> \"Bowser\",<br> \"Frankie\"<br> ]<br>};<br>ourPets.cats[1]; // \"Fluffy\"<br>ourPets.dogs[0]; // \"Spot\"</blockquote>",
"<h4>Instructions</h4>",
2015-12-29 10:53:21 -08:00
"Retrieve the second tree from the variable <code>myPlants</code> using object dot and array bracket notation."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Setup",
"var myPlants = [",
" { ",
" type: \"flowers\",",
" list: [",
" \"rose\",",
" \"tulip\",",
" \"dandelion\"",
" ]",
" },",
" {",
" type: \"trees\",",
" list: [",
" \"fir\",",
" \"pine\",",
" \"birch\"",
" ]",
" } ",
"];",
"",
"// Only change code below this line",
"",
"var secondTree = \"\"; // Change this line",
""
],
"tail": [
2015-12-29 10:53:21 -08:00
"(function(x) { ",
" if(typeof x != 'undefined') { ",
" return \"secondTree = \" + x;",
" }",
" return \"secondTree is undefined\";",
"})(secondTree);"
2015-12-23 18:50:43 -08:00
],
2015-12-21 09:26:28 -08:00
"solutions": [
2015-12-29 10:53:21 -08:00
"var myPlants = [\n { \n type: \"flowers\",\n list: [\n \"rose\",\n \"tulip\",\n \"dandelion\"\n ]\n },\n {\n type: \"trees\",\n list: [\n \"fir\",\n \"pine\",\n \"birch\"\n ]\n } \n];\n\n// Only change code below this line\n\nvar secondTree = myPlants[1].list[1];"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(secondTree === \"pine\", 'message: <code>secondTree</code> should equal \"pine\"');",
"assert(/=\\s*myPlants\\[1\\].list\\[1\\]/.test(code), 'message: Use dot and bracket notation to access <code>myPlants</code>');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244cf",
2015-12-24 15:31:51 -08:00
"title": "Record Collection",
2015-12-21 09:26:28 -08:00
"description": [
2015-12-31 22:04:22 -08:00
"You are given a JSON object representing (a small part of) your record collection. Each album is identified by a unique id number and has several properties. Not all albums have complete information.",
2015-12-24 15:31:51 -08:00
"Write a function which takes an <code>id</code>, a property (<code>prop</code>), and a <code>value</code>.",
"For the given <code>id</code> in <code>collection</code>:",
"If <code>value</code> is non-blank (<code>value !== \"\"</code>), then update or set the <code>value</code> for the <code>prop</code>.",
2015-12-24 16:32:29 -08:00
"If the <code>prop</code> is <code>\"tracks\"</code> and <code>value</code> is non-blank, push the <code>value</code> onto the end of the <code>tracks</code> array.",
2015-12-24 15:31:51 -08:00
"If <code>value</code> is blank, delete that <code>prop</code>.",
"Always return the entire collection object."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
2015-12-27 12:23:58 -08:00
"// Setup",
2015-12-24 15:31:51 -08:00
"var collection = {",
" 2548: {",
" album: \"Slippery When Wet\",",
" artist: \"Bon Jovi\",",
" tracks: [ ",
" \"Let It Rock\", ",
" \"You Give Love a Bad Name\" ",
" ]",
" },",
" 2468: {",
" album: \"1999\",",
" artist: \"Prince\",",
" tracks: [ ",
" \"1999\", ",
" \"Little Red Corvette\" ",
" ]",
" },",
" 1245: {",
" artist: \"Robert Palmer\",",
" tracks: [ ]",
" },",
" 5439: {",
" album: \"ABBA Gold\"",
" }",
"};",
2015-12-24 16:32:29 -08:00
"// Keep a copy of the collection for tests",
"var collectionCopy = JSON.parse(JSON.stringify(collection));",
2015-12-24 15:31:51 -08:00
"",
"// Only change code below this line",
"function update(id, prop, value) {",
"",
"",
2015-12-24 15:31:51 -08:00
" return collection;",
"}",
"",
2015-12-24 15:31:51 -08:00
"// Alter values below to test your code",
"update(5439, \"artist\", \"ABBA\");",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
2015-12-24 16:32:29 -08:00
"(function(x) { return \"collection = \\n\" + JSON.stringify(x, '\\n', 2); })(collection);"
2015-12-21 09:26:28 -08:00
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var collection = {\n 2548: {\n album: \"Slippery When Wet\",\n artist: \"Bon Jovi\",\n tracks: [ \n \"Let It Rock\", \n \"You Give Love a Bad Name\" \n ]\n },\n 2468: {\n album: \"1999\",\n artist: \"Prince\",\n tracks: [ \n \"1999\", \n \"Little Red Corvette\" \n ]\n },\n 1245: {\n artist: \"Robert Palmer\",\n tracks: [ ]\n },\n 5439: {\n album: \"ABBA Gold\"\n }\n};\n// Keep a copy of the collection for tests\nvar collectionCopy = JSON.parse(JSON.stringify(collection));\n\n// Only change code below this line\nfunction update(id, prop, value) {\n if(value !== \"\") {\n if(prop === \"tracks\") {\n collection[id][prop].push(value);\n } else {\n collection[id][prop] = value;\n }\n } else {\n delete collection[id][prop];\n }\n\n return collection;\n}"
2015-12-21 09:26:28 -08:00
],
2015-12-29 15:43:21 -08:00
"tests": [
"collection = collectionCopy; assert(update(5439, \"artist\", \"ABBA\")[5439][\"artist\"] === \"ABBA\", 'message: After <code>update(5439, \"artist\", \"ABBA\")</code>, <code>artist</code> should be <code>\"ABBA\"</code>');",
"update(2548, \"artist\", \"\"); assert(!collection[2548].hasOwnProperty(\"artist\"), 'message: After <code>update(2548, \"artist\", \"\")</code>, <code>artist</code> should not be set');",
"assert(update(1245, \"tracks\", \"Addicted to Love\")[1245][\"tracks\"].length === 1, 'message: After <code>update(1245, \"tracks\", \"Addicted to Love\")</code>, <code>tracks</code> should have a length of <code>1</code>');",
"update(2548, \"tracks\", \"\"); assert(!collection[2548].hasOwnProperty(\"tracks\"), 'message: After <code>update(2548, \"tracks\", \"\")</code>, <code>tracks</code> should not be set');"
],
2016-01-01 21:10:08 -08:00
"type": "checkpoint",
"challengeType": 1
},
{
"id": "cf1111c1c11feddfaeb5bdef",
2015-08-07 23:37:32 -07:00
"title": "Iterate with JavaScript For Loops",
"description": [
"You can run the same code multiple times by using a loop.",
"The most common type of JavaScript loop is called a \"<code>for loop</code>\" because it runs \"for\" a specific number of times.",
"For loops are declared with three optional expressions seperated by semicolons:",
"<code>for ([initialization]; [condition]; [final-expression])</code>",
"The <code>initialization</code> statement is executed one time only before the loop starts. It is typically used to define and setup your loop variable.",
2015-12-31 22:04:22 -08:00
"The <code>condition</code> statement is evaluated at the beginning of every loop iteration and will continue as long as it evalutes to <code>true</code>. When <code>condition</code> is <code>false</code> at the start of the iteration, the loop will stop executing. This means if <code>condition</code> starts as <code>false</code>, your loop will never execute.",
"The <code>final-expression</code> is executed at the end of each loop iteration, prior to the next <code>condition</code> check and is usually used to increment or decrement your loop counter.",
2015-12-31 22:04:22 -08:00
"In the following example we initialize with <code>i = 0</code> and iterate while our condition <code>i < 5</code> is true. We'll increment <code>i</code> by <code>1</code> in each loop iteration with <code>i++</code> as our <code>final-expression</code>.",
2015-12-26 23:30:01 -08:00
"<blockquote>var ourArray = [];<br>for (var i = 0; i < 5; i++) {<br> ourArray.push(i);<br>}</blockquote>",
"<code>ourArray</code> will now contain <code>[0,1,2,3,4]</code>.",
"<h4>Instructions</h4>",
"Use a <code>for</code> loop to work to push the values 1 through 5 onto <code>myArray</code>."
2015-07-10 00:56:30 +01:00
],
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"// Example",
"var ourArray = [];",
2015-10-28 05:13:49 -07:00
"",
"for (var i = 0; i < 5; i++) {",
2015-08-21 22:01:03 +01:00
" ourArray.push(i);",
"}",
2015-10-28 05:13:49 -07:00
"",
2015-12-21 09:26:28 -08:00
"// Setup",
2015-07-10 00:56:30 +01:00
"var myArray = [];",
"",
"// Only change code below this line.",
"",
2015-07-10 00:56:30 +01:00
""
],
2015-12-21 09:26:28 -08:00
"tail": [
"if (typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
],
2015-12-29 15:43:21 -08:00
"solutions": [
"var ourArray = [];\nfor (var i = 0; i < 5; i++) {\n ourArray.push(i);\n}\nvar myArray = [];\nfor (var i = 1; i < 6; i++) {\n myArray.push(i);\n}"
],
"tests": [
"assert(code.match(/for\\s*\\(/g).length > 1, 'message: You should be using a <code>for</code> loop for this.');",
"assert.deepEqual(myArray, [1,2,3,4,5], 'message: <code>myArray</code> should equal <code>[1,2,3,4,5]</code>.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
2015-07-10 00:56:30 +01:00
},
{
"id": "56104e9e514f539506016a5c",
"title": "Iterate Odd Numbers With a For Loop",
"description": [
"For loops don't have to iterate one at a time. By changing our <code>final-expression</code>, we can count by even numbers.",
2015-12-31 22:04:22 -08:00
"We'll start at <code>i = 0</code> and loop while <code>i < 10</code>. We'll increment <code>i</code> by 2 each loop with <code>i += 2</code>.",
2015-12-26 23:30:01 -08:00
"<blockquote>var ourArray = [];<br>for (var i = 0; i < 10; i += 2) {<br> ourArray.push(i);<br>}</blockquote>",
"<code>ourArray</code> will now contain <code>[0,2,4,6,8]</code>.",
2015-12-21 09:26:28 -08:00
"Let's change our <code>initialization</code> so we can count by odd numbers.",
"<h4>Instructions</h4>",
"Push the odd numbers from 1 through 9 to <code>myArray</code> using a <code>for</code> loop."
],
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"// Example",
"var ourArray = [];",
2015-10-28 05:13:49 -07:00
"",
"for (var i = 0; i < 10; i += 2) {",
" ourArray.push(i);",
"}",
2015-10-28 05:13:49 -07:00
"",
2015-12-21 09:26:28 -08:00
"// Setup",
"var myArray = [];",
"",
"// Only change code below this line.",
"",
""
],
2015-12-21 09:26:28 -08:00
"tail": [
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
],
2015-12-29 15:43:21 -08:00
"solutions": [
"var ourArray = [];\nfor (var i = 0; i < 10; i += 2) {\n ourArray.push(i);\n}\nvar myArray = [];\nfor (var i = 1; i < 10; i += 2) {\n myArray.push(i);\n}"
],
"tests": [
"assert(code.match(/for\\s*\\(/g).length > 1, 'message: You should be using a <code>for</code> loop for this.');",
"assert.deepEqual(myArray, [1,3,5,7,9], 'message: <code>myArray</code> should equal <code>[1,3,5,7,9]</code>.');"
],
"type": "waypoint",
"challengeType": 1
},
{
"id": "56105e7b514f539506016a5e",
"title": "Count Backwards With a For Loop",
"description": [
"A for loop can also count backwards, so long as we can define the right conditions.",
"In order to count backwards by twos, we'll need to change our <code>initialization</code>, <code>condition</code>, and <code>final-expression</code>.",
2015-12-31 22:04:22 -08:00
"We'll start at <code>i = 10</code> and loop while <code>i > 0</code>. We'll decrement <code>i</code> by 2 each loop with <code>i -= 2</code>.",
2015-12-26 23:30:01 -08:00
"<blockquote>var ourArray = [];<br>for (var i=10; i > 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>",
"Push the odd numbers from 9 through 1 to <code>myArray</code> using a <code>for</code> loop."
],
"challengeSeed": [
2015-12-21 09:26:28 -08:00
"// Example",
"var ourArray = [];",
2015-10-28 05:13:49 -07:00
"",
"for (var i = 10; i > 0; i -= 2) {",
" ourArray.push(i);",
"}",
2015-10-28 05:13:49 -07:00
"",
2015-12-21 09:26:28 -08:00
"// Setup",
"var myArray = [];",
"",
"// Only change code below this line.",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
],
2015-12-29 15:43:21 -08:00
"solutions": [
"var ourArray = [];\nfor (var i = 10; i > 0; i -= 2) {\n ourArray.push(i);\n}\nvar myArray = [];\nfor (var i = 9; i > 0; i -= 2) {\n myArray.push(i);\n}"
],
"tests": [
"assert(code.match(/for\\s*\\(/g).length > 1, 'message: You should be using a <code>for</code> loop for this.');",
"assert.deepEqual(myArray, [9,7,5,3,1], 'message: <code>myArray</code> should equal <code>[9,7,5,3,1]</code>.');"
],
2015-12-21 09:26:28 -08:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "5675e877dbd60be8ad28edc6",
"title": "Iterate Through an Array with a For Loop",
"description": [
2015-12-31 22:04:22 -08:00
"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:",
2015-12-26 23:30:01 -08:00
"<blockquote>var arr = [10,9,8,7,6];<br>for (var i=0; i < arr.length; i++) {<br> console.log(arr[i]);<br>}</blockquote>",
2015-12-31 22:04:22 -08:00
"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>",
"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>."
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
"// Example",
"var ourArr = [ 9, 10, 11, 12];",
"var ourTotal = 0;",
"",
"for (var i = 0; i < ourArr.length; i++) {",
" ourTotal += ourArr[i];",
"}",
"",
2015-12-21 09:26:28 -08:00
"// Setup",
"var myArr = [ 2, 3, 4, 5, 6];",
"",
2015-12-21 09:26:28 -08:00
"// Only change code below this line",
2015-10-28 05:13:49 -07:00
"",
""
],
"tail": [
2015-12-21 09:26:28 -08:00
"(function(t) { if(typeof t !== 'undefined') { return \"Total = \" + t; } else { return \"Total is undefined\";}})(total);"
],
"solutions": [
2015-12-28 21:15:50 -08:00
"var myArr = [ 2, 3, 4, 5, 6];\nvar total = 0;\n\nfor (var i = 0; i < myArr.length; i++) {\n total += myArr[i];\n}"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(total !== 'undefined', 'message: <code>total</code> should be defined');",
"assert(total === 20, 'message: <code>total</code> should equal 20');",
"assert(!/20/.test(code), 'message: Do not set <code>total</code> to 20 directly');"
],
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
{
"id": "56533eb9ac21ba0edf2244e1",
"title": "Nesting For Loops",
"description": [
2015-12-31 22:04:22 -08:00
"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:",
2015-12-31 00:55:29 +05:30
"<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>",
2015-12-31 00:55:29 +05:30
"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>"
2015-12-21 09:26:28 -08:00
],
2015-12-27 13:49:22 -08:00
"releasedOn": "January 1, 2016",
2015-12-21 09:26:28 -08:00
"challengeSeed": [
2015-12-22 00:59:26 -08:00
"function multiplyAll(arr) {",
" var product = 1;",
" // Only change code below this line",
2015-12-31 00:55:29 +05:30
" ",
2015-12-22 00:59:26 -08:00
" // Only change code above this line",
" return product;",
"}",
2015-12-21 09:26:28 -08:00
"",
2015-12-22 00:59:26 -08:00
"// Modify values below to test your code",
"multiplyAll([[1,2],[3,4],[5,6,7]]);",
2015-12-21 09:26:28 -08:00
""
],
"tail": [
""
],
"solutions": [
2015-12-29 15:43:21 -08:00
"function multiplyAll(arr) {\n var product = 1;\n for (var i = 0; i < arr.length; i++) {\n for (var j = 0; j < arr[i].length; j++) {\n product *= arr[i][j];\n }\n }\n return product;\n}\n\nmultiplyAll([[1,2],[3,4],[5,6,7]]);"
],
"tests": [
"assert(multiplyAll([[1],[2],[3]]) === 6, 'message: <code>multiplyAll([[1],[2],[3]]);</code> should return <code>6</code>');",
"assert(multiplyAll([[1,2],[3,4],[5,6,7]]) === 5040, 'message: <code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> should return <code>5040</code>');",
"assert(multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]]) === 54, 'message: <code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]]);)</code> should return <code>54</code>');"
2015-12-21 09:26:28 -08:00
],
"type": "waypoint",
"challengeType": 1
},
2015-07-10 00:56:30 +01:00
{
"id": "cf1111c1c11feddfaeb1bdef",
2015-08-07 23:37:32 -07:00
"title": "Iterate with JavaScript While Loops",
"description": [
"You can run the same code multiple times by using a loop.",
"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.",
2015-12-26 23:30:01 -08:00
"<blockquote>var ourArray = [];<br>var i = 0;<br>while(i < 5) {<br> ourArray.push(i);<br> i++;<br>}</blockquote>",
2015-10-28 05:13:49 -07:00
"Let's try getting a while loop to work by pushing values to an array.",
"<h4>Instructions</h4>",
"Push the numbers 0 through 4 to <code>myArray</code> using a <code>while</code> loop."
2015-07-10 00:56:30 +01:00
],
"challengeSeed": [
2015-12-22 00:59:26 -08:00
"// Setup",
2015-07-10 00:56:30 +01:00
"var myArray = [];",
2015-10-28 05:13:49 -07:00
"",
"// Only change code below this line.",
"",
2015-07-10 00:56:30 +01:00
""
],
2015-12-22 00:59:26 -08:00
"tail": [
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
],
2015-12-29 15:43:21 -08:00
"solutions": [
"var myArray = [];\nvar i = 0;\nwhile(i < 5) {\n myArray.push(i);\n i++;\n}"
],
"tests": [
"assert(code.match(/while/g), 'message: You should be using a <code>while</code> loop for this.');",
"assert.deepEqual(myArray, [0,1,2,3,4], 'message: <code>myArray</code> should equal <code>[0,1,2,3,4]</code>.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
2015-12-21 09:26:28 -08:00
},
2015-07-10 00:56:30 +01:00
{
"id": "cf1111c1c11feddfaeb9bdef",
2015-08-07 23:37:32 -07:00
"title": "Generate Random Fractions with JavaScript",
"description": [
2015-08-18 00:22:33 -04:00
"Random numbers are useful for creating random behavior.",
2015-12-31 22:04:22 -08:00
"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>",
2015-12-29 15:43:21 -08:00
"<strong>Note</strong>",
"Like <a href=\"waypoint-storing-values-with-the-equal-operator\">Storing Values with the Equal Operator</a>, all function calls will be resolved before the <code>return</code> executes, so we can simply <code>return</code> the value of the <code>Math.random()</code> function.",
"<h4>Instructions</h4>",
"Change <code>myFunction</code> to return a random number instead of returning <code>0</code>."
],
"challengeSeed": [
"function myFunction() {",
2015-10-28 05:13:49 -07:00
"",
2015-08-15 13:57:44 -07:00
" // Only change code below this line.",
"",
2015-08-27 22:18:09 +02:00
" return 0;",
2015-08-15 13:57:44 -07:00
"",
2015-09-13 23:26:03 -07:00
" // Only change code above this line.",
2015-12-26 23:30:01 -08:00
"}"
],
"tail": [
2015-08-27 22:18:09 +02:00
"(function(){return myFunction();})();"
],
2015-12-29 15:43:21 -08:00
"solutions": [
"function myFunction() {\n return Math.random();\n}"
],
"tests": [
"assert(typeof(myFunction()) === \"number\", 'message: <code>myFunction</code> should return a random number.');",
"assert((myFunction()+''). match(/\\./g), 'message: The number returned by <code>myFunction</code> should be a decimal.');",
"assert(code.match(/Math\\.random/g).length >= 0, 'message: You should be using <code>Math.random</code> to generate the random decimal number.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
"id": "cf1111c1c12feddfaeb1bdef",
2015-08-07 23:37:32 -07:00
"title": "Generate Random Whole Numbers with JavaScript",
"description": [
2015-12-31 22:04:22 -08:00
"It's great that we can generate random decimal numbers, but it's even more useful if we use it to generate random whole numbers.<ol><li>Use <code>Math.random()</code> to generate a random decimal.</li><li>Multiply that random decimal by <code>20</code>.</li><li>Use another function, <code>Math.floor()</code> to round the number down to its nearest whole number.</li></ol>Remember that <code>Math.random()</code> can never quite return a <code>1</code> and, because we're rounding down, it's impossible to actually get <code>20</code>. This technique will gives us a whole number between <code>0</code> and <code>19</code>.",
"Putting everything together, this is what our code looks like:",
"<code>Math.floor(Math.random() * 20);</code>",
"See how <code>Math.floor</code> takes <code>(Math.random() * 20)</code> as its argument? That's right - you can pass a function to another function as an argument.",
2015-12-29 15:43:21 -08:00
"<h4>Instructions</h4>",
"Use this technique to generate and return a random whole number between <code>0</code> and <code>9</code>."
2015-07-10 00:56:30 +01:00
],
"challengeSeed": [
"var randomNumberBetween0and19 = Math.floor(Math.random() * 20);",
"",
"function myFunction() {",
2015-08-15 13:57:44 -07:00
"",
" // Only change code below this line.",
"",
2015-08-27 22:18:09 +02:00
" return Math.random();",
"}"
],
"tail": [
2015-08-27 22:18:09 +02:00
"(function(){return myFunction();})();"
],
2015-12-29 15:43:21 -08:00
"solutions": [
"var randomNumberBetween0and19 = Math.floor(Math.random() * 20);\n\nfunction myFunction() {\n return Math.floor(Math.random() * 10);\n}"
],
"tests": [
"assert(typeof(myFunction()) === \"number\" && (function(){var r = myFunction();return Math.floor(r) === r;})(), 'message: The result of <code>myFunction</code> should be a whole number.');",
"assert(code.match(/Math.random/g).length > 1, 'message: You should be using <code>Math.random</code> to generate a random number.');",
"assert(code.match(/\\(\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\*\\s*?10\\s*?\\)/g) || code.match(/\\(\\s*?10\\s*?\\*\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\)/g), 'message: You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that is between zero and nine.');",
"assert(code.match(/Math.floor/g).length > 1, 'message: You should use <code>Math.floor</code> to remove the decimal part of the number.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
"id": "cf1111c1c12feddfaeb2bdef",
2015-08-07 23:37:32 -07:00
"title": "Generate Random Whole Numbers within a Range",
"description": [
"Instead of generating a random number between zero and a given number like we did before, we can generate a random number that falls within a range of two specific numbers.",
"To do this, we'll define a minimum number <code>min</code> and a maximum number <code>max</code>.",
2015-10-28 05:13:49 -07:00
"Here's the formula we'll use. Take a moment to read it and try to understand what this code is doing:",
2015-09-13 23:26:03 -07:00
"<code>Math.floor(Math.random() * (max - min + 1)) + min</code>",
2015-12-29 15:43:21 -08:00
"<h4>Instructions</h4>",
"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": [
2015-12-29 15:43:21 -08:00
"// Example",
"function ourFunction(ourMin, ourMax) {",
"",
" return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;",
"}",
"",
2015-12-29 15:43:21 -08:00
"ourFunction(1, 9);",
"",
2015-12-29 15:43:21 -08:00
"// Only change code below this line.",
"",
2015-12-29 15:43:21 -08:00
"function randomRange(myMin, myMax) {",
"",
2015-12-29 15:43:21 -08:00
" return 0; // Change this line",
"",
2015-10-28 05:13:49 -07:00
"}",
"",
2015-12-29 15:43:21 -08:00
"// Change these values to test your function",
"var myRandom = randomRange(5, 15);"
],
2015-12-26 23:30:01 -08:00
"tail": [
2015-12-29 15:43:21 -08:00
"var calcMin = 100;",
"var calcMax = -100;",
"for(var i = 0; i < 100; i++) {",
" var result = randomRange(5,15);",
" calcMin = Math.min(calcMin, result);",
" calcMax = Math.max(calcMax, result);",
"}",
"(function(){",
" if(typeof myRandom === 'number') {",
" return \"myRandom = \" + myRandom;",
" } else {",
" return \"myRandom undefined\";",
" }",
"})();"
],
2015-12-29 15:43:21 -08:00
"solutions": [
"function randomRange(myMin, myMax) {\n return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin;\n}"
],
2015-12-29 15:43:21 -08:00
"tests": [
"assert(calcMin === 5, 'message: The random number generated by <code>myFunction</code> should be greater than or equal to your minimum number, <code>myMin</code>.');",
"assert(calcMax === 15, 'message: The random number generated by <code>myFunction</code> should be less than or equal to your maximum number, <code>myMax</code>.');",
"assert(randomRange(0,1) % 1 === 0 , 'message: The random number generated by <code>myFunction</code> should be an integer, not a decimal.');",
"assert((function(){if(code.match(/myMax/g).length > 1 && code.match(/myMin/g).length > 2 && code.match(/Math.floor/g) && code.match(/Math.random/g)){return true;}else{return false;}})(), 'message: <code>myFunction()</code> should use use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
"id": "cf1111c1c12feddfaeb6bdef",
2015-08-07 23:37:32 -07:00
"title": "Sift through Text with Regular Expressions",
"description": [
2015-08-16 20:14:12 -04:00
"<code>Regular expressions</code> are used to find certain words or patterns inside of <code>strings</code>.",
"For example, if we wanted to find the word <code>the</code> in the string <code>The dog chased the cat</code>, we could use the following <code>regular expression</code>: <code>/the/gi</code>",
"Let's break this down a bit:",
2015-12-29 15:43:21 -08:00
"<code>/</code> is the start of the regular expression.",
"<code>the</code> is the pattern we want to match.",
2015-12-29 15:43:21 -08:00
"<code>/</code> is the end of the regular expression.",
"<code>g</code> means <code>global</code>, which causes the pattern to return all matches in the string, not just the first one.",
2015-08-15 15:56:56 -07:00
"<code>i</code> means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.",
2015-12-29 15:43:21 -08:00
"<h4>Instructions</h4>",
"Select all the occurrences of the word <code>and</code> in <code>testString</code>.",
"You can do this by replacing the <code>.</code> part of the regular expression with the word <code>and</code>."
],
2015-12-26 23:30:01 -08:00
"head": [
""
],
"challengeSeed": [
2015-12-26 23:30:01 -08:00
"// Setup",
2015-12-29 15:43:21 -08:00
"var testString = \"Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.\";",
"",
2015-12-29 15:43:21 -08:00
"// Example",
"var expressionToGetSoftware = /software/gi;",
"var softwareCount = testString.match(expressionToGetSoftware).length;",
" ",
"",
"// Only change code below this line.",
"",
2015-12-29 15:43:21 -08:00
"var expression = /./gi; // Change this Line",
"",
2015-12-29 15:43:21 -08:00
"// Only change code above this line",
"",
2015-12-29 15:43:21 -08:00
"// This code counts the matches of expression in testString",
"var andCount = testString.match(expression).length;",
""
],
2015-12-26 23:30:01 -08:00
"tail": [
2015-12-29 15:43:21 -08:00
"(function(){return andCount;})();"
],
"solutions": [
"var testString = \"Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.\";\nvar expression = /and/gi; // Change this Line\nvar andCount = testString.match(expression).length;"
],
"tests": [
"assert(andCount==2, 'message: Your <code>regular expression</code> should find two occurrences of the word <code>and</code>.');",
"assert(code.match(/\\/and\\/gi/), 'message: Use <code>regular expressions</code> to find the word <code>and</code> in <code>testString</code>.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
"id": "cf1111c1c12feddfaeb7bdef",
2015-08-07 23:37:32 -07:00
"title": "Find Numbers with Regular Expressions",
"description": [
"We can use special selectors in <dfn>Regular Expressions</dfn> to select a particular type of value.",
"One such selector is the digit selector <code>\\d</code> which is used to retrieve one digit (e.g. numbers 0 to 9) in a string.",
"In JavaScript, it is used like this: <code>/\\d/g</code>.",
"Appending a plus sign (<code>+</code>) after the selector, e.g. <code>/\\d+/g</code>, allows this regular expression to match one or more digits.",
"The trailing <code>g</code> is short for 'global', which allows this regular expression to find all matches rather than stop at the first match.",
2015-12-29 15:43:21 -08:00
"<h4>Instructions</h4>",
"Use the <code>\\d</code> selector to select the number of numbers in the string, allowing for the possibility of one or more digit."
],
2015-12-26 23:30:01 -08:00
"head": [
2015-12-29 15:43:21 -08:00
""
],
"challengeSeed": [
2015-12-29 15:43:21 -08:00
"// Setup",
"var testString = \"There are 3 cats but 4 dogs.\";",
"",
2015-12-29 15:43:21 -08:00
"// Only change code below this line.",
"",
2015-12-29 15:43:21 -08:00
"var expression = /.+/g; // Change this line",
"",
2015-12-29 15:43:21 -08:00
"// Only change code above this line",
"",
2015-12-29 15:43:21 -08:00
"// This code counts the matches of expression in testString",
"var digitCount = testString.match(expression).length;"
2015-12-26 23:30:01 -08:00
],
"tail": [
2015-12-29 15:43:21 -08:00
"(function(){return digitCount;})();"
],
"solutions": [
"var testString = \"There are 3 cats but 4 dogs.\";\nvar expression = /\\d+/g; // Change this line\nvar digitCount = testString.match(expression).length;"
],
"tests": [
"assert(digitCount === 2, 'message: Your regular expression should find two numbers in <code>testString</code>.');",
"assert(code.match(/\\/\\\\d\\+\\//g), 'message: Use the <code>/\\d+/g</code> regular expression to find the numbers in <code>testString</code>.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
},
{
"id": "cf1111c1c12feddfaeb8bdef",
"title": "Find Whitespace with Regular Expressions",
"description": [
"We can also use regular expression selectors like <code>\\s</code> to find whitespace in a string.",
"The whitespace characters are <code>\" \"</code> (space), <code>\\r</code> (the carriage return), <code>\\n</code> (newline), <code>\\t</code> (tab), and <code>\\f</code> (the form feed).",
"The whitespace regular expression looks like this:",
2015-08-16 04:05:15 -07:00
"<code>/\\s+/g</code>",
2015-12-29 15:43:21 -08:00
"<h4>Instructions</h4>",
"Use <code>\\s</code> to select all the whitespace characters in the sentence string."
2015-07-10 00:56:30 +01:00
],
2015-12-26 23:30:01 -08:00
"head": [
2015-12-29 15:43:21 -08:00
""
],
"challengeSeed": [
2015-12-29 15:43:21 -08:00
"// Setup",
"var testString = \"How many spaces are there in this sentence?\";",
"",
2015-12-29 15:43:21 -08:00
"// Only change code below this line.",
"",
2015-12-29 15:43:21 -08:00
"var expression = /.+/g; // Change this line",
"",
2015-12-29 15:43:21 -08:00
"// Only change code above this line",
"",
2015-12-29 15:43:21 -08:00
"// This code counts the matches of expression in testString",
"var spaceCount = testString.match(expression).length;"
2015-12-26 23:30:01 -08:00
],
"tail": [
2015-12-29 15:43:21 -08:00
"(function(){return spaceCount;})();"
],
"solutions": [
"var testString = \"How many spaces are there in this sentence?\";\nvar expression = /\\s+/g; // Change this line\nvar spaceCount = testString.match(expression).length;"
],
"tests": [
"assert(spaceCount === 7, 'message: Your regular expression should find seven spaces in <code>testString</code>.');",
"assert(code.match(/\\/\\\\s\\+\\//g), 'message: Use the <code>/\\s+/g</code> regular expression to find the spaces in <code>testString</code>.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
2015-07-30 20:58:02 +01:00
},
{
"id": "cf1111c1c13feddfaeb3bdef",
2015-08-07 23:37:32 -07:00
"title": "Invert Regular Expression Matches with JavaScript",
"description": [
"You can invert any match by using the uppercase version of the regular expression selector.",
"For example, <code>\\s</code> will match any whitespace, and <code>\\S</code> will match anything that isn't whitespace.",
2015-12-29 15:43:21 -08:00
"<h4>Instructions</h4>",
"Use <code>/\\S/g</code> to count the number of non-whitespace characters in <code>testString</code>."
],
2015-12-26 23:30:01 -08:00
"head": [
2015-12-29 15:43:21 -08:00
""
],
"challengeSeed": [
2015-12-29 15:43:21 -08:00
"// Setup",
"var testString = \"How many non-space characters are there in this sentence?\";",
"",
2015-12-29 15:43:21 -08:00
"// Only change code below this line.",
"",
2015-12-29 15:43:21 -08:00
"var expression = /.+/g; // Change this line",
"",
2015-12-29 15:43:21 -08:00
"// Only change code above this line",
"",
2015-12-29 15:43:21 -08:00
"// This code counts the matches of expression in testString",
"var nonSpaceCount = testString.match(expression).length;"
2015-12-26 23:30:01 -08:00
],
"tail": [
2015-12-29 15:43:21 -08:00
"(function(){return nonSpaceCount;})();"
],
"solutions": [
"var testString = \"How many non-space characters are there in this sentence?\";\nvar expression = /\\S/g; \nvar nonSpaceCount = testString.match(expression).length;"
],
"tests": [
"assert(nonSpaceCount === 49, 'message: Your regular expression should find forty nine non-space characters in the <code>testString</code>.');",
"assert(code.match(/\\/\\\\S\\/g/g), 'message: Use the <code>/\\S/g</code> regular expression to find non-space characters in <code>testString</code>.');"
],
2015-08-07 23:37:32 -07:00
"type": "waypoint",
"challengeType": 1
2015-08-15 13:57:44 -07:00
},
{
"id": "cf1111c1c12feddfaeb9bdef",
2015-08-15 13:57:44 -07:00
"title": "Create a JavaScript Slot Machine",
"description": [
2015-08-15 13:57:44 -07:00
"We are now going to try and combine some of the stuff we've just learned and create the logic for a slot machine game.",
2015-08-16 04:05:15 -07:00
"For this we will need to generate three random numbers between <code>1</code> and <code>3</code> to represent the possible values of each individual slot.",
2015-08-15 13:57:44 -07:00
"Store the three random numbers in <code>slotOne</code>, <code>slotTwo</code> and <code>slotThree</code>.",
"Generate the random numbers by using the system we used earlier (an explanation of the formula can be found <a href=\"https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Waypoint-Generate-Random-Whole-Numbers-within-a-Range#explanation\">here</a>):",
2015-08-16 04:05:15 -07:00
"<code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code>"
2015-08-15 13:57:44 -07:00
],
"challengeSeed": [
2015-08-15 13:57:44 -07:00
"fccss",
" function runSlots() {",
2015-08-15 13:57:44 -07:00
" var slotOne;",
" var slotTwo;",
" var slotThree;",
" ",
2015-08-16 04:05:15 -07:00
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
2015-08-15 13:57:44 -07:00
" ",
" // Only change code below this line.",
" ",
" ",
" ",
" // Only change code above this line.",
" ",
" ",
" if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined) {",
2015-08-15 13:57:44 -07:00
" $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
" }",
2015-11-09 11:56:14 +05:30
" ",
" ",
" $(\".logger\").append(\" Not A Win\")",
2015-08-27 22:18:09 +02:00
" return [slotOne, slotTwo, slotThree];",
2015-08-15 13:57:44 -07:00
" }",
"",
" $(document).ready(function() {",
" $(\".go\").click(function() {",
2015-08-15 13:57:44 -07:00
" runSlots();",
" });",
" });",
"fcces",
" ",
"<div>",
" <div class = \"container inset\">",
" <div class = \"header inset\">",
" <img src=\"https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz\" alt=\"learn to code javascript at Free Code Camp logo\" class=\"img-responsive nav-logo\">",
" <h2>FCC Slot Machine</h2>",
" </div>",
" <div class = \"slots inset\">",
" <div class = \"slot inset\">",
" ",
" </div>",
" <div class = \"slot inset\">",
" ",
" </div>",
" <div class = \"slot inset\">",
" ",
" </div>",
" </div>",
" <br/>",
" <div class = \"outset\">",
" <button class = \"go inset\">",
" Go",
" </button>",
" </div>",
" <br/>",
" <div class = \"foot inset\">",
" <span class = \"logger\"></span>",
" </div>",
" </div>",
"</div>",
"",
"<style>",
" .container {",
" background-color: #4a2b0f;",
" height: 400px;",
" width: 260px;",
" margin: 50px auto;",
" border-radius: 4px;",
" }",
" .header {",
" border: 2px solid #fff;",
" border-radius: 4px;",
" height: 55px;",
" margin: 14px auto;",
" background-color: #457f86",
" }",
" .header h2 {",
" height: 30px;",
" margin: auto;",
" }",
" .header h2 {",
" font-size: 14px;",
" margin: 0 0;",
" padding: 0;",
" color: #fff;",
" text-align: center;",
" }",
" .slots{",
" display: flex;",
" background-color: #457f86;",
" border-radius: 6px;",
" border: 2px solid #fff;",
" }",
" .slot{",
" flex: 1 0 auto;",
" background: white;",
" height: 75px;",
" margin: 8px;",
" border: 2px solid #215f1e;",
" border-radius: 4px;",
" }",
" .go {",
" width: 100%;",
" color: #fff;",
" background-color: #457f86;",
" border: 2px solid #fff;",
" border-radius: 2px;",
" box-sizing: none;",
" outline: none!important;",
" }",
" .foot {",
" height: 150px;",
" background-color: 457f86;",
" border: 2px solid #fff;",
" }",
" ",
" .logger {",
" color: white;",
" margin: 10px;",
" }",
" ",
" .outset {",
" -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
" -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
" box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
" }",
" ",
" .inset {",
" -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
" -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
" box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
" }",
"</style>"
],
2015-12-29 15:43:21 -08:00
"solutions": [
""
],
"tests": [
"assert(typeof(runSlots($(\".slot\"))[0]) === \"number\" && runSlots($(\".slot\"))[0] > 0 && runSlots($(\".slot\"))[0] < 4, '<code>slotOne</code> should be a random number.')",
"assert(typeof(runSlots($(\".slot\"))[1]) === \"number\" && runSlots($(\".slot\"))[1] > 0 && runSlots($(\".slot\"))[1] < 4, '<code>slotTwo</code> should be a random number.')",
"assert(typeof(runSlots($(\".slot\"))[2]) === \"number\" && runSlots($(\".slot\"))[2] > 0 && runSlots($(\".slot\"))[2] < 4, '<code>slotThree</code> should be a random number.')",
"assert((function(){if(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1/gi) !== null){return editor.match(/slot.*?=.*?\\(.*?\\).*?/gi).length >= 3;}else{return false;}})(), 'You should have used <code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code> three times to generate your random numbers.')"
],
2015-08-15 13:57:44 -07:00
"type": "waypoint",
"challengeType": 0,
2015-12-29 15:43:21 -08:00
"isBeta": "true"
2015-08-15 13:57:44 -07:00
},
{
"id": "cf1111c1c13feddfaeb1bdef",
2015-08-15 13:57:44 -07:00
"title": "Add your JavaScript Slot Machine Slots",
"description": [
2015-08-16 04:05:15 -07:00
"Now that our slots will each generate random numbers, we need to check whether they've all returned the same number.",
2015-11-09 11:56:14 +05:30
"If they have, we should notify our user that they've won and we should return <code>null</code>.",
"<code>null</code> is a JavaScript data structure that means nothing.",
"The user wins when all the three numbers match. Let's create an <code>if statement</code> with multiple conditions in order to check whether all numbers are equal.",
"<code>if(slotOne === slotTwo && slotTwo === slotThree){</code>",
"<code>&nbsp;&nbsp;return null;</code>",
2015-11-09 11:56:14 +05:30
"<code>}</code>",
"Also, we need to show the user that he has won the game when he gets the same number in all the slots.",
2015-11-13 10:19:39 +05:30
"If all three numbers match, we should also set the text <code>\"It's A Win\"</code> to the element with class <code>logger</code>."
2015-08-15 13:57:44 -07:00
],
"challengeSeed": [
2015-08-15 13:57:44 -07:00
"fccss",
" function runSlots() {",
2015-08-15 13:57:44 -07:00
" var slotOne;",
" var slotTwo;",
" var slotThree;",
" ",
2015-08-16 04:05:15 -07:00
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
2015-08-15 13:57:44 -07:00
" ",
2015-08-16 04:05:15 -07:00
" slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
" slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
" slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
2015-08-15 13:57:44 -07:00
" ",
" ",
" // Only change code below this line.",
" ",
" ",
" ",
" // Only change code above this line.",
" ",
2015-11-09 11:56:14 +05:30
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
" $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
2015-08-15 13:57:44 -07:00
" }",
2015-11-09 11:56:14 +05:30
" ",
" $(\".logger\").append(\" Not A Win\");",
" ",
2015-08-27 22:18:09 +02:00
" return [slotOne, slotTwo, slotThree];",
2015-08-15 13:57:44 -07:00
" }",
"",
" $(document).ready(function() {",
" $(\".go\").click(function() {",
2015-08-15 13:57:44 -07:00
" runSlots();",
" });",
" });",
"fcces",
" ",
"<div>",
" <div class = \"container inset\">",
" <div class = \"header inset\">",
" <img src=\"https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz\" alt=\"learn to code javascript at Free Code Camp logo\" class=\"img-responsive nav-logo\">",
" <h2>FCC Slot Machine</h2>",
" </div>",
" <div class = \"slots inset\">",
" <div class = \"slot inset\">",
" ",
" </div>",
" <div class = \"slot inset\">",
" ",
" </div>",
" <div class = \"slot inset\">",
" ",
" </div>",
" </div>",
" <br/>",
" <div class = \"outset\">",
" <button class = \"go inset\">",
" Go",
" </button>",
" </div>",
" <br/>",
" <div class = \"foot inset\">",
" <span class = \"logger\"></span>",
" </div>",
" </div>",
"</div>",
"",
"<style>",
" .container {",
" background-color: #4a2b0f;",
" height: 400px;",
" width: 260px;",
" margin: 50px auto;",
" border-radius: 4px;",
" }",
" .header {",
" border: 2px solid #fff;",
" border-radius: 4px;",
" height: 55px;",
" margin: 14px auto;",
" background-color: #457f86",
" }",
" .header h2 {",
" height: 30px;",
" margin: auto;",
" }",
" .header h2 {",
" font-size: 14px;",
" margin: 0 0;",
" padding: 0;",
" color: #fff;",
" text-align: center;",
" }",
" .slots{",
" display: flex;",
" background-color: #457f86;",
" border-radius: 6px;",
" border: 2px solid #fff;",
" }",
" .slot{",
" flex: 1 0 auto;",
" background: white;",
" height: 75px;",
" margin: 8px;",
" border: 2px solid #215f1e;",
" border-radius: 4px;",
" }",
" .go {",
" width: 100%;",
" color: #fff;",
" background-color: #457f86;",
" border: 2px solid #fff;",
" border-radius: 2px;",
" box-sizing: none;",
" outline: none!important;",
" }",
" .foot {",
" height: 150px;",
" background-color: 457f86;",
" border: 2px solid #fff;",
" }",
" ",
" .logger {",
" color: white;",
" margin: 10px;",
" }",
" ",
" .outset {",
" -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
" -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
" box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
" }",
" ",
" .inset {",
" -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
" -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
" box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
" }",
"</style>"
],
2015-12-29 15:43:21 -08:00
"solutions": [
""
],
"tests": [
"assert((function(){var data = runSlots();return data === null || data.toString().length === 1;})(), 'If all three of our random numbers are the same we should return that number. Otherwise we should return <code>null</code>.')"
],
2015-08-15 13:57:44 -07:00
"type": "waypoint",
"challengeType": 0,
2015-12-29 15:43:21 -08:00
"isBeta": "true"
2015-08-15 13:57:44 -07:00
},
{
"id": "cf1111c1c13feddfaeb2bdef",
2015-08-15 13:57:44 -07:00
"title": "Bring your JavaScript Slot Machine to Life",
"description": [
2015-08-15 13:57:44 -07:00
"Now we can detect a win. Let's get this slot machine working.",
2015-08-16 04:05:15 -07:00
"Let's use the jQuery <code>selector</code> <code>$(\".slot\")</code> to select all of the slots.",
"Once they are all selected, we can use <code>bracket notation</code> to access each individual slot:",
"<code>$($(\".slot\")[0]).html(slotOne);</code>",
2015-11-09 11:56:14 +05:30
"This jQuery will select the first slot and update it's HTML to display the correct number.",
2015-08-16 04:05:15 -07:00
"Use the above selector to display each number in its corresponding slot."
2015-08-15 13:57:44 -07:00
],
"challengeSeed": [
2015-08-15 13:57:44 -07:00
"fccss",
" function runSlots() {",
2015-08-15 13:57:44 -07:00
" var slotOne;",
" var slotTwo;",
" var slotThree;",
" ",
2015-08-16 04:05:15 -07:00
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
2015-08-15 13:57:44 -07:00
" ",
2015-08-16 04:05:15 -07:00
" slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
" slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
" slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
2015-08-15 13:57:44 -07:00
" ",
" ",
" // Only change code below this line.",
" ",
" ",
" ",
" // Only change code above this line.",
" ",
" if (slotOne === slotTwo && slotTwo === slotThree) {",
2015-11-09 11:56:14 +05:30
" $(\".logger\").html(\" It's A Win\")",
" return null;",
2015-08-15 13:57:44 -07:00
" }",
" ",
2015-11-09 11:56:14 +05:30
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
" $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
2015-08-15 13:57:44 -07:00
" }",
" ",
2015-11-09 11:56:14 +05:30
" $(\".logger\").append(\" Not A Win\");",
" ",
" ",
2015-08-27 22:18:09 +02:00
" return [slotOne, slotTwo, slotThree];",
2015-08-15 13:57:44 -07:00
" }",
"",
" $(document).ready(function() {",
" $(\".go\").click(function() {",
2015-08-15 13:57:44 -07:00
" runSlots();",
" });",
" });",
"fcces",
" ",
"<div>",
" <div class = \"container inset\">",
" <div class = \"header inset\">",
" <img src=\"https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz\" alt=\"learn to code javascript at Free Code Camp logo\" class=\"img-responsive nav-logo\">",
" <h2>FCC Slot Machine</h2>",
" </div>",
" <div class = \"slots inset\">",
" <div class = \"slot inset\">",
" ",
" </div>",
" <div class = \"slot inset\">",
" ",
" </div>",
" <div class = \"slot inset\">",
" ",
" </div>",
" </div>",
" <br/>",
" <div class = \"outset\">",
" <button class = \"go inset\">",
" Go",
" </button>",
" </div>",
" <br/>",
" <div class = \"foot inset\">",
" <span class = \"logger\"></span>",
" </div>",
" </div>",
"</div>",
"",
"<style>",
" .container {",
" background-color: #4a2b0f;",
" height: 400px;",
" width: 260px;",
" margin: 50px auto;",
" border-radius: 4px;",
" }",
" .header {",
" border: 2px solid #fff;",
" border-radius: 4px;",
" height: 55px;",
" margin: 14px auto;",
" background-color: #457f86",
" }",
" .header h2 {",
" height: 30px;",
" margin: auto;",
" }",
" .header h2 {",
" font-size: 14px;",
" margin: 0 0;",
" padding: 0;",
" color: #fff;",
" text-align: center;",
" }",
" .slots{",
" display: flex;",
" background-color: #457f86;",
" border-radius: 6px;",
" border: 2px solid #fff;",
" }",
" .slot{",
" flex: 1 0 auto;",
" background: white;",
" height: 75px;",
" margin: 8px;",
" border: 2px solid #215f1e;",
" border-radius: 4px;",
" text-align: center;",
" padding-top: 25px;",
" }",
" .go {",
" width: 100%;",
" color: #fff;",
" background-color: #457f86;",
" border: 2px solid #fff;",
" border-radius: 2px;",
" box-sizing: none;",
" outline: none!important;",
" }",
" .foot {",
" height: 150px;",
" background-color: 457f86;",
" border: 2px solid #fff;",
" }",
" ",
" .logger {",
" color: white;",
" margin: 10px;",
" }",
" ",
" .outset {",
" -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
" -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
" box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
" }",
" ",
" .inset {",
" -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
" -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
" box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
" }",
"</style>"
],
2015-12-29 15:43:21 -08:00
"solutions": [
""
],
"tests": [
"assert((function(){runSlots();if($($(\".slot\")[0]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[1]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[2]).html().replace(/\\s/gi, \"\") !== \"\"){return true;}else{return false;}})(), 'You should be displaying the result of the slot numbers in the corresponding slots.')",
"assert((editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi) && editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi ).length >= 3 && editor.match( /\\.html\\(slotOne\\)/gi ) && editor.match( /\\.html\\(slotTwo\\)/gi ) && editor.match( /\\.html\\(slotThree\\)/gi )), 'You should have used the the selector given in the description to select each slot and assign it the value of <code>slotOne</code>&#44; <code>slotTwo</code> and <code>slotThree</code> respectively.')"
],
2015-08-15 13:57:44 -07:00
"type": "waypoint",
"challengeType": 0,
2015-12-29 15:43:21 -08:00
"isBeta": "true"
2015-08-15 13:57:44 -07:00
},
{
"id": "cf1111c1c11feddfaeb1bdff",
"title": "Give your JavaScript Slot Machine some Stylish Images",
"description": [
2015-08-16 04:05:15 -07:00
"Now let's add some images to our slots.",
"We've already set up the images for you in an array called <code>images</code>. We can use different indexes to grab each of these.",
"Here's how we would set the first slot to show a different image depending on which number its random number generates:",
"<code>$($('.slot')[0]).html('&lt;img src = \"' + images[slotOne-1] + '\"&gt;');</code>",
"Set up all three slots like this, then click the \"Go\" button to play the slot machine."
2015-08-15 13:57:44 -07:00
],
"challengeSeed": [
2015-08-15 13:57:44 -07:00
"fccss",
" function runSlots() {",
2015-08-15 13:57:44 -07:00
" var slotOne;",
" var slotTwo;",
" var slotThree;",
" ",
2015-08-16 04:05:15 -07:00
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
2015-08-15 13:57:44 -07:00
" ",
2015-08-16 04:05:15 -07:00
" slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
" slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
" slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
2015-08-15 13:57:44 -07:00
" ",
" ",
" // Only change code below this line.",
" ",
" ",
" ",
" // Only change code above this line.",
" ",
" if (slotOne === slotTwo && slotTwo === slotThree) {",
2015-11-09 11:56:14 +05:30
" $('.logger').html(\"It's A Win\");",
" return null;",
2015-08-15 13:57:44 -07:00
" }",
" ",
2015-11-09 11:56:14 +05:30
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
" $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
2015-08-15 13:57:44 -07:00
" }",
" ",
2015-11-09 11:56:14 +05:30
" $('.logger').append(\" Not A Win\");",
" ",
2015-08-27 22:18:09 +02:00
" return [slotOne, slotTwo, slotThree];",
2015-08-15 13:57:44 -07:00
" }",
"",
" $(document).ready(function() {",
" $('.go').click(function() {",
2015-08-15 13:57:44 -07:00
" runSlots();",
" });",
" });",
"fcces",
" ",
"<div>",
" <div class = 'container inset'>",
" <div class = 'header inset'>",
" <img src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz' alt='learn to code javascript at Free Code Camp logo' class='img-responsive nav-logo'>",
" <h2>FCC Slot Machine</h2>",
" </div>",
" <div class = 'slots inset'>",
" <div class = 'slot inset'>",
" ",
" </div>",
" <div class = 'slot inset'>",
" ",
" </div>",
" <div class = 'slot inset'>",
" ",
" </div>",
" </div>",
" <br/>",
" <div class = 'outset'>",
" <button class = 'go inset'>",
" Go",
" </button>",
" </div>",
" <br/>",
" <div class = 'foot inset'>",
" <span class = 'logger'></span>",
" </div>",
" </div>",
"</div>",
"",
"<style>",
" .slot > img {",
" margin: 0!important;",
" height: 71px;",
" width: 50px;",
" }",
" .container {",
" background-color: #4a2b0f;",
" height: 400px;",
" width: 260px;",
" margin: 50px auto;",
" border-radius: 4px;",
" }",
" .header {",
" border: 2px solid #fff;",
" border-radius: 4px;",
" height: 55px;",
" margin: 14px auto;",
" background-color: #457f86",
" }",
" .header h2 {",
" height: 30px;",
" margin: auto;",
" }",
" .header h2 {",
" font-size: 14px;",
" margin: 0 0;",
" padding: 0;",
" color: #fff;",
" text-align: center;",
" }",
" .slots{",
" display: flex;",
" background-color: #457f86;",
" border-radius: 6px;",
" border: 2px solid #fff;",
" }",
" .slot{",
" flex: 1 0 auto;",
" background: white;",
" height: 75px;",
" width: 50px;",
" margin: 8px;",
" border: 2px solid #215f1e;",
" border-radius: 4px;",
" text-align: center;",
" }",
" .go {",
" width: 100%;",
" color: #fff;",
" background-color: #457f86;",
" border: 2px solid #fff;",
" border-radius: 2px;",
" box-sizing: none;",
" outline: none!important;",
" }",
" .foot {",
" height: 150px;",
" background-color: 457f86;",
" border: 2px solid #fff;",
" }",
" ",
" .logger {",
" color: white;",
" margin: 10px;",
" }",
" ",
" .outset {",
" -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
" -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
" box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
" }",
" ",
" .inset {",
" -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
" -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
" box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
" }",
"</style>"
],
2015-12-29 15:43:21 -08:00
"solutions": [
""
],
"tests": [
"assert((editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\s*\\-\\s*1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi) && editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\s*\\-\\s*1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi).length >= 3), 'Use the provided code three times. One for each slot.')",
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[0\\]\\s*?\\)/gi), 'You should have used <code>$&#40;&#39;.slot&#39;&#41;[0]</code> at least once.')",
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[1\\]\\s*?\\)/gi), 'You should have used <code>$&#40;&#39;.slot&#39;&#41;[1]</code> at least once.')",
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[2\\]\\s*?\\)/gi), 'You should have used <code>$&#40;&#39;.slot&#39;&#41;[2]</code> at least once.')",
"assert(editor.match(/slotOne/gi) && editor.match(/slotOne/gi).length >= 7, 'You should have used the <code>slotOne</code> value at least once.')",
"assert(editor.match(/slotTwo/gi) && editor.match(/slotTwo/gi).length >= 8, 'You should have used the <code>slotTwo</code> value at least once.')",
"assert(editor.match(/slotThree/gi) && editor.match(/slotThree/gi).length >= 7, 'You should have used the <code>slotThree</code> value at least once.')"
],
2015-08-15 13:57:44 -07:00
"type": "waypoint",
"challengeType": 0,
2015-12-29 15:43:21 -08:00
"isBeta": "true"
2015-07-05 17:12:52 -07:00
}
]
}