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

improve markup and titles of challenges

Browse Source
This commit is contained in:
Quincy Larson
2015-10-06 15:37:43 -07:00
parent ccd7fcc32d
commit ba8a06cf4b
1 changed files with 46 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
challenges/json-apis-and-ajax.json
View File

@ -5,11 +5,10 @@
{
"id": "bb000000000000000000001",
"title": "Trigger on click Events with jQuery",
"difficulty": 3.19,
"description": [
"With jQuery we are able to get data from APIs via Ajax.",
"This data normally comes in the form of JSON.",
"Let's get the <code>Get Message</code> button to set the text of a div.",
"This data normally comes in the form of <code>JSON</code>.",
"Let's get the <code>Get Message</code> button to set the text of a <code>div</code> element.",
"We will later use this to display the result of out API request.",
"<code>$(\"#getMessage\").on(\"click\", function(){</code>",
"<code>&thinsp;&thinsp;$(\".message\").html(\"Here is the message\");</code>",
@ -33,13 +32,11 @@
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <br/>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well Message\">",
" The message will go here",
" </div>",
" </div>",
" <br/>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
@ -54,19 +51,17 @@
},
{
"id": "bb000000000000000000002",
"title": "Creating HTML from Data from an AJAX request Using jQuery",
"difficulty": 3.20,
"title": "Create HTML from an AJAX Request",
"description": [
"",
"We are now going to request data from an external source. (a file on FCC for the purposes of this exercise) The request will load in the data an run the code in the function we provide the data to which is known as the callback.",
"<code>$(\"#getMessage\").on(\"click\", function() {",
"&thinsp;&thinsp;$.getJSON(\"/json/cats.json?callback=\", function( json ) {",
"&thinsp;&thinsp;&thinsp;&thinsp;//Code to run when request is complete",
"&thinsp;&thinsp;&thinsp;&thinsp;$(\".message\").html(JSON.stringify(json))",
"&thinsp;&thinsp;});",
"});</code>",
"Let's make it so that the data sent from the request is appended to the .message div.",
""
"<code>&thinsp;&thinsp;$.getJSON(\"/json/cats.json?callback=\", function( json ) {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;//Code to run when request is complete</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;$(\".message\").html(JSON.stringify(json))</code>",
"<code>&thinsp;&thinsp;});</code>",
"<code>});</code>",
"Let's make it so that the data sent from the request is appended to the .message div."
],
"tests": [
"assert(editor.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\#getMessage(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?on\\s*?\\(\\s*?(\\\"|\\')click(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'You should have a click handler on the getMessage button to trigger the AJAX request.')",
@ -86,19 +81,15 @@
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <br/>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well Message\">",
" The message will go here",
" </div>",
" </div>",
" <br/>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
@ -113,26 +104,16 @@
},
{
"id": "bb000000000000000000003",
"title": "Convert JSON data to HTML",
"difficulty": 3.21,
"title": "Convert JSON Data to HTML",
"description": [
"",
"Now that we have the data let's re-arrange it so that it can be displayed in a user friendly way.",
"",
"<code>",
"&thinsp;&thinsp;json.map(function(val){",
"&thinsp;&thinsp;&thinsp;&thinsp;",
"&thinsp;&thinsp;&thinsp;&thinsp;html = html + \"&lt;div class = 'cat'&gt;\"",
"&thinsp;&thinsp;&thinsp;&thinsp;",
"&thinsp;&thinsp;&thinsp;&thinsp;for(var key in val){",
"&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;html = html + '&lt;div class = \"' + key + '\"&gt;' + val[key] + '&lt;/div&gt;';",
"&thinsp;&thinsp;}",
"&thinsp;&thinsp;&thinsp;&thinsp;",
"&thinsp;&thinsp;&thinsp;&thinsp;html = html + \"&lt;/div&gt;&lt;br/&gt;\"",
"&thinsp;&thinsp;&thinsp;&thinsp;",
"&thinsp;&thinsp;});",
"</code>",
""
"<code>json.map(function(val) {</code>",
"<code>&thinsp;&thinsp;html = html + \"&lt;div class = 'cat'&gt;\"</code>",
"<code>&thinsp;&thinsp;for(var key in val) {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;html = html + '&lt;div class = \"' + key + '\"&gt;' + val[key] + '&lt;/div&gt;';</code>",
"<code>&thinsp;&thinsp;}</code>",
"<code>&thinsp;&thinsp;html = html + \"&lt;/div&gt;&lt;br/&gt;\"</code>",
"<code>});</code>"
],
"tests": [
"assert(/json\\.map/gi, 'The message box should have something in it.')"
@ -146,13 +127,12 @@
" ",
" var html = \"\";",
" ",
" //Add you code to modify the data here. It should add it to the html sting for use in the view",
" ",
" //Don't modify above here",
" // You shouldn't need to modify code above this line.",
" ",
" ",
" ",
" //Don't modify below here",
" ",
" // You shouldn't need to modify code below this line.",
" ",
"     $(\".message\").html(html);",
" ",
@ -162,18 +142,14 @@
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <br/>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well Message\">",
" The message will go here"," </div>",
" </div>",
" <br/>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
@ -188,21 +164,15 @@
},
{
"id": "bb000000000000000000004",
"title": "render those images!",
"difficulty": 3.22,
"title": "ender those images!",
"description": [
"",
"instead of just placing everything in a div we should check if the value is an image.",
"Instead of just placing everything in a div we should check if the value is an image.",
"If it is an image we should use it as an ima tag instead so that the image is rendered.",
"<code>",
"if(key === \"imageLink\"){",
"html = html + '&lt;img class = \"' + key + '\"src = \"' + val[key] + '\"&gt;';",
"}",
"else{",
" html = html + '&lt;div class = \"' + key + '\"&gt;' + val[key] + '&lt;/div&gt;';",
"}",
"</code>",
""
"<code>if(key === \"imageLink\") {</code>",
"<code>&thinsp;&thinsp;html = html + '&lt;img class = \"' + key + '\"src = \"' + val[key] + '\"&gt;';</code>",
"<code>} else {</code>",
"<code>&thinsp;&thinsp;html = html + '&lt;div class = \"' + key + '\"&gt;' + val[key] + '&lt;/div&gt;';</code>",
"<code>}</code>"
],
"tests": [
"assert(editor.match(/imageLink/gi), 'You should have accessed the imageLink of each cat object.')"
@ -222,24 +192,20 @@
"",
" html = html + \"<div class = 'cat'>\"",
"",
"",
"",
" for(var key in val){",
"",
" //Don't modify above here",
" // You shouldn't need to modify code below this line",
" ",
" ",
" ",
" //Don't modify below here",
" // You shouldn't need to modify code above this line",
"",
" }",
" ",
" html = html + \"</div><br/>\"",
" html = html + \"</div>\"",
"",
" });",
" ",
" //Don't modify above here",
" ",
"     $(\".message\").html(html);",
" ",
"   });",
@ -248,19 +214,15 @@
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <br/>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well Message\">",
" The message will go here",
" </div>",
" </div>",
" <br/>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
@ -276,19 +238,15 @@
},
{
"id": "bb000000000000000000005",
"title": "Pre-filtering the JSON",
"difficulty": 3.22,
"title": "Prefilter your JSON",
"description": [
"",
"This means we should never hit API limits and it will make the process more efficient.",
"Let's try pre-filtering the json before we map it.",
"We can use the pre-made filter method like this to remove the cat with the id of 1.",
"<code>",
"json = json.filter(function(val){",
" return(val.id !== 1);",
"});",
"</code>",
""
"<code>json = json.filter(function(val) {</code>",
"<code>&thinsp;&thinsp;return(val.id !== 1);</code>",
"<code>});</code>"
],
"tests": [
"assert(editor.match(/filter/gi), 'You should be making use of the .filter method.')"
@ -310,11 +268,11 @@
"",
" html = html + \"<div class = 'cat'>\"",
"",
" //Don't modify above here",
" // You shouldn't need to modify code above this line",
" ",
" ",
" ",
" //Don't modify below here",
" // You shouldn't need to modify code below this line",
"",
" for(var key in val){",
"",
@ -323,12 +281,10 @@
" }",
"",
" ",
" html = html + \"</div><br/>\"",
" html = html + \"</div>\"",
"",
" });",
" ",
" //Don't modify above here",
" ",
"     $(\".message\").html(html);",
" ",
"   });",
@ -337,19 +293,16 @@
" });",
"fcces",
"",
"<!-- You shouldn't need to modify code below this line -->",
"",
"<div class=\"container-fluid\">",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <br/>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well Message\">",
" The message will go here",
" </div>",
" </div>",
" <br/>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
@ -365,25 +318,19 @@
},
{
"id": "bb000000000000000000006",
"title": "Getting Geo-location data for use in APIs",
"difficulty": 3.19,
"title": "Get Geo-location Data",
"description": [
"",
"We can access the users current location by using the built in navigator in the browser.",
"The navigator will get the users current longitude and latitude with a decent level of accuracy.",
"<code>",
"if (navigator.geolocation) {",
"&thinsp;&thinsp;navigator.geolocation.getCurrentPosition(function(position){",
"&thinsp;&thinsp;&thinsp;&thinsp;// Do something in here with the coordinates!",
"&thinsp;&thinsp;&thinsp;&thinsp;",
"&thinsp;&thinsp;&thinsp;&thinsp;$(\"#data\").html(\"latitiude\" + position.coords.latitude + \"longitude\" + position.coords.longitude);",
"&thinsp;&thinsp;&thinsp;&thinsp;",
"&thinsp;&thinsp;});",
"}",
"</code>"
"<code>if (navigator.geolocation) {</code>",
"<code>&thinsp;&thinsp;navigator.geolocation.getCurrentPosition(function(position) {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;// Do something in here with the coordinates</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;$(\"#data\").html(\"latitiude\" + position.coords.latitude + \"longitude\" + position.coords.longitude);</code>",
"<code>&thinsp;&thinsp;});</code>",
"<code>}</code>"
],
"tests": [
"assert(editor.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'you should make use of the <code>navigator.geolocation</code> to access the users current location.')"
"assert(editor.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'You should make use of the <code>navigator.geolocation</code> to access the users current location.')"
],
"challengeSeed": [
"fccss",