Merge branch 'staging' of https://github.com/FreeCodeCamp/freecodecamp into staging
This commit is contained in:
Berkeley Martinez
@ -155,8 +155,8 @@
|
||||
"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 firstLetterOfLastName = \"\"",
|
||||
"var firstLetterOfLastName = \"\"",
|
||||
"var firstLetterOfLastName = \"\";",
|
||||
"var firstLetterOfLastName = \"\";",
|
||||
"",
|
||||
"var firstName = \"Ada\";",
|
||||
"",
|
||||
@ -446,14 +446,14 @@
|
||||
"title": "Nest one Array within Another Array",
|
||||
"difficulty":"9.98161",
|
||||
"description":[
|
||||
"You can also nest arrays within other arrays, like this: <code>[[\"Bulls\", 43], \"Jordan\"]</code>.",
|
||||
"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((function(){if(typeof(myArray) !== \"undefined\" && typeof(myArray) === \"object\" && typeof(myArray[0]) !== \"undefined\" && typeof(myArray[0]) === \"object\" && editor.getValue().match(/\\[\\s?\\[/g).length >= 1 && editor.getValue().match(/\\]\\s?\\]/g).length >= 1){return(true);}else{return(false);}})(), 'myArray should contain at least one array');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"var ourArray = [[\"the universe\", \"everything\"], 42];",
|
||||
"var ourArray = [[\"the universe\", \"everything\", 42]];",
|
||||
"var myArray = [];",
|
||||
"",
|
||||
"",
|
||||
@ -754,14 +754,15 @@
|
||||
"assert(myDog.tails === undefined, 'Delete the property \"tails\" from myDog.');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"//var ourDog = {",
|
||||
"//\"name\": \"Camper\"",
|
||||
"//\"legs\": 4",
|
||||
"//\"tails\": 1",
|
||||
"//\"friends\": [\"everything!\"]",
|
||||
"//};",
|
||||
"// var ourDog = {",
|
||||
"// \"name\": \"Camper\"",
|
||||
"// \"legs\": 4",
|
||||
"// \"tails\": 1",
|
||||
"// \"friends\": [\"everything!\"]",
|
||||
"// };",
|
||||
"",
|
||||
"//Re-create myDog",
|
||||
"// ourDog.bark(\"arf!\");",
|
||||
"// delete(ourDog.tails);",
|
||||
"",
|
||||
"var myDog = {",
|
||||
" \"name\": \"Camper\",",
|
||||
@ -769,11 +770,12 @@
|
||||
" \"tails\": 1,",
|
||||
" \"friends\": []",
|
||||
"};",
|
||||
"// Don't change any code above this line.",
|
||||
"",
|
||||
"//Let's add the property bark to myDog",
|
||||
"// Let's add the property bark to myDog",
|
||||
"",
|
||||
"",
|
||||
"//Now delete the property tails",
|
||||
"// Now delete the property tails",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
@ -792,13 +794,13 @@
|
||||
"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>  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(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":[
|
||||
@ -820,13 +822,13 @@
|
||||
"<code>var ourArray = [];</code>",
|
||||
"<code>var i = 0;</code>",
|
||||
"<code>while(i < 5) {</code>",
|
||||
"<code> ourArray.push(i);</code>",
|
||||
"<code> i++;</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(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":[
|
||||
@ -853,7 +855,6 @@
|
||||
"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()",
|
||||
" return(0);",
|
||||
@ -902,18 +903,18 @@
|
||||
"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 twp numbers.",
|
||||
"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 the random number."
|
||||
"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 >= 3 && 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');"
|
||||
"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;",
|
||||
"var min = 0;",
|
||||
"var max = 12;",
|
||||
"function myFunction() {",
|
||||
" // Make myFunction return a random number between zero and nine instead of a decimal",
|
||||
" return(Math.random());",
|
||||
@ -931,17 +932,17 @@
|
||||
"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",
|
||||
"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){",
|
||||
" return(true);",
|
||||
"}",
|
||||
"else{",
|
||||
" return(false);",
|
||||
"}</code>",
|
||||
"Let's have a go of using if statements now by making a coin-flip game",
|
||||
"Create an if else statement to return <code>heads</code> if the flip var is zero and to return <code>tails</code> if it's not"
|
||||
"<code> if (1 == 2) {",
|
||||
"<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');",
|
||||
@ -951,8 +952,8 @@
|
||||
"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 false",
|
||||
" ",
|
||||
" // Create and if else statement here to return \"heads\" if flip is 0. Otherwise return \"tails\".",
|
||||
"",
|
||||
"}",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
@ -967,20 +968,20 @@
|
||||
"title": "Sift through Text with Regular Expressions",
|
||||
"difficulty":"9.984",
|
||||
"description":[
|
||||
"RegEx is a powerful tool we can use to find certain words or patterns in strings",
|
||||
"RegEx can look difficult at first but there's not much to getting it working",
|
||||
"If we wanted to find the number of times the word \"the\" occured in the string \"The dog chased the cat\" We could use the following RegEx:",
|
||||
"RegEx is a powerful tool we can use to find certain words or patterns in strings.",
|
||||
"RegEx can look difficult at first but there's not much to getting it working.",
|
||||
"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 RegEx:",
|
||||
"<code>\/the+\/gi</code>",
|
||||
"Let's break this down a bit",
|
||||
"\"The\" is the pattern we want to match",
|
||||
"\"+\" means we are looking for one or more occurrences of this pattern",
|
||||
"\"g\" means that it searhces the whole string",
|
||||
"\"i\" means that we are ignoring the case(upper or lower) of what we are looking for",
|
||||
"Let's try finding the word and in the string \"John and Alan went to the shop and got some milk\" by replacing the <code>.+</code> in the currnet RegEx with something that will find the word \"and\" and count how many times it occurs"
|
||||
"Let's break this down a bit:",
|
||||
"<code>the</code> is the pattern we want to match.",
|
||||
"<code>+</code> means we are looking for one or more occurrences of this pattern.",
|
||||
"<code>g</code> means that it searches the entire string.",
|
||||
"<code>i</code> means that we are ignoring the case (uppercase or lowercase) of what we are looking for.",
|
||||
"Let's try finding the word and in the string <code>John and Alan went to the shop and got some milk</code> by replacing the <code>.+</code> in the current RegEx with something that will find the word <code>and</code> and count how many times it occurs."
|
||||
],
|
||||
"tests":[
|
||||
"assert(test==2, 'You\\'re RegEx should have found two occurances of the word \"and\"');",
|
||||
"assert(editor.getValue().match(/\\/and\\+\\/gi/), 'You should have used this RegEx to find the word \"and\"');"
|
||||
"assert(test==2, 'Your <code>regular expression</code> should have found 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() {",
|
||||
@ -1003,8 +1004,8 @@
|
||||
"title": "Find Numbers with Regular Expressions",
|
||||
"difficulty":"9.985",
|
||||
"description":[
|
||||
"We can use special selectors in RegEx 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",
|
||||
"We can use special selectors in RegEx 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>"
|
||||
],
|
||||
@ -1033,19 +1034,19 @@
|
||||
"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",
|
||||
"We can also use selectors like <code>\\s</code> to find spaces in a string.",
|
||||
"It is used like this:",
|
||||
"<code>/\\s+/g</code>"
|
||||
],
|
||||
"tests":[
|
||||
"assert(test === 7, 'Your RegEx should have found seven spaces in the testString');",
|
||||
"assert(editor.getValue().match(/\\/\\\\s\\+\\//gi), 'You should be using the following expression /\\s+/gi to find the spaces in the testString');"
|
||||
"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 sentance.\";",
|
||||
" var testString = \"How many spaces are there in this sentence.\";",
|
||||
"",
|
||||
" //Do Not Modify Above",
|
||||
" // Do not modify the code above this line.",
|
||||
"",
|
||||
" var expression = /.+/gi;",
|
||||
"",
|
||||
@ -1062,18 +1063,18 @@
|
||||
"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"
|
||||
"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 testString');",
|
||||
"assert(editor.getValue().match(/\\/\\\\S\\/gi/gi), 'You should be using the following expression /\\S+/gi to find the spaces in the testString');"
|
||||
"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 sentance.\";",
|
||||
" var testString = \"How many spaces are there in this sentence.\";",
|
||||
"",
|
||||
" // Do Not Modify Above",
|
||||
" // Do not modify the code above this line.",
|
||||
"",
|
||||
" var expression = /.+/gi;",
|
||||
"",
|
||||
@ -1084,656 +1085,6 @@
|
||||
],
|
||||
"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>5</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 in /challenges/random-whole-numbers-in-a-range",
|
||||
"<code>Math.floor(Math.random() * (5 - 1 + 1)) + 1; </code>"
|
||||
],
|
||||
"tests":[
|
||||
"assert(typeof(runSlots($(\".slot\"))[0]) === \"number\", 'slotOne should be a random number');",
|
||||
"assert(typeof(runSlots($(\".slot\"))[1]) === \"number\", 'slotTwo should be a random number');",
|
||||
"assert(typeof(runSlots($(\".slot\"))[2]) === \"number\", 'slotThree should be a random number');",
|
||||
"assert((function(){if(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?5\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi) !== null){return(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?5\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi).length >= 3);}else{return(false);}})(), 'You should have used Math.floor(Math.random() * (5 - 1 + 1)) + 1; three times to generate your random numbers');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"fccss",
|
||||
" function runSlots(){",
|
||||
" var slotOne;",
|
||||
" var slotTwo;",
|
||||
" var slotThree;",
|
||||
" ",
|
||||
" var images = [\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\"];",
|
||||
" ",
|
||||
" //Don't modify above this line",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" //Don't modify below 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 we have our random numbers we need to go and check for when they are all the same that means we should count it as a win",
|
||||
"Different numbers will have different values so we need to return the matched number or null",
|
||||
"If we get a 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 if statement with multiple conditions to check that all the 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 = [\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\"];",
|
||||
" ",
|
||||
" slotOne = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
|
||||
" slotTwo = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
|
||||
" slotThree = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
|
||||
" ",
|
||||
" $(\".logger\").html(\"\");",
|
||||
" $(\".logger\").html(\"Not A Win\")",
|
||||
" ",
|
||||
" //Don't modify above this line",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" //Don't modify below 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 the slot machine to look like it works",
|
||||
"We're going to use the jQuery selector <code>$(\".slot\")</code> to select all of the slots",
|
||||
"Once they are all selected we can use bracket notation to access each individual one like this",
|
||||
"<code>$($(\".slot\")[0]).html(\"\")</code>",
|
||||
"This will grab the the first slot so that we can add the numbers we generate to them",
|
||||
"Use the above selector to display each number in the 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;",
|
||||
" ",
|
||||
" //Placeholder",
|
||||
" var images = [\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\"];",
|
||||
" ",
|
||||
" slotOne = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
|
||||
" slotTwo = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
|
||||
" slotThree = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
|
||||
" ",
|
||||
" $(\".logger\").html(\"\");",
|
||||
" $(\".logger\").html(\"Not A Win\")",
|
||||
" ",
|
||||
" // Don't modify above this line",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" // Don't modify below 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 that we can detect when the player wins we are going to add an image to each slot depending on the random values we generate",
|
||||
"<code>$($('.slot')[0]).html('<img src = \"' + images[slotOne-1] + '\">');</code>"
|
||||
],
|
||||
"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;",
|
||||
" ",
|
||||
" //Placeholder",
|
||||
" var images = ['https://www.evernote.com/l/AlxaOC8QrXlBjpTdGMe3mBwLN3Yjm-KB5yQB/image.png','https://www.evernote.com/l/AlyXbeIS8axEspbwXD8RzmsaCUIf10snmzgB/image.png','https://www.evernote.com/l/AlxMveeWtopKaajUmTVrnv92mqA_s2uzW-8B/image.png','https://www.evernote.com/l/AlyyRP_Kh_dCG7t8b4JRnwMNCa1JThI_5gQB/image.png', 'https://www.evernote.com/l/Alx64952qUxEhJnBteZvJgxib1qlwQcw9G0B/image.png'];",
|
||||
" ",
|
||||
" slotOne = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
|
||||
" slotTwo = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
|
||||
" slotThree = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
|
||||
" ",
|
||||
" $('.logger').html('');",
|
||||
" $('.logger').html('Not A Win');",
|
||||
" ",
|
||||
" // Don't modify above this line",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" // Don't modify below 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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user