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

Merge pull request #1376 from FreeCodeCamp/js-curriculum

Browse Source 
Js curriculum
This commit is contained in:
benmcmahon100
2015-07-25 00:09:36 +01:00
parent 25d01f1b7b 37d5efed4e
commit 77a0a82118
3 changed files with 467 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

395
seed/challenges/basic-javascript.json
View File

@ -1,6 +1,6 @@
{ {
"name": "Basic JavaScript", "name": "Basic JavaScript",
"order": 0.005, "order": 0.006,
"challenges": [ "challenges": [
{ {
"id":"bd7123c9c441eddfaeb4bdef", "id":"bd7123c9c441eddfaeb4bdef",
@ -265,7 +265,7 @@
"challengeType": 1 "challengeType": 1
}, },
{ {
"id": "bh1111c1c11feddfaeb3bdef", "id": "cf1111c1c11feddfaeb3bdef",
"name": "Magical Maths Addition", "name": "Magical Maths Addition",
"dashedName": "waypoint-magical-maths-addition", "dashedName": "waypoint-magical-maths-addition",
"difficulty": "9.98141", "difficulty": "9.98141",
@ -289,7 +289,7 @@
"challengeType": 1 "challengeType": 1
}, },
{ {
"id": "bh1111c1c11feddfaeb4bdef", "id": "cf1111c1c11feddfaeb4bdef",
"name": "Magical Maths Subtraction", "name": "Magical Maths Subtraction",
"dashedName": "waypoint-magical-maths-subtraction", "dashedName": "waypoint-magical-maths-subtraction",
"difficulty": "9.98142", "difficulty": "9.98142",
@ -313,7 +313,7 @@
"challengeType": 1 "challengeType": 1
}, },
{ {
"id": "bh1111c1c11feddfaeb5bdef", "id": "cf1111c1c11feddfaeb5bdef",
"name": "Magical Maths Multiplication", "name": "Magical Maths Multiplication",
"dashedName": "waypoint-magical-maths-multiplication", "dashedName": "waypoint-magical-maths-multiplication",
"difficulty": "9.98143", "difficulty": "9.98143",
@ -337,7 +337,7 @@
"challengeType": 1 "challengeType": 1
}, },
{ {
"id": "bh1111c1c11feddfaeb6bdef", "id": "cf1111c1c11feddfaeb6bdef",
"name": "Magical Maths Division", "name": "Magical Maths Division",
"dashedName": "waypoint-magical-maths-division", "dashedName": "waypoint-magical-maths-division",
"difficulty": "9.9814", "difficulty": "9.9814",
@ -361,7 +361,7 @@
"challengeType": 1 "challengeType": 1
}, },
{ {
"id": "bh1111c1c11feddfaeb4bdef", "id": "cf1111c1c11feddfaeb4bdef",
"name": "Creating Decimals", "name": "Creating Decimals",
"dashedName": "waypoint-creating-decimals", "dashedName": "waypoint-creating-decimals",
"difficulty": "9.9815", "difficulty": "9.9815",
@ -439,7 +439,7 @@
"challengeType": 1 "challengeType": 1
}, },
{ {
"id": "bh1111c1c11feddfaeb7bdef", "id":"cf1111c1c11feddfaeb7bdef",
"name":"Nesting Arrays", "name":"Nesting Arrays",
"dashedName":"waypoint-nesting-arrays", "dashedName":"waypoint-nesting-arrays",
"difficulty":"9.98161", "difficulty":"9.98161",
@ -470,8 +470,9 @@
"Indexes are written in the same way as bracket notation that we covered earlier", "Indexes are written in the same way as bracket notation that we covered earlier",
"Example:", "Example:",
"<code>", "<code>",
"var array = [1,2,3]", "var array = [1,2,3];",
"array[0]//equals 1", "array[0];//equals 1",
"var data = array[1];",
"</code>", "</code>",
"Create a var called <code>data</code> and set it to equal the first value of <code>myArray</code>" "Create a var called <code>data</code> and set it to equal the first value of <code>myArray</code>"
], ],
@ -490,6 +491,39 @@
], ],
"challengeType": 1 "challengeType": 1
}, },
{
"id":"cf1111c1c11feddfaeb8bdef",
"name":"Modifying Data With Indexes",
"dashedName":"waypoint-modifying-data-with-indexes",
"difficulty":"9.98171",
"description":[
"",
"We are able to modify the data store in an array be using indexes",
"Example:",
"<code>",
"var ourArray = [1,2,3];",
"ourArray[0] = 3;//ourArray equals [3,2,3]",
"</code>",
"Now Let's modify <code>myArray</code> using an index",
""
],
"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 >= 2 && 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[0] = 3;",
"",
"var myArray = [1,2,3];",
"",
"",
"",
"",
"if(typeof(myArray) != 'undefined'){(function(){return(myArray);})();}"
],
"challengeType": 1
},
{ {
"id": "bg9994c9c69feddfaeb9bdef", "id": "bg9994c9c69feddfaeb9bdef",
"name": "Manipulating Arrays With pop()", "name": "Manipulating Arrays With pop()",
@ -602,123 +636,31 @@
"In JavaScript we can divide up our code into separate and reusable parts called functions", "In JavaScript we can divide up our code into separate and reusable parts called functions",
"here's and example of a function", "here's and example of a function",
"<code>", "<code>",
"function funcitonName (one, two ,three){", "function functionName (a, b){",
" /*Some Code*/", " return(a + b);",
"}", "}",
"</code>", "</code>",
"our function can be called like this", "our function can be called like this",
"<code>functionName();</code>", "<code>functionName();</code>",
"Let's try creating and calling a function now." "Let's try creating and calling a function now called <code>myFunction</code>"
], ],
"tests":[ "tests":[
"assert(f==data);" "assert((function(){if(typeof(f) !== 'undefined' && typeof(f) === 'number' && f === 9){return(true);}else{return(false);}})(), 'Your function should return the value of a + b');"
], ],
"challengeSeed":[ "challengeSeed":[
"//var ourData = 'function called!';", "var a = 4;",
"//function ourFunction(ourData) {/*ourData is being passed to this function as an argument*/", "var b = 5;",
"//return(data);", "//Don not modify the above!",
"//}", "//Create a function called myFunction that adds a and b",
"",
"var data = 'Function Called!';",
"",
"//Create a function called myFunction that takes data as an argument and returns it like the example above",
"",
"", "",
"", "",
"", "",
"", "",
"//Don't modify this!", "//Don't modify this!",
"var f=myFunction(data);", "if(typeof(myFunction) != 'undefined'){",
"(function(){var f=myFunction(data);return(f);})('');" "var f=myFunction(a,b);",
], "(function(){return(f);})();",
"challengeType": 1 "}"
},
{
"id": "bg9997c9c99feddfaeb9bdef",
"name": "Doing things inside functions",
"dashedName": "waypoint-doing-things-inside-functions",
"difficulty": "9.982",
"description": [
"",
"A function that takes the value you give it and returns it isn't very useful! So now let's get our functions to do something!",
"Starting from where we were last time let's make our function revers whatever we give it by chaining <code> .split('') </code>, <code> .reverse() </code> and <code> .join('') </code>"
],
"tests": [
"assert(f==data.split('').reverse().join(''), 'myFunction should now return the reversed version of data (!dellaC noitcnuF)');"
],
"challengeSeed": [
"//You can reverse strings like this",
"//var notReversed = 'String';",
"//var reversed = notReversed.split('').reverse().join('');",
"",
"var data = 'Function Called!';",
"",
"function myFunction(data){",
" ",
" return(data);",
"}",
"",
"",
"",
"//Don't modify this!",
"var f=myFunction(data);",
"(function(f){return(f);})(f);"
],
"challengeType": 1
},
{
"id": "bg9997c9c99feddfaeb9bdef",
"name": "Keeping In The Scope Of Things",
"dashedName": "waypoint-keeping-in-the-scope-of-things",
"difficulty": "9.9821",
"description": [
"",
"All variables are contained in something called a <code> scope </code>.",
"A Scope defines where are variable can be accessed.",
"All variables created outside any functions exist in what is called the <code> global scope </code>",
"All variables are container or are scope to inside that function.",
"<code>",
"var variable = 'Global Scope'",
"function test(){",
" return(variable);",
"}",
"test();//Returns Global Scope",
"",
"function change(){",
" variable = 'test';",
" return(variable);",
"}",
"",
"change();//Returns test",
"variable //equals Global Scope",
"",
"</code>",
"Let's give this a go!"
],
"tests": [
"assert(Global == access(Global), 'access should return your Global var');",
"assert(Global != localChange(Global), 'localChange should return your Global var');"
],
"challengeSeed": [
"//Create Your global variable with any value here",
"var Global = _;",
"",
"//Make access() return you global variable",
"function access(){",
" ",
"}",
"",
"access();",
"",
"//Pass you global variable into localChange and modify it within the function",
"function localChange(){",
" ",
"}",
"",
"//Don't forget to call localChange here and pass your global variable",
"",
"",
"(function(x,y,z){return('access returns: ' + y(x) + ' & localChange returns: ' + z(x));})(Global, access, localChange);"
], ],
"challengeType": 1 "challengeType": 1
}, },
@ -816,7 +758,7 @@
"challengeType": 1 "challengeType": 1
}, },
{ {
"id": "bh1111c1c11feddfaeb5bdef", "id":"cf1111c1c11feddfaeb5bdef",
"name":"Looping with for", "name":"Looping with for",
"dashedName":"waypoint-looping-with-for", "dashedName":"waypoint-looping-with-for",
"difficulty":"9.9824", "difficulty":"9.9824",
@ -846,7 +788,7 @@
"challengeType": 1 "challengeType": 1
}, },
{ {
"id": "bh1111c1c11feddfaeb1bdef", "id":"cf1111c1c11feddfaeb1bdef",
"name":"Looping with while", "name":"Looping with while",
"dashedName":"waypoint-looping-with-while", "dashedName":"waypoint-looping-with-while",
"difficulty":"9.9825", "difficulty":"9.9825",
@ -877,7 +819,7 @@
"challengeType": 1 "challengeType": 1
}, },
{ {
"id": "bh1111c1c11feddfaeb2bdef", "id":"cf1111c1c11feddfaeb2bdef",
"name":"Looping with do while", "name":"Looping with do while",
"dashedName":"waypoint-looping-with-do-while", "dashedName":"waypoint-looping-with-do-while",
"difficulty":"9.9826", "difficulty":"9.9826",
@ -906,6 +848,227 @@
"" ""
], ],
"challengeType": 1 "challengeType": 1
},
{
"id":"cf1111c1c11feddfaeb9bdef",
"name":"Random Numbers",
"dashedName":"waypoint-random-numbers",
"difficulty":"9.9827",
"description":[
"",
"Random numbers are a very useful for creating random behaviours and games",
"Javascript has a <code>Math.random()</code> method that can generate a random decimal number",
"Let's have a go of <code>Math.random()</code> now be getting <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()",
" return(0);",
"}",
"",
"(function(){return(myFunction());})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c12feddfaeb1bdef",
"name":"Random Whole Numbers",
"dashedName":"waypoint-random-whole-numbers",
"difficulty":"9.9828",
"description":[
"",
"While it's great that we can create random decimal numbers it's a 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 between zero and nine instead of a float",
" return(Math.random());",
"}",
"",
"(function(){return(myFunction());})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c12feddfaeb2bdef",
"name":"Random Whole Numbers In a Range",
"dashedName":"waypoint-random-whole-numbers-in-a-range",
"difficulty":"9.9829",
"description":[
"",
"We can use a certain mathematical expression to get a random number between between twp numbers.",
"<code>Math.floor(Math.random() * (max - min + 1)) + min</code>",
"By using this we can control the output of the 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');"
],
"challengeSeed":[
" var min = 0;",
" var max = 12;",
"function myFunction(){",
" //Make myFunction return a random number between zero and nine instead of a float",
" return(Math.random());",
"}",
"",
"(function(){return(myFunction());})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c12feddfaeb3bdef",
"name":"If Else Statements",
"dashedName":"waypoint-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){",
" 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"
],
"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 false",
" ",
"}",
"",
"(function(){return(myFunction());})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c12feddfaeb6bdef",
"name":"An Intro To RegEx",
"dashedName":"waypoint-an-intro-to-regex",
"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:",
"<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"
],
"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\"');"
],
"challengeSeed":[
"var test = (function(){",
" var testString = \"John and Alan went to the shop and got some milk\";",
"",
"//Do Not Modify Above",
"",
" var expression = /.+/gi;",
"",
"//Do Not Modify Below",
"",
" return(testString.match(expression).length);",
"})();(function(){return(test);})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c12feddfaeb7bdef",
"name":"Finding Numbers",
"dashedName":"waypoint-finding-numbers",
"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",
"It is used like this:",
"<code>/\\d+/g</code>",
""
],
"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.\"",
"",
"//Do Not Modify Above",
"",
" var expression = /.+/gi;",
"",
"//Do Not Modify Below",
"",
" return(testString.match(expression).length);",
"})();(function(){return(test);})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c12feddfaeb8bdef",
"name":"Finding WhiteSpace",
"dashedName":"waypoint-finding-whitespace",
"difficulty":"9.987",
"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>",
""
],
"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');"
],
"challengeSeed":[
"var test = (function(){",
" var testString = \"How many spaces are there in this sentance.\";",
"",
"//Do Not Modify Above",
"",
" var expression = /.+/gi;",
"",
"//Do Not Modify Below",
"",
" return(testString.match(expression).length);",
"})();(function(){return(test);})();"
],
"challengeType": 1
} }
] ]
} }

