diff --git a/seed/challenges/json-apis-and-ajax.json b/seed/challenges/json-apis-and-ajax.json index d0373c1d75..940cb95bdb 100644 --- a/seed/challenges/json-apis-and-ajax.json +++ b/seed/challenges/json-apis-and-ajax.json @@ -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 $(document).ready() 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 message.", @@ -31,21 +31,21 @@ "", "", "
", - "
", - "

Cat Photo Finder

", - "
", - "
", - "
", - " The message will go here", - "
", - "
", - "
", - "
", - " ", - "
", - "
", + "
", + "

Cat Photo Finder

", + "
", + "
", + "
", + " The message will go here", + "
", + "
", + "
", + "
", + " ", + "
", + "
", "
" ], "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", "", "", - "
", - "
", - "

Cat Photo Finder

", - "
", - "
", - "
", - " The message will go here", - "
", - "
", - "
", - "
", - " ", - "
", - "
", + "
", + "

Cat Photo Finder

", + "
", + "
", + "
", + " The message will go here", + "
", + "
", + "
", + "
", + " ", + "
", + "
", "
" ], "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 { and a }.", "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:", - "  $.getJSON(\"/json/cats.json?callback=\", function( json ) {", - "    $(\".message\").html(JSON.stringify(json))", + "  $.getJSON(\"/json/cats.json\", function(json) {", + "    $(\".message\").html(JSON.stringify(json));", "  });", "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 .html 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 .html 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", "", "
", - "
", - "

Cat Photo Finder

", - "
", - "
", - "
", - " The message will go here", - "
", - "
", - "
", - "
", - " ", - "
", - "
", + "
", + "

Cat Photo Finder

", + "
", + "
", + "
", + " The message will go here", + "
", + "
", + "
", + "
", + " ", + "
", + "
", "
" ], "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:", "json.map(function(val) {", - "  html = html + \"<div class = 'cat'>\"", - "  html = html + '<div>' + val + '</div>';", - "  html = html + \"</div><br/>\"", + "  var keys = Object.keys(val);", + "  html += \"<div class = 'cat'>\";", + "  keys.map(function(key) {", + "    html += \"<b>\" + key + \"</b>: \" + val[key] + \"<br>\";", + "  });", + "  html += \"</div><br>\";", "});" ], "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", "", "
", - "
", - "

Cat Photo Finder

", - "
", - "
", - "
", - " The message will go here","
", - "
", - "
", - "
", - " ", - "
", - "
", + "
", + "

Cat Photo Finder

", + "
", + "
", + "
", + " The message will go here","
", + "
", + "
", + "
", + " ", + "
", + "
", "
" ], "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 imageLink key with a value that is the url of a cat's image.", + "When we're looping through these objects, let's use this imageLink property to display this image in an img element.", "Here's the code that does this:", - "if(val.match(\"http\")) {", - "  html = html + '<img src = \"' + val + '\">';", - "}" + "  html += \"<img src = '\" + val.imageLink + \"'>\";" ], "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 imageLink 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 + \"
\"", + " html += \"
\";", "", - " // 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 + \"
\"", + " html += \"
\";", "", " });", "", @@ -265,21 +261,21 @@ "fcces", "", "
", - "
", - "

Cat Photo Finder

", - "
", - "
", - "
", - " The message will go here", - "
", - "
", - "
", - "
", - " ", - "
", - "
", + "
", + "

Cat Photo Finder

", + "
", + "
", + "
", + " The message will go here", + "
", + "
", + "
", + "
", + " ", + "
", + "
", "
" ], "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 = \"\" ", + " html += \"
\"", "", - " html = html + \"
\"", + " html += \"\"", "", - " html = html + '
' + val + '
';", - "", - " html = html + \"
\"", + " html += \"
\"", "", " });", "", @@ -333,25 +327,23 @@ " });", "fcces", "", - "", "
", - "
", - "

Cat Photo Finder

", - "
", - "
", - "
", - " The message will go here", - "
", - "
", - "
", - "
", - " ", - "
", - "
", - "
", - "" + "
", + "

Cat Photo Finder

", + "
", + "
", + "
", + " The message will go here", + "
", + "
", + "
", + "
", + " ", + "
", + "
", + "" ], "challengeType": 0, "type": "waypoint" @@ -375,9 +367,9 @@ "challengeSeed": [ "fccss", " // Only change code below this line.", - "", - "", - "", + " ", + " ", + " ", " // Only change code above this line.", "fcces", "
",