From 8044c03576252c428afd366232bff9e09b69ebfd Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Mon, 28 Sep 2015 23:24:42 +0100 Subject: [PATCH 01/12] Foundation fo AJAX stuff is done. Going to move on to process fetched data and creating a UI generating function for each individual object --- challenges/json-apis-and-ajax.json | 116 +++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 challenges/json-apis-and-ajax.json diff --git a/challenges/json-apis-and-ajax.json b/challenges/json-apis-and-ajax.json new file mode 100644 index 0000000000..8ece73714b --- /dev/null +++ b/challenges/json-apis-and-ajax.json @@ -0,0 +1,116 @@ +{ + "name": "JSON APIs and Ajax", + "order": 0.0065, + "challenges": [ + { + "id": "bad87fed1348bd9aeca08826", + "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 Get Message button to set the text of a div", + "We will later use this to display the result of out API request", + "$(\"#getMessage\").on(\"click\", function(){", + "  $(\".message\").html(\"Here is the message\");", + "});" + ], + "tests": [ + "assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\#getMessage(?:'|\")\\s*?\\)\\s*?\\.on\\s*?\\(\\s*?(?:'|\")click(?:'|\")\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'You should have bound the click event to the getMessage button')", + "assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?\\.html\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'You should set te value of the #message box to be the message given in the description')", + "assert(editor.match(/\\n*?\\s*?\\}\\n*?\\s*?\\);/gi) && editor.match(/\\n*?\\s*?\\}\\);/gi).length >= 2, 'Make sure that you close off all of your functions')" + ], + "challengeSeed": [ + "fccss", + " $(document).ready(function() {", + " ", + " });", + "fcces", + "", + "", + "", + "
", + "
", + "

Cat Photo Finder

", + "
", + "
", + "
", + "
", + " The message will go here", + "
", + "
", + "
", + "
", + "
", + " ", + "
", + "
", + "
" + ], + "challengeType": 0, + "type": "waypoint" + }, + { + "id": "bad87fee1348bd9aebc08826", + "title": "Get Data from an URL Using jQuery", + "dashedName": "waypoint-get-data-from-a-url-using-jquery", + "difficulty": 3.21, + "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.", + "$(\"#getMessage\").on(\"click\", function() {", + "  $.getJSON(\"/json/cats.json?callback=?\", function( json ) {", + "    //Code to run when request is complete", + "    $(\".message\").html(JSON.stringify(json))", + "  });", + "});", + "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')", + "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) && 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')" + ], + "challengeSeed": [ + "fccss", + " $(document).ready(function() {", + " ", + " $(\"#getMessage\").on(\"click\", function(){", + " $(\".message\").html(\"Make the result of the getJSON request appear here\")", + " });", + " ", + " });", + "fcces", + "", + "", + "", + "
", + "
", + "

Cat Photo Finder

", + "
", + "
", + "
", + "
", + " The message will go here", + "
", + "
", + "
", + "
", + "
", + " ", + "
", + "
", + "
" + ], + "challengeType": 0, + "type": "waypoint" + } + ] +} From 38f723665d69397cad0bdeb8b9ce9360b1694a40 Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Wed, 30 Sep 2015 23:01:56 +0100 Subject: [PATCH 02/12] Three complete. More to come --- challenges/json-apis-and-ajax.json | 87 +++- under-construction/json-apis-and-ajax.json | 535 --------------------- 2 files changed, 80 insertions(+), 542 deletions(-) delete mode 100644 under-construction/json-apis-and-ajax.json diff --git a/challenges/json-apis-and-ajax.json b/challenges/json-apis-and-ajax.json index 8ece73714b..9f96865672 100644 --- a/challenges/json-apis-and-ajax.json +++ b/challenges/json-apis-and-ajax.json @@ -3,7 +3,7 @@ "order": 0.0065, "challenges": [ { - "id": "bad87fed1348bd9aeca08826", + "id": "bb000000000000000000000", "title": "Trigger on click Events with jQuery", "difficulty": 3.19, "description": [ @@ -53,15 +53,14 @@ "type": "waypoint" }, { - "id": "bad87fee1348bd9aebc08826", - "title": "Get Data from an URL Using jQuery", - "dashedName": "waypoint-get-data-from-a-url-using-jquery", - "difficulty": 3.21, + "id": "bb000000000000000000001", + "title": "Creating HTML from Data from an AJAX request Using jQuery", + "difficulty": 3.20, "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.", "$(\"#getMessage\").on(\"click\", function() {", - "  $.getJSON(\"/json/cats.json?callback=?\", function( json ) {", + "  $.getJSON(\"/json/cats.json?callback=\", function( json ) {", "    //Code to run when request is complete", "    $(\".message\").html(JSON.stringify(json))", "  });", @@ -73,7 +72,7 @@ "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) && 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*?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')" ], "challengeSeed": [ @@ -111,6 +110,80 @@ ], "challengeType": 0, "type": "waypoint" + }, + { + "id": "bb000000000000000000002", + "title": "Convert json data to html", + "difficulty": 3.21, + "description": [ + "", + "Now that we have the data let's re-arrange it so that ", + "", + "", + "  json.map(function(val){", + "    ", + "    html = html + \"<div class = 'cat'>\"", + "    ", + "    for(var key in val){", + "      html = html + '<div class = \"' + key + '\">' + val[key] + '</div>';", + "  }", + "    ", + "    html = html + \"</div><br/>\"", + "    ", + "  });", + "", + "" + ], + "tests": [ + "assert($(\".message\").html() !== '', 'The message box should have something in it')", + "assert($(\".message div\").html() !== undefined, 'you should have made created some sort of view from the json data')" + ], + "challengeSeed": [ + "fccss", + " $(document).ready(function() {", + " ", + " $(\"#getMessage\").on(\"click\", function() {", + "   $.getJSON(\"/json/cats.json?callback=\", function( json ) {", + " ", + " 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", + " ", + "     $(\".message\").html(html);", + " ", + "   });", + " });", + " ", + " });", + "fcces", + "", + "", + "", + "
", + "
", + "

Cat Photo Finder

", + "
", + "
", + "
", + "
", + " The message will go here","
", + "
", + "
", + "
", + "
", + " ", + "
", + "
", + "
" + ], + "challengeType": 0, + "type": "waypoint" } ] } diff --git a/under-construction/json-apis-and-ajax.json b/under-construction/json-apis-and-ajax.json deleted file mode 100644 index ab12090b02..0000000000 --- a/under-construction/json-apis-and-ajax.json +++ /dev/null @@ -1,535 +0,0 @@ -{ - "name": "JSON APIs and Ajax", - "order": 0.0065, - "challenges": [ - { - "id": "bad87fed1348bd9aeca08826", - "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 Get Message button to set the text of a div", - "We will later use this to display the result of out API request", - "$(\"#getMessage\").on(\"click\", function(){", - "  $(\".message\").html(\"Here is the message\");", - "});" - ], - "tests": [ - "assert(editor.match(/\\$\\(\\s?\\\"\\#getMessage\\\"\\s?\\)\\.on\\s?\\(\\s?\\\"click\\\"\\,\\s?function\\s?\\(\\)\\s?\\{/gi), 'You should have bound the click event to the getMessage button')", - "assert(editor.match(/\\$\\(\\s?\\\"\\.message\\\"\\s?\\)\\.html\\(\\s?\\\"Here\\sis\\sthe\\smessage\\\"\\s?\\);/gi), 'You should set te value of the #message box to be the message given in the description')", - "assert(editor.match(/\\}\\);/gi) && editor.match(/\\}\\);/gi).length >= 2, 'Make sure that you close off all of your functions')" - ], - "challengeSeed": [ - "fccss", - " $(document).ready(function() {", - " ", - " });", - "fcces", - "", - "", - "", - "
", - "
", - "

Cat Photo Finder

", - "
", - "
", - "
", - "
", - " The message will go here", - "
", - "
", - "
", - "
", - "
", - " ", - "
", - "
", - "
" - ], - "challengeType": 0, - "type": "waypoint" - }, - { - "id": "bad87fee1348bd9aebc08726", - "title": "Learn JSON Syntax", - "description": [ - "JSON stands for \"JavaScript Object Notation\". It\"s how you create objects in JavaScript.", - "JSON is a series of \"key-value pairs\". Everything on the left of the colon (:) is the \"key\" you use to unlock the \"value\" on the right of the colon." - ], - "tests": [ - "assert(typeof data != \"undefined\", \"Whoops! It looks like you deleted the data variable!\");", - "assert(typeof getAnId != \"undefined\", \"Whoops! It looks like you deleted the getAnId function!\");", - "assert(data[0]['id'] === getAnId(), \"The duntion getFirstId should return the id of the first element in the array\");" - ], - "challengeSeed": [ - "fccss", - "var data = [", - " {", - " \"id\": 0,", - " \"imageLink\": \"http://rs611.pbsrc.com/albums/tt194/allypopper423/Funny-Cat-Green-Avacado.jpg~c200\",", - " \"codeNames\": [", - " \"Juggernaut\",", - " \"Mrs. Wallace\",", - " \"Buttercup\"", - " ]", - " },", - " {", - " \"id\": 1,", - " \"imageLink\": \"http://cdn.grumpycats.com/wp-content/uploads/2012/09/GC-Gravatar-copy.png\",", - " \"codeNames\": [", - " \"Oscar\",", - " \"Scrooge\",", - " \"Tyrion\"", - " ]", - " },", - " {", - " \"id\": 2,", - " \"imageLink\": \"http://www.kittenspet.com/wp-content/uploads/2012/08/cat_with_funny_face_3-200x200.jpg\",", - " \"codeNames\": [", - " \"The Doctor\",", - " \"Loki\",", - " \"Joker\"", - " ]", - " }", - "]", - "function getAnId(){", - " return();", - "}", - "fcces" - ], - "challengeType": 0, - "type": "waypoint" - }, - { - "id": "bad87fee1348bd9aeca08826", - "title": "Displaying JSON data in HTML", - "difficulty": 3.19, - "description": [ - "JSON stands for \"JavaScript Object Notation\". It\"s how you create objects in JavaScript.", - "JSON is a series of \"key-value pairs\". Everything on the left of the colon (:) is the \"key\" you use to unlock the \"value\" on the right of the colon." - ], - "tests": [ - - ], - "challengeSeed": [ - "fccss", - " $(document).ready(function() {", - " $(\"#getMessage\").on(\"click\", function(){", - " $(\".message\").html(\"Here is the message\");", - " });", - " });", - "fcces", - "", - "", - "", - "
", - "
", - "

Cat Photo Finder

", - "
", - "
", - "
", - "
", - " The message will go here", - "
", - "
", - "
", - "
", - "
", - " ", - "
", - "
", - "
" - ], - "challengeType": 0, - "type": "waypoint" - }, - - { - "id": "bad84fee1348bd9aecc48826", - "title": "Read Data from an Element Using jQuery", - "dashedName": "waypoint-read-data-from-an-element-using-jquery", - "difficulty": 3.17, - "description": [ - "Let's make everything roll with rollOut." - ], - "tests": [ - - ], - "challengeSeed": [ - "fccss", - " $(document).ready(function() {", - " $(\"button\").on(\"click\", function() {", - " $(\"#click-me\").addClass(\"animated shake\");", - " });", - " });", - "fcces", - "", - "", - "", - "
", - "
", - "
", - " ", - "
", - "
", - "

#check-me

", - "
", - " ", - " Is the checkbox checked?", - " ", - "
" - ], - "challengeType": 0, - "type": "waypoint" - }, - - { - "id": "bad84fee1348bd9aecc38826", - "title": "Read Data from an Element Using jQuery", - "dashedName": "waypoint-read-data-from-an-element-using-jquery", - "difficulty": 3.17, - "description": [ - "Let's make everything roll with rollOut." - ], - "tests": [ - - ], - "challengeSeed": [ - "fccss", - " $(document).ready(function() {", - " $(\"button\").on(\"click\", function() {", - " $(\"#click-me\").addClass(\"animated shake\");", - " $(\"#checked-state\").text(\"happy text\");", - " });", - " });", - "fcces", - "", - "", - "", - "
", - "
", - "
", - " ", - "
", - "
", - "

#check-me

", - "
", - " ", - " Is the checkbox checked?", - " ", - "
" - ], - "challengeType": 0, - "type": "waypoint" - }, - - { - "id": "bad84fee1348bd9aecc28826", - "title": "Read Data from an Element Using jQuery", - "dashedName": "waypoint-read-data-from-an-element-using-jquery", - "difficulty": 3.17, - "description": [ - "Let's make everything roll with rollOut." - ], - "tests": [ - - ], - "challengeSeed": [ - "fccss", - " $(document).ready(function() {", - " $(\"button\").on(\"click\", function() {", - " $(\"#click-me\").addClass(\"animated shake\");", - " $(\"#checked-state\").text($(\"#check-me\").prop(\"checked\"));", - " });", - " });", - "fcces", - "", - "", - "", - "
", - "
", - "
", - " ", - "
", - "
", - "

#check-me

", - "
", - " ", - " Is the checkbox checked?", - " ", - "
" - ], - "challengeType": 0, - "type": "waypoint" - }, - - { - "id": "bad84fee1348bd9aecc18826", - "title": "Read Data from an Element Using jQuery", - "dashedName": "waypoint-read-data-from-an-element-using-jquery", - "difficulty": 3.17, - "description": [ - - ], - "tests": [ - - ], - "challengeSeed": [ - "fccss", - " $(document).ready(function() {", - " $(\"button\").on(\"click\", function() {", - " $(\"#click-me\").addClass(\"animated shake\");", - " $(\"#checked-state\").text($(\"#check-me\").prop(\"checked\"));", - " });", - " });", - "fcces", - "", - "", - "", - "
", - "
", - "
", - " ", - "
", - "
", - "

#check-me

", - "
", - " ", - " Is the checkbox checked?", - " ", - "
" - ], - "challengeType": 0, - "type": "waypoint" - }, - - { - "id": "bad87fee1348bd9aecc08826", - "title": "Trigger onHover Events with jQuery", - "dashedName": "waypoint-trigger-onhover-events-with-jquery", - "difficulty": 3.18, - "description": [ - - ], - "tests": [ - - ], - "challengeSeed": [ - - ], - "challengeType": 0, - "type": "waypoint" - }, - - { - "id": "bad87fee1348bd9aebc08826", - "title": "Get Data from an URL Using jQuery", - "dashedName": "waypoint-get-data-from-a-url-using-jquery", - "difficulty": 3.21, - "description": [ - - ], - "tests": [ - - ], - "challengeSeed": [ - "fccss", - "", - " $(document).ready(function() {", - "", - " $(\"#cat-button\").on(\"click\", function() {", - " $.getJSON(\"/json/cats.json\", function( json ) {", - "", - " });", - " });", - "", - " });", - "fcces", - "
", - " ", - "
", - "
", - "
" - ], - "challengeType": 0, - "type": "waypoint" - }, - - { - "id": "bad87fee1348bd9ae9c08826", - "title": "Loop through JSON Data Using jQuery", - "dashedName": "waypoint-loop-through-json-data-using-jquery", - "difficulty": 3.22, - "description": [ - - ], - "tests": [ - - ], - "challengeSeed": [ - "fccss", - "", - " $(document).ready(function() {", - "", - " $(\"#cat-button\").on(\"click\", function() {", - " $.getJSON(\"/json/cats.json\", function( json ) {", - "", - " });", - " });", - "", - " });", - "fcces", - "
", - " ", - "
", - "
", - "
" - ], - "challengeType": 0, - "type": "waypoint" - }, - - { - "id": "bad88fee1348bd9ae8c08726", - "title": "Wire AJAX Call into a jQuery Click Event", - "dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event", - "difficulty": 3.24, - "description": [ - "" - ], - "tests": [ - - ], - "challengeSeed": [ - "fccss", - " var random = function() { return Math.floor(Math.random() * 3) }", - " $(document).ready(function() {", - "", - " $(\"#cat-button\").on(\"click\", function() {", - " $.getJSON(\"/json/cats.json\", function( json ) {", - "", - " });", - " });", - "", - " });", - "fcces", - "
", - " ", - "
", - "
", - "
" - ], - "challengeType": 0, - "type": "waypoint" - }, - - { - "id": "bad88fee1348bd9ae8c08626", - "title": "Wire AJAX Call into a jQuery Click Event", - "dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event", - "difficulty": 3.24, - "description": [ - "" - ], - "tests": [ - - ], - "challengeSeed": [ - "fccss", - " var random = function() { return Math.floor(Math.random() * 3) }", - " $(document).ready(function() {", - "", - " $(\"#cat-button\").on(\"click\", function() {", - " $.getJSON(\"/json/cats.json\", function( json ) {", - " var kitten = json[random()];", - " });", - " });", - "", - " });", - "fcces", - "
", - " ", - "
", - "
", - "
" - ], - "challengeType": 0, - "type": "waypoint" - }, - - { - "id": "bad88fee1348bd9ae8c08526", - "title": "Wire AJAX Call into a jQuery Click Event", - "dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event", - "difficulty": 3.24, - "description": [ - "" - ], - "tests": [ - - ], - "challengeSeed": [ - "fccss", - " var random = function() { return Math.floor(Math.random() * 3) }", - " $(document).ready(function() {", - "", - " $(\"#cat-button\").on(\"click\", function() {", - " $.getJSON(\"/json/cats.json\", function( json ) {", - " var kitten = json[random()];", - " $(\"\").appendTo(\"#output\");", - " });", - " });", - "", - " });", - "
", - " ", - "
", - "
", - "
" - ], - "challengeType": 0, - "type": "waypoint" - }, - - { - "id": "bad88fee1348bd9ae8c08426", - "title": "Wire AJAX Call into a jQuery Click Event", - "dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event", - "difficulty": 3.24, - "description": [ - "" - ], - "tests": [ - - ], - "challengeSeed": [ - "fccss", - " var random = function() { return Math.floor(Math.random() * 3) }", - " $(document).ready(function() {", - "", - " $(\"#cat-button\").on(\"click\", function() {", - " $.getJSON(\"/json/cats.json\", function( json ) {", - " var kitten = json[random()];", - " $(\"\").appendTo(\"#output\");", - " $(\"

Code name: \" + kitten.codeNames[random()] + \"

\").appendTo(\"#output\");", - " });", - " });", - "", - " });", - "fcces", - "
", - " ", - "
", - "
", - "
" - ], - "challengeType": 0, - "type": "waypoint" - } - ] -} From ac90645d334b6c078a06197bd9c20210eb1fc027 Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Wed, 30 Sep 2015 23:23:58 +0100 Subject: [PATCH 03/12] Added the skeleton for the fourth challenge. Challenge three needs some refinement in the testing system --- challenges/json-apis-and-ajax.json | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/challenges/json-apis-and-ajax.json b/challenges/json-apis-and-ajax.json index 9f96865672..e826927a0d 100644 --- a/challenges/json-apis-and-ajax.json +++ b/challenges/json-apis-and-ajax.json @@ -113,7 +113,7 @@ }, { "id": "bb000000000000000000002", - "title": "Convert json data to html", + "title": "Convert JSON data to HTML", "difficulty": 3.21, "description": [ "", @@ -184,6 +184,25 @@ ], "challengeType": 0, "type": "waypoint" + }, + { + "id": "bb000000000000000000003", + "title": "Pre-filtering the JSON", + "difficulty": 3.22, + "description": [ + "", + "If we want to filter the data we have so that we are searching through results based on users inout. It is far more efficient to filter and display a copy of the data we have instead of requesting a new copy each time.", + "This means we should never hit API limits and it will make the process more efficient.", + "" + ], + "tests": [ + "/*be assertive!*/" + ], + "challengeSeed": [ + "TODO: get the result of the previous challenge" + ], + "challengeType": 0, + "type": "waypoint" } ] } From 7ea6af00ddd258c01de73639e13e87682586f55c Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Sat, 3 Oct 2015 23:59:54 +0100 Subject: [PATCH 04/12] 90% complete without QA or refined descriptions/tests --- challenges/json-apis-and-ajax.json | 223 +++++++++++++++++++++++++++-- 1 file changed, 213 insertions(+), 10 deletions(-) diff --git a/challenges/json-apis-and-ajax.json b/challenges/json-apis-and-ajax.json index e826927a0d..fda516722e 100644 --- a/challenges/json-apis-and-ajax.json +++ b/challenges/json-apis-and-ajax.json @@ -4,6 +4,29 @@ "challenges": [ { "id": "bb000000000000000000000", + "title": "Understanding JSON", + "difficulty": 3.19, + "description": [ + "", + "JSON is a way of creating a file or a db record from a javascript object.", + "JSON works in the exact same way as javascript objects that you should be familiar with.", + "" + ], + "tests": [ + "assert(typeof json !== 'undefined')" + ], + "challengeSeed": [ + "var json = {", + " name: \"Happy Camper\"", + " age: 35", + " height: \"5ft 8\"", + "}" + ], + "challengeType": 0, + "type": "waypoint" + }, + { + "id": "bb000000000000000000001", "title": "Trigger on click Events with jQuery", "difficulty": 3.19, "description": [ @@ -53,7 +76,7 @@ "type": "waypoint" }, { - "id": "bb000000000000000000001", + "id": "bb000000000000000000002", "title": "Creating HTML from Data from an AJAX request Using jQuery", "difficulty": 3.20, "description": [ @@ -112,7 +135,7 @@ "type": "waypoint" }, { - "id": "bb000000000000000000002", + "id": "bb000000000000000000003", "title": "Convert JSON data to HTML", "difficulty": 3.21, "description": [ @@ -135,8 +158,7 @@ "" ], "tests": [ - "assert($(\".message\").html() !== '', 'The message box should have something in it')", - "assert($(\".message div\").html() !== undefined, 'you should have made created some sort of view from the json data')" + "assert($(\".message\").html() !== '', 'The message box should have something in it')" ], "challengeSeed": [ "fccss", @@ -149,10 +171,12 @@ " ", " //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", " ", + " ", + " ", + " //Don't modify below here", + " ", "     $(\".message\").html(html);", " ", "   });", @@ -186,20 +210,199 @@ "type": "waypoint" }, { - "id": "bb000000000000000000003", + "id": "bb000000000000000000004", + "title": "render those images!", + "difficulty": 3.22, + "description": [ + "", + "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", + "", + "if(key === \"imageLink\"){", + "html = html + '<img class = \"' + key + '\"src = \"' + val[key] + '\">';", + "}", + "else{", + " html = html + '<div class = \"' + key + '\">' + val[key] + '</div>';", + "}", + "", + "" + ], + "tests": [ + "assert(editor.match(/imageLink/gi), 'You should have accessed the imageLink of each cat object')" + ], + "challengeSeed": [ + "fccss", + "$(document).ready(function() {", + " ", + " $(\"#getMessage\").on(\"click\", function() {", + "   $.getJSON(\"/json/cats.json?callback=\", function( json ) {", + " ", + " var html = \"\";", + " ", + " //Add you code to modify the data here. It should add it to the html sting for use in the view", + " ", + "  json.map(function(val){", + "", + " html = html + \"
\"", + "", + "", + "", + " for(var key in val){", + "", + " //Don't modify above here", + " ", + " ", + " ", + " //Don't modify below here", + "", + " }", + " ", + " html = html + \"

\"", + "", + " });", + " ", + " //Don't modify above here", + " ", + "     $(\".message\").html(html);", + " ", + "   });", + " });", + " ", + " });", + "fcces", + "", + "", + "", + "
", + "
", + "

Cat Photo Finder

", + "
", + "
", + "
", + "
", + " The message will go here", + "
", + "
", + "
", + "
", + "
", + " ", + "
", + "
", + "
", + "" + ], + "challengeType": 0, + "type": "waypoint" + }, + { + "id": "bb000000000000000000005", "title": "Pre-filtering the JSON", "difficulty": 3.22, "description": [ "", - "If we want to filter the data we have so that we are searching through results based on users inout. It is far more efficient to filter and display a copy of the data we have instead of requesting a new copy each time.", "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", + "", + "json = json.filter(function(val){", + " return(val.id !== 1);", + "});", + "", "" ], "tests": [ - "/*be assertive!*/" + "assert(editor.match(/filter/gi), 'You should be making use of the .filter method')" ], "challengeSeed": [ - "TODO: get the result of the previous challenge" + "fccss", + "$(document).ready(function() {", + " ", + " $(\"#getMessage\").on(\"click\", function() {", + "   $.getJSON(\"/json/cats.json?callback=\", function( json ) {", + " ", + " var html = \"\";", + " ", + " //Add you code to modify the data here. It should add it to the html sting for use in the view", + " ", + "  json.map(function(val){", + "", + "    val = \"\" ", + "", + " html = html + \"
\"", + "", + " //Don't modify above here", + " ", + " ", + " ", + " //Don't modify below here", + "", + " for(var key in val){", + "", + " html = html + '
' + val[key] + '
';", + "", + " }", + "", + " ", + " html = html + \"

\"", + "", + " });", + " ", + " //Don't modify above here", + " ", + "     $(\".message\").html(html);", + " ", + "   });", + " });", + " ", + " });", + "fcces", + "", + "", + "", + "
", + "
", + "

Cat Photo Finder

", + "
", + "
", + "
", + "
", + " The message will go here", + "
", + "
", + "
", + "
", + "
", + " ", + "
", + "
", + "
", + "" + ], + "challengeType": 0, + "type": "waypoint" + }, + { + "id": "bb000000000000000000006", + "title": "Getting Geo-location data for use in APIs", + "difficulty": 3.19, + "description": [ + "", + "Be descriptive!" + ], + "tests": [ + "/*Be Assertive*/')" + ], + "challengeSeed": [ + "var json = {", + " name: \"Happy Camper\"", + " age: 35", + " height: \"5ft 8\"", + "}" ], "challengeType": 0, "type": "waypoint" From d65042af543b777729921dd24fa49001f1044388 Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Mon, 5 Oct 2015 22:46:29 +0100 Subject: [PATCH 05/12] Finished the geolocation waypoint. Ready for QA and copy fixes --- challenges/json-apis-and-ajax.json | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/challenges/json-apis-and-ajax.json b/challenges/json-apis-and-ajax.json index fda516722e..cec38c8b65 100644 --- a/challenges/json-apis-and-ajax.json +++ b/challenges/json-apis-and-ajax.json @@ -392,10 +392,22 @@ "difficulty": 3.19, "description": [ "", - "Be descriptive!" + "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.", + "", + "if (navigator.geolocation) {", + " navigator.geolocation.getCurrentPosition(function(position){", + " // Do something in here with the coordinates!", + " ", + " console.log(\"latitiude\", position.coords.latitude);", + " console.log(\"longitude\", position.coords.longitude);", + " ", + " });", + "}", + "" ], "tests": [ - "/*Be Assertive*/')" + "assert(editor.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'you should make use of the navigator.geolocation to access the users current location')" ], "challengeSeed": [ "var json = {", From b611793bdf53c5ff275d5a857eee71eb007b2933 Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Mon, 5 Oct 2015 23:42:30 +0100 Subject: [PATCH 06/12] Brought in line with staging and added spoofigator! --- challenges/json-apis-and-ajax.json | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/challenges/json-apis-and-ajax.json b/challenges/json-apis-and-ajax.json index cec38c8b65..9ea8bfd0e8 100644 --- a/challenges/json-apis-and-ajax.json +++ b/challenges/json-apis-and-ajax.json @@ -396,13 +396,12 @@ "The navigator will get the users current longitude and latitude with a decent level of accuracy.", "", "if (navigator.geolocation) {", - " navigator.geolocation.getCurrentPosition(function(position){", - " // Do something in here with the coordinates!", - " ", - " console.log(\"latitiude\", position.coords.latitude);", - " console.log(\"longitude\", position.coords.longitude);", - " ", - " });", + "  navigator.geolocation.getCurrentPosition(function(position){", + "    // Do something in here with the coordinates!", + "    ", + "    $(\"#data\").html(\"latitiude\" + position.coords.latitude + \"longitude\" + position.coords.longitude);", + "    ", + "  });", "}", "" ], @@ -410,11 +409,13 @@ "assert(editor.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'you should make use of the navigator.geolocation to access the users current location')" ], "challengeSeed": [ - "var json = {", - " name: \"Happy Camper\"", - " age: 35", - " height: \"5ft 8\"", - "}" + "fccss", + "", + "fcces", + "
", + "

You are here!

", + " ", + "
" ], "challengeType": 0, "type": "waypoint" From 733d46b2527b592c643c5029ccf92ee143327c27 Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Tue, 6 Oct 2015 21:47:29 +0100 Subject: [PATCH 07/12] Fixed tests --- challenges/json-apis-and-ajax.json | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/challenges/json-apis-and-ajax.json b/challenges/json-apis-and-ajax.json index 9ea8bfd0e8..de5feb033c 100644 --- a/challenges/json-apis-and-ajax.json +++ b/challenges/json-apis-and-ajax.json @@ -10,19 +10,18 @@ "", "JSON is a way of creating a file or a db record from a javascript object.", "JSON works in the exact same way as javascript objects that you should be familiar with.", - "" + "Lets add a string property to out object." ], "tests": [ - "assert(typeof json !== 'undefined')" + "assert(typeof json !== 'undefined' && Object.keys(json).length === 3 && typeof(json[Object.keys(json)[Object.keys(json).length-1]]) === 'string', 'message: You should have added a string value to your object.')" ], "challengeSeed": [ "var json = {", - " name: \"Happy Camper\"", - " age: 35", - " height: \"5ft 8\"", + " \"name\": \"Happy Camper\"", + " \"height\": \"160cm\"", "}" ], - "challengeType": 0, + "challengeType": 1, "type": "waypoint" }, { @@ -158,8 +157,8 @@ "" ], "tests": [ - "assert($(\".message\").html() !== '', 'The message box should have something in it')" - ], + "assert(/json\\.map/gi, 'The message box should have something in it')" + ], "challengeSeed": [ "fccss", " $(document).ready(function() {", From ccd7fcc32d877273f348792e48537ccc0631734f Mon Sep 17 00:00:00 2001 From: benmcmahon100 Date: Tue, 6 Oct 2015 22:54:20 +0100 Subject: [PATCH 08/12] More test and copy fixes. Removed weird bugged challenge --- challenges/json-apis-and-ajax.json | 64 ++++++++++-------------------- 1 file changed, 21 insertions(+), 43 deletions(-) diff --git a/challenges/json-apis-and-ajax.json b/challenges/json-apis-and-ajax.json index de5feb033c..c522e2441b 100644 --- a/challenges/json-apis-and-ajax.json +++ b/challenges/json-apis-and-ajax.json @@ -2,45 +2,23 @@ "name": "JSON APIs and Ajax", "order": 0.0065, "challenges": [ - { - "id": "bb000000000000000000000", - "title": "Understanding JSON", - "difficulty": 3.19, - "description": [ - "", - "JSON is a way of creating a file or a db record from a javascript object.", - "JSON works in the exact same way as javascript objects that you should be familiar with.", - "Lets add a string property to out object." - ], - "tests": [ - "assert(typeof json !== 'undefined' && Object.keys(json).length === 3 && typeof(json[Object.keys(json)[Object.keys(json).length-1]]) === 'string', 'message: You should have added a string value to your object.')" - ], - "challengeSeed": [ - "var json = {", - " \"name\": \"Happy Camper\"", - " \"height\": \"160cm\"", - "}" - ], - "challengeType": 1, - "type": "waypoint" - }, { "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 Get Message button to set the text of a div", - "We will later use this to display the result of out API request", + "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 Get Message button to set the text of a div.", + "We will later use this to display the result of out API request.", "$(\"#getMessage\").on(\"click\", function(){", "  $(\".message\").html(\"Here is the message\");", "});" ], "tests": [ - "assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\#getMessage(?:'|\")\\s*?\\)\\s*?\\.on\\s*?\\(\\s*?(?:'|\")click(?:'|\")\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'You should have bound the click event to the getMessage button')", - "assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?\\.html\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'You should set te value of the #message box to be the message given in the description')", - "assert(editor.match(/\\n*?\\s*?\\}\\n*?\\s*?\\);/gi) && editor.match(/\\n*?\\s*?\\}\\);/gi).length >= 2, 'Make sure that you close off all of your functions')" + "assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\#getMessage(?:'|\")\\s*?\\)\\s*?\\.on\\s*?\\(\\s*?(?:'|\")click(?:'|\")\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'You should have bound the click event to the getMessage button.')", + "assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?\\.html\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'You should set te value of the #message box to be the message given in the description.')", + "assert(editor.match(/\\n*?\\s*?\\}\\n*?\\s*?\\);/gi) && editor.match(/\\n*?\\s*?\\}\\);/gi).length >= 2, 'Make sure that you close off all of your functions.')" ], "challengeSeed": [ "fccss", @@ -87,15 +65,15 @@ "    $(\".message\").html(JSON.stringify(json))", "  });", "});", - "Let's make it so that the data sent from the request is appended to the .message div", + "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')", - "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) && 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*?(\\\"|\\')\\#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) && 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.')" ], "challengeSeed": [ "fccss", @@ -139,7 +117,7 @@ "difficulty": 3.21, "description": [ "", - "Now that we have the data let's re-arrange it so that ", + "Now that we have the data let's re-arrange it so that it can be displayed in a user friendly way.", "", "", "  json.map(function(val){", @@ -157,7 +135,7 @@ "" ], "tests": [ - "assert(/json\\.map/gi, 'The message box should have something in it')" + "assert(/json\\.map/gi, 'The message box should have something in it.')" ], "challengeSeed": [ "fccss", @@ -215,7 +193,7 @@ "description": [ "", "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", + "If it is an image we should use it as an ima tag instead so that the image is rendered.", "", "if(key === \"imageLink\"){", "html = html + '<img class = \"' + key + '\"src = \"' + val[key] + '\">';", @@ -227,7 +205,7 @@ "" ], "tests": [ - "assert(editor.match(/imageLink/gi), 'You should have accessed the imageLink of each cat object')" + "assert(editor.match(/imageLink/gi), 'You should have accessed the imageLink of each cat object.')" ], "challengeSeed": [ "fccss", @@ -303,8 +281,8 @@ "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", + "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.", "", "json = json.filter(function(val){", " return(val.id !== 1);", @@ -313,7 +291,7 @@ "" ], "tests": [ - "assert(editor.match(/filter/gi), 'You should be making use of the .filter method')" + "assert(editor.match(/filter/gi), 'You should be making use of the .filter method.')" ], "challengeSeed": [ "fccss", @@ -405,7 +383,7 @@ "" ], "tests": [ - "assert(editor.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'you should make use of the navigator.geolocation to access the users current location')" + "assert(editor.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'you should make use of the navigator.geolocation to access the users current location.')" ], "challengeSeed": [ "fccss", From ba8a06cf4b8603dafe77a79065ae46aa74224539 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Tue, 6 Oct 2015 15:37:43 -0700 Subject: [PATCH 09/12] improve markup and titles of challenges --- challenges/json-apis-and-ajax.json | 145 +++++++++-------------------- 1 file changed, 46 insertions(+), 99 deletions(-) diff --git a/challenges/json-apis-and-ajax.json b/challenges/json-apis-and-ajax.json index c522e2441b..1148756772 100644 --- a/challenges/json-apis-and-ajax.json +++ b/challenges/json-apis-and-ajax.json @@ -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 Get Message button to set the text of a div.", + "This data normally comes in the form of JSON.", + "Let's get the Get Message button to set the text of a div element.", "We will later use this to display the result of out API request.", "$(\"#getMessage\").on(\"click\", function(){", "  $(\".message\").html(\"Here is the message\");", @@ -33,13 +32,11 @@ "
", "

Cat Photo Finder

", "
", - "
", "
", "
", " The message will go here", "
", "
", - "
", "
", "
", "
\"", "", " });", " ", - " //Don't modify above here", - " ", "     $(\".message\").html(html);", " ", "   });", @@ -248,19 +214,15 @@ " });", "fcces", "", - "", - "", "
", "
", "

Cat Photo Finder

", "
", - "
", "
", "
", " The message will go here", "
", "
", - "
", "
", "
", "
\"", "", " });", " ", - " //Don't modify above here", - " ", "     $(\".message\").html(html);", " ", "   });", @@ -337,19 +293,16 @@ " });", "fcces", "", - "", "", "
", "
", "

Cat Photo Finder

", "
", - "
", "
", "
", " The message will go here", "
", "
", - "
", "
", "
", "
", "
", - "
", + "
", " The message will go here", "
", "
", @@ -53,16 +52,16 @@ "type": "waypoint" }, { - "id": "bb000000000000000000001", + "id": "bc000000000000000000001", "title": "Change Text with Click Events", "description": [ "When our Click Event happens, we can use Ajax to update an HTML element.", - "Let's make it so that when a user clicks our \"Get Message\" button, we change the text of our div with the class message to say \"Here is the message\".", + "Let's make it so that when a user clicks the \"Get Message\" button, we change the text of the element with the class message to say \"Here is the message\".", "We can do this by adding the following code within our Click event:", "  $(\".message\").html(\"Here is the message\");" ], "tests": [ - "assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?\\.html\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'You should set te value of the #message box to be the message given in the description.')" + "assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?\\.html\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'Clicking the \"Get Message\" button should give the element with the class message the text \"Here is the message\".')" ], "challengeSeed": [ "fccss", @@ -103,12 +102,13 @@ "description": [ "You can also request data from an external source. This is where APIs - Application Interfaces - come into play.", "Most modern APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.", - "You've already been JSON whenever you've created JavaScript objects. JSON is just a bunch of object properties and their current values, sandwiched between a { and a }. You may hear these referred to as \"key-value pairs\".", - "Let's get the JSON from Free Code Camp's Cat API. Here's the code you can put in your Click event to do this:", + "You've already been using JSON whenever you create a JavaScript objects. JSON is just a bunch of 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))", - "  });", - "});" + "  });" ], "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.')", @@ -137,7 +137,7 @@ "

Cat Photo Finder

", "
", "
", - "
", + "
", " The message will go here", "
", "
", @@ -201,7 +201,7 @@ "

Cat Photo Finder

", "
", "
", - "
", + "
", " The message will go here","
", "
", "
", @@ -274,7 +274,7 @@ "

Cat Photo Finder

", "
", "
", - "
", + "
", " The message will go here", "
", "
", @@ -353,7 +353,7 @@ "

Cat Photo Finder

", "
", "
", - "
", + "
", " The message will go here", "
", "
", From 97a3b12bfb081fdc7078a82d295a2523edb1f2f0 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Fri, 23 Oct 2015 21:32:51 -0700 Subject: [PATCH 12/12] finish editing ajax challenges --- challenges/basic-javascript.json | 8 +- challenges/json-apis-and-ajax.json | 163 ++++++++++++++--------------- 2 files changed, 84 insertions(+), 87 deletions(-) diff --git a/challenges/basic-javascript.json b/challenges/basic-javascript.json index 97b37c6fab..e2ac950334 100644 --- a/challenges/basic-javascript.json +++ b/challenges/basic-javascript.json @@ -42,11 +42,11 @@ "challengeSeed": [ "function welcomeToBooleans() {", "", - "// Only change code below this line.", + " // Only change code below this line.", "", " return false;", "", - "// Only change code above this line.", + " // Only change code above this line.", "}", "", "welcomeToBooleans();" @@ -70,10 +70,10 @@ "challengeSeed": [ "// var ourName = \"Free Code Camp\";", "", + "// Only change code below this line.", + "", "", "// Only change code above this line.", - "// We use this function to show you the value of your variable in your output box.", - "// You'll learn about functions soon.", "", "if(typeof(myName) !== \"undefined\"){(function(v){return v;})(myName);}" ], diff --git a/challenges/json-apis-and-ajax.json b/challenges/json-apis-and-ajax.json index 9d75724a63..ea3a4351e2 100644 --- a/challenges/json-apis-and-ajax.json +++ b/challenges/json-apis-and-ajax.json @@ -7,11 +7,11 @@ "id": "bb000000000000000000001", "title": "Trigger Click Events with jQuery", "description": [ - "In this section, we'll learn how to get data from APIs. APIs 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 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.", - "Before we can do this, we need to implement a Click event inside of our $(document).ready() function by adding this code:", + "Before we can do this, we need to implement a click event inside of our $(document).ready() function by adding this code:", "$(\"#getMessage\").on(\"click\", function(){", "", "});" @@ -55,9 +55,9 @@ "id": "bc000000000000000000001", "title": "Change Text with Click Events", "description": [ - "When our Click Event happens, we can use Ajax to update an HTML element.", + "When our click event happens, we can use Ajax to update an HTML element.", "Let's make it so that when a user clicks the \"Get Message\" button, we change the text of the element with the class message to say \"Here is the message\".", - "We can do this by adding the following code within our Click event:", + "We can do this by adding the following code within our click event:", "  $(\".message\").html(\"Here is the message\");" ], "tests": [ @@ -75,6 +75,7 @@ "fcces", "", "", + "
", "
", "

Cat Photo Finder

", @@ -100,15 +101,17 @@ "id": "bb000000000000000000002", "title": "Get JSON with the jQuery getJSON Method", "description": [ - "You can also request data from an external source. This is where APIs - Application Interfaces - come into play.", - "Most modern 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 objects. JSON is just a bunch of object properties and their current values, sandwiched between a { and a }.", + "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.", + "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:", + "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))", - "  });" + "  });", + "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.')", @@ -157,9 +160,10 @@ "id": "bb000000000000000000003", "title": "Convert JSON Data to HTML", "description": [ - "Now that we are getting data from a JSON API, let's display it in HTML.", - "We can use the .map() method to loop through our data and modify HTML elements.", - "First we'll declare an HTML variable. Then we'll loop through our JSON, adding more HTML to that variable. When the loop is finished, we'll render it.", + "Now that we're getting data from a JSON API, let's display it in our HTML.", + "We can use the .map() method to loop through our data and modify our HTML elements.", + "First, let's declare an html variable with var html = \"\";.", + "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'>\"", @@ -170,30 +174,32 @@ "});" ], "tests": [ - "assert(/json\\.map/gi, 'The message box should have something in it.')" + "assert(editor.match(/json\\.map/gi), 'The message box should have something in it.')" ], "challengeSeed": [ "fccss", - " $(document).ready(function() {", - " ", - " $(\"#getMessage\").on(\"click\", function() {", - "   $.getJSON(\"/json/cats.json?callback=\", function( json ) {", - " ", - " var html = \"\";", - " ", - " // Only change code below this line.", - " ", - " ", - " ", - " ", - " // Only change code above this line.", - " ", - "     $(\".message\").html(html);", - " ", - "   });", - " });", - " ", - " });", + " $(document).ready(function() {", + "", + " $(\"#getMessage\").on(\"click\", function() {", + "   $.getJSON(\"/json/cats.json?callback=\", function( json ) {", + "", + " // Only change code below this line.", + "", + "", + "", + "", + "", + "", + "", + "", + "", + " // Only change code above this line.", + "", + "     $(\".message\").html(html);", + "", + "   });", + " });", + " });", "fcces", "", "
", @@ -234,39 +240,36 @@ ], "challengeSeed": [ "fccss", - "$(document).ready(function() {", - " ", - " $(\"#getMessage\").on(\"click\", function() {", - "   $.getJSON(\"/json/cats.json?callback=\", function( json ) {", - " ", - " var html = \"\";", - " ", - " //Add you code to modify the data here. It should add it to the html sting for use in the view", - " ", - "  json.map(function(val){", + " $(document).ready(function() {", + "", + " $(\"#getMessage\").on(\"click\", function() {", + "  $.getJSON(\"/json/cats.json?callback=\", function( json ) {", + "", + " var html = \"\";", + "", + " json.map(function(val) {", "", " html = html + \"
\"", "", - " for(var key in val){", + " for (var key in val) {", "", - " // Only change code below this line.", - " ", - " ", - " ", - " // Only change code above this line.", + " // Only change code below this line.", + "", + "", + "", + " // Only change code above this line.", "", " }", - " ", + "", " html = html + \"
\"", "", " });", - " ", - "     $(\".message\").html(html);", - " ", - "   });", - " });", - " ", - " });", + "", + "     $(\".message\").html(html);", + "", + " });", + " });", + " });", "fcces", "", "
", @@ -285,8 +288,7 @@ " ", "
", "
", - "
", - "" + "
" ], "challengeType": 0, "type": "waypoint" @@ -307,26 +309,24 @@ ], "challengeSeed": [ "fccss", - "$(document).ready(function() {", - " ", - " $(\"#getMessage\").on(\"click\", function() {", - "   $.getJSON(\"/json/cats.json?callback=\", function( json ) {", - " ", - " var html = \"\";", - " ", - " //Add you code to modify the data here. It should add it to the html sting for use in the view", - " ", - "  json.map(function(val){", + " $(document).ready(function() {", + "", + " $(\"#getMessage\").on(\"click\", function() {", + "   $.getJSON(\"/json/cats.json?callback=\", function( json ) {", + "", + " var html = \"\";", + "", + " json.map(function(val){", "", "    val = \"\" ", "", " html = html + \"
\"", "", - " // Only change code below this line.", - " ", - " ", - " ", - " // Only change code above this line.", + " // Only change code below this line.", + "", + "", + "", + " // Only change code above this line.", "", " for(var key in val){", "", @@ -334,17 +334,15 @@ "", " }", "", - " ", " html = html + \"
\"", "", " });", - " ", - "     $(\".message\").html(html);", - " ", - "   });", - " });", - " ", - " });", + "", + "     $(\".message\").html(html);", + "", + "   });", + " });", + " });", "fcces", "", "", @@ -379,7 +377,6 @@ "Here's some code that does this:", "if (navigator.geolocation) {", "  navigator.geolocation.getCurrentPosition(function(position) {", - "    // Do something in here with the coordinates", "    $(\"#data\").html(\"latitiude\" + position.coords.latitude + \"longitude\" + position.coords.longitude);", "  });", "}"