add removal and clone jquery challenges

pull/1426/head
Quincy Larson 2015-07-30 18:31:40 -07:00
parent 1d7fc8589c
commit 62897b8a51
1 changed files with 22 additions and 5 deletions

View File

@ -514,15 +514,22 @@
"dashedName": "waypoint-use-appendto-to-move-elements-with-jquery",
"difficulty": 0.079,
"description": [
"$('.btn').appendTo('#right-well')"
"Now let's try moving elements from one <code>div</code> to another.",
"jQuery has a function called <code>appendTo()</code> that allows you to select HTML elements and append them to another element.",
"For example, if we wanted to move \"target4\" from our right well to our left well, we would use <code>$('#target4').appendTo('#left-well');</code>",
"Move your \"target2\" element from your \"left-well\" to your \"right-well\"."
],
"tests": [
"assert($('#left-well').children().length === 0, 'Your left well should not have any buttons inside it.')",
"assert($('#right-well').children().length === 6, 'Your right well should have all 6 buttons inside it.')"
"assert($('#left-well').children('#target2').length === 0, 'Your \"target2\" element should not be inside your \"left-well\".')",
"assert($('#right-well').children('#target2').length > 0, 'Your \"target2\" element should be inside your \"right-well\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to move these elements.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
"",
" });",
"fcces",
@ -560,14 +567,24 @@
"dashedName": "waypoint-clone-an-element-using-jquery",
"difficulty": 0.080,
"description": [
"Clone the #target1 element and append it to the #left-well element. $('#target1').clone().appendTo('#left-well')"
"In addition to moving elements, you can also copy them from one place to another.",
"jQuery has a function called <code>clone()</code> that makes a copy of an element.",
"For example, if we wanted to copy \"target2\" from our \"left-well\" to our \"right-well\", we would use <code>$('#target2').clone().appendTo('#right-well');</code>",
"Did you notice this involves sticking two jQuery functions together? This is called \"function chaining\" and it's a really convenient way to get things done with jQuery.",
"Clone your \"target5\" element and append it to your \"left-well\"."
],
"tests": [
"assert($('#left-well').children().length > 3, 'You should have at least 4 button elements in your #left-well element')"
"assert($('#right-well').children('#target5').length > 0, 'Your \"target5\" element should be inside your \"right-well\".')",
"assert($('#left-well').children('#target5').length > 0, 'A copy of your \"target5\" element should also be inside your \"left-well\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to move these elements.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $('#target1').css('color', 'red');",
" $('#target1').prop('disabled', true);",
" $('#target4').remove();",
" $('#target2').appendTo('#right-well');",
"",
" });",
"fcces",