add removal and clone jquery challenges
parent
1d7fc8589c
commit
62897b8a51
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue