From 8c44f1a6615b2e89fb1ada24f36b1e5ebeee0f24 Mon Sep 17 00:00:00 2001
From: Quincy Larson <michaelqlarson@gmail.com>
Date: Tue, 4 Aug 2015 23:24:26 -0700
Subject: [PATCH] continue working on jquery challenges

---
 challenges/jquery-ajax-and-json.json | 546 ++++++++++++++++++++++++++-
 1 file changed, 544 insertions(+), 2 deletions(-)

diff --git a/challenges/jquery-ajax-and-json.json b/challenges/jquery-ajax-and-json.json
index ed9c2c64c91..d4158154cd1 100644
--- a/challenges/jquery-ajax-and-json.json
+++ b/challenges/jquery-ajax-and-json.json
@@ -793,9 +793,9 @@
       "difficulty": 3.16,
       "description": [
         "You can also target all the even-numbered elements.",
-        "Note that computers start counting at zero, so technically, the first element is actually element number zero, which is an odd number.",
+        "Note that computers start counting at zero, so technically, the first element is actually element number zero, which is an even number.",
         "So what a human would consider odd numbers: 1, 3, 5, 7 - a computer would actually consider odd numbers.",
-        "Here's how you would target all the odd-numbered elements with class \"target\" and give them classes: <code>$('.target:odd').addClass('animated shake');</code>",
+        "Here's how you would target all the odd-numbered elements with class \"target\" and give them classes: <code>$('.target:odd').addClass('animated bounce');</code>",
         "Try selecting all the even-numbered elements - that is, what your browser will consider even-numbered elements - and giving them the classes of \"animated\" and \"shake\"."
       ],
       "tests": [
@@ -846,6 +846,67 @@
       "challengeType": 0
     },
 
