{
  "name": "JSON APIs and Ajax",
  "order": 0.007,
  "challenges": [
    {
      "id": "bad87fed1348bd9aeca08826",
      "title":  "Trigger on click Events with jQuery",
      "difficulty": 3.19,
      "description": [
        "<code>.on('click', function() {</code>",
        "",
        "});</code>"
      ],
      "tests": [

      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {</code>",
        "",
        "<code>  });</code>",
        "fcces",
        "",
        "<!-- You shouldn't need to modify code below this line -->",
        "",
        "<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>",
        "  </form>",
        "</div>"
      ],
      "challengeType": 0,
      "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",
      "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() {",
        "    $(\"button\").on(\"click\", function() {",
        "",
        "    });",
        "  });",
        "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>",
        "    <div class=\"col-xs-10\">",
        "      <p>#check-me</p>",
        "    </div>",
        "  <button class=\"btn btn-block btn-primary\">#click-me</button>",
        "  <span>Is the checkbox checked?</span>",
        "  <span id=\"checked-state\"></span>",
        "</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() {",
        "    $(\"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>",
        "    <div class=\"col-xs-10\">",
        "      <p>#check-me</p>",
        "    </div>",
        "  <button class=\"btn btn-block btn-primary\">#click-me</button>",
        "  <span>Is the checkbox checked?</span>",
        "  <span id=\"checked-state\"></span>",
        "</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() {",
        "    $(\"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>",
        "    <div class=\"col-xs-10\">",
        "      <p>#check-me</p>",
        "    </div>",
        "  <button class=\"btn btn-block btn-primary\">#click-me</button>",
        "  <span>Is the checkbox checked?</span>",
        "  <span id=\"checked-state\"></span>",
        "</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() {",
        "    $(\"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>",
        "    <div class=\"col-xs-10\">",
        "      <p>#check-me</p>",
        "    </div>",
        "  <button class=\"btn btn-block btn-primary\">#click-me</button>",
        "  <span>Is the checkbox checked?</span>",
        "  <span id=\"checked-state\"></span>",
        "</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() {",
        "    $(\"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>",
        "    <div class=\"col-xs-10\">",
        "      <p>#check-me</p>",
        "    </div>",
        "  <button class=\"btn btn-block btn-primary\">#click-me</button>",
        "  <span>Is the checkbox checked?</span>",
        "  <span id=\"checked-state\"></span>",
        "</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": "bad87fee1348bd9aebc08726",
      "title": "Learn how JSON Works",
      "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": [
        "[",
        "  {",
        "    \"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\"",
        "    ]",
        "  }",
        "]"
      ],
      "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",
        "<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,
      "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",
        "<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,
      "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": [
        "<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
      ],
      "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",
        "<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,
      "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": [
        "<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
      ],
      "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",
        "<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,
      "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": [
        "<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
      ],
      "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()];",
        "        $(\"<img src=\"\" + kitten.imageLink + \"\">\").appendTo(\"#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,
      "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": [
        "<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
      ],
      "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()];",
        "        $(\"<img src=\"\" + kitten.imageLink + \"\">\").appendTo(\"#output\");",
        "        $(\"<h3>Code name: \" + kitten.codeNames[random()] + \"</h3>\").appendTo(\"#output\");",
        "      });",
        "    });",
        "",
        "  });",
        "fcces",
        "<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,
      "type": "waypoint"
    }
  ]
}