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

JSON/API Lesson Cleanup

Browse Source 
+ Fixes Convert JSON to HTML lesson (Closes #4016)
+ Add Formatting to Geolocation lesson output (Closes #4010)
+ Fixes Render Images lesson
+ Removes unnecessary `?callback=` from JSON challenges. (Closes #3972)
+ Lots of other formatting and consistancy changes.
+ Also closes #3962 and closes #3969
This commit is contained in:
Logan Tegman
2015-10-29 21:51:35 -07:00
parent e7b416cd32
commit 086b0bb60c
1 changed files with 140 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

288
seed/challenges/json-apis-and-ajax.json
View File

@ -7,7 +7,7 @@
"id": "bb000000000000000000001",
"title": "Trigger Click Events with jQuery",
"description": [
"In this section, we'll learn how to get data from APIs. APIs - or Application Interfaces - are tools that computers use to communicate with one another.",
"In this section, we'll learn how to get data from APIs. APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
"We'll also learn how to update HTML with the data we get from these APIs using a technology called Ajax.",
"First, let's review what the <code>$(document).ready()</code> function does. This function makes it so all code inside of it only runs once our page loads.",
"Let's make our \"Get Message\" button change the text of the element with the class <code>message</code>.",
@ -31,21 +31,21 @@
"",
"",
"<div class=\"container-fluid\">",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well message\">",
" The message will go here",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
" Get Message",
" </button>",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well message\">",
" The message will go here",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
" Get Message",
" </button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
@ -68,30 +68,29 @@
" $(document).ready(function() {",
" $(\"#getMessage\").on(\"click\", function(){",
" // Only change code below this line.",
"",
" ",
" // Only change code above this line.",
" });",
" });",
"fcces",
"",
"",
"<div class=\"container-fluid\">",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well message\">",
" The message will go here",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
" Get Message",
" </button>",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well message\">",
" The message will go here",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
" Get Message",
" </button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
@ -102,55 +101,55 @@
"title": "Get JSON with the jQuery getJSON Method",
"description": [
"You can also request data from an external source. This is where APIs come into play.",
"Remember that APIs - or Application Interfaces - are tools that computers use to communicate with one another.",
"Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
"Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.",
"You've already been using JSON whenever you create a JavaScript object. JSON is nothing more than object properties and their current values, sandwiched between a <code>{</code> and a <code>}</code>.",
"These properties and their values are often referred to as \"key-value pairs\".",
"Let's get the JSON from Free Code Camp's Cat Photo API.",
"Here's the code you can put in your click event to do this:",
"<code>&thinsp;&thinsp;$.getJSON(\"/json/cats.json?callback=\", function( json ) {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;$(\".message\").html(JSON.stringify(json))</code>",
"<code>&thinsp;&thinsp;$.getJSON(\"/json/cats.json\", function(json) {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;$(\".message\").html(JSON.stringify(json));</code>",
"<code>&thinsp;&thinsp;});</code>",
"Once you've added this, click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the Free Code Camp Cat Photo API."
],
"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.')",
"assert(editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi), 'You should have at least on closing set of brackets and parenthesis.')",
"assert(editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi), 'You should have at least one closing set of brackets and parenthesis.')",
"assert(editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi) && editor.match(/\\,\\s*?function\\s*?\\(\\s*?\\w*?\\s*?\\)\\s*?\\{/gi) && editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi).length === editor.match(/\\s*?function\\s*?\\(\\s*?\\w*?\\s*?\\)\\s*?\\{/gi).length, 'Each callback function should have a closing set of brackets and parenthesis.')",
"assert(editor.match(/\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?\"\\\/json\\\/cats\\.json\\?callback\\=\"\\s*?\\,\\s*?function\\s*?\\(\\s*?json\\s*?\\)\\s*?\\{/gi), 'You should be making use of the getJSON method given in the description to load data from the json file.')",
"assert(editor.match(/\\$\\s*?\\(\\s*?\\\"\\.message\\\"\\s*?\\)\\s*?\\.\\s*?html\\s*?\\(\\s*?JSON\\s*?\\.\\s*?stringify\\s*?\\(\\s*?json\\s*?\\)\\s*?\\)/gi), 'Don\\'t forget to make the <code>.html</code> change the contents of the message box so that it contains the result of the getJSON.')"
"assert(editor.match(/\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?(\\\"|\\')\\\/json\\\/cats\\.json(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?json\\s*?\\)\\s*?\\{/gi), 'You should be making use of the getJSON method given in the description to load data from the json file.')",
"assert(editor.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\.message(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?html\\s*?\\(\\s*?JSON\\s*?\\.\\s*?stringify\\s*?\\(\\s*?json\\s*?\\)\\s*?\\)/gi), 'Don\\'t forget to make the <code>.html</code> change the contents of the message box so that it contains the result of the getJSON.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" ",
" $(\"#getMessage\").on(\"click\", function(){",
" // Only change code below this line.",
" $(document).ready(function() {",
"",
" $(\"#getMessage\").on(\"click\", function(){",
" // Only change code below this line.",
" ",
" ",
" ",
" // Only change code above this line.",
" });",
"",
"",
" // Only change code above this line.",
" });",
" ",
" });",
" });",
"fcces",
"",
"<div class=\"container-fluid\">",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well message\">",
" The message will go here",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
" Get Message",
" </button>",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well message\">",
" The message will go here",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
" Get Message",
" </button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
@ -166,9 +165,12 @@
"Then, let's loop through our JSON, adding more HTML to that variable. When the loop is finished, we'll render it.",
"Here's the code that does this:",
"<code>json.map(function(val) {</code>",
"<code>&thinsp;&thinsp;html = html + \"&lt;div class = 'cat'&gt;\"</code>",
"<code>&thinsp;&thinsp;html = html + '&lt;div&gt;' + val + '&lt;/div&gt;';</code>",
"<code>&thinsp;&thinsp;html = html + \"&lt;/div&gt;&lt;br/&gt;\"</code>",
"<code>&thinsp;&thinsp;var keys = Object.keys(val);</code>",
"<code>&thinsp;&thinsp;html += \"&lt;div class = 'cat'&gt;\";</code>",
"<code>&thinsp;&thinsp;keys.map(function(key) {</code>",
"<code>&thinsp;&thinsp;&thinsp;&thinsp;html += \"&lt;b&gt;\" + key + \"&lt;/b&gt;: \" + val[key] + \"&lt;br&gt;\";</code>",
"<code>&thinsp;&thinsp;});</code>",
"<code>&thinsp;&thinsp;html += \"&lt;/div&gt;&lt;br&gt;\";</code>",
"<code>});</code>"
],
"tests": [
@ -179,18 +181,13 @@
" $(document).ready(function() {",
"",
" $(\"#getMessage\").on(\"click\", function() {",
"   $.getJSON(\"/json/cats.json?callback=\", function( json ) {",
"   $.getJSON(\"/json/cats.json\", function(json) {",
"",
" var html = \"\";",
" // Only change code below this line.",
"",
"",
"",
"",
"",
"",
"",
"",
"",
" ",
" ",
" ",
" // Only change code above this line.",
"",
"     $(\".message\").html(html);",
@ -201,20 +198,20 @@
"fcces",
"",
"<div class=\"container-fluid\">",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well message\">",
" The message will go here"," </div>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
" Get Message",
" </button>",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well message\">",
" The message will go here"," </div>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
" Get Message",
" </button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
@ -225,35 +222,34 @@
"title": "Render Images from Data Sources",
"description": [
"In the JSON that we receive data from Free Code Camp's Cat Photo API.",
"When we're looping through these strings, let's check whether they are links. If it is, instead of outputing the image link, let's render the image.",
"We've seen from the last two lessons that each object in our JSON array contains an <code>imageLink</code> key with a value that is the url of a cat's image.",
"When we're looping through these objects, let's use this <code>imageLink</code> property to display this image in an <code>img</code> element.",
"Here's the code that does this:",
"<code>if(val.match(\"http\")) {</code>",
"<code>&thinsp;&thinsp;html = html + '&lt;img src = \"' + val + '\"&gt;';</code>",
"<code>}</code>"
"<code>&thinsp;&thinsp;html += \"&lt;img src = '\" + val.imageLink + \"'&gt;\";</code>"
],
"tests": [
"assert(editor.match(/val.match/gi), 'You should have checked whether the strings contain links.')"
"assert(editor.match(/val.imageLink/gi), 'You should have used the <code>imageLink</code> property to display the images.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" $(\"#getMessage\").on(\"click\", function() {",
"  $.getJSON(\"/json/cats.json?callback=\", function( json ) {",
"  $.getJSON(\"/json/cats.json\", function(json) {",
"",
" var html = \"\";",
"",
" json.map(function(val) {",
"",
" html = html + \"<div class = 'cat'>\"",
" html += \"<div class = 'cat'>\";",
"",
" // Only change code below this line.",
" // Only change code below this line.",
" ",
" ",
" ",
" // Only change code above this line.",
"",
"",
"",
" // Only change code above this line.",
"",
" html = html + \"</div>\"",
" html += \"</div>\";",
"",
" });",
"",
@ -265,21 +261,21 @@
"fcces",
"",
"<div class=\"container-fluid\">",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well message\">",
" The message will go here",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
" Get Message",
" </button>",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well message\">",
" The message will go here",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
" Get Message",
" </button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
@ -304,25 +300,23 @@
" $(document).ready(function() {",
"",
" $(\"#getMessage\").on(\"click\", function() {",
"   $.getJSON(\"/json/cats.json?callback=\", function( json ) {",
"   $.getJSON(\"/json/cats.json\", function(json) {",
"",
" var html = \"\";",
"",
" // Only change code below this line.",
"",
"",
"",
" ",
" ",
" ",
" // Only change code above this line.",
"",
" json.map(function(val){",
"",
"    val = \"<img src = '\" + val.imageLink + \"'/>\" ",
" html += \"<div class = 'cat'>\"",
"",
" html = html + \"<div class = 'cat'>\"",
" html += \"<img src = '\" + val.imageLink + \"'>\"",
"",
" html = html + '<div>' + val + '</div>';",
"",
" html = html + \"</div>\"",
" html += \"</div>\"",
"",
" });",
"",
@ -333,25 +327,23 @@
" });",
"fcces",
"",
"",
"<div class=\"container-fluid\">",
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well message\">",
" The message will go here",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
" Get Message",
" </button>",
" </div>",
" </div>",
"</div>",
""
" <div class = \"row text-center\">",
" <h2>Cat Photo Finder</h2>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12 well message\">",
" The message will go here",
" </div>",
" </div>",
" <div class = \"row text-center\">",
" <div class = \"col-xs-12\">",
" <button id = \"getMessage\" class = \"btn btn-primary\">",
" Get Message",
" </button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
"type": "waypoint"
@ -375,9 +367,9 @@
"challengeSeed": [
"fccss",
" // Only change code below this line.",
"",
"",
"",
" ",
" ",
" ",
" // Only change code above this line.",
"fcces",
"<div id = \"data\">",