105
seed/challenges/html5-and-css.json
View File

@ -8,11 +8,10 @@
"dashedName": "waypoint-say-hello-to-html-elements", "dashedName": "waypoint-say-hello-to-html-elements",
"difficulty": 0.001, "difficulty": 0.001,
"description": [ "description": [
"Welcome to Free Code Camp's first coding challenge! Click on the button below for further instructions.", "Welcome to Free Code Camp's first coding challenge!",
"Awesome. Now you can read the rest of this challenge's instructions.",
"You can edit <code>code</code> in your <code>text editor</code>, which we've embedded into this web page.", "You can edit <code>code</code> in your <code>text editor</code>, which we've embedded into this web page.",
"Do you see the code in your text editor that says <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? That's an HTML <code>element</code>.", "Do you see the code in your text editor that says <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? That's an HTML <code>element</code>.",
"Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>. Opening tags look like this: <code>&#60;h1&#62;</code>. Closing tags look like this: <code>&#60;/h1&#62;</code>. Note that the only difference between opening and closing tags is that closing tags have a slash after their opening angle bracket.", "Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>. Opening tags look like this: <code>&#60;h1&#62;</code>. Closing tags look like this: <code>&#60;/h1&#62;</code>. Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.",
"Once you've completed each challenge, and all its tests are passing, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.", "Once you've completed each challenge, and all its tests are passing, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.",
"To enable the \"Go to my next challenge\" button on this exercise, change your <code>h1</code> tag's text to say \"Hello World\" instead of \"Hello\"." "To enable the \"Go to my next challenge\" button on this exercise, change your <code>h1</code> tag's text to say \"Hello World\" instead of \"Hello\"."
], ],
@ -240,11 +239,10 @@
"dashedName": "waypoint-fill-in-the-blank-with-placeholder-text", "dashedName": "waypoint-fill-in-the-blank-with-placeholder-text",
"difficulty": 0.007, "difficulty": 0.007,
"description": [ "description": [
"Replace the text inside your <code>p</code> element with the first few words of the provided \"Kitty Ipsum\" text.",
"Web developers traditionally use \"Lorem Ipsum\" text as placeholder text. It's called \"Lorem Ipsum\" text because those are the first two words of a famous passage by Cicero of Ancient Rome.", "Web developers traditionally use \"Lorem Ipsum\" text as placeholder text. It's called \"Lorem Ipsum\" text because those are the first two words of a famous passage by Cicero of Ancient Rome.",
"\"Lorem Ipsum\" text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.", "\"Lorem Ipsum\" text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
"Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called \"Kitty Ipsum\"!", "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called \"Kitty Ipsum\"!",
"Here are the first few words of \"Kitty Ipsum\" text, which you can copy and paste into the right position: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>" "Replace the text inside your <code>p</code> element with the first few words of this \"Kitty Ipsum\" text: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
], ],
"tests": [ "tests": [
"assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your <code>p</code> element should contain the first few words of the provided \"Kitty Ipsum\" text.')" "assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your <code>p</code> element should contain the first few words of the provided \"Kitty Ipsum\" text.')"
@ -528,9 +526,9 @@
"dashedName": "waypoint-change-the-font-size-of-an-element", "dashedName": "waypoint-change-the-font-size-of-an-element",
"difficulty": 0.013, "difficulty": 0.013,
"description": [ "description": [
"Create a second <code>p</code> element. Then, inside your <code>&#60;style&#62;</code> element, set the \"font-size\" of all <code>p</code> elements to 16 pixels.", "Create a second <code>p</code> element with the following Kitty Ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
"Then, inside your <code>&#60;style&#62;</code> element, set the \"font-size\" of all <code>p</code> elements to 16 pixels.",
"Font size is controlled by the \"font-size\" CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.", "Font size is controlled by the \"font-size\" CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.",
"First, create a second <code>p</code> element with the following Kitty Ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code>&#60;style&#62;</code> tag that we created for your \"red-text\" class." "See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code>&#60;style&#62;</code> tag that we created for your \"red-text\" class."
], ],
"tests": [ "tests": [
@ -676,15 +674,15 @@
"dashedName": "waypoint-specify-how-fonts-should-degrade", "dashedName": "waypoint-specify-how-fonts-should-degrade",
"difficulty": 0.016, "difficulty": 0.016,
"description": [ "description": [
"Make all your <code>h2</code> elements use \"Lobster\" as their font family, but degrade to the \"Monospace\" font when the \"Lobster\" font isn't available.", "There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". Leave \"Lobster\" as the font-family for your <code>h2</code> elements. Make them \"degrade\" to \"Monospace\" when \"Lobster\" isn't available.",
"You can leave \"Lobster\" your <code>h2</code> element's font-family, and have it \"degrade\" to a different font when \"Lobster\" isn't available.",
"For example, if you wanted an element to use the \"Helvetica\" font, but also degrade to the \"Sans-Serif\" font when \"Helvetica\" wasn't available, you could use this CSS style: <code>p { font-family: Helvetica, Sans-Serif; }</code>.", "For example, if you wanted an element to use the \"Helvetica\" font, but also degrade to the \"Sans-Serif\" font when \"Helvetica\" wasn't available, you could use this CSS style: <code>p { font-family: Helvetica, Sans-Serif; }</code>.",
"There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". See if you can set your <code>h2</code> elements to use \"Lobster\" and degrade to \"Monospace\".", "Now comment out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font."
"Now try commenting out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font."
], ],
"tests": [ "tests": [
"assert($('h2').css('font-family').match(/^\"?lobster/i), 'Your h2 element should use the font \"Lobster\".')", "assert($('h2').css('font-family').match(/^\"?lobster/i), 'Your h2 element should use the font \"Lobster\".')",
"assert($('h2').css('font-family').match(/lobster\"?,monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')" "assert($('h2').css('font-family').match(/lobster.*,.*monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')",
"assert(new RegExp('<!--', 'gi').test(editor), 'Comment out your call to Google for the \"Lobster\" font by putting <code>&#60!-- in front of it.')",
"assert(new RegExp('-->', 'gi').test(editor), 'Be sure to close your comment by deleting all trailing comment tags&#44; i.e. <code>--&#62;</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -734,7 +732,6 @@
"dashedName": "waypoint-add-images-to-your-website", "dashedName": "waypoint-add-images-to-your-website",
"difficulty": 0.017, "difficulty": 0.017,
"description": [ "description": [
"Use an <code>img</code> element to add the image <code>http://bit.ly/fcc-kittens</code> to your website.",
"You can add images to your website by using the <code>img</code> element, and point to an specific image's URL using the <code>src</code> attribute.", "You can add images to your website by using the <code>img</code> element, and point to an specific image's URL using the <code>src</code> attribute.",
"An example of this would be <code>&#60img src=\"www.your-image-source.com/your-image.jpg\"/&#62</code>. Note that in most cases, <code>img</code> elements are self-closing.", "An example of this would be <code>&#60img src=\"www.your-image-source.com/your-image.jpg\"/&#62</code>. Note that in most cases, <code>img</code> elements are self-closing.",
"Try it with this image: <code>http://bit.ly/fcc-kittens</code>." "Try it with this image: <code>http://bit.ly/fcc-kittens</code>."
@ -790,9 +787,9 @@
"dashedName": "waypoint-size-your-images", "dashedName": "waypoint-size-your-images",
"difficulty": 0.018, "difficulty": 0.018,
"description": [ "description": [
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.",
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the image's width.", "CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the image's width.",
"For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <code>&#60;style&#62; .larger-image { width: 500px; } &#60;/style&#62;</code>." "For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <code>&#60;style&#62; .larger-image { width: 500px; } &#60;/style&#62;</code>.",
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
], ],
"tests": [ "tests": [
"assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')", "assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')",
@ -846,9 +843,9 @@
"dashedName": "waypoint-add-borders-around-your-elements", "dashedName": "waypoint-add-borders-around-your-elements",
"difficulty": 0.019, "difficulty": 0.019,
"description": [ "description": [
"Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo.",
"CSS borders have attributes like style, color and width.", "CSS borders have attributes like style, color and width.",
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code>&#60;style&#62; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#60;/style&#62;</code>." "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code>&#60;style&#62; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#60;/style&#62;</code>.",
"Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo."
], ],
"tests": [ "tests": [
"assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')", "assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')",
@ -909,9 +906,9 @@
"dashedName": "waypoint-add-rounded-corners-with-a-border-radius", "dashedName": "waypoint-add-rounded-corners-with-a-border-radius",
"difficulty": 0.020, "difficulty": 0.020,
"description": [ "description": [
"Give your cat photo a <code>border-radius</code> of 10 pixels.",
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.", "Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.",
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels." "You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels.",
"Give your cat photo a <code>border-radius</code> of 10 pixels."
], ],
"tests": [ "tests": [
"assert($('img').hasClass('thick-green-border'), 'Your image element should have the class \"thick-green-border\".')", "assert($('img').hasClass('thick-green-border'), 'Your image element should have the class \"thick-green-border\".')",
@ -975,8 +972,8 @@
"dashedName": "waypoint-make-circular-images-with-a-border-radius", "dashedName": "waypoint-make-circular-images-with-a-border-radius",
"difficulty": 0.021, "difficulty": 0.021,
"description": [ "description": [
"Give your cat photo a <code>border-radius</code> of 50%.", "In addition to pixels, you can also specify a <code>border-radius</code> using a percentage.",
"In addition to pixels, you can also specify a <code>border-radius</code> using a percentage." "Give your cat photo a <code>border-radius</code> of 50%."
], ],
"tests": [ "tests": [
"assert(parseInt($('img').css('border-top-left-radius')) > 48, 'Your image should have a border radius of 50 percent&#44; making it perfectly circular.')", "assert(parseInt($('img').css('border-top-left-radius')) > 48, 'Your image should have a border radius of 50 percent&#44; making it perfectly circular.')",
@ -1040,10 +1037,11 @@
"dashedName": "waypoint-link-to-external-pages-with-anchor-elements", "dashedName": "waypoint-link-to-external-pages-with-anchor-elements",
"difficulty": 0.022, "difficulty": 0.022,
"description": [ "description": [
"Create an <code>a</code> element, or \"anchor element\", that links to http://catphotoapp.com and has \"cat photos\" as its link text, or \"anchor text\".", "<code>a</code> elements or \"anchor\" elements, are used to link to content outside of the current page.",
"Here's a diagram of an <code>a</code> element. In this case, it's used in the middle of a paragraph element, which means your link will appear in the middle of your sentence.", "Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>", "<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
"Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>." "Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>.",
"Create an <code>a</code> element that links to <code>http://catphotoapp.com</code> and has \"cat photos\" as its \"anchor text\"."
], ],
"tests": [ "tests": [
"assert((/cat photos/gi).test($('a').text()), 'Your <code>a</code> element should have the anchor text of \"cat photos\"')", "assert((/cat photos/gi).test($('a').text()), 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
@ -1110,10 +1108,10 @@
"dashedName": "waypoint-wrap-an-anchor-element-within-a-paragraph", "dashedName": "waypoint-wrap-an-anchor-element-within-a-paragraph",
"difficulty": 0.023, "difficulty": 0.023,
"description": [ "description": [
"Now wrap your <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text.",
"Again, here's a diagram of an <code>a</code> element for your reference:", "Again, here's a diagram of an <code>a</code> element for your reference:",
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>", "<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
"Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>." "Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>.",
"Now wrap your <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text."
], ],
"tests": [ "tests": [
"assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"catphotoapp.com\".')", "assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"catphotoapp.com\".')",
@ -1185,10 +1183,9 @@
"dashedName": "waypoint-make-dead-links-using-the-hash-symbol", "dashedName": "waypoint-make-dead-links-using-the-hash-symbol",
"difficulty": 0.024, "difficulty": 0.024,
"description": [ "description": [
"Use the hash symbol (#) to turn your <code>a</code> element's link into a dead link.",
"Sometimes you want to add <code>a</code> elements to your website before you know where they will link.", "Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
"This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.", "This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
"Replace your <code>a</code> element's <code>href</code> attribute with a hash symbol to turn it into a dead link." "Replace your <code>a</code> element's <code>href</code> attribute with a hash symbol (#) to turn it into a dead link."
], ],
"tests": [ "tests": [
"assert($('a').attr('href') === '#', 'Your <code>anchor</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')" "assert($('a').attr('href') === '#', 'Your <code>anchor</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')"
@ -1255,7 +1252,6 @@
"dashedName": "waypoint-turn-an-image-into-a-link", "dashedName": "waypoint-turn-an-image-into-a-link",
"difficulty": 0.025, "difficulty": 0.025,
"description": [ "description": [
"Wrap your <code>img</code> element inside an <code>a</code> element with a dead link.",
"You can make elements into links by wrapping them within an <code>a</code> element.", "You can make elements into links by wrapping them within an <code>a</code> element.",
"Wrap your image within an <code>a</code> element. Here's an example: <code>&#60;a href='#'&#62;&#60;img src='http://bit.ly/fcc-kittens2'/&#62;&#60;/a&#62;</code>.", "Wrap your image within an <code>a</code> element. Here's an example: <code>&#60;a href='#'&#62;&#60;img src='http://bit.ly/fcc-kittens2'/&#62;&#60;/a&#62;</code>.",
"Remember to use the hash symbol (#) as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.", "Remember to use the hash symbol (#) as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
@ -1329,11 +1325,11 @@
"dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility", "dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility",
"difficulty": 0.026, "difficulty": 0.026,
"description": [ "description": [
"Add an <code>alt</code> attribute with the text \"A cute orange cat lying on its back\" to our cat photo.",
"<code>alt</code> attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. Search engines also look at <code>alt</code> attributes.", "<code>alt</code> attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. Search engines also look at <code>alt</code> attributes.",
"In short, every image should have an <code>alt</code> attribute!", "In short, every image should have an <code>alt</code> attribute!",
"<code>alt</code> attributes are a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.", "<code>alt</code> attributes are a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.",
"You can add an <code>alt</code> attribute right in the img element like this: <code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/&#62</code>." "You can add an <code>alt</code> attribute right in the img element like this: <code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/&#62</code>.",
"Add an <code>alt</code> attribute with the text \"A cute orange cat lying on its back\" to our cat photo."
], ],
"tests": [ "tests": [
"assert($('img').filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an <code>alt</code> attribute set to \"A cute orange cat lying on its back\".')" "assert($('img').filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an <code>alt</code> attribute set to \"A cute orange cat lying on its back\".')"
@ -1401,10 +1397,10 @@
"dashedName": "waypoint-create-a-bulleted-unordered-list", "dashedName": "waypoint-create-a-bulleted-unordered-list",
"difficulty": 0.027, "difficulty": 0.027,
"description": [ "description": [
"Replace your <code>p</code> elements with an unordered list of three things that cats love.",
"HTML has a special element for creating unordered lists, or bullet point-style lists.", "HTML has a special element for creating unordered lists, or bullet point-style lists.",
"Unordered lists start with a <code>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.", "Unordered lists start with a <code>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
"For example: <code>&#60;ul&#62;&#60;li&#62;milk&#60;/li&#62;&#60;li&#62;cheese&#60;/li&#62;&#60;/ul&#62;</code> would create a bulleted list of \"milk\" and \"cheese\"." "For example: <code>&#60;ul&#62;&#60;li&#62;milk&#60;/li&#62;&#60;li&#62;cheese&#60;/li&#62;&#60;/ul&#62;</code> would create a bulleted list of \"milk\" and \"cheese\".",
"Replace your <code>p</code> elements with an unordered list of three things that cats love."
], ],
"tests": [ "tests": [
"assert($('ul').length > 0, 'Create a <code>ul</code> element.')", "assert($('ul').length > 0, 'Create a <code>ul</code> element.')",
@ -1474,10 +1470,10 @@
"dashedName": "waypoint-create-an-ordered-list", "dashedName": "waypoint-create-an-ordered-list",
"difficulty": 0.028, "difficulty": 0.028,
"description": [ "description": [
"Create an ordered list of the top 3 things cats hate the most.",
"HTML has a special element for creating ordered lists, or numbered-style lists.", "HTML has a special element for creating ordered lists, or numbered-style lists.",
"Ordered lists start with a <code>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.", "Ordered lists start with a <code>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
"For example: <code>&#60;ol&#62;&#60;li&#62;hydrogen&#60;/li&#62;&#60;li&#62;helium&#60;/li&#62;&#60;/ol&#62;</code> would create a numbered list of \"hydrogen\" and \"helium\"." "For example: <code>&#60;ol&#62;&#60;li&#62;hydrogen&#60;/li&#62;&#60;li&#62;helium&#60;/li&#62;&#60;/ol&#62;</code> would create a numbered list of \"hydrogen\" and \"helium\".",
"Create an ordered list of the top 3 things cats hate the most."
], ],
"tests": [ "tests": [
"assert($('ul').length > 0, 'You should have an <code>ul</code> element on your page.')", "assert($('ul').length > 0, 'You should have an <code>ul</code> element on your page.')",
@ -1554,9 +1550,10 @@
"dashedName": "waypoint-create-a-text-field", "dashedName": "waypoint-create-a-text-field",
"difficulty": 0.029, "difficulty": 0.029,
"description": [ "description": [
"Now we'll create a web form. Create a text input under your lists.", "Now let's create a web form.",
"Text inputs are a convenient way to get input from your user.", "Text inputs are a convenient way to get input from your user.",
"You can create one like this: <code>&#60;input type='text'&#62;</code>. Note that <code>input</code> elements are self-closing." "You can create one like this: <code>&#60;input type=\"text\"&#62;</code>. Note that <code>input</code> elements are self-closing.",
"Create an <code>input</code> element of type \"text\" below your lists."
], ],
"tests": [ "tests": [
"assert($('input').length > 0, 'Your app should have a text field input element.')" "assert($('input').length > 0, 'Your app should have a text field input element.')"
@ -1632,9 +1629,9 @@
"dashedName": "waypoint-add-placeholder-text-to-a-text-field", "dashedName": "waypoint-add-placeholder-text-to-a-text-field",
"difficulty": 0.030, "difficulty": 0.030,
"description": [ "description": [
"Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\".",
"Your placeholder text is what appears in your text <code>input</code> before your user has inputed anything.", "Your placeholder text is what appears in your text <code>input</code> before your user has inputed anything.",
"You can create placeholder text like so: <code>&#60;input type='text' placeholder='this is placeholder text'&#62;</code>." "You can create placeholder text like so: <code>&#60;input type='text' placeholder='this is placeholder text'&#62;</code>.",
"Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\"."
], ],
"tests": [ "tests": [
"assert($('input[placeholder]').length > 0, 'Add a <code>placeholder</code> attribute text <code>input</code> element.')", "assert($('input[placeholder]').length > 0, 'Add a <code>placeholder</code> attribute text <code>input</code> element.')",
@ -1712,9 +1709,9 @@
"dashedName": "waypoint-create-a-form-element", "dashedName": "waypoint-create-a-form-element",
"difficulty": 0.031, "difficulty": 0.031,
"description": [ "description": [
"Wrap your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element.",
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.", "You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
"For example: <code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>." "For example: <code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>.",
"Wrap your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
], ],
"tests": [ "tests": [
"assert($('form') && $('form').children('input') && $('form').children('input').length > 0, 'Wrap your text input element within a <code>form</code> element.')", "assert($('form') && $('form').children('input') && $('form').children('input').length > 0, 'Wrap your text input element within a <code>form</code> element.')",
@ -1794,9 +1791,9 @@
"dashedName": "waypoint-add-a-submit-button-to-a-form", "dashedName": "waypoint-add-a-submit-button-to-a-form",
"difficulty": 0.032, "difficulty": 0.032,
"description": [ "description": [
"Add a submit button to your <code>form</code> element with type \"submit\" and \"Submit\" as its text.",
"Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.", "Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
"Here's an example submit button: <code>&#60;button type='submit'&#62;this button submits the form&#60;/button&#62;</code>." "Here's an example submit button: <code>&#60;button type='submit'&#62;this button submits the form&#60;/button&#62;</code>.",
"Add a submit button to your <code>form</code> element with type \"submit\" and \"Submit\" as its text."
], ],
"tests": [ "tests": [
"assert($('form').children('button').length > 0, 'Your form should have a button inside it.')", "assert($('form').children('button').length > 0, 'Your form should have a button inside it.')",
@ -1878,9 +1875,9 @@
"dashedName": "waypoint-use-html5-to-require-a-field", "dashedName": "waypoint-use-html5-to-require-a-field",
"difficulty": 0.033, "difficulty": 0.033,
"description": [ "description": [
"Make your text <code>input</code> a \"required\" field, so that your user can't submit the form without completing this field.",
"You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.", "You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.",
"For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element, you would use: <code>&#60;input type='text' required&#62;</code>." "For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element, you would use: <code>&#60;input type='text' required&#62;</code>.",
"Make your text <code>input</code> a \"required\" field, so that your user can't submit the form without completing this field."
], ],
"tests": [ "tests": [
"assert($('input').prop('required'), 'Your text <code>input</code> element should have the \"required\" attribute.')" "assert($('input').prop('required'), 'Your text <code>input</code> element should have the \"required\" attribute.')"
@ -1960,12 +1957,12 @@
"dashedName": "waypoint-create-a-set-of-radio-buttons", "dashedName": "waypoint-create-a-set-of-radio-buttons",
"difficulty": 0.034, "difficulty": 0.034,
"description": [ "description": [
"Add to your form a pair of radio buttons. Each radio button should be wrapped within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\".",
"You can use radio buttons for questions where you want the user to only give you one answer.", "You can use radio buttons for questions where you want the user to only give you one answer.",
"Radio buttons are a type of <code>input</code>.", "Radio buttons are a type of <code>input</code>.",
"Each of your radio buttons should be wrapped within its own <code>label</code> elements.", "Each of your radio buttons should be wrapped within its own <code>label</code> elements.",
"All related radio buttons should have the same <code>name</code> attribute.", "All related radio buttons should have the same <code>name</code> attribute.",
"Here's an example of a radio button: <code>&#60;label&#62;&#60;input type='radio' name='indoor-outdoor'&#62; Indoor&#60;/label&#62;</code>." "Here's an example of a radio button: <code>&#60;label&#62;&#60;input type='radio' name='indoor-outdoor'&#62; Indoor&#60;/label&#62;</code>.",
"Add to your form a pair of radio buttons. Each radio button should be wrapped within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\"."
], ],
"tests": [ "tests": [
"assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')", "assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')",
@ -2053,9 +2050,9 @@
"dashedName": "waypoint-create-a-set-of-checkboxes", "dashedName": "waypoint-create-a-set-of-checkboxes",
"difficulty": 0.035, "difficulty": 0.035,
"description": [ "description": [
"Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\".",
"Forms commonly use checkbox inputs for questions that may have more than one answer.", "Forms commonly use checkbox inputs for questions that may have more than one answer.",
"For example: <code>&#60;label&#62;&#60;input type='checkbox' name='personality'&#62; Loving&#60;/label&#62;</code>." "For example: <code>&#60;label&#62;&#60;input type='checkbox' name='personality'&#62; Loving&#60;/label&#62;</code>.",
"Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\"."
], ],
"tests": [ "tests": [
"assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')", "assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')",
@ -2140,9 +2137,9 @@
"dashedName": "waypoint-check-radio-buttons-and-checkboxes-by-default", "dashedName": "waypoint-check-radio-buttons-and-checkboxes-by-default",
"difficulty": 0.037, "difficulty": 0.037,
"description": [ "description": [
"Set the first of your radio buttons and the first of your checkboxes to both be checked by default.", "You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
"You set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.", "To do this, just add the word \"checked\" to the inside of an input element. For example, <code>&#60;input type='radio' name='test-name' checked&#62;</code>.",
"To do this, just add the word \"checked\" to the inside of an input element. For example, <code>&#60;input type='radio' name='test-name' checked&#62;</code>." "Set the first of your radio buttons and the first of your checkboxes to both be checked by default."
], ],
"tests": [ "tests": [
"assert($('input[type=\"radio\"]').prop('checked'), 'Your first radio button on your form should be checked by default.');", "assert($('input[type=\"radio\"]').prop('checked'), 'Your first radio button on your form should be checked by default.');",
@ -2228,11 +2225,11 @@
"dashedName": "waypoint-wrap-many-elements-within-a-single-div-element", "dashedName": "waypoint-wrap-many-elements-within-a-single-div-element",
"difficulty": 0.038, "difficulty": 0.038,
"description": [ "description": [
"Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element.",
"The <code>div</code> element, or \"Division\" element, is a general purpose container for other elements.", "The <code>div</code> element, or \"Division\" element, is a general purpose container for other elements.",
"The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.", "The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
"Just like any other non-self-closing element, you can open a <code>div</code> element with <code>&#60;div&#62;</code> and close it on another line with <code>&#60;/div&#62;</code>.", "Just like any other non-self-closing element, you can open a <code>div</code> element with <code>&#60;div&#62;</code> and close it on another line with <code>&#60;/div&#62;</code>.",
"Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>." "Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>.",
"Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
], ],
"tests": [ "tests": [
"assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')", "assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')",

95
server/views/coursewares/showJS.jade
View File

@ -1,88 +1,105 @@
extends ../layout-wide extends ../layout-wide
block content block content
script(src='/js/lib/codemirror/lib/codemirror.js') script(type='text/javascript', src='/js/lib/codemirror/lib/codemirror.js')
script(src='/js/lib/codemirror/addon/edit/closebrackets.js') script(type='text/javascript', src='/js/lib/codemirror/addon/edit/closebrackets.js')
script(src='/js/lib/codemirror/addon/edit/matchbrackets.js') script(type='text/javascript', src='/js/lib/codemirror/addon/edit/matchbrackets.js')
script(src='/js/lib/codemirror/addon/lint/lint.js') script(type='text/javascript', src='/js/lib/codemirror/addon/lint/lint.js')
script(src='/js/lib/codemirror/addon/lint/javascript-lint.js') script(type='text/javascript', src='/js/lib/codemirror/addon/lint/javascript-lint.js')
script(src='/bower_components/jshint/dist/jshint.js') script(type='text/javascript', src='/bower_components/jshint/dist/jshint.js')
script(src='/js/lib/chai/chai.js') script(type='text/javascript', src='/js/lib/chai/chai.js')
link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css') link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css')
link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css') link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css')
link(rel='stylesheet', href='/js/lib/codemirror/theme/monokai.css') link(rel='stylesheet', href='/js/lib/codemirror/theme/monokai.css')
link(rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono") link(rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono")
script(src='/js/lib/codemirror/mode/javascript/javascript.js') script(type='text/javascript', src='/js/lib/codemirror/mode/javascript/javascript.js')
script(src='/js/lib/jailed/jailed.js') script(type='text/javascript', src='/js/lib/jailed/jailed.js')
script(src='/js/lib/coursewares/sandbox.js') script(type='text/javascript', src='/js/lib/coursewares/sandbox.js')
.row .row(ng-controller="pairedWithController")
.col-xs-12.col-sm-12.col-md-4.bonfire-top .col-xs-12.col-sm-12.col-md-4.col-lg-3
.scroll-locker .scroll-locker
#testCreatePanel #testCreatePanel.well
h1.text-center= name h3.text-center.negative-10= name
.well
.row .row
.col-xs-12 .col-xs-12
.bonfire-instructions .bonfire-instructions
p.wrappable= brief
#brief-instructions
#more-info.btn.btn-primary.btn-block.btn-primary-ghost
span.ion-arrow-down-b
| More information
#long-instructions.row.hide
.col-xs-12
for sentence in details for sentence in details
p.wrappable!= sentence p.wrappable.negative-10!= sentence
#less-info.btn.btn-primary.btn-block.btn-primary-ghost .negative-bottom-margin-30
span.ion-arrow-up-b #MDN-links
| Less information p.negative-10 Here are some helpful links:
#submitButton.btn.btn-primary.btn-big.btn-block Run code (ctrl + enter) for link, index in MDNlinks
.negative-10
ul: li: a(href="" + link, target="_blank") !{MDNkeys[index]}
if (user)
form.form-horizontal(novalidate='novalidate', name='completedWithForm')
.form-group.text-center.negative-10
.col-xs-12
// extra field to distract password tools like lastpass from injecting css into our username field
label.negative-10.btn.btn-primary.btn-block#submitButton
i.fa.fa-play
| &nbsp; Run code (ctrl + enter)
.button-spacer .button-spacer
.btn-group.input-group.btn-group-justified .btn-group.input-group.btn-group-justified
label.btn.btn-success#trigger-reset-modal
i.fa.fa-refresh
| &nbsp; Reset
label.btn.btn-success#trigger-help-modal label.btn.btn-success#trigger-help-modal
i.fa.fa-medkit i.fa.fa-medkit
| &nbsp; Help | &nbsp; Help
label.btn.btn-success#trigger-pair-modal
i.fa.fa-user-plus
| &nbsp; Pair
label.btn.btn-success#trigger-issue-modal label.btn.btn-success#trigger-issue-modal
i.fa.fa-bug i.fa.fa-bug
| &nbsp; Bug | &nbsp; Bug
.spacer .button-spacer
form.code form.code
.form-group.codeMirrorView .form-group.codeMirrorView
textarea#codeOutput(style='display: none;') textarea#codeOutput(style='display: none;')
br br
#testSuite #testSuite.negative-10
br br
script(type="text/javascript"). script(type="text/javascript").
var tests = !{JSON.stringify(tests)}; var tests = !{JSON.stringify(tests)};
var challengeSeed = !{JSON.stringify(challengeSeed)}; var challengeSeed = !{JSON.stringify(challengeSeed)};
var challenge_Id = !{JSON.stringify(challengeId)}; var challenge_Id = !{JSON.stringify(challengeId)};
var challenge_Name = !{JSON.stringify(name)}; var challenge_Name = !{JSON.stringify(name)};
var challengeType = !{JSON.stringify(challengeType)};
var started = Math.floor(Date.now()); var started = Math.floor(Date.now());
var challengeType = !{JSON.stringify(challengeType)};
var _ = R;
var dashed = !{JSON.stringify(dashedName)};
.col-xs-12.col-sm-12.col-md-8 .col-xs-12.col-sm-12.col-md-8
#mainEditorPanel #mainEditorPanel
form.code form.code
.form-group.codeMirrorView .form-group.codeMirrorView
textarea#codeEditor(autofocus=true, style='display: none;') textarea#codeEditor(autofocus=true, style='display: none;')
script(src='/js/lib/coursewares/coursewaresJSFramework_0.0.5.js') script(src='/js/lib/coursewares/coursewaresJSFramework_0.0.6.js')
#complete-courseware-dialog.modal(tabindex='-1') #complete-courseware-dialog.modal(tabindex='-1')
.modal-dialog.animated.zoomIn.fast-animation .modal-dialog.animated.zoomIn.fast-animation
.modal-content .modal-content
.modal-header.challenge-list-header= compliment .modal-header.challenge-list-header= compliment
a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
.modal-body(ng-controller="pairedWithController") .modal-body
.text-center .text-center
.animated.zoomInDown.delay-half .animated.zoomInDown.delay-half
span.completion-icon.ion-checkmark-circled.text-primary span.completion-icon.ion-checkmark-circled.text-primary
if (user) if (user)
a.animated.fadeIn.btn.btn-lg.btn-primary.btn-block#next-courseware-button(name='_csrf', value=_csrf, ng-disabled='completedWithForm.$invalid && existingUser.length > 0') Go to my next challenge (ctrl + enter) a.animated.fadeIn.btn.btn-lg.btn-primary.btn-block#next-courseware-button(name='_csrf', value=_csrf) Go to my next challenge (ctrl + enter)
if (points && points > 2) if (user.progressTimestamps.length > 2)
a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript" target="_blank") a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(target="_blank", href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript")
i.fa.fa-twitter &thinsp; i.fa.fa-twitter &thinsp;
= phrase = phrase
else else
a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
#reset-modal.modal(tabindex='-1')
.modal-dialog.animated.fadeInUp.fast-animation
.modal-content
.modal-header.challenge-list-header Clear your code?
a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
.modal-body
h3 This will restore your code editor to its original state.
a.btn.btn-lg.btn-info.btn-block#reset-button(href='#', data-dismiss='modal', aria-hidden='true') Clear my code
a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Cancel
include ../partials/challenge-modals include ../partials/challenge-modals
script.
var MDNlinks = !{JSON.stringify(MDNlinks)};
if (!MDNlinks.length) {
$('#MDN-links').addClass('collapse');
}