1769 lines
77 KiB
JSON
1769 lines
77 KiB
JSON
{
|
|
"name": "Basic JavaScript",
|
|
"order": 0.005,
|
|
"challenges": [
|
|
{
|
|
"id":"bd7123c9c441eddfaeb4bdef",
|
|
"title": "Comment your JavaScript Code",
|
|
"difficulty":"9.98",
|
|
"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 it does.",
|
|
"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>",
|
|
"Try creating one of each."
|
|
],
|
|
"tests":[
|
|
"assert(editor.getValue().match(/(\\/\\/)...../g), 'Create a <code>\\/\\/</code> style comment that contains at least five letters');",
|
|
"assert(editor.getValue().match(/(\\/\\*)...../g), 'Create a <code>\/\\* \\*\/</code> style comment that contains at least five letters.');",
|
|
"assert(editor.getValue().match(/(\\*\\/)/g), 'Make sure that you close the comment with a <code>\\*\/</code>');"
|
|
],
|
|
"challengeSeed":[
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c441eddfaeb5bdef",
|
|
"title": "Understand Boolean Values",
|
|
"difficulty": "9.98001",
|
|
"description": [
|
|
"In computer science, <code>data structures</code> are things that hold data. JavaScript has seven of these. For example, the <code>Number</code> data structure holds numbers.",
|
|
"Let's learn about the most basic data structure of all: the <code>Boolean</code>. Booleans can only hold the value of either true or false. They are basically little on-off switches.",
|
|
"Let's modify our <code>welcomeToBooleans</code>function so that it will return <code>true</code>instead of <code>false</code>when the run button is clicked."
|
|
],
|
|
"tests": [
|
|
"assert(typeof(welcomeToBooleans()) === 'boolean', 'The <code>welcomeToBooleans()</code> function should return a boolean (true/false) value.');",
|
|
"assert(welcomeToBooleans() === true, '<code>welcomeToBooleans()</code> should return true.');"
|
|
],
|
|
"challengeSeed": [
|
|
"function welcomeToBooleans() {",
|
|
"",
|
|
"// don't change code above here",
|
|
"",
|
|
" return false;",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"}",
|
|
"",
|
|
"welcomeToBooleans();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c443eddfaeb5bdef",
|
|
"title": "Declare JavaScript Variables",
|
|
"difficulty": "9.9801",
|
|
"description": [
|
|
"When we store data in a <code>data structure</code>, we call it a <code>variable</code>. These variables are no different from the x and y variables you use in math.",
|
|
"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. JavaScript variables are written in <code>camel case</code>. An example of camel case is: camelCase.",
|
|
"Now, use the <code>var</code> keyword to create a variable called <code>myName</code>. Set its value to your name, in double quotes.",
|
|
"Look at the <code>ourName</code> example if you get stuck."
|
|
],
|
|
"tests": [
|
|
"assert((function(){/**/if(typeof(myName) !== \"undefined\" && typeof(myName) === \"string\" && myName.length > 0){return(true);}else{return(false);}/**/})(), 'myName should be a string that contains at least one character in it');"
|
|
],
|
|
"challengeSeed": [
|
|
"// var ourName = \"Free Code Camp\";",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"",
|
|
"if(typeof(myName) !== \"undefined\"){(function(v){return(v);})(myName);}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c444eddfaeb5bdef",
|
|
"title": "Declare String Variables",
|
|
"difficulty": "9.9802",
|
|
"description": [
|
|
"In the previous challenge, we used the code <code>var myName = \"your name\"</code>. This is what we call a <code>String</code> variable. It is nothing more than a \"string\" of characters. JavaScript strings are always wrapped in quotes.",
|
|
"Now let's create two new string variables: <code>myFirstName</code>and <code>myLastName</code> and assign them the values of your first and last name, respectively."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(typeof(myFirstName) !== \"undefined\" && typeof(myFirstName) === \"string\" && myFirstName.length > 0){return(true);}else{return(false);}})(), 'myFirstName should be a string with a least one character in it');",
|
|
"assert((function(){if(typeof(myLastName) !== \"undefined\" && typeof(myLastName) === \"string\" && myLastName.length > 0){return(true);}else{return(false);}})(), 'myLastName should be a string with a least one character in it');"
|
|
],
|
|
"challengeSeed": [
|
|
"// name = \"Alan Turing\";",
|
|
"// var firstName = \"Alan\";",
|
|
"// var lastName = \"Turing\";",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(){return(myFirstName + ', ' + myLastName);})();}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c448eddfaeb5bdef",
|
|
"title": "Check the Length Property of a String Variable",
|
|
"difficulty": "9.9809",
|
|
"description": [
|
|
"<code>data structures</code> have <code>properties</code>. For example, <code>strings</code> have a property called <code>.length</code> that will tell you how many characters are in the string.",
|
|
"For example, if we created a variable <code>var firstName = \"Charles\"</code>, we could find out how long the string \"Charles\" is by using the <code>firstName.length</code> property.",
|
|
"Use the <code>.length</code> property to count the number of characters in the <code>lastNameLength</code> variable."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(typeof(lastNameLength) !== \"undefined\" && typeof(lastNameLength) === \"number\" && lastNameLength === 8){return(true);}else{return(false);}})(), 'lastNameLength should be equal to eight.');",
|
|
"assert((function(){if(editor.getValue().match(/\\.length/gi) && editor.getValue().match(/\\.length/gi).length >= 2 && editor.getValue().match(/var lastNameLength \\= 0;/gi) && editor.getValue().match(/var lastNameLength \\= 0;/gi).length >= 1){return(true);}else{return(false);}})(), 'You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>');"
|
|
],
|
|
"challengeSeed": [
|
|
"var firstNameLength = 0;",
|
|
"var lastNameLength = 0;",
|
|
"var firstName = \"Ada\";",
|
|
"",
|
|
"firstNameLength = firstName.length;",
|
|
"",
|
|
"var lastName = \"Lovelace\";",
|
|
"",
|
|
"// don't change code above here",
|
|
"",
|
|
"lastNameLength = lastName;",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"if(typeof(lastNameLength) !== \"undefined\"){(function(){return(lastNameLength);})();}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c549eddfaeb5bdef",
|
|
"title": "Use Bracket Notation to Find the First Character in a String",
|
|
"difficulty": "9.9810",
|
|
"description": [
|
|
"<code>Bracket notation</code> is a way to get a character at a specific <code>index</code> within a string.",
|
|
"Computers don't start counting at 1 like humans do. They start at 0.",
|
|
"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>.",
|
|
"Use <code>bracket notation</code> to find the first character in a the <code>firstLetterOfLastName</code> variable.",
|
|
"Try looking at the <code>firstLetterOfFirstName</code> variable declaration if you get stuck."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(typeof(firstLetterOfLastName) !== \"undefined\" && editor.getValue().match(/\\[0\\]/gi) && typeof(firstLetterOfLastName) === \"string\" && firstLetterOfLastName === \"L\"){return(true);}else{return(false);}})(), 'The first letter of firstLetterOfLastName should be a L');"
|
|
],
|
|
"challengeSeed": [
|
|
"var firstLetterOfFirstName = \"\";",
|
|
"var firstLetterOfLastName = \"\";",
|
|
"",
|
|
"var firstName = \"Ada\";",
|
|
"",
|
|
"firstLetterOfFirstName = firstName[0];",
|
|
"",
|
|
"var lastName = \"Lovelace\";",
|
|
"",
|
|
"firstLetterOfLastName = lastName;",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(v){return(v);})(firstLetterOfLastName);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c450eddfaeb5bdef",
|
|
"title": "Use Bracket Notation to Find the Nth Character in a String",
|
|
"difficulty": "9.9811",
|
|
"description": [
|
|
"You can also use <code>bracket Notation</code>to get the character at other positions within a string.",
|
|
"Remember that computers start counting at 0, so the first character is actually the zeroth character.",
|
|
"Let's try to set <code>thirdLetterOfLastName</code>to equal the <code>third letter</code> of the <code>lastName</code> variable.",
|
|
"Try looking at the <code>secondLetterOfFirstName</code> variable declaration if you get stuck."
|
|
],
|
|
"tests": [
|
|
"assert(thirdLetterOfLastName === 'v', 'The third last letter of lastName should be a \"v\"');"
|
|
],
|
|
"challengeSeed": [
|
|
"var firstName = \"Ada\";",
|
|
"",
|
|
"var secondLetterOfFirstName = firstName[1];",
|
|
"",
|
|
"var lastName = \"Lovelace\";",
|
|
"",
|
|
"var thirdLetterOfLastName = lastName;",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(v){return(v);})(thirdLetterOfLastName);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c451eddfaeb5bdef",
|
|
"title": "Use Bracket Notation to Find the Last Character in a String",
|
|
"difficulty": "9.9812",
|
|
"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>.",
|
|
"Use <code>bracket notation</code> to find the last character in the <code>lastName</code> variable.",
|
|
"Try looking at the <code>lastLetterOfLastName</code> variable declaration if you get stuck."
|
|
],
|
|
"tests": [
|
|
"assert(lastLetterOfLastName === \"e\", 'lastLetterOfLastName should be \"e\"');",
|
|
"assert(editor.getValue().match(/\\.length/g), 'You have to use <code>.length</code> to get the last letter');"
|
|
],
|
|
"challengeSeed": [
|
|
"var firstName = \"Ada\";",
|
|
"",
|
|
"var lastLetterOfFirstName = firstName[firstName.length - 1];",
|
|
"",
|
|
"var lastName = \"Lovelace\";",
|
|
"",
|
|
"var lastLetterOfLastName = lastName;",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(v){return(v);})(lastLetterOfLastName);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c452eddfaeb5bdef",
|
|
"title": "Use Bracket Notation to Find the Nth-to-Last Character in a String",
|
|
"difficulty": "9.9813",
|
|
"description": [
|
|
"In order to get the last letter of a string, you can subtract one from the string's length.",
|
|
"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>.",
|
|
"Use <code>bracket notation</code> to find the second-to-last character in the <code>lastName</code> string.",
|
|
"Try looking at the <code>lastLetterOfLastName</code> variable declaration if you get stuck."
|
|
],
|
|
"tests": [
|
|
"assert(secondToLastLetterOfLastName === 'c', 'secondToLastLetterOfLastName should be \"c\".');",
|
|
"assert(editor.getValue().match(/\\.length/g), 'You have to use .length to get the third last letter.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var firstName = \"Ada\";",
|
|
"",
|
|
"var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];",
|
|
"",
|
|
"var lastName = \"Lovelace\";",
|
|
"",
|
|
"var secondToLastLetterOfLastName = lastName;",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(v){return(v);})(secondToLastLetterOfLastName);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c11feddfaeb3bdef",
|
|
"title": "Add Two Numbers with JavaScript",
|
|
"difficulty": "9.98141",
|
|
"description": [
|
|
"Let's try to add two numbers using JavaScript.",
|
|
"JavaScript uses the <code>+</code> symbol for addition.",
|
|
"Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(sum === 20 && editor.getValue().match(/\\+/g)){return(true);}else{return(false);}})(), 'Make the variable <code>sum</code> equal 20');"
|
|
],
|
|
"challengeSeed": [
|
|
"var sum = 10 + 0; //make this equal to 20 by changing the 0 into the appropriate number.",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(z){return('sum='+z);})(sum);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c11feddfaeb4bdef",
|
|
"title": "Subtract One Number from Another with JavaScript",
|
|
"difficulty": "9.98142",
|
|
"description": [
|
|
"We can also subtract one number from another.",
|
|
"JavaScript uses use the <code>-</code> symbol for subtraction.",
|
|
"Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(difference === 12 && editor.getValue().match(/\\-/g)){return(true);}else{return(false);}})(), 'Make the variable <code>difference</code> equal 12');"
|
|
],
|
|
"challengeSeed": [
|
|
"var difference = 45 - 0; //make this equal to 12 by changing the 0 into the appropriate number.",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(z){return('difference='+z);})(difference);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1231c1c11feddfaeb5bdef",
|
|
"title": "Multiply Two Numbers with JavaScript",
|
|
"difficulty": "9.98143",
|
|
"description": [
|
|
"We can also multiply one number by another.",
|
|
"JavaScript uses use the <code>*</code> symbol for multiplication.",
|
|
"Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(product === 80 && editor.getValue().match(/\\*/g)){return(true);}else{return(false);}})(), 'Make the variable <code>product</code> equal 80.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var product = 8 * 0; //make this equal to 80 by changing the 0 into the appropriate number.",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(z){return('product='+z);})(product);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c11feddfaeb6bdef",
|
|
"title": "Divide One Number by Another with JavaScript",
|
|
"difficulty": "9.9814",
|
|
"description": [
|
|
"We can also divide one number by another.",
|
|
"JavaScript uses use the <code>/</code> symbol for division.",
|
|
"Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(quotient === 2 && editor.getValue().match(/\\//g)){return(true);}else{return(false);}})(), 'Make the variable <code>quotient</code> equal 2.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var quotient = 66 / 0; //make this equal to 2 by changing the 0 into the appropriate number.",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(z){return('quotient='+z);})(quotient);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1391c1c11feddfaeb4bdef",
|
|
"title": "Create Decimal Numbers with JavaScript",
|
|
"difficulty": "9.9815",
|
|
"description": [
|
|
"JavaScript number variables can also have decimals.",
|
|
"Let's create a variable <code>myDecimal</code> and give it a decimal value."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(typeof(myDecimal) !== \"undefined\" && typeof(myDecimal) === \"number\" && editor.getValue().match(/\\./g).length >=2){return(true);}else{return(false);}})(), 'myDecimal should be a decimal point number.');"
|
|
],
|
|
"challengeSeed": [
|
|
"// var ourDecimal = 5.7;",
|
|
"// Create a number with a decimal point here called myDecimal",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(){if(typeof(myDecimal) !== \"undefined\"){return(myDecimal);}})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7993c9c69feddfaeb7bdef",
|
|
"title": "Perform Arithmetic Operations on Decimals with JavaScript",
|
|
"difficulty": "9.98151",
|
|
"description": [
|
|
"In JavaScript, you can also perform calculations with decimal numbers, just like whole numbers.",
|
|
"Replace the <code>0.0</code> with the correct number so that you get the result mentioned in the comments."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(product === 5.0 && editor.getValue().match(/\\*/g)){return(true);}else{return(false);}})(), 'Make the variable <code>product</code> equal 5.0.');",
|
|
"assert((function(){if(quotient === 2.2 && editor.getValue().match(/\\//g)){return(true);}else{return(false);}})(), 'Make the variable <code>quotient</code> equal 2.2.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var quotient = 4.4 / 2.0; // equals 2.2",
|
|
"var product = 2.0 * 0.0; // equals 5.0",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(y){return('product='+y);})(product);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7993c9c69feddfaeb8bdef",
|
|
"title": "Store Multiple Values in one Variable using JavaScript Arrays",
|
|
"difficulty": "9.9816",
|
|
"description": [
|
|
"With JavaScript <code>array</code> variables, we can store several pieces of data in one place.",
|
|
"You start an array declaration with an opening bracket, end it with a closing bracket, and put a comma between each entry, like this: <code>var sandwich = [\"peanut butter\", \"jelly\", \"bread\"]</code>.",
|
|
"Now let's create a new array called <code>myArray</code> that contains both a <code>string</code> and a <code>number</code>.",
|
|
"Refer to the comments if you get stuck."
|
|
],
|
|
"tests": [
|
|
"assert(typeof(myArray) == 'object', 'myArray should be an array');",
|
|
"assert(typeof(myArray[0]) !== 'undefined' && typeof(myArray[0]) == 'string', 'The first item in myArray should be a string');",
|
|
"assert(typeof(myArray[1]) !== 'undefined' && typeof(myArray[1]) == 'number', 'The second item in myArray should be a number');"
|
|
],
|
|
"challengeSeed": [
|
|
"//var array = [\"John\", 23];",
|
|
"",
|
|
"var myArray = [];",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(z){return(z);})(myArray);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"cf1111c1c11feddfaeb7bdef",
|
|
"title": "Nest one Array within Another Array",
|
|
"difficulty":"9.98161",
|
|
"description":[
|
|
"You can also nest arrays within other arrays, like this: <code>[[\"Bulls\", 43]]</code>.",
|
|
"Let's now go create a nested array called <code>myArray</code>."
|
|
],
|
|
"tests":[
|
|
"assert(Array.isArray(myArray) && myArray.some(Array.isArray), '<code>myArray</code> should have at least one array nested within another array.');"
|
|
],
|
|
"challengeSeed":[
|
|
"var ourArray = [[\"the universe\", \"everything\", 42]];",
|
|
"var myArray = [];",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"if(typeof(myArray) !== \"undefined\"){(function(){return(myArray);})();}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"bg9997c9c79feddfaeb9bdef",
|
|
"title": "Access Array Data with Indexes",
|
|
"difficulty":"9.9817",
|
|
"description":[
|
|
"We can access the data inside arrays using <code>indexes</code>.",
|
|
"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.",
|
|
"For example:",
|
|
"<code>var array = [1,2,3];</code>",
|
|
"<code>array[0]; //equals 1</code>",
|
|
"<code>var data = array[1];</code>",
|
|
"Create a variable called <code>myData</code> and set it to equal the first value of <code>myArray</code>."
|
|
],
|
|
"tests":[
|
|
"assert((function(){if(typeof(myArray) != 'undefined' && typeof(myData) != 'undefined' && myArray[0] == myData){return(true);}else{return(false);}})(), 'The variable <code>myData</code> should equal the first value of myArray');"
|
|
],
|
|
"challengeSeed":[
|
|
"//var ourArray = [1,2,3];",
|
|
"//var ourData = ourArray[0]; // equals 1",
|
|
"",
|
|
"var myArray = [1,2,3];",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"if(typeof(myArray) !== \"undefined\" && typeof(data) !== \"undefined\"){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', data = ' + JSON.stringify(z));})(myArray, data);}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"cf1111c1c11feddfaeb8bdef",
|
|
"title": "Modify Array Data With Indexes",
|
|
"difficulty":"9.98171",
|
|
"description":[
|
|
"We can also modify the data stored in arrays by using indexes.",
|
|
"For example:",
|
|
"<code>var ourArray = [3,2,1];</code>",
|
|
"<code>ourArray[0] = 1; // equals [1,2,1]</code>",
|
|
"Now modify the data stored at index 0 of <code>myArray</code> to the value of 3."
|
|
],
|
|
"tests":[
|
|
"assert((function(){if(typeof(myArray) != 'undefined' && myArray[0] == 3 && myArray[1] == 2 && myArray[2] == 3){return(true);}else{return(false);}})(), 'myArray should now be [3,2,3]');",
|
|
"assert((function(){if(editor.getValue().match(/[0]/g).length >= 1 && editor.getValue().match(/=/g).length >= 2){return(true);}else{return(false);}})(), 'You should be using indexes to modify the values in myArray');"
|
|
],
|
|
"challengeSeed":[
|
|
"var ourArray = [1,2,3];",
|
|
"ourArray[1] = 3;",
|
|
"// ourArray[1] now equals [1,3,3].",
|
|
"var myArray = [1,2,3];",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"if(typeof(myArray) !== \"undefined\"){(function(){return(myArray);})();}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9994c9c69feddfaeb9bdef",
|
|
"title": "Manipulate Arrays With pop()",
|
|
"difficulty": "9.9818",
|
|
"description": [
|
|
"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 retrieve this value by performing <code>pop()</code> in a variable declaration.",
|
|
"Any type of variable can be \"popped\" off of an array.",
|
|
"Use the <code>.pop()</code> function to remove the last item from myArray."
|
|
],
|
|
"tests": [
|
|
"assert((function(d){if(d[0] == 'John' && d[1] == 23 && d[2] == undefined){return(true);}else{return(false);}})(myArray), 'myArray should only have the first two values left([\"John\", 23])');",
|
|
"assert((function(d){if(d[0] == 'cat' && d[1] == 2 && d[2] == undefined){return(true);}else{return(false);}})(removed), 'myArray should only have the first two values left([\"cat\"], 2)');"
|
|
],
|
|
"challengeSeed": [
|
|
"//var numbers = [1,2,3];",
|
|
"//console.log(numbers); // logs [1,2,3]",
|
|
"//var removed = numbers.pop();",
|
|
"//console.log(numbers); // logs [1,2]",
|
|
"//console.log(removed); // logs 3",
|
|
"",
|
|
"var myArray = [\"John\", 23, [\"cat\", 2]];",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var removed = myArray; // This should be [\"cat\", 2] and myArray should now be [\"John\", 23]",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z));})(myArray, removed);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9995c9c69feddfaeb9bdef",
|
|
"title": "Manipulate Arrays With push()",
|
|
"difficulty": "9.9818",
|
|
"description": [
|
|
"Not only can you <code>pop()</code> data off of the end of an array, you can also <code>push()</code> data onto the end of an array.",
|
|
"Take the myArray array and <code>push()</code> this value to the end of it: <code>[\"dog\", 3]</code>."
|
|
],
|
|
"tests": [
|
|
"assert((function(d){if(d[2] != undefined && d[0] == 'John' && d[1] == 23 && d[2][0] == 'dog' && d[2][1] == 3 && d[2].length == 2){return(true);}else{return(false);}})(myArray), 'myArray should only have the first two values left([\"John\", 23, [\"dog\", 3]])');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
|
|
"ourArray.pop();",
|
|
"ourArray.push([\"happy\", \"joy\"]);",
|
|
"// ourArray now equals [\"Stimpson\", \"J\", [\"happy\", \"joy\"]]",
|
|
"",
|
|
"var myArray = [\"John\", 23, [\"cat\", 2]];",
|
|
"myArray.pop();",
|
|
"//Add a [\"dog\", 3] to the end of myArray using push()",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(z){return('myArray = ' + JSON.stringify(z));})(myArray);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9996c9c69feddfaeb9bdef",
|
|
"title": "Manipulate Arrays With shift()",
|
|
"difficulty": "9.9817",
|
|
"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.",
|
|
"Take the myArray array and <code>shift()</code> the first value off of it."
|
|
],
|
|
"tests": [
|
|
"assert((function(d){if(d[0] == 23 && d[1][0] == 'dog' && d[1][1] == 3 && d[2] == undefined){return(true);}else{return(false);}})(myArray), 'myArray should only have the first two values left([\"John\", 23])');",
|
|
"assert((function(d){if(d === 'John' && typeof(myRemoved) === 'string'){return(true);}else{return(false);}})(myRemoved), 'myRemoved should contain \"John\"');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
|
|
"ourRemoved = ourArray.shift();",
|
|
"// ourArray now equals [\"J\", [\"cat\"]]",
|
|
"",
|
|
"var myArray = [\"John\", 23, [\"dog\", 3]];",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var myRemoved = myArray; // This should be [\"John\"] and myArray should now be [23, [\"dog\", 3]]",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & myRemoved = ' + JSON.stringify(z));})(myArray, myRemoved);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9997c9c69feddfaeb9bdef",
|
|
"title": "Manipulate Arrays With unshift()",
|
|
"difficulty": "9.9818",
|
|
"description": [
|
|
"Now that we've learned how to <code>shift</code>things from the start of the array, we need to learn how to <code>unshift</code>stuff back to the start",
|
|
"Let's take the code we had last time and <code>unshift</code>this value to the end: <code>\"Paul\" </code>"
|
|
],
|
|
"tests": [
|
|
"assert((function(d){if(d[0].toLowerCase() == 'paul' && d[1] == 23 && d[2][0] != undefined && d[2][0] == 'dog' && d[2][1] != undefined && d[2][1] == 3){return(true);}else{return(false);}})(myArray), 'myArray should now have [\"Paul\", 23, [\"dog\", 3]])');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
|
|
"ourArray.shift();",
|
|
"ourArray.unshift([\"happy\", \"joy\"]);",
|
|
"// ourArray now equals [[\"happy\", \"joy\"], \"Stimpson\", \"J\"]",
|
|
"",
|
|
"var myArray = [\"John\", 23, [\"dog\", 3]];",
|
|
"myArray.shift();",
|
|
"",
|
|
"// Add \"Paul\" to the start of myArray",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"(function(y, z){return('myArray = ' + JSON.stringify(y));})(myArray);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"bg9997c9c89feddfaeb9bdef",
|
|
"title": "Write Reusable JavaScript with Functions",
|
|
"difficulty":"9.9819",
|
|
"description":[
|
|
"In JavaScript, we can divide up our code into reusable parts called <code>functions</code>.",
|
|
"Here's an example of a function:",
|
|
"<code>function functionName (a, b) {</code>",
|
|
"<code>  return(a + b);</code>",
|
|
"<code>}</code>",
|
|
"We can \"call\" our function like this: <code>functionName();</code>, and it will run and return it's <code>return</code> value to us.",
|
|
"Create and call a function called <code>myFunction</code>."
|
|
],
|
|
"tests":[
|
|
"assert((function(){if(typeof(f) !== \"undefined\" && typeof(f) === \"number\" && f === a + b && editor.getValue().match(/return/gi).length >= 1 && editor.getValue().match(/a/gi).length >= 1 && editor.getValue().match(/b/gi).length >= 1 && editor.getValue().match(/\\+/gi).length >= 1){return(true);}else{return(false);}})(), 'Your function should return the value of a + b');"
|
|
],
|
|
"challengeSeed":[
|
|
"var a = 4;",
|
|
"var b = 5;",
|
|
"",
|
|
"ourFunction = function() {",
|
|
" return a - b;",
|
|
"};",
|
|
"",
|
|
"//Don't modify above this line",
|
|
"//Create a function called myFunction that returns the value of a plus b.",
|
|
" // Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"// You'll learn about functions soon.",
|
|
"if(typeof(myFunction) !== \"undefined\"){",
|
|
"var f=myFunction(a,b);",
|
|
"(function(){return(f);})();",
|
|
"}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"bg9998c9c99feddfaeb9bdef",
|
|
"title": "Build JavaScript Objects",
|
|
"difficulty":"9.9822",
|
|
"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:",
|
|
"<code>var cat = {</code>",
|
|
"<code> \"name\": \"Whiskers\",</code>",
|
|
"<code> \"legs\": 4,</code>",
|
|
"<code> \"tails\": 1,</code>",
|
|
"<code> \"enemies\": [\"Water\", \"Dogs\"]</code>",
|
|
"<code>};</code>",
|
|
"</code>",
|
|
"Objects are useful for storing data in a structured way, and can represents real world objects, like a cats.",
|
|
"Let's try to make an Object that represents a dog called myDog!"
|
|
],
|
|
"tests":[
|
|
"assert((function(z){if(z.hasOwnProperty(\"name\") && z.name !== undefined && typeof(z.name) === \"string\"){return(true);}else{return(false);}})(myDog), 'myDog should contain the property name and it should be a string');",
|
|
"assert((function(z){if(z.hasOwnProperty(\"legs\") && z.legs !== undefined && typeof(z.legs) === \"number\"){return(true);}else{return(false);}})(myDog), 'myDog should contain the property legs and it should be a number');",
|
|
"assert((function(z){if(z.hasOwnProperty(\"tails\") && z.tails !== undefined && typeof(z.tails) === \"number\"){return(true);}else{return(false);}})(myDog), 'myDog should contain the property tails and it should be a number');",
|
|
"assert((function(z){if(z.hasOwnProperty(\"friends\") && z.friends !== undefined && Array.isArray(z.friends)){return(true);}else{return(false);}})(myDog), 'myDog should contain the property friends and it should be an array');"
|
|
],
|
|
"challengeSeed":[
|
|
"//var ourDog = {",
|
|
"// \"name\": \"Camper\",",
|
|
"// \"legs\": 4,",
|
|
"// \"tails\": 1,",
|
|
"// \"friends\": [\"everything!\"]",
|
|
"//};",
|
|
"",
|
|
"// add the name(string), legs(number), tails(number) and friends(array) properties to myDog.",
|
|
"// You can set them to whatever you want.",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var myDog = {",
|
|
" ",
|
|
"};",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"(function(z){return(z);})(myDog);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"bg9999c9c99feddfaeb9bdef",
|
|
"title": "Manipulate JavaScript Objects",
|
|
"difficulty":"9.9823",
|
|
"description":[
|
|
"There are many ways to add and add and remove properties from objects.",
|
|
"For example, we can add properties to objects like this:",
|
|
"<code>myObject.myProperty = \"myValue\";</code>",
|
|
"We can also delete them like this:",
|
|
"<code>delete(myObject.myProperty);</code>",
|
|
"Let's add the property \"bark\", and delete the property \"tails\"."
|
|
],
|
|
"tests":[
|
|
"assert(myDog.bark !== undefined, 'Add the property \"bark\" to myDog.');",
|
|
"assert(myDog.tails === undefined, 'Delete the property \"tails\" from myDog.');"
|
|
],
|
|
"challengeSeed":[
|
|
"// var ourDog = {",
|
|
"// \"name\": \"Camper\",",
|
|
"// \"legs\": 4,",
|
|
"// \"tails\": 1,",
|
|
"// \"friends\": [\"everything!\"]",
|
|
"// };",
|
|
"",
|
|
"// ourDog.bark(\"arf!\");",
|
|
"// delete(ourDog.tails);",
|
|
"",
|
|
"var myDog = {",
|
|
" \"name\": \"Camper\",",
|
|
" \"legs\": 4,",
|
|
" \"tails\": 1,",
|
|
" \"friends\": []",
|
|
"};",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"// Let's add the property bark to myDog",
|
|
"",
|
|
"",
|
|
"// Now delete the property tails",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"(function(z){return(z);})(myDog);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"cf1111c1c11feddfaeb5bdef",
|
|
"title": "Iterate with JavaScript For Loops",
|
|
"difficulty":"9.9824",
|
|
"description":[
|
|
"You can run the same code multiple times by using a loop.",
|
|
"The most common type of JavaScript loop is called a \"for loop\" because it runs \"for\" a specific number of times.",
|
|
"<code>var ourArray = [];</code>",
|
|
"<code>for(var i = 0; i < 5; i++) {</code>",
|
|
"<code>  ourArray.push(i);</code>",
|
|
"<code>}</code>",
|
|
"<code>ourArray</code> will now contain [0,1,2,3,4] ",
|
|
"Let's try getting a for loop to work by pushing values to an array."
|
|
],
|
|
"tests":[
|
|
"assert(editor.getValue().match(/for/g), 'You should be using a for loop for this.');",
|
|
"assert.deepEqual(myArray, [0,1,2,3,4], 'myArray should equal [0,1,2,3,4]');"
|
|
],
|
|
"challengeSeed":[
|
|
"var myArray = [];",
|
|
"//Push the numbers zero through four to myArray using a \"for loop\" like above.",
|
|
"",
|
|
""
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"cf1111c1c11feddfaeb1bdef",
|
|
"title": "Iterate with JavaScript While Loops",
|
|
"difficulty":"9.9825",
|
|
"description":[
|
|
"You can run the same code multiple times by using a loop.",
|
|
"Another type of JavaScript loop is called a \"while loop\" because it runs \"while\" something is true, and stops once that something is no longer true.",
|
|
"<code>var ourArray = [];</code>",
|
|
"<code>var i = 0;</code>",
|
|
"<code>while(i < 5) {</code>",
|
|
"<code>  ourArray.push(i);</code>",
|
|
"<code>  i++;</code>",
|
|
"<code>}</code>",
|
|
"Let's try getting a for loop to work by pushing values to an array."
|
|
],
|
|
"tests":[
|
|
"assert(editor.getValue().match(/while/g), 'You should be using a while loop for this.');",
|
|
"assert.deepEqual(myArray, [0,1,2,3,4], 'myArray should equal [0,1,2,3,4]');"
|
|
],
|
|
"challengeSeed":[
|
|
"var myArray = [];",
|
|
"//Push the numbers zero through four to myArray",
|
|
"",
|
|
""
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"cf1111c1c11feddfaeb9bdef",
|
|
"title": "Generate Random Fractions with JavaScript",
|
|
"difficulty":"9.9827",
|
|
"description":[
|
|
"Random numbers are useful for creating random behaviours and games.",
|
|
"JavaScript has a <code>Math.random()</code> function that generates a random decimal number.",
|
|
"Use <code>Math.random()</code> to get <code>myFunction</code> to return a random number."
|
|
],
|
|
"tests":[
|
|
"assert(typeof(myFunction()) === \"number\", 'myFunction should return a random number');",
|
|
"assert((myFunction()+''). match(/\\./g), 'The number returned by myFunction should be a decimal');",
|
|
"assert(editor.getValue().match(/Math\\.random/g).length >= 2, 'You should be using Math.random to generate the random decimal number');"
|
|
],
|
|
"challengeSeed":[
|
|
"function myFunction() {",
|
|
" //Change the 0 to Math.random()",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" return(0);",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"}",
|
|
"",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"(function(){return(myFunction());})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"cf1111c1c12feddfaeb1bdef",
|
|
"title": "Generate Random Whole Numbers with JavaScript",
|
|
"difficulty":"9.9828",
|
|
"description":[
|
|
"It's great that we can create random decimal numbers, but it's even more useful if we lot more useful to generate a random whole number.",
|
|
"To achieve this we can multiply the random number by ten and use the <code>Math.floor()</code> to convert the decimal number to a whole number",
|
|
"This technique gives us a whole number between zero and nine",
|
|
"Example:",
|
|
"<code>Math.floor(Math.random()*10);</code>",
|
|
"Let's give this technique a go now"
|
|
],
|
|
"tests":[
|
|
"assert(typeof(myFunction()) === \"number\", 'The result of myFunction should be a number');",
|
|
"assert(editor.getValue().match(/Math.random/g), 'You should be using Math.random to create a random number');",
|
|
"assert(!(''+myFunction()).match(/\\./g), 'You should have multiplied the result of Math.random but 10 to make it a number that\\'s greater then zero');",
|
|
"assert(editor.getValue().match(/Math.floor/g), 'You should use Math.floor to remove the decimal part of the number');"
|
|
],
|
|
"challengeSeed":[
|
|
"function myFunction(){",
|
|
" // Make myFunction return a random number betweenzero and nine> instead of a decimal",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" return(Math.random());",
|
|
"",
|
|
" // Only change code above this line.",
|
|
"}",
|
|
"",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"(function(){return(myFunction());})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"cf1111c1c12feddfaeb2bdef",
|
|
"title": "Generate Random Whole Numbers within a Range",
|
|
"difficulty":"9.9829",
|
|
"description":[
|
|
"We can use a certain mathematical expression to get a random number between between two numbers.",
|
|
"<code>Math.floor(Math.random() * (max - min + 1)) + min</code>",
|
|
"By using this we can control the output of a random number."
|
|
],
|
|
"tests":[
|
|
"assert(myFunction() >= min, 'The random number that\\'s generated by myFunction should be greater than or equal to the minimum number');",
|
|
"assert(myFunction() <= max, 'The random number that\\'s generated by myFunction should be less than or equal to the maximum number');",
|
|
"assert((function(){if(editor.getValue().match(/max/g).length >= 2 && editor.getValue().match(/min/g).length >= 2 && editor.getValue().match(/Math.floor/g) && editor.getValue().match(/Math.random/g)){return(true);}else{return(false);}})(), 'You should be using the function given in the description to calculate the random in number in a range');"
|
|
],
|
|
"challengeSeed":[
|
|
"var min = 0;",
|
|
"var max = 12;",
|
|
"function myFunction() {",
|
|
" // Make myFunction return a random number between zero and nine instead of a decimal",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" return(Math.random());",
|
|
"}",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"(function(){return(myFunction());})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"cf1111c1c12feddfaeb3bdef",
|
|
"title": "Use Conditional Logic with If-Else Statements",
|
|
"difficulty":"9.983",
|
|
"description":[
|
|
"We can use if statements in JavaScript to only execute code if a certain condition is met.",
|
|
"if statements require some sort of boolean condition evaluate.",
|
|
"Example:",
|
|
"<code> if (1 == 2) {</code>",
|
|
"<code>  return(true);</code>",
|
|
"<code>}</code>",
|
|
"<code>else {</code>",
|
|
"<code>  return(false);</code>",
|
|
"<code>}</code>",
|
|
"Let's use <code>if</code> and <code>else</code> statements to make a coin-flip game.",
|
|
"Create an <code>if-else statement</code> to return <code>heads</code> if the flip var is zero and to return <code>tails</code> if it's not."
|
|
],
|
|
"tests":[
|
|
"assert((function(){if(myFunction() === \"heads\" || myFunction() === \"tails\"){return(true);}else{return(false);}})(), 'myFunction should either return heads or tails');",
|
|
"assert(editor.getValue().match(/if/g).length >= 3, 'You should have created a new if statement');",
|
|
"assert(editor.getValue().match(/else/g).length >= 2, 'You should have created a new else statement');"
|
|
],
|
|
"challengeSeed":[
|
|
"function myFunction(){",
|
|
" var flip = Math.floor(Math.random() * (1 - 0 + 1)) + 0;",
|
|
" // Create and if else statement here to return \"heads\" if flip is 0. Otherwise return \"tails\".",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
"",
|
|
"}",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"// We use this function to show you the value of your variable in your output box.",
|
|
"(function(){return(myFunction());})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"cf1111c1c12feddfaeb6bdef",
|
|
"title": "Sift through Text with Regular Expressions",
|
|
"difficulty":"9.984",
|
|
"description":[
|
|
"<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 number of times the word <code>the</code> occurred 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:",
|
|
"<code>the</code> is the pattern we want to match.",
|
|
"<code>+</code> means we want to find one or more occurrences of this pattern.",
|
|
"<code>g</code> means that we want to search the entire string for this pattern.",
|
|
"<code>i</code> means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.",
|
|
"<code>Regular expressions</code> are usually surrounded by <code>/</code> symbols.",
|
|
"Let's try selecting all the occurances of the word <code>and</code> in the string <code>George Boole and Alan Turing went to the shop and got some milk</code>. We can do this by replacing the <code>.+</code> part of our regular expression with the current <code>regular expression</code> with the word <code>and</code>."
|
|
],
|
|
"tests":[
|
|
"assert(test==2, 'Your <code>regular expression</code> should find two occurrences of the word <code>and</code>');",
|
|
"assert(editor.getValue().match(/\\/and\\+\\/gi/), 'You should have used <code>regular expressions</code> to find the word <code>and</code>');"
|
|
],
|
|
"challengeSeed":[
|
|
"var test = (function() {",
|
|
" var testString = \"George Boole and Alan Turing went to the shop and got some milk\";",
|
|
" var expressionToGetMilk = /milk/gi;",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" var expression = /.+/gi;",
|
|
"",
|
|
" // Only change code above this line.",
|
|
" // We use this function to show you the value of your variable in your output box.",
|
|
" return(testString.match(expression).length);",
|
|
"})();(function(){return(test);})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"cf1111c1c12feddfaeb7bdef",
|
|
"title": "Find Numbers with Regular Expressions",
|
|
"difficulty":"9.985",
|
|
"description":[
|
|
"We can use special selectors in <code>Regular Expressions</code> to select a particular type of value.",
|
|
"One such selector is the digit selector <code>\\d</code> which is used to grab the numbers in a string.",
|
|
"It is used like this: <code>/\\d+/g</code>.",
|
|
"Use the <code>\\d</code> selector to select the number of numbers in the string."
|
|
],
|
|
"tests":[
|
|
"assert(test === 2, 'Your RegEx should have found two numbers in the testString');",
|
|
"assert(editor.getValue().match(/\\/\\\\d\\+\\//gi), 'You should be using the following expression /\\d+/gi to find the numbers in the testString');"
|
|
],
|
|
"challengeSeed":[
|
|
"var test = (function() {",
|
|
" var testString = \"There's 3 cats but 4 dogs.\";",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" var expression = /.+/gi;",
|
|
"",
|
|
" // Only change code above this line.",
|
|
" // We use this function to show you the value of your variable in your output box.",
|
|
" return(testString.match(expression).length);",
|
|
"})();(function(){return(test);})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"cf1111c1c12feddfaeb8bdef",
|
|
"title": "Find White Space with Regular Expressions",
|
|
"difficulty":"9.986",
|
|
"description":[
|
|
"We can also use selectors like <code>\\s</code> to find spaces in a string.",
|
|
"It is used like this:",
|
|
"<code>/\\s+/g</code>",
|
|
"Select all the spaces in the sentence string."
|
|
],
|
|
"tests":[
|
|
"assert(test === 7, 'Your RegEx should have found seven spaces in the <code>testString</code>.');",
|
|
"assert(editor.getValue().match(/\\/\\\\s\\+\\//gi), 'You should be using the following expression /\\s+/gi to find the spaces in the <code>testString</code>.');"
|
|
],
|
|
"challengeSeed":[
|
|
"var test = (function(){",
|
|
" var testString = \"How many spaces are there in this sentence?\";",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" var expression = /.+/gi;",
|
|
"",
|
|
" // Only change code above this line.",
|
|
" // We use this function to show you the value of your variable in your output box.",
|
|
" return(testString.match(expression).length);",
|
|
"})();(function(){return(test);})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"cf1111c1c13feddfaeb3bdef",
|
|
"title": "Invert Regular Expression Matches with JavaScript",
|
|
"difficulty":"9.987",
|
|
"description":[
|
|
"Use <code>/\\S/gi;</code> to match everything that isn't a space in the string.",
|
|
"You can invert any match by using the uppercase version of the selector <code>\\s</code> versus <code>\\S</code> for example."
|
|
],
|
|
"tests":[
|
|
"assert(test === 36, 'Your RegEx should have found seven spaces in the <code>testString</code>.');",
|
|
"assert(editor.getValue().match(/\\/\\\\S\\/gi/gi), 'You should be using the following expression <code>/\\+S/gi</code> to find the spaces in the <code>testString</code>.');"
|
|
],
|
|
"challengeSeed":[
|
|
"var test = (function(){",
|
|
" var testString = \"How many spaces are there in this sentence?\";",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" var expression = /./gi;",
|
|
"",
|
|
" // Only change code above this line.",
|
|
" // We use this function to show you the value of your variable in your output box.",
|
|
" return(testString.match(expression).length);",
|
|
"})();(function(){return(test);})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType":1
|
|
},
|
|
{
|
|
"id":"cf1111c1c12feddfaeb9bdef",
|
|
"title": "Create a JavaScript Slot Machine",
|
|
"difficulty":"9.988",
|
|
"description":[
|
|
"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.",
|
|
"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.",
|
|
"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:",
|
|
"<code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code>"
|
|
],
|
|
"tests":[
|
|
"assert(typeof(runSlots($(\".slot\"))[0]) === \"number\", '<code>slotOne</code> should be a random number.')",
|
|
"assert(typeof(runSlots($(\".slot\"))[1]) === \"number\", '<code>slotTwo</code> should be a random number.')",
|
|
"assert(typeof(runSlots($(\".slot\"))[2]) === \"number\", '<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(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/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.')"
|
|
],
|
|
"challengeSeed":[
|
|
"fccss",
|
|
" function runSlots(){",
|
|
" var slotOne;",
|
|
" var slotTwo;",
|
|
" var slotThree;",
|
|
" ",
|
|
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
|
|
" ",
|
|
" // Only change code below this line.",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
" // Only change code above this line.",
|
|
" ",
|
|
" $(\".logger\").html(\"\");",
|
|
" $(\".logger\").html(\"Not A Win\")",
|
|
" ",
|
|
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
|
|
" $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
|
|
" }",
|
|
" return([slotOne, slotTwo, slotThree]);",
|
|
" }",
|
|
"",
|
|
" $(document).ready(function(){",
|
|
" $(\".go\").click(function(){",
|
|
" 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>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id":"cf1111c1c13feddfaeb1bdef",
|
|
"title": "Add your JavaScript Slot Machine Slots",
|
|
"difficulty":"9.989",
|
|
"description":[
|
|
"Now that our slots will each generate random numbers, we need to check whether they've all returned the same number.",
|
|
"If they have, we should notify our user that they've won.",
|
|
"Otherwise, we should return <code>null</code>, which is a JavaScript data structure that means nothing.",
|
|
"If all three numbers match, we should change the value of win to the number that we have three of or leave it as null.",
|
|
"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>  return(null);</code>",
|
|
"<code>}</code>"
|
|
],
|
|
"tests":[
|
|
"assert((function(){var data = runSlots();if(data === null){return(true)}else{if(data[0] === data[1] && data[1] === data[2]){return(true);}else{return(false);}}})(), 'If all three of our random numbers are the same we should return that number. Otherwise we should return null.')"
|
|
],
|
|
"challengeSeed":[
|
|
"fccss",
|
|
" function runSlots(){",
|
|
" var slotOne;",
|
|
" var slotTwo;",
|
|
" var slotThree;",
|
|
" ",
|
|
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
|
|
" ",
|
|
" 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;",
|
|
" ",
|
|
" $(\".logger\").html(\"\");",
|
|
" $(\".logger\").html(\"Not A Win\")",
|
|
" ",
|
|
" // Only change code below this line.",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
" // Only change code above this line.",
|
|
" ",
|
|
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
|
|
" $(\".logger\").html(slotOne);",
|
|
" $(\".logger\").append(\" \" + slotTwo);",
|
|
" $(\".logger\").append(\" \" + slotThree);",
|
|
" }",
|
|
" return([slotOne, slotTwo, slotThree]);",
|
|
" }",
|
|
"",
|
|
" $(document).ready(function(){",
|
|
" $(\".go\").click(function(){",
|
|
" 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>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id":"cf1111c1c13feddfaeb2bdef",
|
|
"title": "Bring your JavaScript Slot Machine to Life",
|
|
"difficulty":"9.990",
|
|
"description":[
|
|
"Now we can detect a win. Let's get this slot machine working.",
|
|
"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>",
|
|
"This jQuery will select the first and update the slot's HTML to display the correct number.",
|
|
"Use the above selector to display each number in its corresponding slot."
|
|
],
|
|
"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((function(){if(editor.match( /\\$\\(\\$\\(\\\"\\.slot\\\"\\)\\[\\d\\]\\)/gi )){if(editor.match( /\\$\\(\\$\\(\\\"\\.slot\\\"\\)\\[\\d\\]\\)/gi ).length >= 3 && editor.match( /\\.html\\(slotOne\\)/gi ) && editor.match( /\\.html\\(slotTwo\\)/gi ) && editor.match( /\\.html\\(slotThree\\)/gi )){return(true);}else{return(false);}}else{return(false);}})(), 'You should have used the the selector given in the description to select each slot and assign it the value of slotOne, slotTwo and slotThree respectively')"
|
|
],
|
|
"challengeSeed":[
|
|
"fccss",
|
|
" function runSlots(){",
|
|
" var slotOne;",
|
|
" var slotTwo;",
|
|
" var slotThree;",
|
|
" ",
|
|
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
|
|
" ",
|
|
" 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;",
|
|
" ",
|
|
" $(\".logger\").html(\"\");",
|
|
" $(\".logger\").html(\"Not A Win\")",
|
|
" ",
|
|
" // Only change code below this line.",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
" // Only change code above this line.",
|
|
" ",
|
|
" if(slotOne !== slotTwo || slotTwo !== slotThree){",
|
|
" return(null);",
|
|
" }",
|
|
" ",
|
|
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
|
|
" $(\".logger\").html(slotOne);",
|
|
" $(\".logger\").append(\" \" + slotTwo);",
|
|
" $(\".logger\").append(\" \" + slotThree);",
|
|
" }",
|
|
" ",
|
|
" return([slotOne, slotTwo, slotThree]);",
|
|
" }",
|
|
"",
|
|
" $(document).ready(function(){",
|
|
" $(\".go\").click(function(){",
|
|
" 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>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id":"cf1111c1c11feddfaeb1bdff",
|
|
"title": "Give your JavaScript Slot Machine some stylish images",
|
|
"difficulty":"9.9901",
|
|
"description":[
|
|
"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('<img src = \"' + images[slotOne-1] + '\">');</code>",
|
|
"Set up all three slots like this, then click the \"Go\" button to play the slot machine."
|
|
],
|
|
"tests":[
|
|
"assert(editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\-1\\]\\s?\\+\\s?\\'\"\\>\\'\\);/gi) && editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\-1\\]\\s?\\+\\s?\\'\"\\>\\'\\);/gi).length >= 3, 'Use the provided code three times. One for each slot')",
|
|
"assert(editor.match(/slotOne/gi) && editor.match(/slotOne/gi).length >= 7, 'You should have used the slotOne value at least once')",
|
|
"assert(editor.match(/slotTwo/gi) && editor.match(/slotTwo/gi).length >= 8, 'You should have used the slotTwo value at least once')",
|
|
"assert(editor.match(/slotThree/gi) && editor.match(/slotThree/gi).length >= 7, 'You should have used the slotThree value at least once')"
|
|
],
|
|
"challengeSeed":[
|
|
"fccss",
|
|
" function runSlots(){",
|
|
" var slotOne;",
|
|
" var slotTwo;",
|
|
" var slotThree;",
|
|
" ",
|
|
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
|
|
" ",
|
|
" 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;",
|
|
" ",
|
|
" $('.logger').html('');",
|
|
" $('.logger').html('Not A Win');",
|
|
" ",
|
|
" // Only change code below this line.",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
" // Only change code above this line.",
|
|
" ",
|
|
" if(slotOne !== slotTwo || slotTwo !== slotThree){",
|
|
" return(null);",
|
|
" }",
|
|
" ",
|
|
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
|
|
" $('.logger').html(slotOne);",
|
|
" $('.logger').append(' ' + slotTwo);",
|
|
" $('.logger').append(' ' + slotThree);",
|
|
" }",
|
|
" ",
|
|
" return([slotOne, slotTwo, slotThree]);",
|
|
" }",
|
|
"",
|
|
" $(document).ready(function(){",
|
|
" $('.go').click(function(){",
|
|
" 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>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
}
|
|
]
|
|
}
|