+    {
+      "id": "bad87fee1348bd9bed008826",
+      "name":  "Waypoint: Target Odd Numbered Elements Using jQuery",
+      "dashedName":  "waypoint-target-odd-numbered-elements-using-jquery",
+      "difficulty": 3.165,
+      "description": [
+        "You can also target all the odd-numbered elements.",
+        "Note that computers start counting at zero, so technically, the first element is actually element number zero, which is an even number.",
+        "So what a human would consider odd numbers: 1, 3, 5, 7 - a computer would actually consider odd numbers.",
+        "Here's how you would target all the even-numbered elements with class \"target\" and give them classes: <code>$('.target:even').addClass('animated bounce');</code>",
+        "Try selecting all the odd-numbered elements - that is, what your browser will consider even-numbered elements - and giving them the classes of \"animated\" and \"fadeOut\"."
+      ],
+      "tests": [
+        "assert($('.target:odd').hasClass('animated') && ($('.target:odd').hasClass('fadeOut') || $('.target:odd').hasClass('fadeout')), 'All the \"target\" elements that computer considers odd should fade out.')",
+        "assert(editor.match(/\\:even/g), 'You should use the <code>&#58;even</code> function to modify these elements.')",
+        "assert(editor.match(/<button class=\\'btn btn-default target\\' id=\\'target2\\'>/g), 'Only use jQuery to add these classes to the element.')"
+      ],
+      "challengeSeed": [
+        "fccss",
+        "  $(document).ready(function() {",
+        "    $('#target1').css('color', 'red');",
+        "    $('#target1').prop('disabled', true);",
+        "    $('#target4').remove();",
+        "    $('#target2').appendTo('#right-well');",
+        "    $('#target5').clone().appendTo('#left-well');",
+        "    $('#target1').parent().css('background-color', 'red');",
+        "    $('#right-well').children().css('color', 'green');",
+        "    $('#left-well').children().css('color', 'green');",
+        "    $('.target:nth-child(2)').addClass('animated bounce');",
+        "    $('.target:even').addClass('animated shake');",
+        "",
+        "  });",
+        "fcces",
+        "",
+        "<!-- You shouldn't need to modify code below this line -->",
+        "",
+        "<div class='container-fluid'>",
+        "  <h3 class='text-primary text-center'>jQuery Playground</h3>",
+        "  <div class='row'>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#left-well</h4>",
+        "      <div class='well' id='left-well'>",
+        "        <button class='btn btn-default target' id='target1'>#target1</button>",
+        "        <button class='btn btn-default target' id='target2'>#target2</button>",
+        "        <button class='btn btn-default target' id='target3'>#target3</button>",
+        "      </div>",
+        "    </div>",
+        "    <div class='col-xs-6'>",
+        "      <h4>#right-well</h4>",
+        "      <div class='well' id='right-well'>",
+        "        <button class='btn btn-default target' id='target4'>#target4</button>",
+        "        <button class='btn btn-default target' id='target5'>#target5</button>",
+        "        <button class='btn btn-default target' id='target6'>#target6</button>",
+        "      </div>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "challengeType": 0
+    },
+
     {
       "id": "bad87fee1348bd9aecb08826",
       "name":  "Waypoint: Use jQuery to Modify the Entire Page",
@@ -873,6 +934,7 @@
         "    $('#left-well').children().css('color', 'green');",
         "    $('.target:nth-child(2)').addClass('animated bounce');",
         "    $('.target:even').addClass('animated shake');",
+        "    $('.target:even').addClass('animated fadeOut');",
         "",
         "  });",
         "fcces",
@@ -902,6 +964,486 @@
         "</div>"
       ],
       "challengeType": 0
+    },
+
+    {
+      "id": "bad87fee1348bd9aeca08826",
+      "name":  "Waypoint: Trigger on click Events with jQuery",
+      "dashedName":  "waypoint-trigger-onclick-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
+    },
+
+    {
+      "id": "bad84fee1348bd9aecc58826",
+      "name":  "Waypoint: 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
+    },
+
+    {
+      "id": "bad84fee1348bd9aecc48826",
+      "name":  "Waypoint: 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
+    },
+
+    {
+      "id": "bad84fee1348bd9aecc38826",
+      "name":  "Waypoint: 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
+    },
+
+    {
+      "id": "bad84fee1348bd9aecc28826",
+      "name":  "Waypoint: 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
+    },
+
+    {
+      "id": "bad84fee1348bd9aecc18826",
+      "name":  "Waypoint: 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
+    },
+
+    {
+      "id": "bad87fee1348bd9aecc08826",
+      "name":  "Waypoint: Trigger onHover Events with jQuery",
+      "dashedName":  "waypoint-trigger-onhover-events-with-jquery",
+      "difficulty": 3.18,
+      "description": [
+
+      ],
+      "tests": [
+
+      ],
+      "challengeSeed": [
+
+      ],
+      "challengeType": 0
+    },
+
+
+    {
+      "id": "bad87fee1348bd9aebc08726",
+      "name":  "Waypoint: 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 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
+    },
+
+    {
+      "id": "bad87fee1348bd9aebc08826",
+      "name":  "Waypoint: 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",
+        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
+        "<div class='jumbotron' id='output'>",
+        "</div>"
+      ],
+      "challengeType": 0
+    },
+
+    {
+      "id": "bad87fee1348bd9ae9c08826",
+      "name":  "Waypoint: 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",
+        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
+        "<div class='jumbotron' id='output'>",
+        "</div>"
+      ],
+      "challengeType": 0
+    },
+
+    {
+      "id": "bad88fee1348bd9ae8c08726",
+      "name":  "Waypoint: 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",
+        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
+        "<div class='jumbotron' id='output'>",
+        "</div>"
+      ],
+      "challengeType": 0
+    },
+
+    {
+      "id": "bad88fee1348bd9ae8c08626",
+      "name":  "Waypoint: 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",
+        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
+        "<div class='jumbotron' id='output'>",
+        "</div>"
+      ],
+      "challengeType": 0
+    },
+
+    {
+      "id": "bad88fee1348bd9ae8c08526",
+      "name":  "Waypoint: 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');",
+        "      });",
+        "    });",
+        "",
+        "  });",
+        "fcces",
+        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
+        "<div class='jumbotron' id='output'>",
+        "</div>"
+      ],
+      "challengeType": 0
+    },
+
+    {
+      "id": "bad88fee1348bd9ae8c08426",
+      "name":  "Waypoint: 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",
+        "<button id='cat-button' class='btn btn-primary btn-block btn-lg'>#cat-button</button>",
+        "<div class='jumbotron' id='output'>",
+        "</div>"
+      ],
+      "challengeType": 0
     }
   ]
 }