2015-08-07 06:19:05 +00:00
{
2015-08-11 05:17:49 +00:00
"name" : "JSON APIs and Ajax" ,
2015-08-18 17:57:38 +00:00
"order" : 0.0065 ,
2015-08-07 06:19:05 +00:00
"challenges" : [
2015-08-11 05:17:49 +00:00
{
2015-08-13 22:32:40 +00:00
"id" : "bad87fed1348bd9aeca08826" ,
2015-08-11 05:17:49 +00:00
"title" : "Trigger on click Events with jQuery" ,
"difficulty" : 3.19 ,
"description" : [
2015-09-05 00:04:25 +00:00
"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" ,
"We will later use this to display the result of out API request" ,
2015-08-21 19:20:56 +00:00
"<code>$(\"#getMessage\").on(\"click\", function(){</code>" ,
"<code>  $(\".message\").html(\"Here is the message\");</code>" ,
"<code>});</code>"
2015-08-11 05:17:49 +00:00
] ,
"tests" : [
2015-08-21 19:20:56 +00:00
"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')"
2015-08-11 05:17:49 +00:00
] ,
"challengeSeed" : [
"fccss" ,
2015-08-21 19:20:56 +00:00
" $(document).ready(function() {" ,
" " ,
" });" ,
2015-08-11 05:17:49 +00:00
"fcces" ,
"" ,
"<!-- You shouldn't need to modify code below this line -->" ,
"" ,
2015-08-13 19:55:50 +00:00
"<div class=\"container-fluid\">" ,
2015-08-21 19:20:56 +00:00
" <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\">" ,
" Get Message" ,
" </button>" ,
" </div>" ,
" </div>" ,
2015-08-11 05:17:49 +00:00
"</div>"
] ,
"challengeType" : 0 ,
"type" : "waypoint"
} ,
2015-09-05 00:04:25 +00:00
{
"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 (<code>:</code>) 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 <code>data</code> variable!\");" ,
"assert(typeof getAnId != \"undefined\", \"Whoops! It looks like you deleted the <code>getAnId</code> 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"
} ,
2015-08-13 19:55:50 +00:00
{
"id" : "bad87fee1348bd9aeca08826" ,
2015-09-05 00:04:25 +00:00
"title" : "Displaying JSON data in HTML" ,
2015-08-13 19:55:50 +00:00
"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 (<code>:</code>) is the \"key\" you use to unlock the \"value\" on the right of the colon."
] ,
"tests" : [
2015-08-11 05:17:49 +00:00
] ,
"challengeSeed" : [
"fccss" ,
" $(document).ready(function() {" ,
2015-08-21 19:20:56 +00:00
" $(\"#getMessage\").on(\"click\", function(){" ,
" $(\".message\").html(\"Here is the message\");" ,
2015-08-11 05:17:49 +00:00
" });" ,
" });" ,
"fcces" ,
"" ,
"<!-- You shouldn't need to modify code below this line -->" ,
"" ,
2015-08-13 19:55:50 +00:00
"<div class=\"container-fluid\">" ,
2015-08-21 19:20:56 +00:00
" <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\">" ,
" Get Message" ,
" </button>" ,
" </div>" ,
" </div>" ,
2015-08-11 05:17:49 +00:00
"</div>"
] ,
"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 <code>rollOut</code>."
] ,
"tests" : [
] ,
"challengeSeed" : [
"fccss" ,
" $(document).ready(function() {" ,
2015-08-13 19:55:50 +00:00
" $(\"button\").on(\"click\", function() {" ,
" $(\"#click-me\").addClass(\"animated shake\");" ,
2015-08-11 05:17:49 +00:00
" });" ,
" });" ,
"fcces" ,
"" ,
"<!-- You shouldn't need to modify code below this line -->" ,
"" ,
2015-08-13 19:55:50 +00:00
"<div class=\"container-fluid\">" ,
" <div class=\"row\">" ,
" <div class=\"col-xs-2\">" ,
" <input type=\"checkbox\" id=\"check-me\">" ,
2015-08-11 05:17:49 +00:00
" </div>" ,
2015-08-13 19:55:50 +00:00
" <div class=\"col-xs-10\">" ,
2015-08-11 05:17:49 +00:00
" <p>#check-me</p>" ,
" </div>" ,
2015-08-13 19:55:50 +00:00
" <button class=\"btn btn-block btn-primary\">#click-me</button>" ,
2015-08-11 05:17:49 +00:00
" <span>Is the checkbox checked?</span>" ,
2015-08-13 19:55:50 +00:00
" <span id=\"checked-state\"></span>" ,
2015-08-11 05:17:49 +00:00
"</div>"
] ,
"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 <code>rollOut</code>."
] ,
"tests" : [
] ,
"challengeSeed" : [
"fccss" ,
" $(document).ready(function() {" ,
2015-08-13 19:55:50 +00:00
" $(\"button\").on(\"click\", function() {" ,
" $(\"#click-me\").addClass(\"animated shake\");" ,
" $(\"#checked-state\").text(\"happy text\");" ,
2015-08-11 05:17:49 +00:00
" });" ,
" });" ,
"fcces" ,
"" ,
"<!-- You shouldn't need to modify code below this line -->" ,
"" ,
2015-08-13 19:55:50 +00:00
"<div class=\"container-fluid\">" ,
" <div class=\"row\">" ,
" <div class=\"col-xs-2\">" ,
" <input type=\"checkbox\" id=\"check-me\">" ,
2015-08-11 05:17:49 +00:00
" </div>" ,
2015-08-13 19:55:50 +00:00
" <div class=\"col-xs-10\">" ,
2015-08-11 05:17:49 +00:00
" <p>#check-me</p>" ,
" </div>" ,
2015-08-13 19:55:50 +00:00
" <button class=\"btn btn-block btn-primary\">#click-me</button>" ,
2015-08-11 05:17:49 +00:00
" <span>Is the checkbox checked?</span>" ,
2015-08-13 19:55:50 +00:00
" <span id=\"checked-state\"></span>" ,
2015-08-11 05:17:49 +00:00
"</div>"
] ,
"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 <code>rollOut</code>."
] ,
"tests" : [
] ,
"challengeSeed" : [
"fccss" ,
" $(document).ready(function() {" ,
2015-08-13 19:55:50 +00:00
" $(\"button\").on(\"click\", function() {" ,
" $(\"#click-me\").addClass(\"animated shake\");" ,
" $(\"#checked-state\").text($(\"#check-me\").prop(\"checked\"));" ,
2015-08-11 05:17:49 +00:00
" });" ,
" });" ,
"fcces" ,
"" ,
"<!-- You shouldn't need to modify code below this line -->" ,
"" ,
2015-08-13 19:55:50 +00:00
"<div class=\"container-fluid\">" ,
" <div class=\"row\">" ,
" <div class=\"col-xs-2\">" ,
" <input type=\"checkbox\" id=\"check-me\">" ,
2015-08-11 05:17:49 +00:00
" </div>" ,
2015-08-13 19:55:50 +00:00
" <div class=\"col-xs-10\">" ,
2015-08-11 05:17:49 +00:00
" <p>#check-me</p>" ,
" </div>" ,
2015-08-13 19:55:50 +00:00
" <button class=\"btn btn-block btn-primary\">#click-me</button>" ,
2015-08-11 05:17:49 +00:00
" <span>Is the checkbox checked?</span>" ,
2015-08-13 19:55:50 +00:00
" <span id=\"checked-state\"></span>" ,
2015-08-11 05:17:49 +00:00
"</div>"
] ,
"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() {" ,
2015-08-13 19:55:50 +00:00
" $(\"button\").on(\"click\", function() {" ,
" $(\"#click-me\").addClass(\"animated shake\");" ,
" $(\"#checked-state\").text($(\"#check-me\").prop(\"checked\"));" ,
2015-08-11 05:17:49 +00:00
" });" ,
" });" ,
"fcces" ,
"" ,
"<!-- You shouldn't need to modify code below this line -->" ,
"" ,
2015-08-13 19:55:50 +00:00
"<div class=\"container-fluid\">" ,
" <div class=\"row\">" ,
" <div class=\"col-xs-2\">" ,
" <input type=\"checkbox\" id=\"check-me\">" ,
2015-08-11 05:17:49 +00:00
" </div>" ,
2015-08-13 19:55:50 +00:00
" <div class=\"col-xs-10\">" ,
2015-08-11 05:17:49 +00:00
" <p>#check-me</p>" ,
" </div>" ,
2015-08-13 19:55:50 +00:00
" <button class=\"btn btn-block btn-primary\">#click-me</button>" ,
2015-08-11 05:17:49 +00:00
" <span>Is the checkbox checked?</span>" ,
2015-08-13 19:55:50 +00:00
" <span id=\"checked-state\"></span>" ,
2015-08-11 05:17:49 +00:00
"</div>"
] ,
"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() {" ,
"" ,
2015-08-13 19:55:50 +00:00
" $(\"#cat-button\").on(\"click\", function() {" ,
" $.getJSON(\"/json/cats.json\", function( json ) {" ,
2015-08-11 05:17:49 +00:00
"" ,
" });" ,
" });" ,
"" ,
" });" ,
"fcces" ,
2015-08-13 19:55:50 +00:00
"<div class=\"container-fluid\">" ,
" <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>" ,
" <div class=\"jumbotron\" id=\"output\">" ,
" </div>" ,
2015-08-11 05:17:49 +00:00
"</div>"
] ,
"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() {" ,
"" ,
2015-08-13 19:55:50 +00:00
" $(\"#cat-button\").on(\"click\", function() {" ,
" $.getJSON(\"/json/cats.json\", function( json ) {" ,
2015-08-11 05:17:49 +00:00
"" ,
" });" ,
" });" ,
"" ,
" });" ,
"fcces" ,
2015-08-13 19:55:50 +00:00
"<div class=\"container-fluid\">" ,
" <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>" ,
" <div class=\"jumbotron\" id=\"output\">" ,
" </div>" ,
2015-08-11 05:17:49 +00:00
"</div>"
] ,
"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" : [
2015-08-13 19:55:50 +00:00
"<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
2015-08-11 05:17:49 +00:00
] ,
"tests" : [
] ,
"challengeSeed" : [
"fccss" ,
" var random = function() { return Math.floor(Math.random() * 3) }" ,
" $(document).ready(function() {" ,
"" ,
2015-08-13 19:55:50 +00:00
" $(\"#cat-button\").on(\"click\", function() {" ,
" $.getJSON(\"/json/cats.json\", function( json ) {" ,
2015-08-11 05:17:49 +00:00
"" ,
" });" ,
" });" ,
"" ,
" });" ,
"fcces" ,
2015-08-13 19:55:50 +00:00
"<div class=\"container-fluid\">" ,
" <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>" ,
" <div class=\"jumbotron\" id=\"output\">" ,
" </div>" ,
2015-08-11 05:17:49 +00:00
"</div>"
] ,
"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" : [
2015-08-13 19:55:50 +00:00
"<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
2015-08-11 05:17:49 +00:00
] ,
"tests" : [
] ,
"challengeSeed" : [
"fccss" ,
" var random = function() { return Math.floor(Math.random() * 3) }" ,
" $(document).ready(function() {" ,
"" ,
2015-08-13 19:55:50 +00:00
" $(\"#cat-button\").on(\"click\", function() {" ,
" $.getJSON(\"/json/cats.json\", function( json ) {" ,
2015-08-11 05:17:49 +00:00
" var kitten = json[random()];" ,
" });" ,
" });" ,
"" ,
" });" ,
"fcces" ,
2015-08-13 19:55:50 +00:00
"<div class=\"container-fluid\">" ,
" <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>" ,
" <div class=\"jumbotron\" id=\"output\">" ,
" </div>" ,
2015-08-11 05:17:49 +00:00
"</div>"
] ,
"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" : [
2015-08-13 19:55:50 +00:00
"<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
2015-08-11 05:17:49 +00:00
] ,
"tests" : [
] ,
"challengeSeed" : [
"fccss" ,
" var random = function() { return Math.floor(Math.random() * 3) }" ,
" $(document).ready(function() {" ,
"" ,
2015-08-13 19:55:50 +00:00
" $(\"#cat-button\").on(\"click\", function() {" ,
" $.getJSON(\"/json/cats.json\", function( json ) {" ,
2015-08-11 05:17:49 +00:00
" var kitten = json[random()];" ,
2015-08-13 19:55:50 +00:00
" $(\"<img src=\"\" + kitten.imageLink + \"\">\").appendTo(\"#output\");" ,
2015-08-11 05:17:49 +00:00
" });" ,
" });" ,
"" ,
" });" ,
2015-08-13 19:55:50 +00:00
"<div class=\"container-fluid\">" ,
" <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>" ,
" <div class=\"jumbotron\" id=\"output\">" ,
" </div>" ,
2015-08-11 05:17:49 +00:00
"</div>"
] ,
"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" : [
2015-08-13 19:55:50 +00:00
"<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
2015-08-11 05:17:49 +00:00
] ,
"tests" : [
] ,
"challengeSeed" : [
"fccss" ,
" var random = function() { return Math.floor(Math.random() * 3) }" ,
" $(document).ready(function() {" ,
"" ,
2015-08-13 19:55:50 +00:00
" $(\"#cat-button\").on(\"click\", function() {" ,
" $.getJSON(\"/json/cats.json\", function( json ) {" ,
2015-08-11 05:17:49 +00:00
" var kitten = json[random()];" ,
2015-08-13 19:55:50 +00:00
" $(\"<img src=\"\" + kitten.imageLink + \"\">\").appendTo(\"#output\");" ,
" $(\"<h3>Code name: \" + kitten.codeNames[random()] + \"</h3>\").appendTo(\"#output\");" ,
2015-08-11 05:17:49 +00:00
" });" ,
" });" ,
"" ,
" });" ,
"fcces" ,
2015-08-13 19:55:50 +00:00
"<div class=\"container-fluid\">" ,
" <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>" ,
" <div class=\"jumbotron\" id=\"output\">" ,
" </div>" ,
2015-08-11 05:17:49 +00:00
"</div>"
] ,
"challengeType" : 0 ,
"type" : "waypoint"
}
2015-08-07 06:19:05 +00:00
]
}