From d4d412415835be5f01ab391d811363ff15caf63c Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Thu, 30 Jul 2015 18:05:02 -0700 Subject: [PATCH] add a removeClass challenge --- seed/challenges/jquery-ajax-and-json.json | 82 ++++++++++++++++++++--- 1 file changed, 73 insertions(+), 9 deletions(-) diff --git a/seed/challenges/jquery-ajax-and-json.json b/seed/challenges/jquery-ajax-and-json.json index 5092435946..57a23f0286 100644 --- a/seed/challenges/jquery-ajax-and-json.json +++ b/seed/challenges/jquery-ajax-and-json.json @@ -104,7 +104,8 @@ "difficulty": 0.074, "description": [ "You see how we made all of your button elements bounce? We selected them with $('button'), then we added some CSS classes to them with .addClass('animated bounce');.", - "First target your div elements with the class \"well\" by using the $('.well') selector.", + "You just used jQuery's .addClass() function, which allows you to add classes to elements.", + "First, let's target your div elements with the class \"well\" by using the $('.well') selector.", "Note that, just like with CSS declarations, you type a . before the class's name.", "Then use jQuery's .addClass() function to add the classes \"animated\" and \"shake\".", "Here's the full code that you'll want to type into your \"document ready function\": $('.well').addClass('animated shake');" @@ -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 addClass() function, you can remove them with jQuery's removeClass() function.", + "Let's remove the \"btn-default\" class from all of our button elements.", + "Here's how you would do this for a specific button, add $('#target2').removeClass('btn-default');" + ], + "tests": [ + "assert($('.btn-default').length === 0, 'Remove the \"btn-default\" class from all of your button 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", + "", + "", + "", + "
", + "

jQuery Playground

", + "
", + "
", + "

#left-well

", + "
", + " ", + " ", + " ", + "
", + "
", + "
", + "

#right-well

", + "
", + " ", + " ", + " ", + "
", + "
", + "
", + "
" + ], + "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 .css() that allows you to change the CSS of an element.", + "Here's how we would change its color to blue: $('#target1').css('color', 'blue');", + "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 img element selector statement and your \".btn\" selector statement.')", - "assert(editor.match(/css.*,.*background-color.*gray.\\);/g), 'Select the element with the id 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 .prop() that allows you to adjust the properties of elements.", + "Here's how you would disable all buttons: $('#button').prop('disabled', true);", + "Disable only the \"target1\" button." ], "tests": [ - "assert($('form button').attr('id') === 'submit-button', 'Add the ID of \"submit-button\" to your the button on your form 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",