start adding json challenges
Quincy Larson
parent
d138757c52
commit
4cdd0e20d9
|
|
@ -9,9 +9,7 @@
|
|||
"challengeSeed": ["125658022"],
|
||||
"description": [
|
||||
"Now you're ready to start our Zipline challenges. These front-end development challenges will give you many opportunities to apply the HTML, CSS, jQuery and JavaScript you've learned to build static (database-less) applications.",
|
||||
"For many of these challenges, you will be using JSON data from external API endpoints, such as Twitch.tv and Twitter. Note that you don't need to have a database to use these data.",
|
||||
"The easiest way to manipulate these data is with <a href='http://api.jquery.com/jquery.getjson/' target='_blank'>jQuery $.getJSON()</a>.",
|
||||
"Whatever you do, don't get discouraged! Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>RSAP</a> if you get stuck.",
|
||||
"Whatever you do, don't get discouraged! Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Post</a> if you get stuck.",
|
||||
"We'll build these challenges using CodePen, a popular tool for creating, sharing, and discovering static web applications.",
|
||||
"Go to <a href='http://codepen.io' target='_blank'>http://codepen.io</a> and create an account.",
|
||||
"Click your user image in the top right corner, then click the \"New pen\" button that drops down.",
|
||||
|
|
|
|||
|
|
@ -23,12 +23,12 @@
|
|||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class='container-fluid'>",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <form action=\"/submit-cat-photo\">",
|
||||
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
|
||||
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
|
||||
" <input type='text' placeholder='cat photo URL' required>",
|
||||
" <button type='submit'>Submit</button>",
|
||||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
||||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
||||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||||
" <button type=\"submit\">Submit</button>",
|
||||
" </form>",
|
||||
"</div>"
|
||||
],
|
||||
|
|
@ -36,6 +36,63 @@
|
|||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad87fee1348bd9aeca08826",
|
||||
"title": "Learn how JSON works",
|
||||
"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": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
"catPhotoJSON = [",
|
||||
" {",
|
||||
" \"id\": 0,",
|
||||
" \"imageLink\": \"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg\",",
|
||||
" \"codeNames\": [",
|
||||
" \"Juggernaut\",",
|
||||
" \"Mrs. Wallace\",",
|
||||
" \"Buttercup\"",
|
||||
" ]",
|
||||
" },",
|
||||
" {",
|
||||
" \"id\": 1,",
|
||||
" \"imageLink\": \"https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg\",",
|
||||
" \"codeNames\": [",
|
||||
" \"Oscar\",",
|
||||
" \"Scrooge\",",
|
||||
" \"Tyrion\"",
|
||||
" ]",
|
||||
" },",
|
||||
" {",
|
||||
" \"id\": 2,",
|
||||
" \"imageLink\": \"https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg\",",
|
||||
" \"codeNames\": [",
|
||||
" \"The Doctor\",",
|
||||
" \"Loki\",",
|
||||
" \"Joker\"",
|
||||
" ]",
|
||||
" }",
|
||||
" ]",
|
||||
"",
|
||||
"<code> });</code>",
|
||||
"fcces",
|
||||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class=\"jumbotron\" id=\"output\">",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad84fee1348bd9aecc58826",
|
||||
"title": "Read Data from an Element Using jQuery",
|
||||
|
|
@ -50,7 +107,7 @@
|
|||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $('button').on('click', function() {",
|
||||
" $(\"button\").on(\"click\", function() {",
|
||||
"",
|
||||
" });",
|
||||
" });",
|
||||
|
|
@ -58,17 +115,17 @@
|
|||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class='container-fluid'>",
|
||||
" <div class='row'>",
|
||||
" <div class='col-xs-2'>",
|
||||
" <input type='checkbox' id='check-me'>",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-2\">",
|
||||
" <input type=\"checkbox\" id=\"check-me\">",
|
||||
" </div>",
|
||||
" <div class='col-xs-10'>",
|
||||
" <div class=\"col-xs-10\">",
|
||||
" <p>#check-me</p>",
|
||||
" </div>",
|
||||
" <button class='btn btn-block btn-primary'>#click-me</button>",
|
||||
" <button class=\"btn btn-block btn-primary\">#click-me</button>",
|
||||
" <span>Is the checkbox checked?</span>",
|
||||
" <span id='checked-state'></span>",
|
||||
" <span id=\"checked-state\"></span>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
|
|
@ -89,25 +146,25 @@
|
|||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $('button').on('click', function() {",
|
||||
" $('#click-me').addClass('animated shake');",
|
||||
" $(\"button\").on(\"click\", function() {",
|
||||
" $(\"#click-me\").addClass(\"animated shake\");",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class='container-fluid'>",
|
||||
" <div class='row'>",
|
||||
" <div class='col-xs-2'>",
|
||||
" <input type='checkbox' id='check-me'>",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-2\">",
|
||||
" <input type=\"checkbox\" id=\"check-me\">",
|
||||
" </div>",
|
||||
" <div class='col-xs-10'>",
|
||||
" <div class=\"col-xs-10\">",
|
||||
" <p>#check-me</p>",
|
||||
" </div>",
|
||||
" <button class='btn btn-block btn-primary'>#click-me</button>",
|
||||
" <button class=\"btn btn-block btn-primary\">#click-me</button>",
|
||||
" <span>Is the checkbox checked?</span>",
|
||||
" <span id='checked-state'></span>",
|
||||
" <span id=\"checked-state\"></span>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
|
|
@ -128,26 +185,26 @@
|
|||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $('button').on('click', function() {",
|
||||
" $('#click-me').addClass('animated shake');",
|
||||
" $('#checked-state').text('happy text');",
|
||||
" $(\"button\").on(\"click\", function() {",
|
||||
" $(\"#click-me\").addClass(\"animated shake\");",
|
||||
" $(\"#checked-state\").text(\"happy text\");",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class='container-fluid'>",
|
||||
" <div class='row'>",
|
||||
" <div class='col-xs-2'>",
|
||||
" <input type='checkbox' id='check-me'>",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-2\">",
|
||||
" <input type=\"checkbox\" id=\"check-me\">",
|
||||
" </div>",
|
||||
" <div class='col-xs-10'>",
|
||||
" <div class=\"col-xs-10\">",
|
||||
" <p>#check-me</p>",
|
||||
" </div>",
|
||||
" <button class='btn btn-block btn-primary'>#click-me</button>",
|
||||
" <button class=\"btn btn-block btn-primary\">#click-me</button>",
|
||||
" <span>Is the checkbox checked?</span>",
|
||||
" <span id='checked-state'></span>",
|
||||
" <span id=\"checked-state\"></span>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
|
|
@ -168,26 +225,26 @@
|
|||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $('button').on('click', function() {",
|
||||
" $('#click-me').addClass('animated shake');",
|
||||
" $('#checked-state').text($('#check-me').prop('checked'));",
|
||||
" $(\"button\").on(\"click\", function() {",
|
||||
" $(\"#click-me\").addClass(\"animated shake\");",
|
||||
" $(\"#checked-state\").text($(\"#check-me\").prop(\"checked\"));",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class='container-fluid'>",
|
||||
" <div class='row'>",
|
||||
" <div class='col-xs-2'>",
|
||||
" <input type='checkbox' id='check-me'>",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-2\">",
|
||||
" <input type=\"checkbox\" id=\"check-me\">",
|
||||
" </div>",
|
||||
" <div class='col-xs-10'>",
|
||||
" <div class=\"col-xs-10\">",
|
||||
" <p>#check-me</p>",
|
||||
" </div>",
|
||||
" <button class='btn btn-block btn-primary'>#click-me</button>",
|
||||
" <button class=\"btn btn-block btn-primary\">#click-me</button>",
|
||||
" <span>Is the checkbox checked?</span>",
|
||||
" <span id='checked-state'></span>",
|
||||
" <span id=\"checked-state\"></span>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
|
|
@ -208,26 +265,26 @@
|
|||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $('button').on('click', function() {",
|
||||
" $('#click-me').addClass('animated shake');",
|
||||
" $('#checked-state').text($('#check-me').prop('checked'));",
|
||||
" $(\"button\").on(\"click\", function() {",
|
||||
" $(\"#click-me\").addClass(\"animated shake\");",
|
||||
" $(\"#checked-state\").text($(\"#check-me\").prop(\"checked\"));",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class='container-fluid'>",
|
||||
" <div class='row'>",
|
||||
" <div class='col-xs-2'>",
|
||||
" <input type='checkbox' id='check-me'>",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-2\">",
|
||||
" <input type=\"checkbox\" id=\"check-me\">",
|
||||
" </div>",
|
||||
" <div class='col-xs-10'>",
|
||||
" <div class=\"col-xs-10\">",
|
||||
" <p>#check-me</p>",
|
||||
" </div>",
|
||||
" <button class='btn btn-block btn-primary'>#click-me</button>",
|
||||
" <button class=\"btn btn-block btn-primary\">#click-me</button>",
|
||||
" <span>Is the checkbox checked?</span>",
|
||||
" <span id='checked-state'></span>",
|
||||
" <span id=\"checked-state\"></span>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
|
|
@ -256,10 +313,8 @@
|
|||
{
|
||||
"id": "bad87fee1348bd9aebc08726",
|
||||
"title": "Learn how JSON Works",
|
||||
"dashedName": "waypoint-learn-how-json-works",
|
||||
"difficulty": 3.21,
|
||||
"description": [
|
||||
"JSON stands for \"JavaScript Object Notation\". It's how you create objects in JavaScript.",
|
||||
"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": [
|
||||
|
|
@ -316,16 +371,18 @@
|
|||
"",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $('#cat-button').on('click', function() {",
|
||||
" $.getJSON('/json/cats.json', function( json ) {",
|
||||
" $(\"#cat-button\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json\", function( json ) {",
|
||||
"",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
|
||||
"<div class='jumbotron' id='output'>",
|
||||
"<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>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
|
|
@ -348,16 +405,18 @@
|
|||
"",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $('#cat-button').on('click', function() {",
|
||||
" $.getJSON('/json/cats.json', function( json ) {",
|
||||
" $(\"#cat-button\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json\", function( json ) {",
|
||||
"",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
|
||||
"<div class='jumbotron' id='output'>",
|
||||
"<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>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
|
|
@ -370,7 +429,7 @@
|
|||
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
|
||||
"difficulty": 3.24,
|
||||
"description": [
|
||||
"<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
|
||||
"<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
|
||||
],
|
||||
"tests": [
|
||||
|
||||
|
|
@ -380,16 +439,18 @@
|
|||
" var random = function() { return Math.floor(Math.random() * 3) }",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $('#cat-button').on('click', function() {",
|
||||
" $.getJSON('/json/cats.json', function( json ) {",
|
||||
" $(\"#cat-button\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json\", function( json ) {",
|
||||
"",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
|
||||
"<div class='jumbotron' id='output'>",
|
||||
"<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>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
|
|
@ -402,7 +463,7 @@
|
|||
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
|
||||
"difficulty": 3.24,
|
||||
"description": [
|
||||
"<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
|
||||
"<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
|
||||
],
|
||||
"tests": [
|
||||
|
||||
|
|
@ -412,16 +473,18 @@
|
|||
" var random = function() { return Math.floor(Math.random() * 3) }",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $('#cat-button').on('click', function() {",
|
||||
" $.getJSON('/json/cats.json', function( json ) {",
|
||||
" $(\"#cat-button\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json\", function( json ) {",
|
||||
" var kitten = json[random()];",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
|
||||
"<div class='jumbotron' id='output'>",
|
||||
"<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>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
|
|
@ -434,7 +497,7 @@
|
|||
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
|
||||
"difficulty": 3.24,
|
||||
"description": [
|
||||
"<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
|
||||
"<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
|
||||
],
|
||||
"tests": [
|
||||
|
||||
|
|
@ -444,17 +507,18 @@
|
|||
" var random = function() { return Math.floor(Math.random() * 3) }",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $('#cat-button').on('click', function() {",
|
||||
" $.getJSON('/json/cats.json', function( json ) {",
|
||||
" $(\"#cat-button\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json\", function( json ) {",
|
||||
" var kitten = json[random()];",
|
||||
" $(\"<img src='\" + kitten.imageLink + \"'>\").appendTo('#output');",
|
||||
" $(\"<img src=\"\" + kitten.imageLink + \"\">\").appendTo(\"#output\");",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
|
||||
"<div class='jumbotron' id='output'>",
|
||||
"<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>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
|
|
@ -467,7 +531,7 @@
|
|||
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
|
||||
"difficulty": 3.24,
|
||||
"description": [
|
||||
"<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
|
||||
"<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
|
||||
],
|
||||
"tests": [
|
||||
|
||||
|
|
@ -477,18 +541,20 @@
|
|||
" var random = function() { return Math.floor(Math.random() * 3) }",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $('#cat-button').on('click', function() {",
|
||||
" $.getJSON('/json/cats.json', function( json ) {",
|
||||
" $(\"#cat-button\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json\", function( json ) {",
|
||||
" var kitten = json[random()];",
|
||||
" $(\"<img src='\" + kitten.imageLink + \"'>\").appendTo('#output');",
|
||||
" $(\"<h3>Code name: \" + kitten.codeNames[random()] + \"</h3>\").appendTo('#output');",
|
||||
" $(\"<img src=\"\" + kitten.imageLink + \"\">\").appendTo(\"#output\");",
|
||||
" $(\"<h3>Code name: \" + kitten.codeNames[random()] + \"</h3>\").appendTo(\"#output\");",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
|
||||
"<div class='jumbotron' id='output'>",
|
||||
"<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>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
|
|
|
|||
Loading…
Reference in New Issue