continue working on jquery challenges
Quincy Larson
parent
6f53263849
commit
8c44f1a661
|
|
@ -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>: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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue