freeCodeCamp/future-jquery-ajax-json.json

{
  "name": "jQuery, Ajax and JSON",
  "order": 0.004,
  "challenges": [{
      "id": "bad87fee1348bd9acdd08826",
      "name": "Waypoint: Learn how Script Tags and Document Ready Work",
      "difficulty": 0.072,
      "description": [
        "We've simplified our Cat Photo App and removed our <code>style</code> element. Add a <code>script</code> element to your page and create a <code>$(document).ready</code> function within it.",
        "Add <code>$(document).ready(function() {</code> to your <code>script</code> element, and then close it on the following line with <code>});</code>."
      ],
      "tests": [
        "assert(editor.match(/<script>/g), 'Create a <code>script</code> element.')",
        "assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Make sure your <code>script</code> element has a closing tag.')",
        "assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
        "assert(editor.match(/\\n\\s+?\\}\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>\\}\\);</code>.')"
      ],
      "challengeSeed": [
        "<br>",
        "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
        "<br>",
        "<div class='row'>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
        "  </div>",
        "</div>",
        "<br>",
        "<form action='submit-cat-photo'>",
        "  <div class='row'>",
        "    <div class='col-xs-7'>",
        "      <input type='text' class='form-control' placeholder='cat photo URL' required>",
        "    </div>",
        "    <div class='col-xs-5'>",
        "      <button type='submit' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>",
        "    </div>",
        "  </div>",
        "</form>"
      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9bedc08826",
      "name": "Waypoint: Target Elements by Selectors Using jQuery",
      "difficulty": 0.073,
      "description": [
        "Make all <code>img</code> elements bounce $('img').addClass('animated bounce')"
      ],
      "tests": [
        "assert($('img').hasClass('animated') && $('img').hasClass('bounce'), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"bounce\" to your <code>img</code> element.')",
        "assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "",
        "  });",
        "fcces",
        "<br>",
        "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
        "<br>",
        "<div class='row'>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
        "  </div>",
        "</div>",
        "<br>",
        "<form action='submit-cat-photo'>",
        "  <div class='row'>",
        "    <div class='col-xs-7'>",
        "      <input type='text' class='form-control' placeholder='cat photo URL' required>",
        "    </div>",
        "    <div class='col-xs-5'>",
        "      <button type='submit' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>",
        "    </div>",
        "  </div>",
        "</form>"
      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aedc08826",
      "name": "Waypoint: Target Elements by Class Using jQuery",
      "difficulty": 0.074,
      "description": [

      ],
      "tests": [
        "assert($('.btn').hasClass('animated') && $('.btn').hasClass('shake'), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"shake\" to all your elements with the class \"btn\".')",
        "assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "    $('img').addClass('animated bounce');",
        "  });",
        "fcces",
        "<br>",
        "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
        "<br>",
        "<div class='row'>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
        "  </div>",
        "</div>",
        "<br>",
        "<form action='submit-cat-photo'>",
        "  <div class='row'>",
        "    <div class='col-xs-7'>",
        "      <input type='text' class='form-control' placeholder='cat photo URL' required>",
        "    </div>",
        "    <div class='col-xs-5'>",
        "      <button type='submit' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>",
        "    </div>",
        "  </div>",
        "</form>"
      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aedb08826",
      "name": "Waypoint: Add an ID to an Element",
      "difficulty": 0.075,
      "description": [

      ],
      "tests": [
        "assert($('form').attr('id') === 'cat-photo-form', 'Add the ID of \"cat-photo-form\" to your <code>form</code> element.')"
      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "    $('img').addClass('animated bounce');",
        "    $('.btn').addClass('animated shake');",
        "  });",
        "fcces",
        "<br>",
        "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
        "<br>",
        "<div class='row'>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
        "  </div>",
        "</div>",
        "<br>",
        "<form action='submit-cat-photo'>",
        "  <div class='row'>",
        "    <div class='col-xs-7'>",
        "      <input type='text' class='form-control' placeholder='cat photo URL' required>",
        "    </div>",
        "    <div class='col-xs-5'>",
        "      <button type='submit' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>",
        "    </div>",
        "  </div>",
        "</form>"
      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aeda08826",
      "name": "Waypoint: Target Elements by ID Using jQuery",
      "difficulty": 0.075,
      "description": [

      ],
      "tests": [
        "assert($('#cat-photo-form') && $('#cat-photo-form').hasClass('animated') && $('#cat-photo-form').hasClass('pulse'), 'Select the element with the <code>id</code> of \"cat-photo-form\" and use the jQuery <code>addClass()</code> function to give it the classes of \"animated\" and \"pulse\".')",
        "assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "    $('img').addClass('animated bounce');",
        "    $('.btn').addClass('animated shake');",
        "  });",
        "fcces",
        "<br>",
        "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
        "<br>",
        "<div class='row'>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
        "  </div>",
        "</div>",
        "<br>",
        "<form action='submit-cat-photo' id='cat-photo-form'>",
        "  <div class='row'>",
        "    <div class='col-xs-7'>",
        "      <input type='text' class='form-control' placeholder='cat photo URL' required>",
        "    </div>",
        "    <div class='col-xs-5'>",
        "      <button type='submit' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>",
        "    </div>",
        "  </div>",
        "</form>"
      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aed908826",
      "name": "Waypoint: Change the CSS of an Element Using jQuery",
      "difficulty": 0.076,
      "description": [

      ],
      "tests": [
        "assert(!editor.match(/nce\\'\\)\\;/g) && !editor.match(/ke\\'\\)\\;/g), 'Delete your <code>img</code> element selector statement and your \".btn\" selector statement.')",
        "assert(editor.match(/css.*,.*background-color.*gray.\\);/g), 'Select the element with the <code>id</code> of \"cat-photo-form\" give it the background color of gray.')"
      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "    $('img').addClass('animated bounce');",
        "    $('.btn').addClass('animated shake');",
        "    $('#cat-photo-form').addClass('animated pulse');",
        "  });",
        "fcces",
        "<br>",
        "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
        "<br>",
        "<div class='row'>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
        "  </div>",
        "</div>",
        "<br>",
        "<form action='submit-cat-photo' id='cat-photo-form'>",
        "  <div class='row'>",
        "    <div class='col-xs-7'>",
        "      <input type='text' class='form-control' placeholder='cat photo URL' required>",
        "    </div>",
        "    <div class='col-xs-5'>",
        "      <button type='submit' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>",
        "    </div>",
        "  </div>",
        "</form>"
      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aed808826",
      "name": "Waypoint: Disable an Element Using jQuery",
      "difficulty": 0.077,
      "description": [

      ],
      "tests": [
        "assert($('form button').attr('id') === 'submit-button', 'Add the ID of \"submit-button\" to your the <code>button</code> on your <code>form</code> element.')",
        "assert($('#submit-button') && $('#submit-button').prop('disabled'), 'Disable your element with the id of \"submit-button\".')"
      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "    $('#cat-photo-form').css('background-color', 'gray');",
        "  });",
        "fcces",
        "<br>",
        "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
        "<br>",
        "<div class='row'>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
        "  </div>",
        "</div>",
        "<br>",
        "<form action='submit-cat-photo' id='cat-photo-form'>",
        "  <div class='row'>",
        "    <div class='col-xs-7'>",
        "      <input type='text' class='form-control' placeholder='cat photo URL' required>",
        "    </div>",
        "    <div class='col-xs-5'>",
        "      <button type='submit' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>",
        "    </div>",
        "  </div>",
        "</form>"
      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aed708826",
      "name": "Waypoint: Remove an Element Using jQuery",
      "difficulty": 0.078,
      "description": [

      ],
      "tests": [
        "assert($('img').length === 0, 'Use jQuery to remove your <code>img</code> element from your page.')",
        "assert(editor.match(/<img/g), 'You should still have an <code>img</code> element in your HTML but jQuery should remove it.')"
      ],
      "challengeSeed": [
        "fccss",
        "  $(document).ready(function() {",
        "    $('#cat-photo-form').css('background-color', 'gray');",
        "    $('#submit-button').prop('disabled', 'true');",
        "  });",
        "fcces",
        "<br>",
        "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
        "<br>",
        "<div class='row'>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
        "  </div>",
        "</div>",
        "<br>",
        "<form action='submit-cat-photo' id='cat-photo-form'>",
        "  <div class='row'>",
        "    <div class='col-xs-7'>",
        "      <input type='text' class='form-control' placeholder='cat photo URL' required>",
        "    </div>",
        "    <div class='col-xs-5'>",
        "      <button type='submit' id='submit-button' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>",
        "    </div>",
        "  </div>",
        "</form>"
      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aed608826",
      "name": "Waypoint: Move an Element Using jQuery",
      "difficulty": 0.079,
      "description": [
        "fccss",
        "  $(document).ready(function() {",
        "    $('#cat-photo-form').css('background-color', 'gray');",
        "    $('#submit-button').prop('disabled', 'true');",
        "    $('img').remove();",
        "  });",
        "fcces",
        "<br>",
        "<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
        "<br>",
        "<div class='row'>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
        "  </div>",
        "  <div class='col-xs-4'>",
        "    <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
        "  </div>",
        "</div>",
        "<br>",
        "<form action='submit-cat-photo' id='cat-photo-form'>",
        "  <div class='row'>",
        "    <div class='col-xs-7'>",
        "      <input type='text' class='form-control' placeholder='cat photo URL' required>",
        "    </div>",
        "    <div class='col-xs-5'>",
        "      <button type='submit' id='submit-button' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>",
        "    </div>",
        "  </div>",
        "</form>"
      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aed508826",
      "name": "Waypoint: Clone an Element Using jQuery",
      "difficulty": 0.080,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aed308826",
      "name": "Waypoint: Target the Parent of an Element Using jQuery",
      "difficulty": 0.082,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aed208826",
      "name": "Waypoint: Target the Children of an Element Using jQuery",
      "difficulty": 0.083,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },


    {
      "id": "bad87fee1348bd9aed108826",
      "name": "Waypoint: Target a Specific Child of an Element Using jQuery",
      "difficulty": 0.084,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aed008826",
      "name": "Waypoint: Target Even Numbered Elements Using jQuery",
      "difficulty": 0.085,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aecc08826",
      "name": "Waypoint: Read Data from an Element Using jQuery",
      "difficulty": 0.086,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9aebc08826",
      "name": "Waypoint: Get Data from an URL Using jQuery",
      "difficulty": 0.087,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9ae9c08826",
      "name": "Waypoint: Loop through JSON Data Using jQuery",
      "difficulty": 0.089,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    },

    {
      "id": "bad87fee1348bd9ae8c08826",
      "name": "Waypoint: Setup Click Events Using jQuery",
      "difficulty": 0.089,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    }, {
      "id": "bad87fee1348bd9aede08826",
      "name": "Waypoint: Use Hex Codes for Precise Colors",
      "difficulty": 0.071,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ],
      "challengeType": 0
    }, {
      "id": "bad87fee1348bd9aedd08826",
      "name": "Waypoint: Use Shortened Hex Codes for Colors",
      "difficulty": 0.071,
      "description": [

      ],
      "tests": [

      ],
      "challengeSeed": [

      ]
    }
  ]
}