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
2021-08-14 03:57:13 +01:00
committed by GitHub
parent 4df2a0c542
commit c2a11ad00d
1215 changed files with 790 additions and 449 deletions

View File

@ -0,0 +1,131 @@
---
id: 564944c91be2204b269d51e3
title: Alterar texto dentro de um elemento usando jQuery
challengeType: 6
forumTopicId: 16773
dashedName: change-text-inside-an-element-using-jquery
---
# --description--
Usando jQuery, você pode alterar o texto entre as tags de abertura e fechamento de um elemento. Você pode alterar até a marcação HTML.
O jQuery possui uma função chamada `.html()` que permite a você adicionar tags HTML e texto dentro de um elemento. Qualquer conteúdo previamente dentro do elemento será completamente substituído com o conteúdo que você forneceu usando essa função.
Aqui está como você rescreveria e enfatizaria o texto do nosso cabeçalho:
```js
$("h3").html("<em>jQuery Playground</em>");
```
O jQuery também possui uma função similar chamada `.text()` que altera apenas texto sem adicionar tags. Em outras palavras, essa função não irá avaliar nenhuma tag HTML passada a ela, mas ao invés disso irá tratá-la como o texto que você quer substituir o conteúdo atual existente.
Modifique o botão com id `target4` enfatizando seu texto.
[Veja nosso artigo de notícias para &lt;em>](https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/#em-element) aprender a diferença entre `<i>` e `<em>` e seus usos.
Note que enquanto a tag `<i>` foi tradicionalmente usada para enfatizar texto, foi adotada desde então para uso como tag para ícones. A tag `<em>` é agora amplamente aceita como a tag para ênfase. Ambos funcionarão para esse desafio.
# --hints--
Você deve enfatizar o texto no seu botão `target4` ao adicionar tags HTML.
```js
assert.isTrue(
/<em>|<i>\s*#target4\s*<\/em>|<\/i>/gi.test($('#target4').html())
);
```
De outro modo, o texto deve permanecer inalterado.
```js
assert($('#target4') && $('#target4').text().trim() === '#target4');
```
Você não deve alterar nenhum outro texto.
```js
assert.isFalse(/<em>|<i>/gi.test($('h3').html()));
```
Você deve estar usando `.html()` e não `.text()`.
```js
assert(code.match(/\.html\(/g));
```
Você deve selecionar `button id="target4"` com 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>
```

View File

@ -0,0 +1,119 @@
---
id: bad87fee1348bd9aed908826
title: Alterar o CSS de um elemento usando o 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--
Nós podemos também alterar o CSS de um elemento HTML diretamente com JQuery.
O jQuery possui uma função chamada `.css()` que o permite alterar o CSS de um elemento.
Aqui está como mudaríamos sua cor para azul:
```js
$("#target1").css("color", "blue");
```
Isso é um pouco diferente de uma declaração normal de CSS, porque a propriedade CSS e o seu valor estão entre aspas e separada com vírgula ao invés de ponto e vírgula.
Remova seus seletores de jQuery, deixando uma `document ready function` vazia.
Selecione `target1` e altere sua cor para vermelho.
# --hints--
Seu elemento `target1` deve ter o texto vermelho.
```js
assert($('#target1').css('color') === 'rgb(255, 0, 0)');
```
Você deve usar apenas jQuery para adicionar essas classes ao elemento.
```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>
```

View File

@ -0,0 +1,121 @@
---
id: bad87fee1348bd9aed508826
title: Clonar um elemento usando jQuery
challengeType: 6
forumTopicId: 16780
dashedName: clone-an-element-using-jquery
---
# --description--
Além de mover elementos, você também pode copiá-los de um lugar para outro.
O jQuery possui uma função chamada `clone()` que faz uma cópia de um elemento.
Por exemplo, se quiséssemos copiar `target2` do nosso `left-well` para nosso `right-well`, usaríamos:
```js
$("#target2").clone().appendTo("#right-well");
```
Você percebeu que isso envolve colocar duas funções do jQuery juntas? Isso é chamado de <dfn>function chaining</dfn> e é uma forma conveniente para fazer as coisas com jQuery.
Clone seu elemento `target5` e adicione-o ao seu `left-well`.
# --hints--
Seu elemento `target5` deve estar dentro do seu `right-well`.
```js
assert($('#right-well').children('#target5').length > 0);
```
Uma cópia do seu elemento `target5` também deve estar dentro do seu `left-well`.
```js
assert($('#left-well').children('#target5').length > 0);
```
Você deve usar apenas jQuery para mover esses elementos.
```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>
```

View File

@ -0,0 +1,125 @@
---
id: bad87fee1348bd9aeda08726
title: Excluir suas funções do jQuery
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--
Esses animações eram legais no início, mas agora elas estão causando distração.
Remova todas as três funções do jQuery do `document ready function`, mas deixe o `document ready function` intacto.
# --hints--
As três funções do jQuery devem ser excluídas do `document ready function`.
```js
assert(code.match(/\{\s*\}\);/g));
```
Você deve deixar o elemento `script` intacto.
```js
assert(code.match(/<script>/g));
```
Você deve deixar o `$(document).ready(function() {` no início do seu elemento `script`.
```js
assert(code.match(/\$\(document\)\.ready\(function\(\)\s?\{/g));
```
Você deve deixar intacto o fechamento `});` da função `document.ready`.
```js
assert(code.match(/.*\s*\}\);/g));
```
Você deve deixar a tag de fechamento do elemento `script` intacta.
```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>
```

View File

@ -0,0 +1,120 @@
---
id: bad87fee1348bd9aed808826
title: Desativar um elemento usando o jQuery
challengeType: 6
forumTopicId: 17563
dashedName: disable-an-element-using-jquery
---
# --description--
Você também pode alterar as propriedades não CSS de elementos HTML com jQuery. Por exemplo, você pode desabilitar botões.
Quando você desativa um botão, ele se tornará cinza e não poderá mais ser clicado.
O jQuery possui uma função chamada `.prop()` que o permite ajustar as propriedades de elementos.
Aqui está como você desabilitaria todos os botões:
```js
$("button").prop("disabled", true);
```
Desative apenas o botão `target1`.
# --hints--
O botão `target1` deve ser desativado.
```js
assert(
$('#target1') &&
$('#target1').prop('disabled') &&
code.match(/["']disabled["'],( true|true)/g)
);
```
Nenhum outro botão deve ser desativado.
```js
assert($('#target2') && !$('#target2').prop('disabled'));
```
Você deve usar apenas jQuery para adicionar essas classes ao elemento.
```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>
```

View File

@ -0,0 +1,118 @@
---
id: bad87fee1348bd9acdd08826
title: Aprender como as tags de script e document ready funcionam
challengeType: 6
forumTopicId: 18224
dashedName: learn-how-script-tags-and-document-ready-work
---
# --description--
Agora nós estamos prontos para aprender jQuery, a ferramenta mais popular de JavaScript de todos os tempos.
Antes que nós possamos começar usando jQuery, nós precisamos adicionar algumas coisas ao nosso HTML.
Primeiro, adicione um elemento `script` no topo da página. Certifique-se de fechá-la na próxima linha.
O navegador vai rodar qualquer JavaScript dentro do elemento `script`, incluindo jQuery.
Dentro do seu elemento `script`, adicione esse código: `$(document).ready(function() {` ao seu `script`. Em seguida, feche-o na próxima linha (ainda dentro do elemento `script`) com: `});`
Aprenderemos mais sobre `functions` depois. O importante a saber é que o código que você colocar dentro de `function` executará assim que o seu navegador carregar a página.
Isso é importante porque sem o `document ready function`, seu código pode executar antes do HTML ser carregado, o que causaria bugs.
# --hints--
Você deve criar um elemento `script` certificando-se que é válido e possui tag de fechamento.
```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
);
```
Você deve adicionar `$(document).ready(function() {` ao início do seu elemento `script`.
```js
assert(
code.match(
/\$\s*?\(\s*?document\s*?\)\.ready\s*?\(\s*?function\s*?\(\s*?\)\s*?\{/g
)
);
```
Você deve fechar sua função `$(document).ready(function() {` com `});`
```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>
```

View File

@ -0,0 +1,109 @@
---
id: bad87fee1348bd9aed708826
title: Remover um elemento usando o jQuery
challengeType: 6
forumTopicId: 18262
dashedName: remove-an-element-using-jquery
---
# --description--
Agora vamos remover um elemento HTML da sua página usando jQuery.
O jQuery possui uma função chamada `.remove()` que removerá completamente um elemento HTML
Remova o elemento `#target4` da sua página usando a função `.remove()`.
# --hints--
Você deve usar jQuery para remover seu elemento `target4` da sua página.
```js
assert(
$('#target4').length === 0 && code.match(/\$\(["']#target4["']\).remove\(\)/g)
);
```
Você deve usar apenas jQuery para remover esse elemento.
```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>
```

View File

@ -0,0 +1,122 @@
---
id: bad87fee1348bd9aed918626
title: Remover classes de um elemento com o 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--
Da mesma forma que você pode adicionar classes a um elemento com a função `addClass()` do jQuery, você pode removê-los usando a função `removeClass()` do jQuery.
Aqui está como você faria isso para um botão específico:
```js
$("#target2").removeClass("btn-default");
```
Vamos remover a classe `btn-default` de todos os seus elementos `button`.
# --hints--
A classe `btn-default` deve ser removida de todos os seus elementos `button`.
```js
assert($('.btn-default').length === 0);
```
Você deve usar apenas jQuery para remover essa classe do elemento.
```js
assert(code.match(/btn btn-default/g));
```
Você deve remover apenas a classe `btn-default`.
```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>
```

View File

@ -0,0 +1,144 @@
---
id: bad87fee1348bd9aed108826
title: Mirar um filho específico de um elemento usando o 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--
Você já viu o motivo de mirar os atributos de id ser tão conveniente com seletores jQuery. Mas você nem sempre terá ids legais para trabalhar.
Felizmente, o jQuery possui outros truques para apontar para os elementos certos.
O jQuery usa seletores CSS para apontar elementos. O seletor CSS `target:nth-child(n)` o permite selecionar todos os enésimos (nth) elementos com a classe ou tipo de elemento alvos.
Aqui está como você daria ao terceiro elemento em cada well a classe bounce:
```js
$(".target:nth-child(3)").addClass("animated bounce");
```
Faça quicar o segundo filho em cada um dos seus elementos well. Você deve selecionar os filhos do elemento com a classe `target`.
# --hints--
O segundo elemento nos seus elementos `target` deve quicar.
```js
assert(
$('.target:nth-child(2)').hasClass('animated') &&
$('.target:nth-child(2)').hasClass('bounce')
);
```
Apenas dois elementos devem quicar.
```js
assert($('.animated.bounce').length === 2);
```
Você deve usar o seletor `:nth-child()` para modificar esses elementos.
```js
assert(code.match(/\:nth-child\(/g));
```
Você deve usar apenas jQuery para adicionar essas classes ao elemento.
```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>
```

View File

@ -0,0 +1,113 @@
---
id: bad87fee1348bd9aedc08826
title: Mirar elementos por classe usando o 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--
Você vê como fizemos todos os seus elementos `button` quicar? Nós os selecionamos com `$("button")`, em seguida adicionamos algumas classes CSS a eles com `.addClass("animated bounce");`.
Você acabou de usar a função `.addClass()` do jQuery, a qual o permite adicionar classes a elementos.
Primeiro, vamos ter como alvo seus elementos `div` com a classe `well` usando o seletor `$(".well")`.
Observe que, assim como com declarações CSS, você digita um `.` antes do nome da classe.
Em seguida, use a função `.addClass()` do jQuery para adicionar as classes `animated<code> e <code>shake`.
Por exemplo, você poderia fazer todos os elementos com a classe `text-primary` sacudir adicionando o seguinte ao seu `$(document).ready(function() {`:
```js
$(".text-primary").addClass("animated shake");
```
# --hints--
Você deve usar a função `addClass()` do jQuery para dar as classes `animated` e `shake` para todos os seus elementos com a classe `well`.
```js
assert($('.well').hasClass('animated') && $('.well').hasClass('shake'));
```
Você deve usar apenas jQuery para adicionar essas classes ao elemento.
```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>
```

View File

@ -0,0 +1,123 @@
---
id: bad87fee1348bd9aeda08826
title: Mirar elementos por id usando o 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--
Você também pode mirar elementos por seus atributos id.
Primeiro, vamos tomar como alvo seu elemento `button` com o id `target3` usando o seletor `$("#target3")`.
Note que, assim como as declarações CSS, você digita um `#` antes do nome do id.
Em seguida use a função `.addClass` do jQuery para adicionar as classes `animated` e `fadeOut`.
Aqui está como você faria o elemento `button` com o id `target6` desaparecer:
```js
$("#target6").addClass("animated fadeOut");
```
# --hints--
Você deve selecionar o elemento `button` com o `id` `target3` e usar a função `addClass()` do jQuery para dar ao botão a classe `animated`.
```js
assert($('#target3').hasClass('animated'));
```
Você deve mirar o elemento com o id `target3` e usar a função `addClass()` do jQuery para dar a ele a classe `fadeOut`.
```js
assert(
($('#target3').hasClass('fadeOut') || $('#target3').hasClass('fadeout')) &&
code.match(/\$\(\s*.#target3.\s*\)/g)
);
```
Você deve usar apenas jQuery para adicionar essas classes ao elemento.
```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>
```

View File

@ -0,0 +1,139 @@
---
id: bad87fee1348bd9aed008826
title: Mirar elementos pares usando o 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--
Você também pode ter como alvo elementos baseados em suas posições usando os seletores `:odd` ou `:even`.
Note que jQuery é indexado a zero, o que significa que o primeiro elemento em uma seleção tem a posição 0. Isso pode ser um pouco confuso, pois, contra-intuitivamente, `:odd` seleciona o segundo elemento (position1), fourth element (position 3) e assim por diante.
Aqui está como você teria como alvo todos os elementos ímpares com a classe `target` e dar a eles as classes:
```js
$(".target:odd").addClass("animated shake");
```
Tente selecionar todos os elementos `target` pares e dar a eles as classes `animated` e `shake`. Lembre-se de que **even** refere-se a posição de elementos com base em um sistema indexado a zero.
# --hints--
Todos os elementos `target` que o jQuery considerar como par devem sacudir.
```js
assert(
$('.target:even').hasClass('animated') && $('.target:even').hasClass('shake')
);
```
Você deve usar o seletor `:even` para modificar esses elementos.
```js
assert(code.match(/\:even/g));
```
Você deve usar apenas jQuery para adicionar essas classes ao elemento.
```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>
```

View File

@ -0,0 +1,118 @@
---
id: bad87fee1348bd9bedc08826
title: Mirar elementos de HTML com seletores usando o 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--
Agora temos uma função `document ready`.
Agora vamos escrever nossa primeira declaração jQuery. Todas as funções do jQuery começam com um `$`, geralmente são referidas como um operador de sinal de dólar ou como bling.
jQuery geralmente selecionar um elemento HTML com um <dfn>seletor</dfn>, em seguida faz algo a esse elemento.
Por exemplo, vamos fazer todos os nossos elementos `button` quicar. Basta adicionar esse código dentro da sua função pronta:
```js
$("button").addClass("animated bounce");
```
Note que nós já incluímos ambas as bibliotecas jQuery e Animate.css por trás dos panos para que você possa utilizá-las no editor. Então você está usando jQuery para aplicar a classe `bounce` do Animate.css ao seus elementos `button`.
# --hints--
Você deve usar a função `addClass()` do jQuery para dar as classes `animated` e `bounce` ao seus elementos `button`.
```js
assert($('button').hasClass('animated') && $('button').hasClass('bounce'));
```
Você deve usar apenas jQuery para adicionar essas classes ao elemento.
```js
assert(!code.match(/class.*animated/g));
```
Seu código jQuery deve estar dentro da função `$(document).ready()`.
```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>
```

View File

@ -0,0 +1,125 @@
---
id: bad87fee1348bd9aed208826
title: Mirar o filho de um elemento usando o jQuery
challengeType: 6
forumTopicId: 18320
dashedName: target-the-children-of-an-element-using-jquery
---
# --description--
Quando elementos HTML são colocadas um nível abaixo de outro eles são chamados <dfn>children(filhos)</dfn> daquele elemento. Por exemplo, os elementos button nesse desafio com o texto `#target1`, `#target2` e `#target3` são todos filhos do elemento `<div class="well" id="left-well">`.
O jQuery possui uma função chamada `children()` que o permite acessar os filhos de qualquer elementos que você selecionou.
Aqui está um exemplo de como você usaria a função `children()` para dar ao filho do seu elemento `left-well` a cor `blue`:
```js
$("#left-well").children().css("color", "blue")
```
# --instructions--
Dê a todos os filhos do seu elemento `right-well` a cor laranja.
# --hints--
Todos os filhos de `#right-well` devem ter o texto laranja.
```js
assert($('#right-well').children().css('color') === 'rgb(255, 165, 0)');
```
Você deve usar a função `children()` para modificar esses elementos.
```js
assert(code.match(/\.children\(\)\.css/g));
```
Você deve usar apenas jQuery para adicionar essas classes ao elemento.
```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>
```

View File

@ -0,0 +1,140 @@
---
id: bad87fee1348bd9aed308826
title: Mirar o pai de um elemento usando o jQuery
challengeType: 6
forumTopicId: 18321
dashedName: target-the-parent-of-an-element-using-jquery
---
# --description--
Todo elemento HTML possui um elemento `parent` do qual `inherits` (herda) propriedades.
Por exemplo, seu elemento `jQuery Playground` `h3` tem o elemento parente de `<div class="container-fluid">`, o qual ele mesmo possui o parente `body`.
O jQuery possui uma função chamada `parent()` que o permite acessar o parente de qualquer elemento que você selecionou.
Aqui está um exemplo de como você usaria a função `parent()` se você quisesse dar ao elemento parente do elemento `left-well` uma cor de fundo azul:
```js
$("#left-well").parent().css("background-color", "blue")
```
Dê ao parente do elemento `#target1` uma cor de fundo (background-color) vermelha.
# --hints--
O elemento `left-well` deve ter um fundo vermelho.
```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'
);
```
Você deve usar a função `.parent()` para modificar esse elemento.
```js
assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g));
```
O método `.parent()` deve ser chamado no elemento `#target1`.
```js
assert(
code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")\s*?\)\s*?\.parent/gi)
);
```
Você deve usar apenas jQuery para adicionar essas classes ao elemento.
```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>
```

View File

@ -0,0 +1,143 @@
---
id: bad87fee1348bd9aed908626
title: Mirar o mesmo elemento com múltiplos seletores de jQuery
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--
Agora você sabe três formas de mirar elementos: pelo tipo`$("button")`, pela classe: `$(".btn")`, e pelo id `$("#target1")`.
Embora seja possível adicionar várias classes em uma única chamada `.addClass()`, vamos adicioná-los ao mesmo elemento de *três formas separadas*.
Usando `.addClass()`, adicione apenas uma classe de cada vez ao mesmo elemento, três formas diferentes:
Adicione a classe `animated` a todos os elementos do tipo `button`.
Adicione a classe `shake` a todos os botões com classe `.btn`.
Adicione a classe `btn-primary` ao botão com id `#target1`.
**Observação:** você deve estar mirando apenas um elemento e adicionando apenas uma classe de cada vez. Ao todo, seus três seletores individuais acabarão adicionando as três classes `shake`, `animated` e `btn-primary` para `#target1`.
# --hints--
O código deve usar o seletor `$("button")`.
```js
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?button\s*?(?:'|")/gi));
```
O código deve usar o seletor `$(".btn")`.
```js
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?\.btn\s*?(?:'|")/gi));
```
O código deve usar o seletor `$("#target1")`.
```js
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")/gi));
```
Você deve adicionar apenas uma classe com cada um dos seus três seletores.
```js
assert(
code.match(/addClass/g) &&
code.match(/addClass\s*?\(\s*?('|")\s*?[\w-]+\s*?\1\s*?\)/g).length > 2
);
```
O elemento `#target1` deve ter as classes `animated` `shake` e `btn-primary`.
```js
assert(
$('#target1').hasClass('animated') &&
$('#target1').hasClass('shake') &&
$('#target1').hasClass('btn-primary')
);
```
Você deve usar apenas jQuery para adicionar esses elementos ao elemento.
```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>
```

View File

@ -0,0 +1,117 @@
---
id: bad87fee1348bd9aed608826
title: Usar appendTo para mover elementos com o jQuery
challengeType: 6
forumTopicId: 18340
dashedName: use-appendto-to-move-elements-with-jquery
---
# --description--
Agora vamos tentar mover elementos de uma `div` para outra.
O jQuery possui uma função chamada `appendTo()` que o permite selecionar elementos HTML e adicioná-los a outro elemento.
Por exemplo, se quiséssemos mover `target4` do nosso well da direita para o da esquerda, usaríamos:
```js
$("#target4").appendTo("#left-well");
```
Mova seu elemento `target2` do seu `left-well` para o seu `right-well`.
# --hints--
O elemento `target2` não deve estar dentro do seu `left-well`.
```js
assert($('#left-well').children('#target2').length === 0);
```
O elemento `target2` deve estar dentro do seu `right-well`.
```js
assert($('#right-well').children('#target2').length > 0);
```
Você deve usar apenas jQuery para mover esses elementos.
```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>
```

View File

@ -0,0 +1,118 @@
---
id: bad87fee1348bd9aecb08826
title: Usar o jQuery para modificar a página inteira
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--
Terminamos de brincar com nosso jQuery playground. Vamos quebrar tudo!
O jQuery também pode tomar como alvo o elemento `body`.
Aqui está como você faria para desaparecer todo o body:`$("body").addClass("animated fadeOut");`
Mas vamos fazer algo mais dramático. Adicione as classes `animated` e `hinge` ao seu elemento `body`.
# --hints--
Você deve adicionar as classes `animated` e `hinge` ao seu elemento `body`.
```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>
```