add a removeClass challenge
Quincy Larson
parent
1fa0c48257
commit
d4d4124158
|
|
@ -104,7 +104,8 @@
|
|||
"difficulty": 0.074,
|
||||
"description": [
|
||||
"You see how we made all of your <code>button</code> elements bounce? We selected them with <code>$('button')</code>, then we added some CSS classes to them with <code>.addClass('animated bounce');</code>.",
|
||||
"First target your <code>div</code> elements with the class \"well\" by using the <code>$('.well')</code> selector.",
|
||||
"You just used jQuery's <code>.addClass()</code> function, which allows you to add classes to elements.",
|
||||
"First, let's target your <code>div</code> elements with the class \"well\" by using the <code>$('.well')</code> selector.",
|
||||
"Note that, just like with CSS declarations, you type a <code>.</code> before the class's name.",
|
||||
"Then use jQuery's <code>.addClass()</code> function to add the classes \"animated\" and \"shake\".",
|
||||
"Here's the full code that you'll want to type into your \"document ready function\": <code>$('.well').addClass('animated shake');</code>"
|
||||
|
|
@ -301,19 +302,72 @@
|
|||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad87fee1348bd9aed918626",
|
||||
"name": "Waypoint: Remove Classes from an element with jQuery",
|
||||
"dashedName": "waypoint-remove-classes-from-an-element-with-jquery",
|
||||
"difficulty": 0.076,
|
||||
"description": [
|
||||
"In the same way you can add classes to an element with jQuery's <code>addClass()</code> function, you can remove them with jQuery's <code>removeClass()</code> function.",
|
||||
"Let's remove the \"btn-default\" class from all of our <code>button</code> elements.",
|
||||
"Here's how you would do this for a specific button, add <code>$('#target2').removeClass('btn-default');</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('.btn-default').length === 0, 'Remove the \"btn-default\" class from all of your <code>button</code> elements.')",
|
||||
"assert(editor.match(/btn btn-default/g), 'Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $('button').addClass('animated bounce');",
|
||||
" $('.well').addClass('animated shake');",
|
||||
" $('#target3').addClass('animated fadeOut');",
|
||||
"",
|
||||
" });",
|
||||
"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": "bad87fee1348bd9aed908826",
|
||||
"name": "Waypoint: Change the CSS of an Element Using jQuery",
|
||||
"dashedName": "waypoint-change-the-css-of-an-element-using-jquery",
|
||||
"difficulty": 0.076,
|
||||
"description": [
|
||||
"We can also change the CSS of an HTML element with jQuery.",
|
||||
""
|
||||
"We can also change the CSS of an HTML element directly with jQuery.",
|
||||
"Delete your jQuery selectors, leaving an empty \"document ready function\".",
|
||||
"Select \"target1\" and change its color to red.",
|
||||
"jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.",
|
||||
"Here's how we would change its color to blue: <code>$('#target1').css('color', 'blue');</code>",
|
||||
"This is slightly different from a normal CSS declaration, because the CSS attribute and its value are in quotes, and separated with a comma instead of a colon."
|
||||
],
|
||||
"tests": [
|
||||
"assert(!editor.match(/nce\\'\\)\\;/g) && !editor.match(/ke\\'\\)\\;/g), 'Delete your <code>img</code> element selector statement and your \".btn\" selector statement.')",
|
||||
"assert(editor.match(/css.*,.*background-color.*gray.\\);/g), 'Select the element with the <code>id</code> of \"cat-photo-form\" give it the background color of gray.')"
|
||||
"assert($('#target1').css('color') === 'rgb(255, 0, 0)', 'Your \"target1\" element should have red text.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
|
|
@ -358,15 +412,21 @@
|
|||
"dashedName": "waypoint-disable-an-element-using-jquery",
|
||||
"difficulty": 0.077,
|
||||
"description": [
|
||||
|
||||
"You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.",
|
||||
"When you disable a button, it will become grayed-out and can no longer be clicked.",
|
||||
"jQuery has a function called <code>.prop()</code> that allows you to adjust the properties of elements.",
|
||||
"Here's how you would disable all buttons: <code>$('#button').prop('disabled', true);</code>",
|
||||
"Disable only the \"target1\" button."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('form button').attr('id') === 'submit-button', 'Add the ID of \"submit-button\" to your the <code>button</code> on your <code>form</code> element.')",
|
||||
"assert($('#submit-button') && $('#submit-button').prop('disabled'), 'Disable your element with the id of \"submit-button\".')"
|
||||
"assert($('#target1') && $('#target1').prop('disabled'), 'Disable your \"target1\" button.')",
|
||||
"assert($('#target2') && !$('#target2').prop('disabled'), 'Do not disable any other buttons.')",
|
||||
"assert(!editor.match(/disabled>/g), 'Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $('#target1').css('color', 'red');",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
|
|
@ -404,6 +464,8 @@
|
|||
"dashedName": "waypoint-remove-an-element-using-jquery",
|
||||
"difficulty": 0.078,
|
||||
"description": [
|
||||
"Now let's remove an HTML element entirely using jQuery.",
|
||||
"jQuery has a "
|
||||
|
||||
],
|
||||
"tests": [
|
||||
|
|
@ -413,6 +475,8 @@
|
|||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $('#target1').css('color', 'red');",
|
||||
" $('#target1').prop('disabled', true);",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
|
|
|
|||
Loading…
Reference in New Issue