gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add two more jquery challenges

Browse Source
This commit is contained in:
Quincy Larson
2015-08-01 07:11:11 -07:00
parent 7b85031a8a
commit 57592545d9
1 changed files with 54 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
seed/challenges/jquery-ajax-and-json.json
View File

@ -736,12 +736,14 @@
"description": [ "description": [
"You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.", "You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.",
"Fortunately, jQuery has some other tricks for targeting the right elements.", "Fortunately, jQuery has some other tricks for targeting the right elements.",
"jQuery has a function called <code>nth-child()/code> that will allow you select the nth element of a certain class or element type.", "jQuery has a function called <code>:nth-child()</code> that will allow you select the nth element of a certain class or element type.",
"Let's give the fourth element with the class \"target\" the color pink.", "Make the first child in each of your well elements bounce.",
"Here's how you would give the third element the color blue: <code>$('.target:nth-child(3)').css({'color': 'blue'});</code>" "Here's how you would give the third element in each well bounce: <code>$('.target:nth-child(3)').addClass('animated bounce');</code>"
], ],
"tests": [ "tests": [
"assert($('.target:nth-child(2)').hasClass('animated') && $('.target:nth-child(2)').hasClass('bounce'), 'The second element in each of your \"well\" elements should bounce.')",
"assert(editor.match(/\\:nth-child\\(/g), 'You should use the <code>&#58;nth-child()</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": [ "challengeSeed": [
"fccss", "fccss",
@ -790,10 +792,16 @@
"dashedName": "waypoint-target-even-numbered-elements-using-jquery", "dashedName": "waypoint-target-even-numbered-elements-using-jquery",
"difficulty": 3.16, "difficulty": 3.16,
"description": [ "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.",
"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');",
"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": [ "tests": [
"assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'), 'All the \"target\" elements that computer considers even should shake.')",
"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=\\'target3\\'>/g), 'Only use jQuery to add these classes to the element.')"
], ],
"challengeSeed": [ "challengeSeed": [
"fccss", "fccss",
@ -806,6 +814,7 @@
" $('#target1').parent().css('background-color', 'red');", " $('#target1').parent().css('background-color', 'red');",
" $('#right-well').children().css('color', 'green');", " $('#right-well').children().css('color', 'green');",
" $('#left-well').children().css('color', 'green');", " $('#left-well').children().css('color', 'green');",
" $('.target:nth-child(2)').addClass('animated bounce');",
"", "",
" });", " });",
"fcces", "fcces",
@ -849,7 +858,45 @@
], ],
"challengeSeed": [ "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 "challengeType": 0
}, },