feat: add 'back/front end' in curriculum (#42596)
* chore: rename APIs and Microservices to include "Backend" (#42515) * fix typo * fix typo * undo change * Corrected grammar mistake Corrected a grammar mistake by removing a comma. * change APIs and Microservices cert title * update title * Change APIs and Microservices certi title * Update translations.json * update title * feat(curriculum): rename apis and microservices cert * rename folder structure * rename certificate * rename learn Markdown * apis-and-microservices -> back-end-development-and-apis * update backend meta * update i18n langs and cypress test Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: add development to front-end libraries (#42512) * fix: added-the-word-Development-to-front-end-libraries * fix/added-the-word-Development-to-front-end-libraries * fix/added-word-development-to-front-end-libraries-in-other-related-files * fix/added-the-word-Development-to-front-end-and-all-related-files * fix/removed-typos-from-last-commit-in-index.md * fix/reverted-changes-that-i-made-to-dependecies * fix/removed xvfg * fix/reverted changes that i made to package.json * remove unwanted changes * front-end-development-libraries changes * rename backend certSlug and README * update i18n folder names and keys * test: add legacy path redirect tests This uses serve.json from the client-config repo, since we currently use that in production * fix: create public dir before moving serve.json * fix: add missing script * refactor: collect redirect tests * test: convert to cy.location for stricter tests * rename certificate folder to 00-certificates * change crowdin config to recognise new certificates location * allow translations to be used Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add forwards slashes to path redirects * fix cypress path tests again * plese cypress * fix: test different challenge Okay so I literally have no idea why this one particular challenge fails in Cypress Firefox ONLY. Tom and I paired and spun a full build instance and confirmed in Firefox the page loads and redirects as expected. Changing to another bootstrap challenge passes Cypress firefox locally. Absolutely boggled by this. AAAAAAAAAAAAAAA * fix: separate the test Okay apparently the test does not work unless we separate it into a different `it` statement. >:( >:( >:( >:( Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com> Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
Shaun Hamilton
GitHub
@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 564944c91be2204b269d51e3
|
||||
title: Change Text Inside an Element Using jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 16773
|
||||
dashedName: change-text-inside-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using jQuery, you can change the text between the start and end tags of an element. You can even change HTML markup.
|
||||
|
||||
jQuery has a function called `.html()` that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.
|
||||
|
||||
Here's how you would rewrite and emphasize the text of our heading:
|
||||
|
||||
```js
|
||||
$("h3").html("<em>jQuery Playground</em>");
|
||||
```
|
||||
|
||||
jQuery also has a similar function called `.text()` that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.
|
||||
|
||||
Change the button with id `target4` by emphasizing its text.
|
||||
|
||||
[View our news article for <em>](https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/#em-element) to learn the difference between `<i>` and `<em>` and their uses.
|
||||
|
||||
Note that while the `<i>` tag has traditionally been used to emphasize text, it has since been adopted for use as a tag for icons. The `<em>` tag is now widely accepted as the tag for emphasis. Either will work for this challenge.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should emphasize the text in your `target4` button by adding HTML tags.
|
||||
|
||||
```js
|
||||
assert.isTrue(
|
||||
/<em>|<i>\s*#target4\s*<\/em>|<\/i>/gi.test($('#target4').html())
|
||||
);
|
||||
```
|
||||
|
||||
The text should otherwise remain unchanged.
|
||||
|
||||
```js
|
||||
assert($('#target4') && $('#target4').text().trim() === '#target4');
|
||||
```
|
||||
|
||||
You should not alter any other text.
|
||||
|
||||
```js
|
||||
assert.isFalse(/<em>|<i>/gi.test($('h3').html()));
|
||||
```
|
||||
|
||||
You should be using `.html()` and not `.text()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.html\(/g));
|
||||
```
|
||||
|
||||
You should select `button id="target4"` with jQuery.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\(\s*?(\"|\')#target4(\"|\')\s*?\)\.html\(/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target4").html('<em>#target4</em>');
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed908826
|
||||
title: Change the CSS of an Element Using jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 16776
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: change-the-css-of-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
We can also change the CSS of an HTML element directly with jQuery.
|
||||
|
||||
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:
|
||||
|
||||
```js
|
||||
$("#target1").css("color", "blue");
|
||||
```
|
||||
|
||||
This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.
|
||||
|
||||
Delete your jQuery selectors, leaving an empty `document ready function`.
|
||||
|
||||
Select `target1` and change its color to red.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `target1` element should have red text.
|
||||
|
||||
```js
|
||||
assert($('#target1').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
$("#target3").addClass("animated fadeOut");
|
||||
$("button").removeClass("btn-default");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
$("#target3").addClass("animated fadeOut");
|
||||
$("button").removeClass("btn-default");
|
||||
$("#target1").css("color", "red");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed508826
|
||||
title: Clone an Element Using jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 16780
|
||||
dashedName: clone-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In addition to moving elements, you can also copy them from one place to another.
|
||||
|
||||
jQuery has a function called `clone()` 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:
|
||||
|
||||
```js
|
||||
$("#target2").clone().appendTo("#right-well");
|
||||
```
|
||||
|
||||
Did you notice this involves sticking two jQuery functions together? This is called <dfn>function chaining</dfn> and it's a convenient way to get things done with jQuery.
|
||||
|
||||
Clone your `target5` element and append it to your `left-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `target5` element should be inside your `right-well`.
|
||||
|
||||
```js
|
||||
assert($('#right-well').children('#target5').length > 0);
|
||||
```
|
||||
|
||||
A copy of your `target5` element should also be inside your `left-well`.
|
||||
|
||||
```js
|
||||
assert($('#left-well').children('#target5').length > 0);
|
||||
```
|
||||
|
||||
You should only use jQuery to move these elements.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,124 @@
|
||||
---
|
||||
id: bad87fee1348bd9aeda08726
|
||||
title: Delete Your jQuery Functions
|
||||
challengeType: 6
|
||||
forumTopicId: 17561
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: delete-your-jquery-functions
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
These animations were cool at first, but now they're getting kind of distracting.
|
||||
|
||||
Delete all three of these jQuery functions from your `document ready function`, but leave your `document ready function` itself intact.
|
||||
|
||||
# --hints--
|
||||
|
||||
All three of your jQuery functions should be deleted from your `document ready function`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\{\s*\}\);/g));
|
||||
```
|
||||
|
||||
You should leave your `script` element intact.
|
||||
|
||||
```js
|
||||
assert(code.match(/<script>/g));
|
||||
```
|
||||
|
||||
You should leave your `$(document).ready(function() {` at the beginning of your `script` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\(document\)\.ready\(function\(\)\s?\{/g));
|
||||
```
|
||||
|
||||
You should leave the `document.ready` function's closing `})` intact.
|
||||
|
||||
```js
|
||||
assert(code.match(/.*\s*\}\);/g));
|
||||
```
|
||||
|
||||
You should leave your `script` element closing tag intact.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/script>/g) &&
|
||||
code.match(/<script/g) &&
|
||||
code.match(/<\/script>/g).length === code.match(/<script/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
$("#target3").addClass("animated fadeOut");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed808826
|
||||
title: Disable an Element Using jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 17563
|
||||
dashedName: disable-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --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:
|
||||
|
||||
```js
|
||||
$("button").prop("disabled", true);
|
||||
```
|
||||
|
||||
Disable only the `target1` button.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `target1` button should be disabled.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#target1') &&
|
||||
$('#target1').prop('disabled') &&
|
||||
code.match(/["']disabled["'],( true|true)/g)
|
||||
);
|
||||
```
|
||||
|
||||
No other buttons should be disabled.
|
||||
|
||||
```js
|
||||
assert($('#target2') && !$('#target2').prop('disabled'));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
|
||||
```js
|
||||
assert(!code.match(/disabled[^<]*>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: bad87fee1348bd9acdd08826
|
||||
title: Learn How Script Tags and Document Ready Work
|
||||
challengeType: 6
|
||||
forumTopicId: 18224
|
||||
dashedName: learn-how-script-tags-and-document-ready-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now we're ready to learn jQuery, the most popular JavaScript tool of all time.
|
||||
|
||||
Before we can start using jQuery, we need to add some things to our HTML.
|
||||
|
||||
First, add a `script` element at the top of your page. Be sure to close it on the following line.
|
||||
|
||||
Your browser will run any JavaScript inside a `script` element, including jQuery.
|
||||
|
||||
Inside your `script` element, add this code: `$(document).ready(function() {` to your `script`. Then close it on the following line (still inside your `script` element) with: `});`
|
||||
|
||||
We'll learn more about `functions` later. The important thing to know is that code you put inside this `function` will run as soon as your browser has loaded your page.
|
||||
|
||||
This is important because without your `document ready function`, your code may run before your HTML is rendered, which would cause bugs.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `script` element making sure it is valid and has a closing tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/script\s*>/g) &&
|
||||
code.match(
|
||||
/<script(\sasync|\sdefer)*(\s(charset|src|type)\s*=\s*["\"]+[^"\"]*["\"]+)*(\sasync|\sdefer)*\s*>/g
|
||||
) &&
|
||||
code.match(/<\/script\s*>/g).length ===
|
||||
code.match(
|
||||
/<script(\sasync|\sdefer)*(\s(charset|src|type)\s*=\s*["\"]+[^"\"]*["\"]+)*(\sasync|\sdefer)*\s*>/g
|
||||
).length
|
||||
);
|
||||
```
|
||||
|
||||
You should add `$(document).ready(function() {` to the beginning of your `script` element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\$\s*?\(\s*?document\s*?\)\.ready\s*?\(\s*?function\s*?\(\s*?\)\s*?\{/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
You should close your `$(document).ready(function() {` function with `});`
|
||||
|
||||
```js
|
||||
assert(code.match(/\n*?\s*?\}\s*?\);/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
});
|
||||
</script>
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,109 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed708826
|
||||
title: Remove an Element Using jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18262
|
||||
dashedName: remove-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's remove an HTML element from your page using jQuery.
|
||||
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely
|
||||
|
||||
Remove the `#target4` element from the page by using the `.remove()` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use jQuery to remove your `target4` element from your page.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#target4').length === 0 && code.match(/\$\(["']#target4["']\).remove\(\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
You should only use jQuery to remove this element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/id="target4/g) &&
|
||||
!code.match(/<!--.*id="target4".*-->/g) &&
|
||||
$('#right-well').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed918626
|
||||
title: Remove Classes from an Element with jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18264
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: remove-classes-from-an-element-with-jquery
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
Here's how you would do this for a specific button:
|
||||
|
||||
```js
|
||||
$("#target2").removeClass("btn-default");
|
||||
```
|
||||
|
||||
Let's remove the `btn-default` class from all of our `button` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `btn-default` class should be removed from all of your `button` elements.
|
||||
|
||||
```js
|
||||
assert($('.btn-default').length === 0);
|
||||
```
|
||||
|
||||
You should only use jQuery to remove this class from the element.
|
||||
|
||||
```js
|
||||
assert(code.match(/btn btn-default/g));
|
||||
```
|
||||
|
||||
You should only remove the `btn-default` class.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.[\v\s]*removeClass[\s\v]*\([\s\v]*('|")\s*btn-default\s*('|")[\s\v]*\)/gm
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
$("#target3").addClass("animated fadeOut");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
$("#target3").addClass("animated fadeOut");
|
||||
$("button").removeClass("btn-default");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,143 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed108826
|
||||
title: Target a Specific Child of an Element Using jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18315
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-a-specific-child-of-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
Fortunately, jQuery has some other tricks for targeting the right elements.
|
||||
|
||||
jQuery uses CSS Selectors to target elements. The `target:nth-child(n)` CSS selector allows you to select all the nth elements with the target class or element type.
|
||||
|
||||
Here's how you would give the third element in each well the bounce class:
|
||||
|
||||
```js
|
||||
$(".target:nth-child(3)").addClass("animated bounce");
|
||||
```
|
||||
|
||||
Make the second child in each of your well elements bounce. You must select the elements' children with the `target` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
The second element in your `target` elements should bounce.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.target:nth-child(2)').hasClass('animated') &&
|
||||
$('.target:nth-child(2)').hasClass('bounce')
|
||||
);
|
||||
```
|
||||
|
||||
Only two elements should bounce.
|
||||
|
||||
```js
|
||||
assert($('.animated.bounce').length === 2);
|
||||
```
|
||||
|
||||
You should use the `:nth-child()` selector to modify these elements.
|
||||
|
||||
```js
|
||||
assert(code.match(/\:nth-child\(/g));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\$\(".target:nth-child\(2\)"\)/g) ||
|
||||
code.match(/\$\('.target:nth-child\(2\)'\)/g) ||
|
||||
code.match(/\$\(".target"\).filter\(":nth-child\(2\)"\)/g) ||
|
||||
code.match(/\$\('.target'\).filter\(':nth-child\(2\)'\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(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", "orange");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(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", "orange");
|
||||
$(".target:nth-child(2)").addClass("animated bounce");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,112 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08826
|
||||
title: Target Elements by Class Using jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18316
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-elements-by-class-using-jquery
|
||||
---
|
||||
|
||||
# --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");`.
|
||||
|
||||
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`.
|
||||
|
||||
For example, you could make all the elements with the class `text-primary` shake by adding the following to your `document ready function`:
|
||||
|
||||
```js
|
||||
$(".text-primary").addClass("animated shake");
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the jQuery `addClass()` function to give the classes `animated` and `shake` to all your elements with the class `well`.
|
||||
|
||||
```js
|
||||
assert($('.well').hasClass('animated') && $('.well').hasClass('shake'));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class\.\*animated/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: bad87fee1348bd9aeda08826
|
||||
title: Target Elements by id Using jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18317
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-elements-by-id-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can also target elements by their id attributes.
|
||||
|
||||
First target your `button` element with the id `target3` by using the `$("#target3")` selector.
|
||||
|
||||
Note that, just like with CSS declarations, you type a `#` before the id's name.
|
||||
|
||||
Then use jQuery's `.addClass()` function to add the classes `animated` and `fadeOut`.
|
||||
|
||||
Here's how you'd make the `button` element with the id `target6` fade out:
|
||||
|
||||
```js
|
||||
$("#target6").addClass("animated fadeOut");
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should select the `button` element with the `id` of `target3` and use the jQuery `addClass()` function to give it the class of `animated`.
|
||||
|
||||
```js
|
||||
assert($('#target3').hasClass('animated'));
|
||||
```
|
||||
|
||||
You should target the element with the id `target3` and use the jQuery `addClass()` function to give it the class `fadeOut`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
($('#target3').hasClass('fadeOut') || $('#target3').hasClass('fadeout')) &&
|
||||
code.match(/\$\(\s*.#target3.\s*\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
$("#target3").addClass("animated fadeOut");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,138 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed008826
|
||||
title: Target Even Elements Using jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18318
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-even-elements-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can also target elements based on their positions using `:odd` or `:even` selectors.
|
||||
|
||||
Note that jQuery is zero-indexed which means the first element in a selection has a position of 0. This can be a little confusing as, counter-intuitively, `:odd` selects the second element (position 1), fourth element (position 3), and so on.
|
||||
|
||||
Here's how you would target all the odd elements with class `target` and give them classes:
|
||||
|
||||
```js
|
||||
$(".target:odd").addClass("animated shake");
|
||||
```
|
||||
|
||||
Try selecting all the even `target` elements and giving them the classes of `animated` and `shake`. Remember that **even** refers to the position of elements with a zero-based system in mind.
|
||||
|
||||
# --hints--
|
||||
|
||||
All of the `target` elements that jQuery considers to be even should shake.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.target:even').hasClass('animated') && $('.target:even').hasClass('shake')
|
||||
);
|
||||
```
|
||||
|
||||
You should use the `:even` selector to modify these elements.
|
||||
|
||||
```js
|
||||
assert(code.match(/\:even/g));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\$\(".target:even"\)/g) ||
|
||||
code.match(/\$\('.target:even'\)/g) ||
|
||||
code.match(/\$\(".target"\).filter\(":even"\)/g) ||
|
||||
code.match(/\$\('.target'\).filter\(':even'\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(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", "orange");
|
||||
$("#left-well").children().css("color", "green");
|
||||
$(".target:nth-child(2)").addClass("animated bounce");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(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", "orange");
|
||||
$("#left-well").children().css("color", "green");
|
||||
$(".target:nth-child(2)").addClass("animated bounce");
|
||||
$(".target:even").addClass("animated shake");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,117 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedc08826
|
||||
title: Target HTML Elements with Selectors Using jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18319
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-html-elements-with-selectors-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now we have a `document ready` function.
|
||||
|
||||
Now let's write our first jQuery statement. All jQuery functions start with a `$`, usually referred to as a dollar sign operator, or as bling.
|
||||
|
||||
jQuery often selects an HTML element with a <dfn>selector</dfn>, then does something to that element.
|
||||
|
||||
For example, let's make all of your `button` elements bounce. Just add this code inside your document ready function:
|
||||
|
||||
```js
|
||||
$("button").addClass("animated bounce");
|
||||
```
|
||||
|
||||
Note that we've already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css `bounce` class to your `button` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the jQuery `addClass()` function to give the classes `animated` and `bounce` to your `button` elements.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('animated') && $('button').hasClass('bounce'));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
Your jQuery code should be within the `$(document).ready();` function.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.replace(/\s/g, '').match(/\$\(document\)\.ready\(function\(\)\{\$/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed208826
|
||||
title: Target the Children of an Element Using jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18320
|
||||
dashedName: target-the-children-of-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When HTML elements are placed one level below another they are called <dfn>children</dfn> of that element. For example, the button elements in this challenge with the text `#target1`, `#target2`, and `#target3` are all children of the `<div class="well" id="left-well">` element.
|
||||
|
||||
jQuery has a function called `children()` that allows you to access the children of whichever element you've selected.
|
||||
|
||||
Here's an example of how you would use the `children()` function to give the children of your `left-well` element the color `blue`:
|
||||
|
||||
```js
|
||||
$("#left-well").children().css("color", "blue")
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Give all the children of your `right-well` element the color orange.
|
||||
|
||||
# --hints--
|
||||
|
||||
All children of `#right-well` should have orange text.
|
||||
|
||||
```js
|
||||
assert($('#right-well').children().css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
You should use the `children()` function to modify these elements.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.children\(\)\.css/g));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<div class="well" id="right-well">/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(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");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(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", "orange");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,140 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed308826
|
||||
title: Target the Parent of an Element Using jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18321
|
||||
dashedName: target-the-parent-of-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Every HTML element has a `parent` element from which it `inherits` properties.
|
||||
|
||||
For example, your `jQuery Playground` `h3` element has the parent element of `<div class="container-fluid">`, which itself has the parent `body`.
|
||||
|
||||
jQuery has a function called `parent()` that allows you to access the parent of whichever element you've selected.
|
||||
|
||||
Here's an example of how you would use the `parent()` function if you wanted to give the parent element of the `left-well` element a background color of blue:
|
||||
|
||||
```js
|
||||
$("#left-well").parent().css("background-color", "blue")
|
||||
```
|
||||
|
||||
Give the parent of the `#target1` element a background-color of red.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `left-well` element should have a red background.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#left-well').css('background-color') === 'red' ||
|
||||
$('#left-well').css('background-color') === 'rgb(255, 0, 0)' ||
|
||||
$('#left-well').css('background-color').toLowerCase() === '#ff0000' ||
|
||||
$('#left-well').css('background-color').toLowerCase() === '#f00'
|
||||
);
|
||||
```
|
||||
|
||||
You should use the `.parent()` function to modify this element.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g));
|
||||
```
|
||||
|
||||
The `.parent()` method should be called on the `#target1` element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")\s*?\)\s*?\.parent/gi)
|
||||
);
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<div class="well" id="left-well">/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(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");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,142 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed908626
|
||||
title: Target the Same Element with Multiple jQuery Selectors
|
||||
challengeType: 6
|
||||
forumTopicId: 18322
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-the-same-element-with-multiple-jquery-selectors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you know three ways of targeting elements: by type: `$("button")`, by class: `$(".btn")`, and by id `$("#target1")`.
|
||||
|
||||
Although it is possible to add multiple classes in a single `.addClass()` call, let's add them to the same element in *three separate ways*.
|
||||
|
||||
Using `.addClass()`, add only one class at a time to the same element, three different ways:
|
||||
|
||||
Add the `animated` class to all elements with type `button`.
|
||||
|
||||
Add the `shake` class to all the buttons with class `.btn`.
|
||||
|
||||
Add the `btn-primary` class to the button with id `#target1`.
|
||||
|
||||
**Note:** You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes `shake`, `animated`, and `btn-primary` to `#target1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `$("button")` selector.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?button\s*?(?:'|")/gi));
|
||||
```
|
||||
|
||||
Your code should use the `$(".btn")` selector.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?\.btn\s*?(?:'|")/gi));
|
||||
```
|
||||
|
||||
Your code should use the `$("#target1")` selector.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")/gi));
|
||||
```
|
||||
|
||||
You should only add one class with each of your three selectors.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/addClass/g) &&
|
||||
code.match(/addClass\s*?\(\s*?('|")\s*?[\w-]+\s*?\1\s*?\)/g).length > 2
|
||||
);
|
||||
```
|
||||
|
||||
Your `#target1` element should have the classes `animated`‚ `shake` and `btn-primary`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#target1').hasClass('animated') &&
|
||||
$('#target1').hasClass('shake') &&
|
||||
$('#target1').hasClass('btn-primary')
|
||||
);
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated");
|
||||
$(".btn").addClass("shake");
|
||||
$("#target1").addClass("btn-primary");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,117 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed608826
|
||||
title: Use appendTo to Move Elements with jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18340
|
||||
dashedName: use-appendto-to-move-elements-with-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's try moving elements from one `div` to another.
|
||||
|
||||
jQuery has a function called `appendTo()` 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:
|
||||
|
||||
```js
|
||||
$("#target4").appendTo("#left-well");
|
||||
```
|
||||
|
||||
Move your `target2` element from your `left-well` to your `right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `target2` element should not be inside your `left-well`.
|
||||
|
||||
```js
|
||||
assert($('#left-well').children('#target2').length === 0);
|
||||
```
|
||||
|
||||
Your `target2` element should be inside your `right-well`.
|
||||
|
||||
```js
|
||||
assert($('#right-well').children('#target2').length > 0);
|
||||
```
|
||||
|
||||
You should only use jQuery to move these elements.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
@ -0,0 +1,117 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecb08826
|
||||
title: Use jQuery to Modify the Entire Page
|
||||
challengeType: 6
|
||||
forumTopicId: 18361
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: use-jquery-to-modify-the-entire-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
We're done playing with our jQuery playground. Let's tear it down!
|
||||
|
||||
jQuery can target the `body` element as well.
|
||||
|
||||
Here's how we would make the entire body fade out: `$("body").addClass("animated fadeOut");`
|
||||
|
||||
But let's do something more dramatic. Add the classes `animated` and `hinge` to your `body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the classes `animated` and `hinge` to your `body` element.
|
||||
|
||||
```js
|
||||
assert($('body').hasClass('animated') && $('body').hasClass('hinge'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(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", "orange");
|
||||
$("#left-well").children().css("color", "green");
|
||||
$(".target:nth-child(2)").addClass("animated bounce");
|
||||
$(".target:even").addClass("animated shake");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(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", "orange");
|
||||
$("#left-well").children().css("color", "green");
|
||||
$(".target:nth-child(2)").addClass("animated bounce");
|
||||
$(".target:even").addClass("animated shake");
|
||||
$("body").addClass("animated hinge");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above 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>
|
||||
```
|
||||
Reference in New Issue
Block a user