chore(i18n,curriculum): processed translations (#43008)
This commit is contained in:
camperbot
GitHub
@@ -8,24 +8,28 @@ dashedName: reuse-patterns-using-capture-groups
|
||||
|
||||
# --description--
|
||||
|
||||
Por vezes você procurará padrões que ocorrem várias vezes em uma string. Não faz sentido repetir a regex manualmente. Existe uma forma muito melhor de especificar quando a string possui múltiplas ocorrências do padrão buscado.
|
||||
|
||||
Você pode usar <dfn>grupos de captura</dfn> para buscar substrings repetidas. Usamos parênteses (`(` e `)`) para criar grupos de captura. Só precisamos escrever a regex do padrão que se repete dentro deles.
|
||||
|
||||
E, para especificar que a string capturada pelo grupo se repetirá, você escreve uma barra invertida (`\`) seguida de um número. Esse número começa por 1 e aumenta em um para cada grupo de captura que você usa. Por exemplo, `\1` captura o primeiro grupo.
|
||||
|
||||
No exemplo abaixo, é capturada qualquer palavra que se repita depois de um espaço:
|
||||
Vamos supor que você deseja encontrar a correspondência de uma palavra que ocorra várias vezes como abaixo.
|
||||
|
||||
```js
|
||||
let repeatStr = "regex regex";
|
||||
let repeatRegex = /(\w+)\s\1/;
|
||||
repeatRegex.test(repeatStr);
|
||||
repeatStr.match(repeatRegex);
|
||||
let repeatStr = "row row row your boat";
|
||||
```
|
||||
|
||||
Nele, `test` retorna `true` e `match` retorna `["regex regex", "regex"]`.
|
||||
Você poderia usar `/row row row/`, mas e se você não souber a palavra específica repetida? <dfn>Grupos de captura</dfn> podem ser usados para localizar substrings repetidas.
|
||||
|
||||
Os grupos de captura são criados envolvendo o padrão de regex a ser capturado entre parênteses. Neste caso, o objetivo é capturar uma palavra composta de caracteres alfanuméricos para que o grupo de captura seja `\w+` entre parênteses: `/(\w+)/`.
|
||||
|
||||
A substring correspondente ao grupo é salva em uma "variável" temporária que pode ser acessada dentro da mesma expressão regular usando uma barra invertida e o número do grupo de captura (ex.: `\1`). Os grupos de captura são automaticamente numerados pela posição de abertura de seus parênteses (esquerda para direita), começando em 1.
|
||||
|
||||
O exemplo abaixo captura qualquer palavra que se repita três vezes, separada por espaços:
|
||||
|
||||
```js
|
||||
let repeatRegex = /(\w+) \1 \1/;
|
||||
repeatRegex.test(repeatStr); // Returns true
|
||||
repeatStr.match(repeatRegex); // Returns ["row row row", "row"]
|
||||
```
|
||||
|
||||
Usar o método `.match()` em uma string retornará um array com a substring correspondente, juntamente com seus grupos capturados.
|
||||
|
||||
O método `.match()` de uma string retorna um array com a string capturada e cada grupo capturado.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: call-out-optional-actions-with-btn-info
|
||||
|
||||
# --description--
|
||||
|
||||
O Bootstrap vem com várias cores pré-definidas para botões. A classe `btn-info` é usada para chamar atenção para ações opcionais que o usuário pode tomar.
|
||||
O Bootstrap vem com várias cores predefinidas para botões. A classe `btn-info` é usada para chamar atenção para ações opcionais que o usuário pode tomar.
|
||||
|
||||
Crie um novo botão do Bootstrap no nível de blocos abaixo do botão `Like` com o texto `Info`, e adicione as classes `btn-info` e `btn-block` do Bootstrap a ele.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd8acde08812
|
||||
title: Centralize Texto com Bootstrap
|
||||
title: Centralizar o texto com Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16771
|
||||
dashedName: center-text-with-bootstrap
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908846
|
||||
title: Crie um Título Bootstrap
|
||||
title: Criar um título com Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16812
|
||||
dashedName: create-a-bootstrap-headline
|
||||
@@ -10,21 +10,21 @@ dashedName: create-a-bootstrap-headline
|
||||
|
||||
Agora vamos construir algo do zero para praticar nossa habilidade em HTML, CSS e Bootstrap.
|
||||
|
||||
Iremos construir um playground JQuery, o qual iremos em breve colocar em uso nos nos desafios JQuery.
|
||||
Vamos construir um playground jQuery, o qual vamos colocar em uso em breve nos desafios de jQuery.
|
||||
|
||||
Para começar, crie um elemento `h3`, com o texto `JQuery Playground`.
|
||||
Para começar, crie um elemento `h3`, com o texto `jQuery Playground`.
|
||||
|
||||
Colore seu elemento `h3` com a classe Bootstrap `text-primary`, e centralize-o com a classe Bootstrap `text-center`.
|
||||
Dê ao elemento `h3` uma cor com a classe `text-primary`, e centralize-o com a classe `text-center` do Bootstrap.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um elemento `h3` para sua página.
|
||||
Você deve adicionar um elemento `h3` à página.
|
||||
|
||||
```js
|
||||
assert($('h3') && $('h3').length > 0);
|
||||
```
|
||||
|
||||
Seu elemento `h3` deve ter uma tag de fechamento.
|
||||
O elemento `h3` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -34,19 +34,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Seu elemento `h3` deve ser colorido ao aplicar a classe `text-primary`
|
||||
O elemento `h3` deve ser colorido ao aplicar a classe `text-primary`
|
||||
|
||||
```js
|
||||
assert($('h3').hasClass('text-primary'));
|
||||
```
|
||||
|
||||
Seu elemento `h3` deve ser centralizado ao aplicar a classe `text-center`
|
||||
O elemento `h3` deve ser centralizado ao aplicar a classe `text-center`
|
||||
|
||||
```js
|
||||
assert($('h3').hasClass('text-center'));
|
||||
```
|
||||
|
||||
Seu elemento `h3` deve ter o texto `JQuery Playground`.
|
||||
O elemento `h3` deve ter o texto `jQuery Playground`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text()));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9bec908846
|
||||
title: Crie uma Linha Bootstrap
|
||||
title: Criar uma linha do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16813
|
||||
dashedName: create-a-bootstrap-row
|
||||
@@ -8,13 +8,13 @@ dashedName: create-a-bootstrap-row
|
||||
|
||||
# --description--
|
||||
|
||||
Agora iremos criar uma linha Bootstrap para nossos elementos em linha.
|
||||
Agora vamos criar uma linha do Bootstrap para nossos elementos em linha.
|
||||
|
||||
Crie um elemento `div` abaixo da tag `h3`, com a classe `row`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar o elemento `div` abaixo do seu elemento `h3`.
|
||||
Você deve adicionar o elemento `div` abaixo do elemento `h3`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -25,19 +25,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Seu elemento `div` deve ter a classe `row`
|
||||
O elemento `div` deve ter a classe `row`
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('row'));
|
||||
```
|
||||
|
||||
Seu `row div` deve estar aninhado dentro de `container-fluid div`
|
||||
O `row div` deve estar aninhado dentro de `container-fluid div`
|
||||
|
||||
```js
|
||||
assert($('div.container-fluid div.row').length > 0);
|
||||
```
|
||||
|
||||
Seu elemento `div` deve ter uma tag de fechamento.
|
||||
O elemento `div` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908852
|
||||
title: Crie uma Classe para Selecionar com JQuery Selectors
|
||||
title: Criar uma classe para selecionar com jQuery Selectors
|
||||
challengeType: 0
|
||||
forumTopicId: 16815
|
||||
dashedName: create-a-class-to-target-with-jquery-selectors
|
||||
@@ -8,13 +8,13 @@ dashedName: create-a-class-to-target-with-jquery-selectors
|
||||
|
||||
# --description--
|
||||
|
||||
Nem todas as classes precisam ter um CSS correspondente. As vezes criamos classes apenas com o propósito de selecionar esses elementos de forma mais fácil usando JQuery.
|
||||
Nem todas as classes precisam ter um CSS correspondente. Às vezes, criamos classes apenas com o propósito de selecionar esses elementos de forma mais fácil usando o jQuery.
|
||||
|
||||
De a cada um de seus elementos `button` a classe `target`.
|
||||
Dê a cada um dos elementos `button` a classe `target`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve aplicar a classe `target` para cada um de seus elementos `button`.
|
||||
Você deve aplicar a classe `target` para cada um dos elementos `button`.
|
||||
|
||||
```js
|
||||
assert($('.target').length > 5);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08845
|
||||
title: Crie um Título Personalizado
|
||||
title: Criar um título personalizado
|
||||
challengeType: 0
|
||||
forumTopicId: 16816
|
||||
dashedName: create-a-custom-heading
|
||||
@@ -8,9 +8,9 @@ dashedName: create-a-custom-heading
|
||||
|
||||
# --description--
|
||||
|
||||
Iremos fazer um simples título para nossa foto de gato ao colocar o título e a imagem do gato relaxando na mesma linha.
|
||||
Vamos fazer um título simples para nossa foto de gato ao colocar na mesma linha o título e a imagem do gato relaxando.
|
||||
|
||||
Lembre-se, Bootstrap usa o sistema de rede responsiva, o que torna fácil colocar elementos em linhas e especificar cada largura relativa de um elemento. A maioria das classes Bootstrap podem ser aplicadas a um elemento `div`.
|
||||
Lembre-se: o Bootstrap usa o sistema de grade responsiva, o que torna fácil colocar elementos em linha e especificar cada largura relativa de um elemento. A maioria das classes do Bootstrap podem ser aplicadas a um elemento `div`.
|
||||
|
||||
Aninhe sua primeira imagem e seu elemento `h2` dentro de um único elemento `<div class="row">`. Aninhe o seu elemento `h2` dentro de uma `<div class="col-xs-8">` e sua imagem em uma `<div class="col-xs-4">` para que eles estejam na mesma linha.
|
||||
|
||||
@@ -18,13 +18,13 @@ Notou como a imagem agora está no tamanho exato para encaixar com o texto?
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `h2` e o elemento `img` mais a cima devem ambos estarem aninhados juntos dentro de um elemento `div` com a classe `row`.
|
||||
O elemento `h2` e o elemento `img` mais acima devem estar aninhados juntos dentro de um elemento `div` com a classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0);
|
||||
```
|
||||
|
||||
Seu elemento `img` superior deve estar aninhado dentro de uma `div` com a classe `col-xs-4`.
|
||||
O elemento `img` superior deve estar aninhado dentro de uma `div` com a classe `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Seu elemento `h2` deve estar aninhado dentro de uma `div` com a classe `col-xs-8`.
|
||||
O elemento `h2` deve estar aninhado dentro de uma `div` com a classe `col-xs-8`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Todos os seus elementos `div` devem ter tags de fechamento.
|
||||
Todos os elementos `div` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908848
|
||||
title: Crie Poços Bootstrap
|
||||
title: Criar poços do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16825
|
||||
dashedName: create-bootstrap-wells
|
||||
@@ -8,25 +8,25 @@ dashedName: create-bootstrap-wells
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap tem uma classe chamada `well` que podem criar uma sensação visual de profundidade para suas colunas.
|
||||
O Bootstrap tem uma classe chamada `well` que pode criar uma sensação visual de profundidade para suas colunas.
|
||||
|
||||
Aninhe um elemento `div` com a classe `well` dentro de cada um de seus elementos `col-xs-6` `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um elemento `div` com a classe `well` dentro de cada um de seus elementos `div` com a classe `col-xs-6`
|
||||
Você deve adicionar um elemento `div` com a classe `well` dentro de cada um dos elementos `div` com a classe `col-xs-6`
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-6').not(':has(>div.well)').length < 1);
|
||||
```
|
||||
|
||||
Ambos os seus elementos `div` com a classe `col-xs-6` deve estar aninhados dentro de seu elemento `div` com a classe `row`.
|
||||
Ambos os elementos `div` com a classe `col-xs-6` devem estar aninhados dentro do elemento `div` com a classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row > div.col-xs-6').length > 1);
|
||||
```
|
||||
|
||||
Todos os seus elementos `div` devem ter tags de fechamento.
|
||||
Todos os elementos `div` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1347bd9aedf08845
|
||||
title: Livre-se de CSS customizado para Bootstrap
|
||||
title: Limpar o CSS customizado para o Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 17565
|
||||
dashedName: ditch-custom-css-for-bootstrap
|
||||
@@ -12,27 +12,27 @@ Nós podemos limpar nosso código e fazer o aplicativo de fotos de gato parecer
|
||||
|
||||
Não se preocupe - haverá muito tempo para customizar nosso CSS depois.
|
||||
|
||||
Delete as declarações CSS `.red-text`, `p` e `.smaller-image` de seu elemento `style` para que as únicas declarações restantes em seu elemento `style` sejam `h2` e `thick-green-border`.
|
||||
Exclua as declarações CSS `.red-text`, `p` e `.smaller-image` do elemento `style` para que as únicas declarações restantes no elemento `style` sejam `h2` e `thick-green-border`.
|
||||
|
||||
Em seguida, delete o elemento `p` que contem um link morto. Em seguida, remova a classe `red-text` do seu elemento `h2` e substitua-o com a classe Bootstrap `text-primary`.
|
||||
Em seguida, exclua o elemento `p` que contem um link morto. Depois disso, remova a classe `red-text` do elemento `h2` e substitua-a pela classe `text-primary`do Bootstrap.
|
||||
|
||||
Finalmente, remova a classe `smaller-image` do seu primeiro elemento `img` e substitua o com a classe `img-responsive`.
|
||||
Finalmente, remova a classe `smaller-image` do primeiro elemento `img` e substitua-a pela classe `img-responsive`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `h2` não deve mais conter a classe `red-text`.
|
||||
O elemento `h2` não deve mais conter a classe `red-text`.
|
||||
|
||||
```js
|
||||
assert(!$('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Seu elemento `h2` deve ter agora a classe `text-primary`.
|
||||
O elemento `h2` deve ter agora a classe `text-primary`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('text-primary'));
|
||||
```
|
||||
|
||||
Seus elementos de parágrafo não devem mais usar a fonte `Monospace`.
|
||||
Os elementos de parágrafo não devem mais usar a fonte `Monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -42,13 +42,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
A classe `smaller-image` deve ser removida da sua imagem superior.
|
||||
A classe `smaller-image` deve ser removida da imagem superior.
|
||||
|
||||
```js
|
||||
assert(!$('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Você deve adicionar a classe `img-responsive` para sua imagem superior.
|
||||
Você deve adicionar a classe `img-responsive` à imagem superior.
|
||||
|
||||
```js
|
||||
assert($('.img-responsive').length > 1);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908855
|
||||
title: Dê a Cada Elemento um id Único
|
||||
title: Dar a cada elemento um id único
|
||||
challengeType: 0
|
||||
forumTopicId: 18191
|
||||
dashedName: give-each-element-a-unique-id
|
||||
@@ -8,9 +8,9 @@ dashedName: give-each-element-a-unique-id
|
||||
|
||||
# --description--
|
||||
|
||||
Nós também queremos ser capazes de usar JQuery para selecionar cada botão a partir do seu id único.
|
||||
Nós também queremos ser capazes de usar jQuery para selecionar cada botão a partir do seu id único.
|
||||
|
||||
Dê a cada um dos seus botões um id único, começando com `target1` e terminando com `target6`.
|
||||
Dê a cada um dos botões um id único, começando com `target1` e terminando com `target6`.
|
||||
|
||||
Certifique-se de que `target1` até `target3` estão em `#left-well`, e `target4` até `target6` estão em `#right well`.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908746
|
||||
title: Hospede nossa página em um div de contêiner fluido de Bootstrap
|
||||
title: Hospedar nossa página em um div de contêiner fluido do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18198
|
||||
dashedName: house-our-page-within-a-bootstrap-container-fluid-div
|
||||
@@ -8,19 +8,19 @@ dashedName: house-our-page-within-a-bootstrap-container-fluid-div
|
||||
|
||||
# --description--
|
||||
|
||||
Agora vamos garantir que todo o conteúdo na sua página seja responsivo a dispositivo móveis.
|
||||
Agora, vamos garantir que todo o conteúdo na sua página seja responsivo a dispositivo móveis.
|
||||
|
||||
Vamos aninhar nosso elemento `h3` dentro de um elemento `div` com a classe `container-fluid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `div` teve ter a classe `container-fluid`.
|
||||
O elemento `div` teve ter a classe `container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('container-fluid'));
|
||||
```
|
||||
|
||||
Cada um de seus elementos `div` devem ter tags de fechamento.
|
||||
Cada um de seus elementos `div` deve ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -30,7 +30,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Seu elemento `h3` deve estar aninhando dentro de um elemento `div`.
|
||||
O elemento `h3` deve estar aninhando dentro de um elemento `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('h3').length > 0);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908856
|
||||
title: Dê um Label a Botões Bootstrap
|
||||
title: Dar um label a botões do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18222
|
||||
dashedName: label-bootstrap-buttons
|
||||
@@ -8,31 +8,31 @@ dashedName: label-bootstrap-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Assim como nós rotulamos nossos wells, nós queremos rotular (label) nossos botões.
|
||||
Assim como fizemos com nossos poços, queremos também dar um label aos nossos botões.
|
||||
|
||||
Dê o texto a cada um de seus elementos `button` que corresponde ao seletor id.
|
||||
Dê a cada um de seus elementos `button` o texto que corresponde ao seu seletor id.
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `button` com o id `target1` teve ter o texto `#target1`.
|
||||
O elemento `button` com o id `target1` deve ter o texto `#target1`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target1', 'gi').test($('#target1').text()));
|
||||
```
|
||||
|
||||
Seu elemento `button` com o id `target2` deve ter o texto `#target2`.
|
||||
O elemento `button` com o id `target2` deve ter o texto `#target2`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target2', 'gi').test($('#target2').text()));
|
||||
```
|
||||
|
||||
Seu elemento `button` com o id `target3` deve ter o texto `#target3`.
|
||||
O elemento `button` com o id `target3` deve ter o texto `#target3`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target3', 'gi').test($('#target3').text()));
|
||||
```
|
||||
|
||||
Seu elemento `button` com o id `target4` deve ter o texto `#target4`.
|
||||
O elemento `button` com o id `target4` deve ter o texto `#target4`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target4', 'gi').test($('#target4').text()));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908854
|
||||
title: Dê um Label a Wells Bootstrap
|
||||
title: Dar um label aos poços do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18223
|
||||
dashedName: label-bootstrap-wells
|
||||
@@ -8,15 +8,15 @@ dashedName: label-bootstrap-wells
|
||||
|
||||
# --description--
|
||||
|
||||
Pelo bem da clareza, vamos rotular ambos os nossos wells com seus ids.
|
||||
Para deixar claro, vamos rotular nossos dois poços com seus ids.
|
||||
|
||||
Acima do seu well da esquerda, dentro de seu elemento `col-xs-6` `div`, adicione um elemento `h4` com o texto `#left-well`.
|
||||
Acima do poço da esquerda, dentro do elemento `col-xs-6` `div`, adicione um elemento `h4` com o texto `#left-well`.
|
||||
|
||||
Acima do seu well da direita, dentro de seu elemento `col-xs-6` `div`, adicione um elemento `h4` com o texto `#right-well`.
|
||||
Acima do poço da direita, dentro do elemento `col-xs-6` `div`, adicione um elemento `h4` com o texto `#right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um elemento `h4` para cada um de seus elementos `<div class="col-xs-6">`.
|
||||
Você deve adicionar um elemento `h4` para cada um dos elementos `<div class="col-xs-6">`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -36,7 +36,7 @@ Um elemento `h4` deve ter o texto `#right-well`.
|
||||
assert(new RegExp('#right-well', 'gi').test($('h4').text()));
|
||||
```
|
||||
|
||||
Todos os seus elementos `h4` devem ter tags de fechamento.
|
||||
Todos os elementos `h4` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908845
|
||||
title: Alinhe os Elementos de Formulário de maneira Responsiva com o Bootstrap
|
||||
title: Alinhar os elementos de formulário de maneira responsiva com o Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18225
|
||||
required:
|
||||
@@ -13,15 +13,15 @@ dashedName: line-up-form-elements-responsively-with-bootstrap
|
||||
|
||||
# --description--
|
||||
|
||||
Agora vamos colocar o seu `input` e o `button` de submissão do formulário na mesma linha. Faremos isso da mesma forma que fizemos antes: usando um elemento `div` com a classe `row`, e outros elementos `div` dentro do primeiro div usando a classe `col-xs-*`.
|
||||
Agora vamos colocar o `input` e o `button` de envio do formulário na mesma linha. Faremos isso da mesma forma que fizemos antes: usando um elemento `div` com a classe `row` e outros elementos `div` dentro do primeiro div usando a classe `col-xs-*`.
|
||||
|
||||
Aninhe ambos o `input` de texto e o `button` de submissão do formulário dentro de uma `div` com a classe `row`. Aninhe o texto do `input` do formulário dentro de uma div com a classe `col-xs-7`. Aninhe o seu `button` de submissão do formulário em uma `div` com a classe `col-xs-5`.
|
||||
Aninhe o `input` de texto e o `button` de envio do formulário dentro de uma `div` com a classe `row`. Aninhe o texto do `input` do formulário dentro de uma div com a classe `col-xs-7`. Aninhe o `button` de envio do formulário em uma `div` com a classe `col-xs-5`.
|
||||
|
||||
Esse é o último desafio que faremos para nossa aplicação Foto de Gato por agora. Esperamos que você tenha gostado de aprender Font Awesome, Bootstrap e design responsivo!
|
||||
Esse é o último desafio que faremos para nossa aplicação de fotos de gatos por agora. Esperamos que você tenha gostado de aprender Font Awesome, Bootstrap e design responsivo!
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu botão de submissão e o input de texto do formulário devem estar aninhados dentro de uma div com a classe `row`.
|
||||
O botão de envio e o input de texto do formulário devem estar aninhados dentro de uma div com a classe `row`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -30,19 +30,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Seu input de texto do formulário deve estar aninhado dentro de uma div com a classe `col-xs-7`.
|
||||
O input de texto do formulário deve estar aninhado dentro de uma div com a classe `col-xs-7`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-7:has(input[type="text"])').length > 0);
|
||||
```
|
||||
|
||||
Seu botão de submissão do formulário deve estar aninhado dentro de uma div com a classe `col-xs-5`.
|
||||
O botão de envio do formulário deve estar aninhado dentro de uma div com a classe `col-xs-5`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-5:has(button[type="submit"])').length > 0);
|
||||
```
|
||||
|
||||
Todos os seus elementos `div` devem ter tags de fechamento.
|
||||
Todos os elementos `div` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08812
|
||||
title: Torne Imagens Responsivas a dispositivos Móveis
|
||||
title: Tornar imagens responsivas a dispositivos móveis
|
||||
challengeType: 0
|
||||
forumTopicId: 18232
|
||||
dashedName: make-images-mobile-responsive
|
||||
@@ -12,7 +12,7 @@ Primeiro, adicione uma nova imagem abaixo da existente. Defina o seu atributo `s
|
||||
|
||||
Seria ótimo se essa imagem pudesse ser exatamente do tamanho da nossa tela do celular.
|
||||
|
||||
Felizmente, com Bootstrap, tudo que precisamos fazer é adicionar a classe `img-responsive` para nossa imagem. Faça isso, e a imagem deve encaixar perfeitamente na largura da sua página.
|
||||
Felizmente, com o Bootstrap, tudo que precisamos fazer é adicionar a classe `img-responsive` para a nossa imagem. Faça isso, e a imagem deve encaixar perfeitamente na largura da página.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -22,25 +22,25 @@ Você deve ter o total de duas imagens.
|
||||
assert($('img').length === 2);
|
||||
```
|
||||
|
||||
Sua nova imagem deve estar abaixo da sua antiga e ter a classe `img-responsive`.
|
||||
A nova imagem deve estar abaixo da antiga e ter a classe `img-responsive`.
|
||||
|
||||
```js
|
||||
assert($('img:eq(1)').hasClass('img-responsive'));
|
||||
```
|
||||
|
||||
Sua nova imagem não deve ter a classe `smaller-image`.
|
||||
A nova imagem não deve ter a classe `smaller-image`.
|
||||
|
||||
```js
|
||||
assert(!$('img:eq(1)').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Sua nova imagem deve ter um `src` de `https://bit.ly/fcc-running-cats`.
|
||||
A nova imagem deve ter um `src` de `https://bit.ly/fcc-running-cats`.
|
||||
|
||||
```js
|
||||
assert($('img:eq(1)').attr('src') === 'https://bit.ly/fcc-running-cats');
|
||||
```
|
||||
|
||||
Seu novo elemento `img` deve ter uma tag de fechamento.
|
||||
O novo elemento `img` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aeda08845
|
||||
title: Caixas de seleção Responsivas
|
||||
title: Compreender caixas de seleção responsivas
|
||||
challengeType: 0
|
||||
forumTopicId: 18269
|
||||
required:
|
||||
@@ -13,27 +13,27 @@ dashedName: responsively-style-checkboxes
|
||||
|
||||
# --description--
|
||||
|
||||
Já que as classes Bootstrap `col-xs-*` são aplicáveis a todos os elementos de `form`, você também pode usá-los nas suas caixas de seleções! Dessa forma, as caixas de seleções irão estar simetricamente distribuídas pela página, independente do quão largo for a resolução da tela.
|
||||
Já que as classes `col-xs-*` do Bootstrap são aplicáveis a todos os elementos de `form`, você também pode usá-las nas caixas de seleções! Dessa forma, as caixas de seleções vão estar simetricamente distribuídas pela página, independente da largura da resolução da tela.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aninhe todos as suas três caixas de seleção em um elemento `<div class="row">`. Então aninhe cada um deles no elemento `<div class="col-xs-4">`.
|
||||
Aninhe as três caixas de seleção em um elemento `<div class="row">`. Então aninhe cada uma deles no elemento `<div class="col-xs-4">`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Todas as suas caixas de seleção devem estar aninhadas dentro de uma `div` com a classe `row`.
|
||||
Todas as caixas de seleção devem estar aninhadas dentro de uma `div` com a classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(input[type="checkbox"])').length > 0);
|
||||
```
|
||||
|
||||
Cada uma das suas caixas de seleção devem estar aninhadas dentro de sua própria `div` com a classe `col-xs-4`.
|
||||
Cada uma das caixas de seleção devem estar aninhadas dentro da própria `div` com a classe `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2);
|
||||
```
|
||||
|
||||
Todos os seus elementos `div` devem ter tags de fechamento.
|
||||
Todos os elementos `div` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedb08845
|
||||
title: Botões Radio Responsivos
|
||||
title: Botões de opção de estilo responsivo
|
||||
challengeType: 0
|
||||
forumTopicId: 18270
|
||||
required:
|
||||
@@ -13,27 +13,27 @@ dashedName: responsively-style-radio-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode usar as classes `col-xs-*` do Bootstrap nos elementos do `formulário` também! Dessa forma, nossos botões radio irão estar simetricamente distribuídos pela página, independente do quão largo a resolução da nossa tela for.
|
||||
Você pode usar as classes `col-xs-*` do Bootstrap nos elementos do `form` também! Dessa forma, nossos botões de opção vão estar simetricamente distribuídos pela página, independente da largura da resolução da tela.
|
||||
|
||||
Aninhe ambos os seus botões radio dentro de um elemento `<div class="row">`. Em seguida aninhe cada um deles dentro de um elemento `<div class="col-xs-6">`.
|
||||
Aninhe os botões de opção dentro de um elemento `<div class="row">`. Em seguida, aninhe cada um deles dentro de um elemento `<div class="col-xs-6">`.
|
||||
|
||||
**Nota:** Como um lembrete, botões radio são elementos `input` do tipo `radio`.
|
||||
**Observação:** como um lembrete, os botões de opção são elementos `input` do tipo `radio`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Todos os seus botões radio devem estar aninhados dentro de uma `div` com a classe `row`.
|
||||
Todos os botões de opção devem estar aninhados dentro de uma `div` com a classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(input[type="radio"])').length > 0);
|
||||
```
|
||||
|
||||
Cada um dos seus botões radio devem estar aninhados em seus próprios `div` com a classe `col-xs-6`.
|
||||
Cada um dos botões de opção devem estar aninhados nas próprias `div` com a classe `col-xs-6`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-6:has(input[type="radio"])').length > 1);
|
||||
```
|
||||
|
||||
Todos os seus elementos `div` devem ter tags de fechamento.
|
||||
Todos os elementos `div` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908847
|
||||
title: Divida Sua Linha Bootstrap
|
||||
title: Dividir sua linha do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18306
|
||||
dashedName: split-your-bootstrap-row
|
||||
@@ -8,19 +8,19 @@ dashedName: split-your-bootstrap-row
|
||||
|
||||
# --description--
|
||||
|
||||
Agora que nós temos uma linha Bootstrap, vamos dividi-la em duas colunas para hospedar nossos elementos.
|
||||
Agora que nós temos uma linha do Bootstrap, vamos dividi-la em duas colunas para hospedar nossos elementos.
|
||||
|
||||
Crie dois elementos `div` dentro da sua linha (row), ambos com a classe `col-xs-6`.
|
||||
Crie dois elementos `div` dentro da linha (row), ambos com a classe `col-xs-6`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dois elementos `div class="col-xs-6"` devem estar aninhados dentro do seu elemento `div class="row"`.
|
||||
Dois elementos `div class="col-xs-6"` devem estar aninhados dentro do elemento `div class="row"`.
|
||||
|
||||
```js
|
||||
assert($('div.row > div.col-xs-6').length > 1);
|
||||
```
|
||||
|
||||
Todos os seus elementos `div` devem ter tags de fechamento.
|
||||
Todos os elementos `div` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed908845
|
||||
title: Inputs de Texto como Controles de Formulário
|
||||
title: Estilizar inputs de texto como controles de formulário
|
||||
challengeType: 0
|
||||
forumTopicId: 18312
|
||||
required:
|
||||
@@ -13,33 +13,33 @@ dashedName: style-text-inputs-as-form-controls
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode adicionar o ícone Font Awesome `fa-paper-plane` adicionando `<i class="fa fa-paper-plane"></i>` dentro do seu elemento `button` de submissão.
|
||||
Você pode adicionar o ícone do Font Awesome `fa-paper-plane` incluindo `<i class="fa fa-paper-plane"></i>` dentro do elemento `button` de envio.
|
||||
|
||||
De ao seu campo input de texto do formulário a classe `form-control`. De ao seu botão de submissão do formulários as classes `btn btn-primary`. Também de a esse botão o ícone do Font Awesome `fa-paper-plane`.
|
||||
Dê ao campo de input de texto do formulário a classe `form-control`. Dê ao botão de envio do formulário as classes `btn btn-primary`. Também dê a esse botão o ícone do Font Awesome `fa-paper-plane`.
|
||||
|
||||
Todo texto dos elementos `<input>`, `<textarea>`, and `<select>` com a classe `.form-control` possuem largura de 100%.
|
||||
Todo texto dos elementos `<input>`, `<textarea>` e `<select>` com a classe `.form-control` possuem largura de 100%.
|
||||
|
||||
# --hints--
|
||||
|
||||
O botão de submissão no seu formulário deve ter a classe `btn btn-primary`.
|
||||
O botão de envio no seu formulário deve ter a classe `btn btn-primary`.
|
||||
|
||||
```js
|
||||
assert($('button[type="submit"]').hasClass('btn btn-primary'));
|
||||
```
|
||||
|
||||
Você deve adicionar um `<i class="fa fa-paper-plane"></i>` dentro do seu elemento `button` de submissão.
|
||||
Você deve adicionar uma `<i class="fa fa-paper-plane"></i>` dentro do elemento `button` de envio.
|
||||
|
||||
```js
|
||||
assert($('button[type="submit"]:has(i.fa.fa-paper-plane)').length > 0);
|
||||
```
|
||||
|
||||
O `input` de texto no seu formulário deve ter a classe `form-control`.
|
||||
O `input` de texto no formulário deve ter a classe `form-control`.
|
||||
|
||||
```js
|
||||
assert($('input[type="text"]').hasClass('form-control'));
|
||||
```
|
||||
|
||||
Cada um de seus elementos `i` devem ter tags de fechamento.
|
||||
Todos os seus elementos `i` devem ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348cd8acef08811
|
||||
title: Experimente o Botão Bootstrap de Cor de Arco-Íris
|
||||
title: Experimentar o botão do Bootstrap com as cores do arco-íris
|
||||
challengeType: 0
|
||||
forumTopicId: 18323
|
||||
dashedName: taste-the-bootstrap-button-color-rainbow
|
||||
@@ -8,27 +8,27 @@ dashedName: taste-the-bootstrap-button-color-rainbow
|
||||
|
||||
# --description--
|
||||
|
||||
A classe `btn-primary` é a cor principal que você utilizará no seu app. É útil para destacar ações que você deseja que o usuário faça.
|
||||
A classe `btn-primary` tem a cor principal que você utilizará no seu app. É útil para destacar ações que você deseja que o usuário faça.
|
||||
|
||||
Substitua a classe `btn-default` do Bootstrap com `btn-primary` no seu botão.
|
||||
Substitua a classe `btn-default` do Bootstrap por `btn-primary` no botão.
|
||||
|
||||
Note que esse botão ainda precisa das classes `btn` e `btn-block`.
|
||||
Observe que esse botão ainda precisa das classes `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu botão deve ter a classe `btn-primary`.
|
||||
O botão deve ter a classe `btn-primary`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-primary'));
|
||||
```
|
||||
|
||||
Seu botão ainda deve ter as classes `btn` e `btn-block`.
|
||||
O botão ainda deve ter as classes `btn` e `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-block') && $('button').hasClass('btn'));
|
||||
```
|
||||
|
||||
Todos os seus elementos `button` devem ter tags de fechamento.
|
||||
Todos os elementos `button` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08845
|
||||
title: Use um span para apontar a Elementos na mesma Linha
|
||||
title: Usar um span para apontar para elementos na mesma linha
|
||||
challengeType: 0
|
||||
forumTopicId: 18370
|
||||
dashedName: use-a-span-to-target-inline-elements
|
||||
@@ -8,17 +8,17 @@ dashedName: use-a-span-to-target-inline-elements
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode usar spans para criar elementos na mesma linha. Lembra-se quando usamos a classe `btn-block` para fazer o botão preencher toda a linha?
|
||||
Você pode usar spans para criar elementos na mesma linha. Lembra-se de quando usamos a classe `btn-block` para fazer o botão preencher toda a linha?
|
||||
|
||||
<button class='btn' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>botão normal</button>
|
||||
|
||||
<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>botão btn-block</button>
|
||||
|
||||
Isso ilustra a diferença entre um elemento "emlinha" (inline) e um elemento de "bloco" (block).
|
||||
Isso ilustra a diferença entre um elemento "em linha" (inline) e de um elemento de "bloco" (block).
|
||||
|
||||
Ao usar o elemento inline `span`, você pode colocar diversos elementos na mesma linha, e até estilizar diferentes partes da mesma linha de forma diferente.
|
||||
|
||||
Usando um elemento `span`, aninhe a palavra `love` dentro do elemento `p` que atualmente possui o texto `Things cats love`. Então de ao `span` a classe `text-danger` para tornar o texto vermelho.
|
||||
Usando um elemento `span`, aninhe a palavra `love` dentro do elemento `p` que atualmente possui o texto `Things cats love`. Em seguida, dê ao `span` a classe `text-danger` para tornar o texto vermelho.
|
||||
|
||||
Aqui está como você faria isso para o elemento `p` que possui o texto `Top 3 things cats hate`:
|
||||
|
||||
@@ -28,13 +28,13 @@ Aqui está como você faria isso para o elemento `p` que possui o texto `Top 3 t
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `span` deve estar dentro do seu elemento `p`.
|
||||
O elemento `span` deve estar dentro do elemento `p`.
|
||||
|
||||
```js
|
||||
assert($('p span') && $('p span').length > 0);
|
||||
```
|
||||
|
||||
Seu elemento `span` deve ter apenas o texto `love`.
|
||||
O elemento `span` deve ter apenas o texto `love`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -46,13 +46,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Seu elemento `span` deve ter a classe `text-danger`.
|
||||
O elemento `span` deve ter a classe `text-danger`.
|
||||
|
||||
```js
|
||||
assert($('span').hasClass('text-danger'));
|
||||
```
|
||||
|
||||
Seu elemento `span` deve ter uma tag de fechamento.
|
||||
O elemento `span` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908857
|
||||
title: Use Comentários para Esclarece o Código
|
||||
title: Usar comentários para deixar o código mais claro
|
||||
challengeType: 0
|
||||
forumTopicId: 18347
|
||||
dashedName: use-comments-to-clarify-code
|
||||
@@ -8,35 +8,35 @@ dashedName: use-comments-to-clarify-code
|
||||
|
||||
# --description--
|
||||
|
||||
Quando começarmos a usar JQuery, nós modificaremos elementos HTML sem a necessidade de realmente alterá-los no HTML.
|
||||
Quando começarmos a usar jQuery, nós modificaremos os elementos do HTML sem a necessidade de realmente alterá-los no HTML.
|
||||
|
||||
Vamos ter certeza de que todo mundo sabe que eles não deveriam realmente modificar nenhum desse código diretamente.
|
||||
|
||||
Lembre-se de que você pode iniciar um comentário com `<!--` e terminar um comentário com `-->`
|
||||
|
||||
Adicione um comentário no topo do seu HTML que diz `Code below this line should not be changed` (O código abaixo dessa linha não deve ser alterado)
|
||||
Adicione um comentário no topo do HTML, que diga `Code below this line should not be changed`
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve começar um comentário com `<!--` no topo do seu HTML.
|
||||
Você deve começar um comentário com `<!--` no topo do HTML.
|
||||
|
||||
```js
|
||||
assert(code.match(/^\s*<!--/));
|
||||
```
|
||||
|
||||
Seu comentário deve ter o texto `Code below this line should not be changed`.
|
||||
O comentário deve ter o texto `Code below this line should not be changed`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
|
||||
```
|
||||
|
||||
Você deve fechar o seu comentário com `-->`.
|
||||
Você deve fechar o comentário com `-->`.
|
||||
|
||||
```js
|
||||
assert(code.match(/-->.*\n+.+/g));
|
||||
```
|
||||
|
||||
Você deve ter o mesmo número de abertura e fechamento de comentários.
|
||||
Você deve ter o mesmo número de aberturas e fechamentos de comentários.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--/g).length === code.match(/-->/g).length);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08712
|
||||
title: Use Design Responsivo com Contêineres Fluidos do Bootstrap
|
||||
title: Usar design responsivo com contêineres fluidos do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18362
|
||||
dashedName: use-responsive-design-with-bootstrap-fluid-containers
|
||||
@@ -8,13 +8,13 @@ dashedName: use-responsive-design-with-bootstrap-fluid-containers
|
||||
|
||||
# --description--
|
||||
|
||||
Na seção do HTML5 e CSS do freeCodeCamp nós construímos uma aplicação de Foto de Gatos. Agora vamos voltar para isso. Dessa vez, nós estilizaremos usando o popular framework de CSS responsivo Bootstrap.
|
||||
Na seção do HTML5 e CSS do freeCodeCamp nós construímos uma aplicação de Fotos de Gatos. Agora vamos voltar para ela. Dessa vez, nós estilizaremos usando o framework de CSS responsivo popular conhecido como Bootstrap.
|
||||
|
||||
O Bootstrap descobrirá o quão larga sua tela é e responderá redimensionando os seus elementos HTML - daí o nome <dfn>design responsivo</dfn>.
|
||||
O Bootstrap descobrirá a largura da tela e responderá redimensionando os elementos do HTML - daí o nome <dfn>design responsivo</dfn>.
|
||||
|
||||
Com um design responsivo, não há necessidade de projetar uma versão móvel do seu site. Vai parecer bom em dispositivos com telas de qualquer largura.
|
||||
Com um design responsivo, não há necessidade de projetar uma versão móvel do seu site. Ele terá uma boa aparência em dispositivos com telas de qualquer largura.
|
||||
|
||||
Você pode incluir o Bootstrap em qualquer aplicativo, adicionando o seguinte código ao topo do seu HTML:
|
||||
Você pode incluir o Bootstrap em qualquer aplicativo, adicionando o seguinte código ao topo do HTML:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
|
||||
@@ -22,17 +22,17 @@ Você pode incluir o Bootstrap em qualquer aplicativo, adicionando o seguinte c
|
||||
|
||||
Neste caso, já o adicionamos para você a esta página por trás dos panos. Note que usar a tag `>` ou `/>` para fechar a tag `link` é aceitável.
|
||||
|
||||
Para começar, devemos aninhar todos os nossos HTML (exceto a tag `link` e o elemento `style`) em um elemento `div` com a classe `container-fluid`.
|
||||
Para começar, devemos aninhar todo o HTML (exceto a tag `link` e o elemento `style`) em um elemento `div` com a classe `container-fluid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `div` deve ter a classe `container-fluid`.
|
||||
O elemento `div` deve ter a classe `container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('container-fluid'));
|
||||
```
|
||||
|
||||
Seu elemento `div` deve ter uma tag de fechamento.
|
||||
O elemento `div` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Todos os elementos HTML após a tag de fechamento `style` deve estar aninhado dentro de `.container-fluid`.
|
||||
Todos os elementos HTML após a tag de fechamento `style` devem estar aninhados dentro de `.container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('.container-fluid').children().length >= 8 && !$('.container-fluid').has("style").length && !$('.container-fluid').has("link").length);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad88fee1348ce8acef08815
|
||||
title: Use a Grid Bootstrap para Colocar Elementos Lado a Lado
|
||||
title: Usar o Bootstrap Grid para colocar elementos lado a lado
|
||||
challengeType: 0
|
||||
forumTopicId: 18371
|
||||
dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side
|
||||
@@ -8,33 +8,33 @@ dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap usa o sistema responsivo de grid de 12 colunas, o que torna super fácil colocar elementos em linhas e especificar cada largura relativa de um elemento. A maioria das classes Bootstrap podem ser aplicadas a um elemento `div`.
|
||||
Bootstrap usa o sistema responsivo de grid de 12 colunas, o que torna superfácil colocar elementos em linhas e especificar cada largura relativa de um elemento. A maioria das classes do Bootstrap pode ser aplicada a um elemento `div`.
|
||||
|
||||
Bootstrap possui diferentes atributos de largura de colunas que utiliza dependendo do quão largo for a tela do usuário. Por exemplo, celulares possuem telas estreitas, e laptops possuem telas mais largas.
|
||||
O Bootstrap possui atributos de largura de colunas diferentes, que são utilizados dependendo da largura da tela do usuário. Por exemplo, celulares possuem telas estreitas, enquanto laptops possuem telas mais largas.
|
||||
|
||||
Tome como exemplo a classe Bootstrap `col-md-*`. Aqui, `md` significa médio, e `*` é o número especificando quantas colunas de largura o elemento deve ser. Nesse caso, a largura da coluna de um elemento em uma tela de tamanho mediano, como um laptop, está sendo especificado.
|
||||
Tome como exemplo a classe `col-md-*` do Bootstrap. Aqui, `md` significa médio, e `*` é um número especificando quantas colunas de largura o elemento deve ter. Nesse caso, a largura da coluna de um elemento em uma tela de tamanho mediano, como um laptop, está sendo especificada.
|
||||
|
||||
No app de Foto de Gatos que estamos construindo, utilizaremos `col-xs-*`, onde `xs` significa extra pequeno (como uma tela extra pequena de um telefone móvel), e `*` é o número de colunas especificando quantas colunas de largura o elemento deve ser.
|
||||
No app de Fotos de Gatos que estamos construindo, utilizaremos `col-xs-*`, onde `xs` significa extrapequeno (como uma tela extrapequena de um telefone móvel), e `*` é um número de colunas especificando quantas colunas de largura o elemento deve ter.
|
||||
|
||||
Coloque os botões `Like`, `Info` e `Delete` lado a lado ao aninhar todos os três em um elemento `<div class="row">`, em seguida, cada um deles dentro de um elemento `<div class="col-xs-4">`.
|
||||
Coloque os botões `Like`, `Info` e `Delete` lado a lado ao aninhar todos os três em um elemento `<div class="row">`. Em seguida, coloque cada um deles dentro de um elemento `<div class="col-xs-4">`.
|
||||
|
||||
A classe `row` é aplicada à `div`, e os próprios botões podem ser aninhados dentro dela.
|
||||
A classe `row` é aplicada à `div`. Os próprios botões podem ser aninhados dentro dela.
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu botões devem estar aninhados dentro do mesmo elemento `div` com a classe `row`.
|
||||
Os botões devem estar aninhados dentro do mesmo elemento `div` com a classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(button)').length > 0);
|
||||
```
|
||||
|
||||
Cada um dos seus botões Bootstrap devem estar aninhados dentro de seu próprio elemento `div` com a classe `col-xs-4`.
|
||||
Cada um dos botões do Bootstrap deve estar aninhado dentro do próprio elemento `div` com a classe `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-4:has(button)').length > 2);
|
||||
```
|
||||
|
||||
Cada um dos seus elementos `button` devem ter uma tag de fechamento.
|
||||
Cada um dos elementos `button` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -44,7 +44,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Cada um dos seus elementos `div` devem ter uma tag de fechamento.
|
||||
Cada um dos elementos `div` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348ce8acef08814
|
||||
title: Avise Seus Usuários de uma Ação Perigosa com btn-danger
|
||||
title: Avisar os usuários sobre uma ação perigosa com btn-danger
|
||||
challengeType: 0
|
||||
forumTopicId: 18375
|
||||
dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger
|
||||
@@ -8,11 +8,11 @@ dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap vem com diversas cores pré-definidas para botões. A classe `btn-danger` é a cor de botão que você usará para notificar seus usuários que o botão executa uma ação destrutiva, como deletar uma foto de gato.
|
||||
O Bootstrap vem com diversas cores predefinidas para botões. A classe `btn-danger` é a cor de botão que você usará para notificar seus usuários de que o botão executa uma ação destrutiva, como excluir uma foto de gato.
|
||||
|
||||
Crie um botão com o texto `Delete` e de a ele a classe `btn-danger`.
|
||||
Crie um botão com o texto `Delete` e dê a ele a classe `btn-danger`.
|
||||
|
||||
Note que esses botões ainda precisam das classes `btn` e `btn-block`.
|
||||
Observe que esses botões ainda precisam das classes `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -22,19 +22,19 @@ Você deve criar um novo elemento `button` com o texto `Delete`.
|
||||
assert(new RegExp('Delete', 'gi').test($('button').text()));
|
||||
```
|
||||
|
||||
Todos os seus botões Bootstrap devem ter as classes `btn` e `btn-block`.
|
||||
Todos os botões do Bootstrap devem ter as classes `btn` e `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button.btn-block.btn').length > 2);
|
||||
```
|
||||
|
||||
Seu novo botão deve ter a classe `btn-danger`.
|
||||
O novo botão deve ter a classe `btn-danger`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-danger'));
|
||||
```
|
||||
|
||||
Todos os seus elementos `button` devem ter tags de fechamento.
|
||||
Todos os elementos `button` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd0f
|
||||
title: Construa um Relógio 25 + 5
|
||||
title: Criar um Relógio 25 + 5
|
||||
challengeType: 3
|
||||
forumTopicId: 301373
|
||||
dashedName: build-a-25--5-clock
|
||||
@@ -8,71 +8,71 @@ dashedName: build-a-25--5-clock
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** Construir um app [CodePen.io](https://codepen.io) que é funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/XpKrrW>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/XpKrrW>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework frontend (como React por exemplo) porque essa seção trata de aprender frameworks fronted. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos olhando para apoiar outros frameworks frontend como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**User Story #1:** Eu consigo ver um elemento com `id="break-label"` que contém a string (e.g. "Break Length").
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento com `id="break-label"` que contém uma string (por exemplo, "Duração do intervalo").
|
||||
|
||||
**User Story #2:** Eu consigo ver um elemento com `id="session-label"` que contém a string (e.g. "Session Length").
|
||||
**Especificação de usuário nº 2:** eu consigo ver um elemento com `id="session-label"` que contém uma string (por exemplo, "Duração da sessão").
|
||||
|
||||
**User Story #3:** Eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-decrement"` e `id="session-decrement"`.
|
||||
**Especificação de usuário nº 3:** eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-decrement"` e `id="session-decrement"`.
|
||||
|
||||
**User Story #4:** Eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-increment"` e `id="session-increment"`.
|
||||
**Especificação de usuário nº 4:** eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-increment"` e `id="session-increment"`.
|
||||
|
||||
**User Story #5:** Eu consigo ver um elemento com um id correspondente `id="break-length"`, o que por padrão (no carregamento) exibe o valor de 5.
|
||||
**Especificação de usuário nº 5:** eu consigo ver um elemento com um `id="break-length"` correspondente, e que, por padrão (no carregamento), exibe o valor de 5.
|
||||
|
||||
**User Story #6:** Eu consigo ver um elemento com um id correspondente `id="session-length"`, o que por padrão exibe o valor de 25.
|
||||
**Especificação de usuário nº 6:** eu consigo ver um elemento com um `id="session-length"` correspondente, e que, por padrão, exibe o valor de 25.
|
||||
|
||||
**User Story #7:** Eu consigo ver um elemento com um id correspondente `id="timer-length"`, que contém a string indicando que uma sessão foi inicializada (e.g. "Session").
|
||||
**Especificação de usuário nº 7:** eu consigo ver um elemento com um `id="timer-label"` correspondente, e que contém a string indicando que uma sessão foi inicializada (por exemplo, "Sessão").
|
||||
|
||||
**User Story #8:** Eu consigo ver um elemento com id correspondente `id="time-left"`. NOTA: Pausado ou em execução, o valor nesse campo deve sempre ser exibido no formato `mm:ss` (i.e. 25:00).
|
||||
**Especificação de usuário nº 8:** eu consigo ver um elemento com `id="time-left"` correspondente. OBSERVAÇÃO: Pausado ou em execução, o valor nesse campo deve sempre ser exibido no formato `mm:ss` (por exemplo, 25:00).
|
||||
|
||||
**User Story #9:** Eu consigo ver um elemento clicável com id correspondente `id="start_stop"`.
|
||||
**Especificação de usuário nº 9:** eu consigo ver um elemento clicável com `id="start_stop"` correspondente.
|
||||
|
||||
**User Story #10:** Eu consigo ver um elemento clicável com id correspondente `id="reset"`.
|
||||
**Especificação de usuário nº 10:** eu consigo ver um elemento clicável com `id="reset"` correspondente.
|
||||
|
||||
**User Story #11:** Quando eu clico o elemento com id `reset`, qualquer temporizador em execução deve ser parado, o valor dentro de `id="break-length"` deve retornar `5`, o valor dentro de `id="session-length"` deve retornar 25, e o elemento com `id="time-left"` deve ser redefinido para o seu estado padrão.
|
||||
**Especificação de usuário nº 11:** quando eu clico no elemento com id `reset`, qualquer temporizador em execução deve ser parado. O valor dentro de `id="break-length"` deve retornar `5`, o valor dentro de `id="session-length"` deve retornar 25, e o elemento com `id="time-left"` deve ser redefinido para o seu estado padrão.
|
||||
|
||||
**User Story #12:** Quando eu clico o elemento com o id `break-decrement`, o valor dentro de `id="break-length"` decrementa 1, e eu consigo ver o valor atualizado.
|
||||
**Especificação de usuário nº 12:** quando eu clico no elemento com o id `break-decrement`, o valor dentro de `id="break-length"` decrementa 1, e eu consigo ver o valor atualizado.
|
||||
|
||||
**User Story #13:** Quando eu clico o elemento com id `break-increment`, o valor dentro de `id="break-length"` incrementa 1, e eu consigo ver o valor atualizado.
|
||||
**Especificação de usuário nº 13:** quando eu clico no elemento com id `break-increment`, o valor dentro de `id="break-length"` incrementa 1, e eu consigo ver o valor atualizado.
|
||||
|
||||
**User Story #14:** Quando eu clico o elemento com id `session-decrement`, o valor dentro de `id="session-length"` decrementa 1, e eu consigo ver o valor atualizado.
|
||||
**Especificação de usuário nº 14:** quando eu clico no elemento com id `session-decrement`, o valor dentro de `id="session-length"` decrementa 1, e eu consigo ver o valor atualizado.
|
||||
|
||||
**User Story #15:** Quando eu clico o elemento com id `session-increment`, o valor dentro de `id="session-length"` incrementa 1, e eu consigo ver o valor atualizado.
|
||||
**Especificação de usuário nº 15:** quando eu clico no elemento com id `session-increment`, o valor dentro de `id="session-length"` incrementa 1, e eu consigo ver o valor atualizado.
|
||||
|
||||
**User Story #16:** Eu não devo ser capaz de definir uma sessão ou quebrar o comprimento para <= 0.
|
||||
**Especificação de usuário nº 16:** eu não devo poder definir um comprimento de sessão ou de intervalo para <= 0.
|
||||
|
||||
**User Story #17:** Eu não devo ser capaz de definir uma sessão ou quebrar o comprimento para > 60.
|
||||
**Especificação de usuário nº 17:** eu não devo ser capaz de definir um comprimento de sessão ou de intervalo para > 60.
|
||||
|
||||
**User Story #18:** Quando eu clico pela primeira vez o elemento com `id="start_stop"`, o temporizador deve começar a correr a partir do valor exibido atualmente em `id="session-length"`, mesmo se o valor foi incrementado ou decrementado do valor original 25.
|
||||
**Especificação de usuário nº 18:** quando eu clico pela primeira vez no elemento com `id="start_stop"`, o temporizador deve começar a correr a partir do valor exibido atualmente em `id="session-length"`, mesmo se o valor foi incrementado ou decrementado do valor original 25.
|
||||
|
||||
**User Story #19:** Se o temporizador estiver em execução, o elemento com id `time-left` deve exibir o tempo restante no formato `mm:ss` (decrementando 1 e atualizando a saída a cada 1000ms).
|
||||
**Especificação de usuário nº 19:** se o temporizador estiver em execução, o elemento com id `time-left` deve exibir o tempo restante no formato `mm:ss` (decrementando 1 e atualizando a saída a cada 1000ms).
|
||||
|
||||
**User Story #20:** Se o timer estiver em execução e eu clicar o elemento com `id="start_stop"`, a contagem regressiva deve pausar.
|
||||
**Especificação de usuário nº 20:** se o timer estiver em execução e eu clicar no elemento com `id="start_stop"`, a contagem regressiva deve pausar.
|
||||
|
||||
**User Story #21:** Se o temporizador estiver pausado e eu clicar o elemento com `id="start_stop"`, a contagem regressiva deve continuar rodando a partir do ponto no qual foi pausado.
|
||||
**Especificação de usuário nº 21:** se o temporizador estiver pausado e eu clicar no elemento com `id="start_stop"`, a contagem regressiva deve continuar rodando a partir do ponto no qual foi pausado.
|
||||
|
||||
**User Story #22:** Quando a contagem regressiva de sessão chegar a zero (NOTA: temporizador DEVE alcançar 00:00), e uma nova contagem regressiva iniciar, o elemento com id `timer-label` deve exibir uma string indicando que uma quebra foi iniciada.
|
||||
**Especificação de usuário nº 22:** quando a contagem regressiva de sessão chegar a zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), e uma nova contagem regressiva iniciar, o elemento com id `timer-label` deve exibir uma string indicando que um intervalo foi iniciado.
|
||||
|
||||
**User Story #23:** Quando a contagem regressiva de sessão alcançar zero (NOTA: temporizador DEVE alcançar 00:00), uma nova contagem regressiva deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento `id="break-length"`.
|
||||
**Especificação de usuário nº 23:** quando a contagem regressiva de sessão alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), uma nova contagem regressiva de intervalo deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento `id="break-length"`.
|
||||
|
||||
**User Story #24:** Quando a contagem regressiva de quebra alcançar zero (NOTA: temporizador DEVE alcançar 00:00) e uma nova contagem regressiva iniciar, o elemento com o id `timer-label` deve exibir a string indicando que uma sessão foi iniciada.
|
||||
**Especificação de usuário nº 24:** quando a contagem regressiva de intervalo alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00) e uma nova contagem regressiva iniciar, o elemento com o id `timer-label` deve exibir a string indicando que uma sessão foi iniciada.
|
||||
|
||||
**User Story #23:** Quando a contagem regressiva de quebra alcançar zero (NOTA: temporizador DEVE alcançar 00:00), uma nova contagem regressiva de sessão deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento `id="session-length"`.
|
||||
**Especificação de usuário nº 25:** quando a contagem regressiva de intervalo alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), uma nova contagem regressiva de sessão deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento com `id="session-length"`.
|
||||
|
||||
**User Story #23:** Quando uma contagem regressiva alcançar zero (NOTA: temporizador DEVE alcançar 00:00), um som indicando que o tempo acabou deve ser reproduzido. Isso deve utilizar uma tag HTML5 `audio` e ter um id correspondente `id="beep"`.
|
||||
**Especificação de usuário nº 26:** quando uma contagem regressiva alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), um som indicando que o tempo acabou deve ser reproduzido. Isso deve utilizar uma tag HTML5 `audio` e ter um id correspondente a `id="beep"`.
|
||||
|
||||
**User Story #27:** O elemento audio com `id="beep"` deve ter 1 segundo ou mais de duração.
|
||||
**Especificação de usuário nº 27:** o elemento audio com `id="beep"` deve ter 1 segundo ou mais de duração.
|
||||
|
||||
**User Story #28:** O elemento audio com id `beep` deve parar de reproduzir e ser rebobinado para começar quando o elemento com o id `reset` for clicado.
|
||||
**Especificação de usuário nº 28:** o elemento audio com id `beep` deve parar de reproduzir e ser rebobinado para começar quando o elemento com o id `reset` for clicado.
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbc367417b2b2512bae
|
||||
title: Construa uma Máquina de Tambor
|
||||
title: Crie uma bateria eletrônica
|
||||
challengeType: 3
|
||||
forumTopicId: 301370
|
||||
dashedName: build-a-drum-machine
|
||||
@@ -10,27 +10,27 @@ dashedName: build-a-drum-machine
|
||||
|
||||
**Objetivo:** Construa um app [CodePen.io](https://codepen.io) que seja funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/MJyNMd>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework frontend (como React por exemplo) porque essa seção trata de aprender frameworks fronted. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos olhando para apoiar outros frameworks frontend como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**User Story #1:** Eu devo ser capaz de ver um contêiner externo com um id correspondente `id="drum-machine"` que contém todos os outros elementos.
|
||||
**Especificação de usuário nº 1:** eu devo ser capaz de ver um contêiner externo com um `id="drum-machine"` correspondente que contém todos os outros elementos.
|
||||
|
||||
**User Story #2:** Dentro de `#drum-machine` eu consigo ver um elemento com um id correspondente `id="display"`.
|
||||
**Especificação de usuário nº 2:** dentro de `#drum-machine`, eu consigo ver um elemento com um `id="display"` correspondente.
|
||||
|
||||
**User Story #3:** Dentro de `#drum-machine` Eu consigo ver 9 elementos tambores clicáveis, cada um com o nome de classe `drum-pad`, um id único que descreve o clipe de áudio que o tambor será definido para executar, e um texto interno que corresponde a uma das teclas do teclado a seguir: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Os tambores DEVEM estar nesta ordem.
|
||||
**Especificação de usuário nº 3:** dentro de `#drum-machine`, eu consigo ver 9 elementos de tambores clicáveis, cada um com o nome de classe `drum-pad`, um id único que descreve o clipe de áudio que o tambor será definido para executar, e um texto interno que corresponde a uma das teclas do teclado a seguir: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Os tambores DEVEM estar nesta ordem.
|
||||
|
||||
**User Story #4:** Dentro de cada `.drum-pad`, deve ter um elemento HTML5 `audio` o qual tem o atributo `src` apontando para um clipe de áudio, o nome de classe `clip`, e um id correspondendo ao texto interno do seu `.drum-pad` parente (e.g. `id="Q"`, `id="W"`, `id="E"` etc.).
|
||||
**Especificação de usuário nº 4:** dentro de cada `.drum-pad`, deve haver um elemento HTML5 `audio`, que tem o atributo `src` apontando para um clipe de áudio, o nome de classe `clip`, e um id correspondendo ao texto interno do seu `.drum-pad` pai (por exemplo, `id="Q"`, `id="W"`, `id="E"` e assim por diante).
|
||||
|
||||
**User Story #5:** Quando eu clico em um elemento `.drum-pad`, o clipe de áudio dentro do seu elemento filho `audio` deve ser ativado.
|
||||
**Especificação de usuário nº 5:** quando eu clico em um elemento `.drum-pad`, o clipe de áudio dentro do seu elemento filho `audio` deve ser ativado.
|
||||
|
||||
**User Story #6:** Quando eu pressionar a tecla de gatilho associada com cada `.drum-pad`, o clipe de áudio dentro do elemento filho `audio` deve ser ativado (e.g. pressionando a tecla `Q` deve acionar o tambor o qual contém a string `Q`, pressionando a tecla `W` deve acionar o tambor o qual contém a string `W`, etc.).
|
||||
**Especificação de usuário nº 6:** quando eu pressionar a tecla de disparo associada a cada `.drum-pad`, o clipe de áudio dentro do elemento filho `audio` deve ser ativado (por exemplo, ao pressionar a tecla `Q`, deve ser acionado o tambor que tem a string `Q`, ao pressionar a tecla `W`, deve ser acionado o tambor que contém a string `W` e assim por diante).
|
||||
|
||||
**User Story #7:** Quando um `.drum-pad` é acionado, uma string descrevendo o clipe de áudio associado é exibido como o texto interno do elemento `#display` (cada string precisa ser única).
|
||||
**Especificação de usuário nº 7:** quando um `.drum-pad` é acionado, uma string descrevendo o clipe de áudio associado é exibido como o texto interno do elemento `#display` (cada string precisa ser única).
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd17
|
||||
title: Construa uma Calculadora JavaScript
|
||||
title: Criar uma calculadora JavaScript
|
||||
challengeType: 3
|
||||
forumTopicId: 301371
|
||||
dashedName: build-a-javascript-calculator
|
||||
@@ -8,52 +8,52 @@ dashedName: build-a-javascript-calculator
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** Construa um app [CodePen.io](https://codepen.io) que seja funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/wgGVVX>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/wgGVVX>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework frontend (como React por exemplo) porque essa seção trata de aprender frameworks fronted. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos olhando para apoiar outros frameworks frontend como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**User Story #1:** Minha calculadora deve conter um elemento clicável contendo um `=` (sinal de igualdade) com o id correspondente `id="equals"`.
|
||||
**Especificação de usuário nº 1:** minha calculadora deve conter um elemento clicável contendo um `=` (sinal de igualdade) com o `id="equals"` correspondente.
|
||||
|
||||
**User Story #2:** Minha calculadora deve conter 10 elementos clicáveis contendo um número cada de 0 até 9, com os ids correspondentes a seguir: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"` e `id="nine"`.
|
||||
**Especificação de usuário nº 2:** minha calculadora deve conter 10 elementos clicáveis contendo um número cada, de 0 até 9, com os ids correspondentes a seguir: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"` e `id="nine"`.
|
||||
|
||||
**User Story #3:** Minha calculadora deve conter 4 elementos clicáveis cada um contendo uma das 4 operações matemáticas primárias com os ids correspondentes a seguir: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`.
|
||||
**Especificação de usuário nº 3:** minha calculadora deve conter 4 elementos clicáveis, cada um contendo uma das 4 operações matemáticas primárias com os ids correspondentes a seguir: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`.
|
||||
|
||||
**User Story #4:** Minha calculadora deve conter um elemento clicável contendo o símbolo `.` (ponto decimal) com o id correspondente `id="decimal"`.
|
||||
**Especificação de usuário nº 4:** minha calculadora deve conter um elemento clicável contendo o símbolo `.` (ponto decimal) com o `id="decimal"` correspondente.
|
||||
|
||||
**User Story #5:** Minha calculadora deve conter um elemento clicável com um `id="clear"`.
|
||||
**Especificação de usuário nº 5:** minha calculadora deve conter um elemento clicável com um `id="clear"`.
|
||||
|
||||
**User Story #6:** Minha calculadora deve conter um elemento para exibir valores com o id correspondente `id="display"`.
|
||||
**Especificação de usuário nº 6:** minha calculadora deve conter um elemento para exibir valores com o `id="display"` correspondente.
|
||||
|
||||
**User Story #7:** A qualquer momento, pressionando o botão `clear` irá limpar os valores de entrada e saída, e retorna a calculadora ao seu estado inicial; 0 deve ser mostrado no elemento com o id `display`.
|
||||
**Especificação de usuário nº 7:** a qualquer momento, pressionar o botão `clear` limpará os valores de entrada e saída, e retornará a calculadora ao seu estado inicial. "0" deve ser mostrado no elemento com o id `display`.
|
||||
|
||||
**User Story #8:** Enquanto eu coloco números de entrada, eu devo ser capaz de ver a minha entrada no elemento com id `display`.
|
||||
**Especificação de usuário nº 8:** enquanto eu coloco números de entrada, eu devo ser capaz de ver a minha entrada no elemento com id `display`.
|
||||
|
||||
**User Story #9:** Em qualquer ordem, eu devo ser capaz de adicionar, subtrair, multiplicar e dividir uma cadeia de números de qualquer tamanho, e quando eu pressionar `=`, o resultado correto deve ser mostrado no elemento com id `display`.
|
||||
**Especificação de usuário nº 9:** em qualquer ordem, eu devo ser capaz de adicionar, subtrair, multiplicar e dividir uma cadeia de números de qualquer tamanho, e quando eu pressionar `=`, o resultado correto deve ser mostrado no elemento com id `display`.
|
||||
|
||||
**User Story #10:** Ao inserir números, minha calculadora não deve permitir um número de começar com múltiplos zeros.
|
||||
**Especificação de usuário nº 10:** ao inserir números, minha calculadora não deve permitir um número de começar com múltiplos zeros.
|
||||
|
||||
**User Story #11:** Quando o elemento decimal for clicado, um `.` deve ser adicionado ao valor atualmente exibido; dois `.` em um número não deve ser aceito.
|
||||
**Especificação de usuário nº 11:** quando o elemento decimal for clicado, um `.` deve ser adicionado ao valor atualmente exibido. Dois `.` em um número não devem ser aceitos.
|
||||
|
||||
**User Story #12:** Eu devo ser capaz de executar qualquer operação (`+`, `-`, `*`, `/`) em números contendo pontos decimais.
|
||||
**Especificação de usuário nº 12:** eu devo ser capaz de executar qualquer operação (`+`, `-`, `*`, `/`) em números contendo pontos decimais.
|
||||
|
||||
**User Story #13:** Se 2 ou mais operadores forem inseridos consecutivamente, a operação executada deve ser o último operador inserido (excluindo o símbolo de negação (`-`)). Por exemplo, se `5 + * 7 =` for inserido, o resultado deve ser `35` (i.e. `5 * 7`); se `5 * - 5 =` for inserido, o resultado deve ser `-25` (i.e. `5 * (-5)`).
|
||||
**User Story #13:** Se 2 ou mais operadores forem inseridos consecutivamente, a operação executada deve ser o último operador inserido, excluindo o símbolo de negação (`-`). Por exemplo, se `5 + * 7 =` for inserido, o resultado deve ser `35` (ou seja, `5 * 7`); se `5 * - 5 =` for inserido, o resultado deve ser `-25` (ou seja, `5 * (-5)`).
|
||||
|
||||
**User Story #14:** Pressionando um operador imediatamente após um `=` deve iniciar um novo cálculo que opera no resultado da avaliação anterior.
|
||||
**Especificação de usuário nº 14:** pressionar um operador imediatamente após um `=` deve iniciar um novo cálculo que opera no resultado da avaliação anterior.
|
||||
|
||||
**User Story #15:** Minha calculadora deve ter diversas casas decimais de precisão ao se tratar de arredondamento (note que não há um padrão exato, mas você deve ser capaz de lidar com cálculos como `2 / 7` com precisão razoável de pelo menos 4 casas decimais).
|
||||
**Especificação de usuário nº 15:** minha calculadora deve ter diversas casas decimais de precisão ao se tratar de arredondamento (note que não há um padrão exato, mas você deve ser capaz de lidar com cálculos como `2 / 7` com precisão razoável de pelo menos 4 casas decimais).
|
||||
|
||||
**Nota Para a Lógica da Calculadora:** Deve-se notar que há duas principais escolas de pensamento na lógica da entrada da calculadora: <dfn>lógica da execução imediata</dfn> e <dfn>lógica da fórmula</dfn>. Nosso exemplo utiliza a lógica da fórmula e observa a ordem de precedência de operação, execução imediata não faz isso. Qualquer uma é aceitável, mas por favor note que dependendo de qual você escolher, sua calculadora pode alcançar diferentes resultados do que os nossos para certas equações (veja abaixo um exemplo). Desde que sua matemática possa ser verificada por outra calculadora em produção, por favor não considere isso um bug.
|
||||
**Nota para a lógica da calculadora:** deve-se notar que há duas principais escolas de pensamento na lógica de entrada da calculadora: a <dfn>lógica da execução imediata</dfn> e a <dfn>lógica da fórmula</dfn>. Nosso exemplo utiliza a lógica da fórmula e observa a ordem de precedência de operação. A lógica de execução imediata não faz isso. Qualquer uma é aceitável, mas observe que, dependendo de qual você escolher, sua calculadora pode alcançar diferentes resultados do que os nossos para certas equações (veja abaixo um exemplo). Desde que sua matemática possa ser verificada por outra calculadora em produção, não considere isso um bug.
|
||||
|
||||
**EXEMPLO:** `3 + 5 x 6 - 2 / 4 =`
|
||||
|
||||
- **Lógica de execução imediata:** `11.5`
|
||||
- **Lógica de Fórmula/Expressão:** `32.5`
|
||||
- **Lógica de fórmula/expressão:** `32.5`
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7157d8c242eddfaeb5bd13
|
||||
title: Construa um Pré-Visualizador de Marcação
|
||||
title: Criar um pré-visualizador de markdown
|
||||
challengeType: 3
|
||||
forumTopicId: 301372
|
||||
dashedName: build-a-markdown-previewer
|
||||
@@ -8,29 +8,29 @@ dashedName: build-a-markdown-previewer
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** Construir um app [CodePen.io](https://codepen.io) que seja funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/GrZVVO>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/GrZVVO>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework frontend (como React por exemplo) porque essa seção trata de aprender frameworks fronted. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos olhando para apoiar outros frameworks frontend como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**User Story #1:** Eu consigo ver um elemento `textarea` com o id correspondente `id="editor"`.
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento `textarea` com o `id="editor"` correspondente.
|
||||
|
||||
**User Story #2:** Eu consigo ver um elemento com o id correspondente `id="preview"`.
|
||||
**Especificação de usuário nº 2:** eu consigo ver um elemento com o `id="preview"` correspondente.
|
||||
|
||||
**User Story #3:** Quando eu insiro texto no elemento `#editor`, o elemento `#preview` é atualizado enquanto eu escrevo para exibir o conteúdo do textarea.
|
||||
**Especificação de usuário nº 3:** quando eu insiro texto no elemento `#editor`, o elemento `#preview` é atualizado enquanto eu escrevo para exibir o conteúdo do textarea.
|
||||
|
||||
**User Story #4:** Quando insiro marcação do GitHub no elemento `#editor`, o texto é renderizado como HTML no elemento `#preview` enquanto eu escrevo (DICA: Você não precisa analisar a marcação você mesmo - você pode importar a biblioteca Marked para isso: <https://cdnjs.com/libraries/marked>).
|
||||
**Especificação de usuário nº 4:** quando insiro marcação do GitHub no elemento `#editor`, o texto é renderizado como HTML no elemento `#preview` enquanto eu escrevo (DICA: você não precisa analisar a marcação você mesmo - você pode importar a biblioteca Marked para isso: <https://cdnjs.com/libraries/marked>).
|
||||
|
||||
**User Story #5:** Quando meu pré-visualizador de marcação carregar pela primeira vez, o texto padrão no campo `#editor` deve conter uma marcação válida que representa pelo menos um de cada um dos elementos a seguir: um header (tamanho H1), um sub header (tamanho H2), um link, um código em linha, um código de bloco, uma lista de item, um blockquote, uma imagem, e um texto em negrito.
|
||||
**Especificação de usuário nº 5:** quando meu pré-visualizador de marcação carregar pela primeira vez, o texto padrão no campo `#editor` deve conter uma marcação válida que represente pelo menos um de cada um dos elementos a seguir: um header (tamanho H1), um subheader (tamanho H2), um link, um código em linha, um código de bloco, uma lista de item, um blockquote, uma imagem e um texto em negrito.
|
||||
|
||||
**User Story #6:** Quando meu pré-visualizador de marcação carregar pela primeira vez, a marcação padrão no campo `#editor` deve ser renderizado como HTML no elemento `#preview`.
|
||||
**Especificação de usuário nº 6:** quando meu pré-visualizador de marcação carregar pela primeira vez, a marcação padrão no campo `#editor` deve ser renderizada como HTML no elemento `#preview`.
|
||||
|
||||
**Bônus opcional (você não precisa fazer esse teste passar):** Meu pré-visualizador de marcação interpreta retorno de carro e os renderiza como elementos `br` (quebra de linha).
|
||||
**Bônus opcional (você não precisa de aprovação nesse teste):** meu pré-visualizador de marcação interpreta o retorno de carro e o renderiza como elementos `br` (quebra de linha).
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: Construa uma Máquina de Citação Aleatória
|
||||
title: Criar uma máquina de citação aleatória
|
||||
challengeType: 3
|
||||
forumTopicId: 301374
|
||||
dashedName: build-a-random-quote-machine
|
||||
@@ -8,37 +8,37 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** Construa um app [CodePen.io](https://codepen.io) que seja funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework frontend (como React por exemplo) porque essa seção trata de aprender frameworks fronted. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos olhando para apoiar outros frameworks frontend como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**User Story #1:** Eu consigo ver um elemento de embrulho com o id correspondente `id="quote-box"`.
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento wrapper com o `id="quote-box"` correspondente.
|
||||
|
||||
**User Story #2:** Dentro de `#quote-box`, Eu consigo ver um elemento com o id correspondente `id="text"`.
|
||||
**Especificação de usuário nº 2:** dentro de `#quote-box`, eu consigo ver um elemento com o `id="text"` correspondente.
|
||||
|
||||
**User Story #3:** Dentro de `#quote-box`, eu consigo ver um elemento com o id correspondente `id="author"`.
|
||||
**Especificação de usuário nº 3:** dentro de `#quote-box`, eu consigo ver um elemento com o `id="author"` correspondente.
|
||||
|
||||
**User Story #4:** Dentro de `#quote-box`, eu consigo ver um elemento clicável com o id correspondente `id="new-quote"`.
|
||||
**Especificação de usuário nº 4:** dentro de `#quote-box`, eu consigo ver um elemento clicável com o `id="new-quote"` correspondente.
|
||||
|
||||
**User Story #5:** Dentro de `#quote-box`, eu consigo ver um elemento clicável `a` com o id correspondente `id="tweet-quote"`.
|
||||
**Especificação de usuário nº 5:** dentro de `#quote-box`, eu consigo ver um elemento clicável `a` com o `id="tweet-quote"` correspondente.
|
||||
|
||||
**User Story #6:** Ao carregar pela primeira vez, minha máquina de citação exibe uma citação aleatória no elemento com `id="text"`.
|
||||
**Especificação de usuário nº 6:** ao carregar pela primeira vez, minha máquina de citação exibe uma citação aleatória no elemento com `id="text"`.
|
||||
|
||||
**User Story #7:** Ao carregar pela primeira vez, minha máquina de citação exibe o autor da citação aleatória no elemento com `id="author"`.
|
||||
**Especificação de usuário nº 7:** ao carregar pela primeira vez, minha máquina de citação exibe o autor da citação aleatória no elemento com `id="author"`.
|
||||
|
||||
**User Story #8:** Quando o botão `#new-quote` é clicado, minha máquina de citação deve buscar uma nova citação e exibi-la no elemento `#text`.
|
||||
**Especificação de usuário nº 8:** quando o botão `#new-quote` é clicado, minha máquina de citação deve buscar uma nova citação e exibi-la no elemento `#text`.
|
||||
|
||||
**User Story #9:** Minha máquina de citação deve buscar o novo autor da citação quando o botão `#new-quote` for clicado e o exibir no elemento `#author`.
|
||||
**Especificação de usuário nº 9:** minha máquina de citação deve buscar o novo autor da citação quando o botão `#new-quote` for clicado e o exibir no elemento `#author`.
|
||||
|
||||
**User Story #10:** Eu posso tweetar a citação atual ao clicar no elemento `#tweet-quote` `a`. Esse elemento `a` deve incluir o caminho `"twitter.com/intent/tweet"` no seu atributo `href` para tweetar a citação atual.
|
||||
**Especificação de usuário nº 10:** eu posso tweetar a citação atual ao clicar no elemento `#tweet-quote` `a`. Esse elemento `a` deve incluir o caminho `"twitter.com/intent/tweet"` no seu atributo `href` para tweetar a citação atual.
|
||||
|
||||
**User Story #11:** O elemento de embrulho `#quote-box` deve ser centralizado horizontalmente. Por favor execute testes com o zoom do navegador em 100% e com a página maximizada.
|
||||
**Especificação de usuário nº 11:** o elemento wrapper `#quote-box` deve ser centralizado horizontalmente. Execute testes com o zoom do navegador em 100% e com a página maximizada.
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
**Nota:** Twitter não permite que links sejam carregados em um iframe. Tente usar o atributo `target="_blank"` ou `target="_top"` no elemento `#tweet-quote` se o seu tweet não carregar. `target="_top"` irá substituir a aba atual para garantir que o seu trabalho foi salvo.
|
||||
|
||||
|
||||
@@ -14,31 +14,31 @@ Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_sto
|
||||
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM obrigatórios (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**Especificação de usuário nº 1:** Meu gráfico deve ter um título com um `id="title"` correspondente.
|
||||
**Especificação de usuário nº 1:** meu gráfico deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 2:** Meu gráfico deve ter um elemento `g` no eixo x com um `id="x-axis"` correspondente.
|
||||
**Especificação de usuário nº 2:** meu gráfico deve ter um elemento `g` no eixo x com um `id="x-axis"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 3:** Meu gráfico deve ter um elemento `g` no eixo y com um `id="y-axis"` correspondente.
|
||||
**Especificação de usuário nº 3:** meu gráfico deve ter um elemento `g` no eixo y com um `id="y-axis"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 4:** Ambos os eixos devem conter múltiplos rótulos (labels) de marcação, cada um com uma `class="tick"` correspondente.
|
||||
**Especificação de usuário nº 4:** ambos os eixos devem conter múltiplos rótulos (labels) de marcação, cada um com uma `class="tick"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 5:** Meu gráfico deve ter um elemento `rect` para cada ponto com uma classe `class="bar"` correspondente exibindo os dados.
|
||||
**Especificação de usuário nº 5:** meu gráfico deve ter um elemento `rect` para cada ponto com uma classe `class="bar"` correspondente exibindo os dados.
|
||||
|
||||
**Especificação de usuário nº 6:** Cada barra deve ter as propriedades `data-date` e `data-gdp`, contendo os valores `date` e `GDP`, respectivamente.
|
||||
**Especificação de usuário nº 6:** cada barra deve ter as propriedades `data-date` e `data-gdp`, contendo os valores `date` e `GDP`, respectivamente.
|
||||
|
||||
**Especificação de usuário nº 7:** As propriedades `data-date` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
**Especificação de usuário nº 7:** as propriedades `data-date` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
|
||||
**Especificação de usuário nº 8:** As propriedades `data-gdp` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
**Especificação de usuário nº 8:** as propriedades `data-gdp` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
|
||||
**Especificação de usuário nº 9:** A altura de cada barra deve representar corretamente os dados de `GDP` correspondentes.
|
||||
**Especificação de usuário nº 9:** a altura de cada barra deve representar corretamente os dados de `GDP` correspondentes.
|
||||
|
||||
**Especificação de usuário nº 10:** O atributo `data-date` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo x.
|
||||
**Especificação de usuário nº 10:** o atributo `data-date` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo x.
|
||||
|
||||
**Especificação de usuário nº 11:** O atributo `data-gdp` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo y.
|
||||
**Especificação de usuário nº 11:** o atributo `data-gdp` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo y.
|
||||
|
||||
**Especificação de usuário nº 12:** Eu posso passar o mouse sobre uma área e ver uma dica com uma `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
**Especificação de usuário nº 12:** eu posso passar o mouse sobre uma área e ver uma dica com uma `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**Especificação de usuário nº 13:** Minha ferramenta de dica (tooltip) deve ter uma propriedade `data-date` que corresponda à `data-date` da área ativa, isto é, onde o mouse está em cima.
|
||||
**Especificação de usuário nº 13:** minha ferramenta de dica (tooltip) deve ter uma propriedade `data-date` que corresponda à `data-date` da área ativa.
|
||||
|
||||
Aqui está o dataset de que você precisará para completar este projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bbf
|
||||
title: Visualize Data with a Choropleth Map
|
||||
title: Visualizar dados com um mapa coroplético
|
||||
challengeType: 3
|
||||
forumTopicId: 301465
|
||||
dashedName: visualize-data-with-a-choropleth-map
|
||||
@@ -8,42 +8,42 @@ dashedName: visualize-data-with-a-choropleth-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os elementos DOM obrigatórios (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**User Story #1:** My choropleth should have a title with a corresponding `id="title"`.
|
||||
**Especificação de usuário nº 1: ** meu coropleto deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**User Story #2:** My choropleth should have a description element with a corresponding `id="description"`.
|
||||
**Especificação de usuário nº 2: ** meu coropleto deve ter um elemento de descrição com uma `id="description"` correspondente.
|
||||
|
||||
**User Story #3:** My choropleth should have counties with a corresponding `class="county"` that represent the data.
|
||||
**Especificação de usuário nº 3: ** meu coropleto deve ter condados com um `class="county"` correspondente que representa os dados.
|
||||
|
||||
**User Story #4:** There should be at least 4 different fill colors used for the counties.
|
||||
**Especificação de usuário nº 4: ** deve haver pelo menos 4 cores de preenchimento diferentes usadas para os condados.
|
||||
|
||||
**User Story #5:** My counties should each have `data-fips` and `data-education` properties containing their corresponding `fips` and `education` values.
|
||||
**Especificação de usuário nº 5:** cada um dos meus condados devem ter propriedades `data-fips` e `data-education` contendo seus correspondentes valores de `fips` e `education`.
|
||||
|
||||
**User Story #6:** My choropleth should have a county for each provided data point.
|
||||
** Especificação de usuário nº 6: ** meu coropleto deve ter um condado para cada dado fornecido.
|
||||
|
||||
**User Story #7:** The counties should have `data-fips` and `data-education` values that match the sample data.
|
||||
**Especificação de usuário nº 7:** os condados devem ter os valores `data-fips` e `data-education` que correspondam aos dados da amostra.
|
||||
|
||||
**User Story #8:** My choropleth should have a legend with a corresponding `id="legend"`.
|
||||
**Especificação de usuário nº 8:** meu cloropleto deve ter uma legenda com um `id="legend"` correspondente.
|
||||
|
||||
**User Story #9:** There should be at least 4 different fill colors used for the legend.
|
||||
**Especificação de usuário nº 9:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para a legenda.
|
||||
|
||||
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Especificação de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-education` property that corresponds to the `data-education` of the active area.
|
||||
**Especificação de usuário nº 11:** minha dica deve ter uma propriedade `data-education` que corresponde ao `data-education` da área ativa.
|
||||
|
||||
Here are the datasets you will need to complete this project:
|
||||
Aqui estão os conjuntos de dados de que você precisará para completar esse projeto:
|
||||
|
||||
- **US Education Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **US County Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
- **Dados educacionais dos EUA:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **Dados dos condados dos EUA:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7188d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Heat Map
|
||||
title: Visualizar dados com um mapa de calor
|
||||
challengeType: 3
|
||||
forumTopicId: 301466
|
||||
dashedName: visualize-data-with-a-heat-map
|
||||
@@ -8,51 +8,51 @@ dashedName: visualize-data-with-a-heat-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**User Story #1:** My heat map should have a title with a corresponding `id="title"`.
|
||||
**Especificação de usuário nº 1: ** meu mapa de calor deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**User Story #2:** My heat map should have a description with a corresponding `id="description"`.
|
||||
**Especificação de usuário nº 2: ** meu mapa de calor deve ter uma descrição com uma `id="description"` correspondente.
|
||||
|
||||
**User Story #3:** My heat map should have an x-axis with a corresponding `id="x-axis"`.
|
||||
**Especificação de usuário nº 3:** meu mapa de calor deve ter eixo x com um `id="x-axis"` correspondente.
|
||||
|
||||
**User Story #4:** My heat map should have a y-axis with a corresponding `id="y-axis"`.
|
||||
**Especificação de usuário nº 4:** meu mapa de calor deve ter eixo y com um `id="y-axis"` correspondente.
|
||||
|
||||
**User Story #5:** My heat map should have `rect` elements with a `class="cell"` that represent the data.
|
||||
**Especificação de usuário nº 5: ** meu mapa de calor deve ter elementos `rect` com uma `class="cell"` correspondente que representa os dados.
|
||||
|
||||
**User Story #6:** There should be at least 4 different fill colors used for the cells.
|
||||
**Especificação de usuário nº 6:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para as células.
|
||||
|
||||
**User Story #7:** Each cell will have the properties `data-month`, `data-year`, `data-temp` containing their corresponding `month`, `year`, and `temperature` values.
|
||||
**Especificação de usuário nº 7:** cada célula deve ter as propriedades `data-month`, `data-year`, `data-temp` contendo os valores de `month`, `year` e `temperature` correspondentes.
|
||||
|
||||
**User Story #8:** The `data-month`, `data-year` of each cell should be within the range of the data.
|
||||
**Especificação de usuário nº 8:** os valores `data-month` e `data-year` de cada célula devem estar dentro do intervalo dos dados.
|
||||
|
||||
**User Story #9:** My heat map should have cells that align with the corresponding month on the y-axis.
|
||||
**Especificação de usuário nº 9:** meu mapa de calor deve ter células que estejam alinhadas com o mês correspondente no eixo y.
|
||||
|
||||
**User Story #10:** My heat map should have cells that align with the corresponding year on the x-axis.
|
||||
**Especificação de usuário nº 10:** meu mapa de calor deve ter células que estejam alinhadas com o ano correspondente no eixo x.
|
||||
|
||||
**User Story #11:** My heat map should have multiple tick labels on the y-axis with the full month name.
|
||||
**Especificação de usuário nº 11:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo y com o nome do mês por extenso.
|
||||
|
||||
**User Story #12:** My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015.
|
||||
**Especificação de usuário nº 12:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo x com os anos entre 1754 e 2015.
|
||||
|
||||
**User Story #13:** My heat map should have a legend with a corresponding `id="legend"`.
|
||||
**Especificação de usuário nº 13:** meu mapa de calor deve ter uma legenda com o `id="legend"` correspondente.
|
||||
|
||||
**User Story #14:** My legend should contain `rect` elements.
|
||||
**Especificação de usuário nº 14:** minha legenda deve conter elementos `rect`.
|
||||
|
||||
**User Story #15:** The `rect` elements in the legend should use at least 4 different fill colors.
|
||||
**Especificação de usuário nº 15:** os elementos `rect` na legenda devem usar pelo menos 4 cores diferentes de preenchimento.
|
||||
|
||||
**User Story #16:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Especificação de usuário nº 16:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**User Story #17:** My tooltip should have a `data-year` property that corresponds to the `data-year` of the active area.
|
||||
**Especificação de usuário nº 17:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-year` da área ativa.
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
Aqui está o conjunto de dados de que você vai precisar para completar esse projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Scatterplot Graph
|
||||
title: Visualizar dados com um gráfico de dispersão
|
||||
challengeType: 3
|
||||
forumTopicId: 301467
|
||||
dashedName: visualize-data-with-a-scatterplot-graph
|
||||
@@ -8,47 +8,47 @@ dashedName: visualize-data-with-a-scatterplot-graph
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**User Story #1:** I can see a title element that has a corresponding `id="title"`.
|
||||
**Especificação de usuário nº 1:** eu posso ver um elemento de título que tem um `id="title"` correspondente.
|
||||
|
||||
**User Story #2:** I can see an x-axis that has a corresponding `id="x-axis"`.
|
||||
**Especificação de usuário nº 2:** eu posso ver um eixo x com um `id="x-axis"` correspondente.
|
||||
|
||||
**User Story #3:** I can see a y-axis that has a corresponding `id="y-axis"`.
|
||||
**Especificação de usuário nº 3:** eu posso ver um eixo y com um `id="y-axis"` correspondente.
|
||||
|
||||
**User Story #4:** I can see dots, that each have a class of `dot`, which represent the data being plotted.
|
||||
**Especificação de usuário nº 4:** eu posso ver pontos e cada um deles tem uma classe `dot`, que representa os dados a serem plotados.
|
||||
|
||||
**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding `x` and `y` values.
|
||||
**Especificação de usuário nº 5:** cada ponto deve ter as propriedades `data-xvalue` e `data-yvalue` contendo seus valores correspondentes de `x` e de `y`.
|
||||
|
||||
**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or `Date` objects are acceptable for test evaluation. For `data-yvalue` (minutes), use `Date` objects.
|
||||
**Especificação de usuário nº 6:** os valores `data-xvalue` e `data-yvalue` de cada ponto devem estar dentro do intervalo factual de dados e no formato de dados correto. Para `data-xvalue`, objetos de inteiros (anos completos) ou `Date` são aceitáveis para a avaliação dos testes. Para `data-yvalue` (minutos), use objetos `Date`.
|
||||
|
||||
**User Story #7:** The `data-xvalue` and its corresponding dot should align with the corresponding point/value on the x-axis.
|
||||
**Especificação de usuário nº 7:** o `data-xvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo x.
|
||||
|
||||
**User Story #8:** The `data-yvalue` and its corresponding dot should align with the corresponding point/value on the y-axis.
|
||||
**Especificação de usuário nº 8:** o `data-yvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo y.
|
||||
|
||||
**User Story #9:** I can see multiple tick labels on the y-axis with `%M:%S` time format.
|
||||
**Especificação de usuário nº 9:** eu posso ver diversas etiquetas de confirmação no eixo y com o formato de tempo `%M:%S`.
|
||||
|
||||
**User Story #10:** I can see multiple tick labels on the x-axis that show the year.
|
||||
**Especificação de usuário nº 10:** eu posso ver diversas etiquetas de confirmação no eixo x que mostram o ano.
|
||||
|
||||
**User Story #11:** I can see that the range of the x-axis labels are within the range of the actual x-axis data.
|
||||
**Especificação de usuário nº 11:** eu posso ver que o intervalo de etiquetas com o eixo x está dentro do intervalo factual de dados do eixo x.
|
||||
|
||||
**User Story #12:** I can see that the range of the y-axis labels are within the range of the actual y-axis data.
|
||||
**Especificação de usuário nº 12:** eu posso ver que o intervalo de etiquetas com o eixo y está dentro do intervalo factual de dados do eixo y.
|
||||
|
||||
**User Story #13:** I can see a legend containing descriptive text that has `id="legend"`.
|
||||
**Especificação de usuário nº 13:** eu posso ver uma legenda que tem `id="legend"` e contém texto descritivo.
|
||||
|
||||
**User Story #14:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Especificação de usuário nº 14:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**User Story #15:** My tooltip should have a `data-year` property that corresponds to the `data-xvalue` of the active area.
|
||||
**Especificação de usuário nº 15:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-xvalue` da área ativa.
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
Aqui está o conjunto de dados de que você vai precisar para completar esse projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc0
|
||||
title: Visualize Data with a Treemap Diagram
|
||||
title: Visualizar dados com um diagrama Treemap
|
||||
challengeType: 3
|
||||
forumTopicId: 301468
|
||||
dashedName: visualize-data-with-a-treemap-diagram
|
||||
@@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-treemap-diagram
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**User Story #1:** My tree map should have a title with a corresponding `id="title"`.
|
||||
**Especificação de usuário nº 1: ** meu treemap deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**User Story #2:** My tree map should have a description with a corresponding `id="description"`.
|
||||
**Especificação de usuário nº 2: ** meu treemap deve ter uma descrição com uma `id="description"` correspondente.
|
||||
|
||||
**User Story #3:** My tree map should have `rect` elements with a corresponding `class="tile"` that represent the data.
|
||||
**Especificação de usuário nº 3: ** meu treemap deve ter elementos `rect` com uma `class="tile"` que representa os dados.
|
||||
|
||||
**User Story #4:** There should be at least 2 different fill colors used for the tiles.
|
||||
**Especificação de usuário nº 4:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para os blocos.
|
||||
|
||||
**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding `name`, `category`, and `value`.
|
||||
**Especificação de usuário nº 5:** cada bloco deve ter as propriedades `data-name`, `data-category` e `data-value` contendo os valores de `name`, `category` e `value` correspondentes.
|
||||
|
||||
**User Story #6:** The area of each tile should correspond to the `data-value` amount: tiles with a larger `data-value` should have a bigger area.
|
||||
**Especificação de usuário nº 6:** a área de cada bloco deve corresponder à quantidade de `data-value`: blocos com um `data-value` maior devem ter uma área maior.
|
||||
|
||||
**User Story #7:** My tree map should have a legend with corresponding `id="legend"`.
|
||||
**Especificação de usuário nº 7:** meu treemap deve ter uma legenda com o `id="legend"` correspondente.
|
||||
|
||||
**User Story #8:** My legend should have `rect` elements with a corresponding `class="legend-item"`.
|
||||
**Especificação de usuário nº 8:** minha legenda deve ter elementos `rect` com um `class="legend-item"` correspondente.
|
||||
|
||||
**User Story #9:** The `rect` elements in the legend should use at least 2 different fill colors.
|
||||
**Especificação de usuário nº 9:** os elementos `rect` na legenda devem usar pelo menos 2 cores diferentes de preenchimento.
|
||||
|
||||
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Especificação de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-value` property that corresponds to the `data-value` of the active area.
|
||||
**Especificação de usuário nº 11:** minha dica deve ter uma propriedade `data-value` que corresponda à `data-value` da área ativa.
|
||||
|
||||
For this project you can use any of the following datasets:
|
||||
Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados:
|
||||
|
||||
- **Kickstarter Pledges:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Movie Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Video Game Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
- **Contribuições do Kickstarter:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Venda de filmes:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Venda de videogames:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: Add a Tooltip to a D3 Element
|
||||
title: Adicionar uma dica a um elemento D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301470
|
||||
dashedName: add-a-tooltip-to-a-d3-element
|
||||
@@ -8,71 +8,71 @@ dashedName: add-a-tooltip-to-a-d3-element
|
||||
|
||||
# --description--
|
||||
|
||||
A tooltip shows more information about an item on a page when the user hovers over that item. There are several ways to add a tooltip to a visualization, this challenge uses the SVG `title` element.
|
||||
Uma dica mostra mais informações sobre um item em uma página quando o usuário passa o mouse por cima do item. Existem várias maneiras de adicionar uma dica a uma visualização. Este desafio usa o elemento SVG `title`.
|
||||
|
||||
`title` pairs with the `text()` method to dynamically add data to the bars.
|
||||
`title` está junto com o método `text()` para adicionar dinamicamente dados às barras.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Append a `title` element under each `rect` node. Then call the `text()` method with a callback function so the text displays the data value.
|
||||
Acrescente um elemento `title` sob cada nó de `rect`. Em seguida, chame o método `text()` com uma função de callback para que o texto mostre o valor dos dados.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 9 `title` elements.
|
||||
O código deve ter 9 elementos `title`.
|
||||
|
||||
```js
|
||||
assert($('title').length == 9);
|
||||
```
|
||||
|
||||
The first `title` element should have tooltip text of `12`.
|
||||
O primeiro elemento `title` deve ter o texto de dica `12`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(0).text() == '12');
|
||||
```
|
||||
|
||||
The second `title` element should have tooltip text of `31`.
|
||||
O segundo elemento `title` deve ter o texto de dica `31`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(1).text() == '31');
|
||||
```
|
||||
|
||||
The third `title` element should have tooltip text of `22`.
|
||||
O terceiro elemento `title` deve ter o texto de dica `22`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(2).text() == '22');
|
||||
```
|
||||
|
||||
The fourth `title` element should have tooltip text of `17`.
|
||||
O quarto elemento `title` deve ter o texto de dica `17`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(3).text() == '17');
|
||||
```
|
||||
|
||||
The fifth `title` element should have tooltip text of `25`.
|
||||
O quinto elemento `title` deve ter o texto de dica `25`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(4).text() == '25');
|
||||
```
|
||||
|
||||
The sixth `title` element should have tooltip text of `18`.
|
||||
O sexto elemento `title` deve ter o texto de dica `18`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(5).text() == '18');
|
||||
```
|
||||
|
||||
The seventh `title` element should have tooltip text of `29`.
|
||||
O sétimo elemento `title` deve ter o texto de dica `29`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(6).text() == '29');
|
||||
```
|
||||
|
||||
The eighth `title` element should have tooltip text of `14`.
|
||||
O oitavo elemento `title` deve ter o texto de dica `14`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(7).text() == '14');
|
||||
```
|
||||
|
||||
The ninth `title` element should have tooltip text of `9`.
|
||||
O nono elemento `title` deve ter o texto de dica `9`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(8).text() == '9');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: Add Attributes to the Circle Elements
|
||||
title: Adicionar atributos aos elementos de círculo
|
||||
challengeType: 6
|
||||
forumTopicId: 301471
|
||||
dashedName: add-attributes-to-the-circle-elements
|
||||
@@ -8,27 +8,27 @@ dashedName: add-attributes-to-the-circle-elements
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge created the `circle` elements for each point in the `dataset`, and appended them to the SVG canvas. But D3 needs more information about the position and size of each `circle` to display them correctly.
|
||||
O último desafio criou os elementos `circle` para cada ponto no `dataset` e anexou-os ao canvas do SVG. Porém, o D3 precisa de mais informações sobre a posição e o tamanho de cada `circle` para exibi-los corretamente.
|
||||
|
||||
A `circle` in SVG has three main attributes. The `cx` and `cy` attributes are the coordinates. They tell D3 where to position the *center* of the shape on the SVG canvas. The radius (`r` attribute) gives the size of the `circle`.
|
||||
Um `circle` em SVG tem três atributos principais. Os atributos `cx` e `cy` são as coordenadas. Elas informam ao D3 onde posicionar o *centro* da forma no canvas do SVG. O raio (atributo `r`) fornece o tamanho de `circle`.
|
||||
|
||||
Just like the `rect` `y` coordinate, the `cy` attribute for a `circle` is measured from the top of the SVG canvas, not from the bottom.
|
||||
Assim como ocorre com `rect`, em sua coordenada `y`, o atributo `cy` de um `circle` é medido do topo do canvas do SVG, não da parte inferior.
|
||||
|
||||
All three attributes can use a callback function to set their values dynamically. Remember that all methods chained after `data(dataset)` run once per item in `dataset`. The `d` parameter in the callback function refers to the current item in `dataset`, which is an array for each point. You use bracket notation, like `d[0]`, to access the values in that array.
|
||||
Todos os três atributos podem usar uma função de callback para definir seus valores dinamicamente. Lembre-se de que todos os métodos encadeados após `data(dataset)` são executados uma vez por item no `dataset`. O parâmetro `d` na função de callback se refere ao item atual no `dataset`, que é um array para aquele ponto. Use a notação de colchetes, por exemplo `d[0]`, para acessar valores naquele array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add `cx`, `cy`, and `r` attributes to the `circle` elements. The `cx` value should be the first number in the array for each item in `dataset`. The `cy` value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The `r` value should be `5` for all circles.
|
||||
Adicione os atributos `cx`, `cy` e `r` aos elementos `circle`. O valor de `cx` deve ser o primeiro número do array para cada item no `dataset`. O valor de `cy` deve ser baseado no segundo número do array, mas certifique-se de mostrar o gráfico voltado para o lado certo, em vez de invertido. O valor de `r` deve ser `5` para todos os círculos.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 10 `circle` elements.
|
||||
O código deve ter 10 elementos `circle`.
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
The first `circle` element should have a `cx` value of `34`, a `cy` value of `422`, and an `r` value of `5`.
|
||||
O primeiro elemento `circle` deve ter um valor `cx` de `34`, um valor `cy` de `422` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -38,7 +38,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second `circle` element should have a `cx` value of `109`, a `cy` value of `220`, and an `r` value of `5`.
|
||||
O segundo elemento `circle` deve ter um valor `cx` de `109`, um valor `cy` de `220` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third `circle` element should have a `cx` value of `310`, a `cy` value of `380`, and an `r` value of `5`.
|
||||
O terceiro elemento `circle` deve ter um valor `cx` de `310`, um valor `cy` de `380` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -58,7 +58,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth `circle` element should have a `cx` value of `79`, a `cy` value of `89`, and an `r` value of `5`.
|
||||
O quarto elemento `circle` deve ter um valor `cx` de `79`, um valor `cy` de `89` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -68,7 +68,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth `circle` element should have a `cx` value of `420`, a `cy` value of `280`, and an `r` value of `5`.
|
||||
O quinto elemento `circle` deve ter um valor `cx` de `420`, um valor `cy` de `280` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -78,7 +78,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The sixth `circle` element should have a `cx` value of `233`, a `cy` value of `355`, and an `r` value of `5`.
|
||||
O sexto elemento `circle` deve ter um valor `cx` de `233`, um valor `cy` de `355` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -88,7 +88,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The seventh `circle` element should have a `cx` value of `333`, a `cy` value of `404`, and an `r` value of `5`.
|
||||
O sétimo elemento `circle` deve ter um valor `cx` de `333`, um valor `cy` de `404` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -98,7 +98,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The eighth `circle` element should have a `cx` value of `222`, a `cy` value of `167`, and an `r` value of `5`.
|
||||
O oitavo elemento `circle` deve ter um valor `cx` de `222`, um valor `cy` de `167` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -108,7 +108,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The ninth `circle` element should have a `cx` value of `78`, a `cy` value of `180`, and an `r` value of `5`.
|
||||
O nono elemento `circle` deve ter um valor `cx` de `78`, um valor `cy` de `180` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -118,7 +118,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The tenth `circle` element should have a `cx` value of `21`, a `cy` value of `377`, and an `r` value of `5`.
|
||||
O décimo elemento `circle` deve ter um valor `cx` de `21`, um valor `cy` de `377` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: Add Axes to a Visualization
|
||||
title: Adicionar eixos a uma visualização
|
||||
challengeType: 6
|
||||
forumTopicId: 301472
|
||||
dashedName: add-axes-to-a-visualization
|
||||
@@ -8,15 +8,15 @@ dashedName: add-axes-to-a-visualization
|
||||
|
||||
# --description--
|
||||
|
||||
Another way to improve the scatter plot is to add an x-axis and a y-axis.
|
||||
Outra maneira de melhorar o diagrama de dispersão é adicionar um eixo x e um eixo y.
|
||||
|
||||
D3 has two methods, `axisLeft()` and `axisBottom()`, to render the y-axis and x-axis, respectively. Here's an example to create the x-axis based on the `xScale` in the previous challenges:
|
||||
O D3 tem dois métodos, `axisLeft()` e `axisBottom()`, para renderizar o eixo y e o eixo x, respectivamente. Aqui temos um exemplo para criar o eixo x com base na `xScale` dos desafios anteriores:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
```
|
||||
|
||||
The next step is to render the axis on the SVG canvas. To do so, you can use a general SVG component, the `g` element. The `g` stands for group. Unlike `rect`, `circle`, and `text`, an axis is just a straight line when it's rendered. Because it is a simple shape, using `g` works. The last step is to apply a `transform` attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible. SVG supports different types of `transforms`, but positioning an axis needs `translate`. When it's applied to the `g` element, it moves the whole group over and down by the given amounts. Here's an example:
|
||||
O próximo passo é renderizar o eixo no canvas do SVG. Para fazer isso, você pode usar um componente SVG geral, o elemento `g`. O `g` representa o grupo. Ao contrário de `rect`, `circle` e `text`, um eixo é apenas uma linha reta quando é renderizado. Por ser uma forma simples, usar `g` funciona. O último passo é aplicar um atributo `transform` para posicionar o eixo no lugar certo no canvas do SVG. Caso contrário, a linha seria renderizada ao longo da borda do canvas do SVG e não seria visível. O SVG suporta diferentes tipos de `transforms`, mas posicionar um eixo precisa de `translate`. Quando aplicado ao elemento `g`, ele move o grupo inteiro para cima e para baixo pelos valores indicados. Exemplo:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
@@ -26,21 +26,21 @@ svg.append("g")
|
||||
.call(xAxis);
|
||||
```
|
||||
|
||||
The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the `call()` method. The y-axis works in the same way, except the `translate` argument is in the form `(x, 0)`. Because `translate` is a string in the `attr()` method above, you can use concatenation to include variable values for its arguments.
|
||||
O código acima coloca o eixo x na parte inferior do canvas do SVG. Então, ele é passado como um argumento para o método `call()`. O eixo y funciona da mesma forma, exceto pelo fato de o argumento `translate` estar no formato `(x, 0)`. Como `translate` é uma string no método `attr()` acima, você pode usar a concatenação para incluir valores de variáveis para seus argumentos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The scatter plot now has an x-axis. Create a y-axis in a variable named `yAxis` using the `axisLeft()` method. Then render the axis using a `g` element. Make sure to use a `transform` attribute to translate the axis by the amount of padding units right, and `0` units down. Remember to `call()` the axis.
|
||||
O diagrama de dispersão agora tem um eixo x. Crie um eixo y em uma variável chamada `yAxis` usando o método `axisLeft()`. Em seguida, renderize o eixo usando um elemento `g`. Certifique-se de usar o atributo `transform` para mover o eixo pela quantidade de unidades de preenchimento à direita, e `0` unidades para baixo. Lembre-se de usar `call()` para o eixo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `axisLeft()` method with `yScale` passed as the argument.
|
||||
O código deve usar o método `axisLeft()` com `yScale` passado para o argumento.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.axisLeft\(yScale\)/g));
|
||||
```
|
||||
|
||||
The y-axis `g` element should have a `transform` attribute to translate the axis by `(60, 0)`.
|
||||
O elemento `g` do eixo y deve ter um atributo `transform` para mover o eixo por `(60, 0)`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should call the `yAxis`.
|
||||
O código deve ter uma tag `yAxis`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: Add Classes with D3
|
||||
title: Adicionar classes com o D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301473
|
||||
dashedName: add-classes-with-d3
|
||||
@@ -8,29 +8,29 @@ dashedName: add-classes-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the `attr()` method to add any HTML attribute to an element, including a class name.
|
||||
É difícil de gerenciar diversos estilos inline em elementos do HTML, mesmo para aplicações pequenas. É mais fácil adicionar uma classe aos elementos e estilizar aquela classe uma vez usando as regras de CSS. O D3 tem o método `attr()` para adicionar qualquer atributo HTML a um elemento, incluindo o nome da classe.
|
||||
|
||||
The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of `container` to a selection:
|
||||
O método `attr()` funciona da mesma forma que `style()`. Ele recebe valores separados por vírgulas e pode usar uma função de callback. Aqui está um exemplo para adicionar uma classe `container` a uma seleção:
|
||||
|
||||
```js
|
||||
selection.attr("class", "container");
|
||||
```
|
||||
|
||||
Note that the `class` parameter will remain the same whenever you need to add a class and only the `container` parameter will change.
|
||||
Observe que o parâmetro `class` permanecerá o mesmo sempre que você precisar adicionar uma classe e que somente o parâmetro `container` mudará.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the `attr()` method to the code in the editor and put a class of `bar` on the `div` elements.
|
||||
Adicione o método `attr()` ao código no editor e coloque uma classe `bar` nos elementos `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` elements should have a class of `bar`.
|
||||
Os elementos `div` devem ter a classe `bar`.
|
||||
|
||||
```js
|
||||
assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
|
||||
```
|
||||
|
||||
Your code should use the `attr()` method.
|
||||
O código deve usar o método `attr()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.attr/g));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be4
|
||||
title: Access the JSON Data from an API
|
||||
title: Acessar os dados de JSON de uma API
|
||||
challengeType: 6
|
||||
forumTopicId: 301499
|
||||
dashedName: access-the-json-data-from-an-api
|
||||
@@ -8,37 +8,37 @@ dashedName: access-the-json-data-from-an-api
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous challenge, you saw how to get JSON data from the freeCodeCamp Cat Photo API.
|
||||
No desafio anterior, você viu como obter dados de JSON da API de fotos de gatos do freeCodeCamp.
|
||||
|
||||
Now you'll take a closer look at the returned data to better understand the JSON format. Recall some notation in JavaScript:
|
||||
Agora, dê uma olhada nos dados retornados para entender melhor o formato JSON. Vamos relembrar um pouco da notação do JavaScript:
|
||||
|
||||
<blockquote>[ ] -> Square brackets represent an array<br>{ } -> Curly brackets represent an object<br>" " -> Double quotes represent a string. They are also used for key names in JSON</blockquote>
|
||||
<blockquote>[ ] -> colchetes representam um array<br>{ } -> chaves representam um objeto<br>" " -> aspas duplas representam uma string. Elas também são usadas para nomes de chaves em JSON</blockquote>
|
||||
|
||||
Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need.
|
||||
Entender a estrutura dos dados que uma API retorna é importante, pois influencia a forma como você obtém os valores de que necessita.
|
||||
|
||||
On the right, click the `Get Message` button to load the freeCodeCamp Cat Photo API JSON into the HTML.
|
||||
À direita, clique no botão `Get Message` para carregar o JSON da API de fotos de gatos do freeCodeCamp no HTML.
|
||||
|
||||
The first and last character you see in the JSON data are square brackets `[ ]`. This means that the returned data is an array. The second character in the JSON data is a curly `{` bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo.
|
||||
O primeiro e o último caracteres que você verá nos dados do JSON serão colchetes `[ ]`. Isso significa que os dados retornados são um array. O segundo caractere nos dados do JSON é uma abertura de chave `{`, que marca o início de um objeto. Se olhar mais atentamente, você verá que há três objetos separados. Os dados do JSON são um array de três objetos, onde cada objeto contém informações sobre uma foto de gato.
|
||||
|
||||
You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has `"id":0` where `id` is a key and `0` is its corresponding value. Similarly, there are keys for `imageLink`, `altText`, and `codeNames`. Each cat photo object has these same keys, but with different values.
|
||||
Você aprendeu anteriormente que objetos contêm "pares de chave-valor" separados por vírgulas. No exemplo de fotos de gatos, o primeiro objeto tem o `"id":0`, onde `id` é uma chave e `0` é o seu valor correspondente. Do mesmo modo, há chaves para `imageLink`, `altText` e `codeNames`. Cada objeto de foto de gato tem as mesmas chaves, mas com valores diferentes.
|
||||
|
||||
Another interesting "key-value pair" in the first object is `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Here `codeNames` is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.
|
||||
Outro "par chave-valor" interessante no primeiro objeto é `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Aqui, `codeNames` é a chave e seu valor é um array com três strings. É possível ter arrays de objetos, além de uma chave com um array como valor.
|
||||
|
||||
Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the `altText` property of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called `json`:
|
||||
Lembre-se de como acessar dados em array e em objetos. Arrays usam a notação de colchetes para acessar um índice específico de um item. Objetos usam os colchetes ou a notação de ponto para acessar o valor de determinada propriedade. Aqui vemos um exemplo que imprime a propriedade `altText` da primeira foto de gatos - observe que os dados do JSON representados no editor são salvos em uma variável chamada `json`:
|
||||
|
||||
```js
|
||||
console.log(json[0].altText);
|
||||
```
|
||||
|
||||
The console would display the string `A white cat wearing a green helmet shaped melon on its head.`.
|
||||
O console exibirá a string `A white cat wearing a green helmet shaped melon on its head.`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
For the cat with the `id` of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value.
|
||||
Para o gato com o `id` de 2, imprima no console o segundo valor do array `codeNames`. Você deve usar notação de colchetes e de ponto no objeto (que é salvo na variável `json`) para acessar o valor.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use bracket and dot notation to access the proper code name, and print `Loki` to the console.
|
||||
Seu código deve usar notação de colchetes e de ponto para acessar o nome do código apropriado e imprimir `Loki` no console.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be2
|
||||
title: Change Text with click Events
|
||||
title: Alterar texto com eventos de clique
|
||||
challengeType: 6
|
||||
forumTopicId: 301500
|
||||
dashedName: change-text-with-click-events
|
||||
@@ -8,11 +8,11 @@ dashedName: change-text-with-click-events
|
||||
|
||||
# --description--
|
||||
|
||||
When the click event happens, you can use JavaScript to update an HTML element.
|
||||
Quando ocorre o evento de clique, você pode usar o JavaScript para atualizar um elemento HTML.
|
||||
|
||||
For example, when a user clicks the `Get Message` button, it changes the text of the element with the class `message` to say `Here is the message`.
|
||||
Por exemplo, quando um usuário clica no botão `Get Message`, ele muda o texto do elemento com a classe `message` para que passe a dizer `Here is the message`.
|
||||
|
||||
This works by adding the following code within the click event:
|
||||
Isso ocorre quando adicionamos o seguinte código ao evento de clique:
|
||||
|
||||
```js
|
||||
document.getElementsByClassName('message')[0].textContent="Here is the message";
|
||||
@@ -20,11 +20,11 @@ document.getElementsByClassName('message')[0].textContent="Here is the message";
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add code inside the `onclick` event handler to change the text inside the `message` element to say `Here is the message`.
|
||||
Adicione código ao manipulador de evento `onclick` para alterar o texto dentro do elemento `message` de modo que ele diga `Here is the message`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `document.getElementsByClassName` method to select the element with class `message` and set its `textContent` to the given string.
|
||||
O código deve usar o método `document.getElementsByClassName` para selecionar o elemento com ac classe `message` e definir o `textContent` como a string mencionada.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be5
|
||||
title: Convert JSON Data to HTML
|
||||
title: Converter dados do JSON para HTML
|
||||
challengeType: 6
|
||||
forumTopicId: 16807
|
||||
dashedName: convert-json-data-to-html
|
||||
@@ -8,15 +8,15 @@ dashedName: convert-json-data-to-html
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you're getting data from a JSON API, you can display it in the HTML.
|
||||
Agora que você está recebendo dados de uma API de JSON, você pode exibir os dados no HTML.
|
||||
|
||||
You can use a `forEach` method to loop through the data since the cat photo objects are held in an array. As you get to each item, you can modify the HTML elements.
|
||||
Você pode usar um método `forEach` para percorrer os dados, já que os objetos de foto de gatos são mantidos em um array. Ao percorrer cada item, você pode modificar os elementos do HTML.
|
||||
|
||||
First, declare an html variable with `let html = "";`.
|
||||
Primeiro, declare uma variável html com `let html = "";`.
|
||||
|
||||
Then, loop through the JSON, adding HTML to the variable that wraps the key names in `strong` tags, followed by the value. When the loop is finished, you render it.
|
||||
Em seguida, percorra o JSON por meio de um laço, adicionando HTML à variável que envolve os nomes das chaves em tags `strong`, seguidas pelo valor. Quando o laço estiver concluído, você o renderiza.
|
||||
|
||||
Here's the code that does this:
|
||||
Aqui está o código para fazer isso:
|
||||
|
||||
```js
|
||||
let html = "";
|
||||
@@ -30,13 +30,13 @@ json.forEach(function(val) {
|
||||
});
|
||||
```
|
||||
|
||||
**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to cross-site scripting attacks.
|
||||
**Observação:** para este desafio, você precisa adicionar novos elementos HTML à página. Por isso, você não pode confiar em `textContent`. Em vez disso, você precisa usar `innerHTML`, o que pode tornar um site vulnerável a ataques de scripts entre sites.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `forEach` method to loop over the JSON data and create the HTML elements to display it.
|
||||
Adicione um método `forEach` para percorrer os dados do JSON e criar os elementos HTML para exibi-los.
|
||||
|
||||
Here is some example JSON:
|
||||
Aqui está um exemplo de JSON:
|
||||
|
||||
```json
|
||||
[
|
||||
@@ -52,19 +52,19 @@ Here is some example JSON:
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should store the data in the `html` variable
|
||||
O código deve armazenar os dados na variável `html`
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/html(\+=|=html\+)/g))
|
||||
```
|
||||
|
||||
Your code should use a `forEach` method to loop over the JSON data from the API.
|
||||
O código deve usar um método `forEach` para percorrer os dados do JSON da API.
|
||||
|
||||
```js
|
||||
assert(code.match(/json\.forEach/g));
|
||||
```
|
||||
|
||||
Your code should wrap the key names in `strong` tags.
|
||||
O código deve envolver os nomes das chaves em tags `strong`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<strong>.+<\/strong>/g));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be8
|
||||
title: Get Geolocation Data to Find A User's GPS Coordinates
|
||||
title: Obter dados de geolocalização para encontrar as coordenadas de GPS de um usuário
|
||||
challengeType: 6
|
||||
forumTopicId: 18188
|
||||
dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
|
||||
@@ -8,15 +8,15 @@ dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
|
||||
|
||||
# --description--
|
||||
|
||||
Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information.
|
||||
Outra coisa legal que você consegue fazer é acessar a localização atual do usuário. Cada navegador tem um modo de navegação incorporado que pode dar a você esta informação.
|
||||
|
||||
The navigator will get the user's current longitude and latitude.
|
||||
O modo de navegação obterá a longitude e a latitude atuais do usuário.
|
||||
|
||||
You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.
|
||||
Será solicitado que você permita ou evite que este site conheça sua localização atual. O desafio pode ser concluído das duas maneiras, desde que o código esteja correto.
|
||||
|
||||
By selecting allow, you will see the text on the output phone change to your latitude and longitude.
|
||||
Ao selecionar que você permite, você verá o texto na saída do telefone mudar para sua latitude e longitude atuais.
|
||||
|
||||
Here's code that does this:
|
||||
Aqui está o código para fazer isso:
|
||||
|
||||
```js
|
||||
if (navigator.geolocation){
|
||||
@@ -26,33 +26,33 @@ if (navigator.geolocation){
|
||||
}
|
||||
```
|
||||
|
||||
First, it checks if the `navigator.geolocation` object exists. If it does, the `getCurrentPosition` method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the `position` object's values for latitude and longitude using dot notation and updates the HTML.
|
||||
Primeiro, ele verifica se o objeto `navigator.geolocation` existe. Se existir, o método `getCurrentPosition` do objeto é chamado. Ele inicia uma solicitação assíncrona da posição do usuário. Se a solicitação tiver sucesso, a função de callback do método é executada. Essa função acessa os valores do objeto `position` para latitude e longitude usando a notação de ponto e atualiza o HTML.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the example code inside the `script` tags to check a user's current location and insert it into the HTML.
|
||||
Adicione o código de exemplo entre as tags `script` para verificar a localização atual do usuário e coloque-o no HTML.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use `navigator.geolocation` to access the user's current location.
|
||||
Seu código deve usar `navigator.geolocation` para acessar a localização atual do usuário.
|
||||
|
||||
```js
|
||||
assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
|
||||
```
|
||||
|
||||
Your code should use `position.coords.latitude` to display the user's latitudinal location.
|
||||
Seu código deve usar `position.coords.latitude` para acessar a localização latitudinal do usuário.
|
||||
|
||||
```js
|
||||
assert(code.match(/position\.coords\.latitude/g));
|
||||
```
|
||||
|
||||
Your code should use `position.coords.longitude` to display the user's longitudinal location.
|
||||
Seu código deve usar `position.coords.longitude` para acessar a localização longitudinal do usuário.
|
||||
|
||||
```js
|
||||
assert(code.match(/position\.coords\.longitude/g));
|
||||
```
|
||||
|
||||
You should display the user's position within the `div` element with `id="data"`.
|
||||
Você deve exibir a posição do usuário dentro do elemento `div` com o `id="data"`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5ccfad82bb2dc6c965a848e5
|
||||
title: Get JSON with the JavaScript fetch method
|
||||
title: Obter o JSON com o método fetch do JavaScript
|
||||
challengeType: 6
|
||||
forumTopicId: 301501
|
||||
dashedName: get-json-with-the-javascript-fetch-method
|
||||
@@ -8,9 +8,9 @@ dashedName: get-json-with-the-javascript-fetch-method
|
||||
|
||||
# --description--
|
||||
|
||||
Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to `XMLHttpRequest`, but the syntax is considered easier to understand.
|
||||
Outra maneira de solicitar dados externos é usar o método `fetch()` do JavaScript. Ele é equivalente ao método `XMLHttpRequest`, mas a sintaxe é considerada mais fácil de entender.
|
||||
|
||||
Here is the code for making a GET request to `/json/cats.json`
|
||||
Aqui está o código para fazer uma solicitação de GET para `/json/cats.json`
|
||||
|
||||
```js
|
||||
|
||||
@@ -22,29 +22,29 @@ fetch('/json/cats.json')
|
||||
|
||||
```
|
||||
|
||||
Take a look at each piece of this code.
|
||||
Dê uma olhada em cada parte deste código.
|
||||
|
||||
The first line is the one that makes the request. So, `fetch(URL)` makes a `GET` request to the URL specified. The method returns a Promise.
|
||||
A primeira linha é aquela que faz a solicitação. Então, `fetch(URL)` faz uma solicitação de `GET` para o URL especificado. O método retorna uma Promise.
|
||||
|
||||
After a Promise is returned, if the request was successful, the `then` method is executed, which takes the response and converts it to JSON format.
|
||||
Após a devolução da promise, se a solicitação tiver sido bem-sucedida, o método `then` é executado, recebendo a resposta e convertendo-a para o formato JSON.
|
||||
|
||||
The `then` method also returns a Promise, which is handled by the next `then` method. The argument in the second `then` is the JSON object you are looking for!
|
||||
O método `then` também retorna uma promise, que é tratada pelo próximo método `then`. O argumento no segundo `then` é o objeto do JSON que você está procurando!
|
||||
|
||||
Now, it selects the element that will receive the data by using `document.getElementById()`. Then it modifies the HTML code of the element by inserting a string created from the JSON object returned from the request.
|
||||
Agora, ele seleciona o elemento que receberá os dados usando `document.getElementById()`. Em seguida, modifica o código HTML do elemento, inserindo uma string criada a partir do objeto do JSON retornado pela solicitação.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`.
|
||||
Atualize o código para criar e enviar uma solicitação de `GET` para a API de fotos de gatos do freeCodeCamp. Desta vez, porém, use o método `fetch` em vez de `XMLHttpRequest`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should make a `GET` request with `fetch`.
|
||||
O código deve fazer uma solicitação de `GET` com `fetch`.
|
||||
|
||||
```js
|
||||
assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
|
||||
```
|
||||
|
||||
Your code should use `then` to convert the response to JSON.
|
||||
O código deve usar `then` para converter a resposta para JSON.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -54,13 +54,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should use `then` to handle the data converted to JSON by the other `then`.
|
||||
O código deve usar `then` para lidar com os dados convertidos para JSON pelo outro `then`.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g));
|
||||
```
|
||||
|
||||
Your code should get the element with id `message` and change its inner HTML to the string of JSON data.
|
||||
O código deve obter o elemento com o id `message` e alterar seu HTML interno para a string de dados do JSON.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be3
|
||||
title: Get JSON with the JavaScript XMLHttpRequest Method
|
||||
title: Obter o JSON com o método XMLHttpRequest do JavaScript
|
||||
challengeType: 6
|
||||
forumTopicId: 301502
|
||||
dashedName: get-json-with-the-javascript-xmlhttprequest-method
|
||||
@@ -8,19 +8,19 @@ dashedName: get-json-with-the-javascript-xmlhttprequest-method
|
||||
|
||||
# --description--
|
||||
|
||||
You can also request data from an external source. This is where APIs come into play.
|
||||
Você também pode solicitar dados de uma fonte externa. Esse é o ponto em que as APIs entram no jogo.
|
||||
|
||||
Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another. You'll learn how to update HTML with the data we get from APIs using a technology called AJAX.
|
||||
Lembre-se de que as APIs - ou Interfaces de Programação de Aplicativos - são ferramentas que os computadores usam para se comunicarem uns com os outros. Você aprenderá como atualizar o HTML com os dados que recebemos das APIs usando uma tecnologia chamada AJAX.
|
||||
|
||||
Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.
|
||||
A maioria das APIs da web transfere dados em um formato chamado JSON. JSON é uma abreviação de JavaScript Object Notation.
|
||||
|
||||
JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a `{` and a `}`.
|
||||
A sintaxe do JSON é bastante semelhante à notação de um literal de objeto do JavaScript. O JSON tem propriedades de objeto e seus valores atuais, envolvidos por um `{` e um `}`.
|
||||
|
||||
These properties and their values are often referred to as "key-value pairs".
|
||||
Essas propriedades e seus valores são geralmente conhecidos como "pares chave-valor".
|
||||
|
||||
However, JSON transmitted by APIs are sent as `bytes`, and your application receives it as a `string`. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The `JSON.parse` method parses the string and constructs the JavaScript object described by it.
|
||||
Porém, o JSON transmitido pelas APIs é enviado como `bytes` e sua aplicação o recebe como uma `string`. Os JSON podem ser convertidos em objetos do JavaScript, mas não são objetos do JavaScript por padrão. O método `JSON.parse` analisa a string e constrói o objeto do JavaScript descrito por ela.
|
||||
|
||||
You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:
|
||||
Você pode solicitar o JSON da API de fotos de gato do freeCodeCamp. Aqui está o código que você pode inserir no evento de clique para fazer isto:
|
||||
|
||||
```js
|
||||
const req = new XMLHttpRequest();
|
||||
@@ -32,21 +32,21 @@ req.onload = function(){
|
||||
};
|
||||
```
|
||||
|
||||
Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a `GET` request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text.
|
||||
Aqui está uma análise do que cada parte está fazendo. O objeto `XMLHttpRequest` do JavaScript tem uma série de propriedades e métodos que são usados para transferir dados. Primeiro, uma instância do objeto `XMLHttpRequest` é criada e salva na variável `req`. Em seguida, o método `open` inicia uma solicitação. Este exemplo está solicitando dados de uma API, portanto é uma solicitação `GET`. O segundo argumento para `open` é o URL da API de onde você está solicitando os dados. O terceiro argumento é um valor booleano, onde `true` torna a solicitação assíncrona. O método `send` envia a solicitação. Por fim, o manipulador de eventos `onload` analisa os dados retornados e aplica o método `JSON.stringify` para converter o objeto do JavaScript em uma string. Essa string é, então, inserida como o texto da mensagem.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. Then click the `Get Message` button. Your AJAX function will replace the `The message will go here` text with the raw JSON output from the API.
|
||||
Atualize o código para criar e enviar uma solicitação de `GET` para a API de fotos de gatos do freeCodeCamp. Em seguida, clique no botão `Get Message`. Sua função AJAX substituirá o texto `The message will go here` pela saída bruta do JSON da API.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should create a new `XMLHttpRequest`.
|
||||
O código deve criar uma nova `XMLHttpRequest`.
|
||||
|
||||
```js
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should use the `open` method to initialize a `GET` request to the freeCodeCamp Cat Photo API.
|
||||
O código deve usar o método `open` para inicializar uma solicitação de `GET` para a API de fotos de gatos do freeCodeCamp.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -56,13 +56,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should use the `send` method to send the request.
|
||||
O código deve usar o método `send` para enviar a solicitação.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*\)/g));
|
||||
```
|
||||
|
||||
Your code should have an `onload` event handler set to a function.
|
||||
O código deve ter um manipulador de evento `onload` definido para uma função.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -70,13 +70,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should use the `JSON.parse` method to parse the `responseText`.
|
||||
O código deve usar o método `JSON.parse` para analisar o `responseText`.
|
||||
|
||||
```js
|
||||
assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
|
||||
```
|
||||
|
||||
Your code should get the element with class `message` and change its inner HTML to the string of JSON data.
|
||||
O código deve obter o elemento com a classe `message` e alterar seu HTML interno para a string de dados do JSON.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be1
|
||||
title: Handle Click Events with JavaScript using the onclick property
|
||||
title: Tratar eventos de clique com o JavaScript usando a propriedade onclick
|
||||
challengeType: 6
|
||||
forumTopicId: 301503
|
||||
dashedName: handle-click-events-with-javascript-using-the-onclick-property
|
||||
@@ -8,7 +8,7 @@ dashedName: handle-click-events-with-javascript-using-the-onclick-property
|
||||
|
||||
# --description--
|
||||
|
||||
You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called `DOMContentLoaded`. Here's the code that does this:
|
||||
Você quer que seu código execute apenas quando a página tenha terminado de carregar. Para isso, você pode incluir um evento JavaScript ao documento chamado `DOMContentLoaded`. Aqui está o código para fazer isso:
|
||||
|
||||
```js
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
@@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
```
|
||||
|
||||
You can implement event handlers that go inside of the `DOMContentLoaded` function. You can implement an `onclick` event handler which triggers when the user clicks on the element with id `getMessage`, by adding the following code:
|
||||
Você pode implementar manipuladores de eventos que vão dentro da função `DOMContentLoaded`. Você pode implementar um manipulador de evento `onclick` que dispara quando o usuário clica no elemento com id `getMessage`, adicionando o código a seguir:
|
||||
|
||||
```js
|
||||
document.getElementById('getMessage').onclick = function(){};
|
||||
@@ -24,17 +24,17 @@ document.getElementById('getMessage').onclick = function(){};
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a click event handler inside of the `DOMContentLoaded` function for the element with id of `getMessage`.
|
||||
Adicione um manipulador de eventos de clique em uma função `DOMContentLoaded` para o elemento com o id `getMessage`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `document.getElementById` method to select the `getMessage` element.
|
||||
O código deve usar o método `document.getElementById` para selecionar o elemento `getMessage`.
|
||||
|
||||
```js
|
||||
assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should add an `onclick` event handler.
|
||||
O código deve adicionar um manipulador de evento `onclick`.
|
||||
|
||||
```js
|
||||
assert(typeof document.getElementById('getMessage').onclick === 'function');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be9
|
||||
title: Post Data with the JavaScript XMLHttpRequest Method
|
||||
title: Publicar dados com o método XMLHttpRequest do JavaScript
|
||||
challengeType: 6
|
||||
forumTopicId: 301504
|
||||
dashedName: post-data-with-the-javascript-xmlhttprequest-method
|
||||
@@ -8,9 +8,9 @@ dashedName: post-data-with-the-javascript-xmlhttprequest-method
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.
|
||||
Nos exemplos anteriores, você recebeu dados de um recurso externo. Você também pode enviar dados para um recurso externo, contanto que esse recurso suporte solicitações AJAX e que você conheça o URL.
|
||||
|
||||
JavaScript's `XMLHttpRequest` method is also used to post data to a server. Here's an example:
|
||||
O método `XMLHttpRequest` do JavaScript também é usado para publicar dados em um servidor. Exemplo:
|
||||
|
||||
```js
|
||||
const xhr = new XMLHttpRequest();
|
||||
@@ -26,27 +26,27 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
|
||||
xhr.send(body);
|
||||
```
|
||||
|
||||
You've seen several of these methods before. Here the `open` method initializes the request as a `POST` to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of `4` means the operation is complete, and a `status` of `201` means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field.
|
||||
Você já viu vários desses métodos antes. Aqui, o método `open` inicializa a solicitação como um `POST` para um determinado URL de um recurso externo, usando o booleano `true` para torná-lo assíncrono. O método `setRequestHeader` define o valor de um cabeçalho de solicitação HTTP, que contém informações sobre o remetente e sobre a solicitação. Ele deve ser chamado após o método `open`, mas antes do método `send`. Os dois parâmetros são o nome do cabeçalho e o valor a ser definido como o corpo desse cabeçalho. Em seguida, o listener do evento `onreadystatechange` trata a mudança no estado da solicitação. Um `readyState` com o valor `4` significa que a operação foi concluída, enquanto o `status` `201` significa que a solicitação foi um sucesso. O HTML do documento pode ser atualizado. Por fim, o método `send` envia a solicitação com o valor de `body`, que era a chave `userName` fornecida pelo usuário no campo `input`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Update the code so it makes a `POST` request to the API endpoint. Then type your name in the input field and click `Send Message`. Your AJAX function should replace `Reply from Server will be here.` with data from the server. Format the response to display your name appended with the text `loves cats`.
|
||||
Atualize o código para fazer uma solicitação de `POST` para o endpoint da API. Em seguida, digite seu nome no campo de entrada e clique em `Send Message`. Sua função do AJAX deve substituir `Reply from Server will be here.` pelos dados do servidor. Formate a resposta para que ela exiba seu nome anexado ao texto `loves cats`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should create a new `XMLHttpRequest`.
|
||||
O código deve criar uma nova `XMLHttpRequest`.
|
||||
|
||||
```js
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should use the `open` method to initialize a `POST` request to the server.
|
||||
O código deve usar o método `open` para inicializar uma solicitação de `POST` para o servidor.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should use the `setRequestHeader` method.
|
||||
O código deve usar o método `setRequestHeader`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -56,13 +56,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should have an `onreadystatechange` event handler set to a function.
|
||||
O código deve ter um manipulador de evento `onreadystatechange` definido para uma função.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.onreadystatechange\s*?=/g));
|
||||
```
|
||||
|
||||
Your code should get the element with class `message` and change its `textContent` to `userName loves cats`
|
||||
O código deve obter o elemento com a classe `message` e mudar seu `textContent` para `userName loves cats`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -72,7 +72,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should use the `send` method.
|
||||
O código deve usar o método `send`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*?body\s*?\)/g));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be7
|
||||
title: Pre-filter JSON to Get the Data You Need
|
||||
title: Pré-filtrar o JSON para obter os dados de que você precisa
|
||||
challengeType: 6
|
||||
forumTopicId: 18257
|
||||
dashedName: pre-filter-json-to-get-the-data-you-need
|
||||
@@ -8,11 +8,11 @@ dashedName: pre-filter-json-to-get-the-data-you-need
|
||||
|
||||
# --description--
|
||||
|
||||
If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it.
|
||||
Se você não quiser renderizar todas as fotos de gatos que você obtém na API de fotos de gatos do freeCodeCamp, você pode pré-filtrar o JSON antes de percorrer todo ele.
|
||||
|
||||
Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose `id` key has a value of `1`.
|
||||
Como os dados do JSON estão armazenados em um array, você pode usar o método `filter` para tirar da seleção os gatos que têm a chave `id` com o valor de `1`.
|
||||
|
||||
Here's the code to do this:
|
||||
Aqui está o código para fazer isso:
|
||||
|
||||
```js
|
||||
json = json.filter(function(val) {
|
||||
@@ -22,11 +22,11 @@ json = json.filter(function(val) {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add code to `filter` the json data to remove the cat with the `id` value of `1`.
|
||||
Adicione código ao método `filter` para filtrar os dados do json e remover o gato que tem em seu `id` o valor `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `filter` method.
|
||||
Você deve usar o método `filter`.
|
||||
|
||||
```js
|
||||
assert(code.match(/json\.filter/g));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be6
|
||||
title: Render Images from Data Sources
|
||||
title: Renderizar imagens de fontes de dados
|
||||
challengeType: 6
|
||||
forumTopicId: 18265
|
||||
dashedName: render-images-from-data-sources
|
||||
@@ -8,11 +8,11 @@ dashedName: render-images-from-data-sources
|
||||
|
||||
# --description--
|
||||
|
||||
The last few challenges showed that each object in the JSON array contains an `imageLink` key with a value that is the URL of a cat's image.
|
||||
Os últimos desafios mostraram que cada objeto no array do JSON continha uma chave `imageLink` com um valor, que é o URL de uma imagem de gato.
|
||||
|
||||
When you're looping through these objects, you can use this `imageLink` property to display this image in an `img` element.
|
||||
Ao percorrer esses objetos, você pode usar essa propriedade `imageLink` para exibir essa imagem em um elemento `img`.
|
||||
|
||||
Here's the code that does this:
|
||||
Aqui está o código para fazer isso:
|
||||
|
||||
```js
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||
@@ -20,17 +20,17 @@ html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add code to use the `imageLink` and `altText` properties in an `img` tag.
|
||||
Adicione código para usar as propriedades `imageLink` e `altText` em uma tag `img`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `imageLink` property to display the images.
|
||||
Você deve usar a propriedade `imageLink` para exibir as imagens.
|
||||
|
||||
```js
|
||||
assert(code.match(/val\.imageLink/g));
|
||||
```
|
||||
|
||||
You should use the `altText` for the `alt` attribute values of the images.
|
||||
Você deve usar o `altText` nos valores do atributo `alt` das imagens.
|
||||
|
||||
```js
|
||||
assert(code.match(/val\.altText/g));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb8367417b2b2512c10
|
||||
title: Delete One Document Using model.findByIdAndRemove
|
||||
title: Exclua um documento usando model.findByIdAndRemove
|
||||
challengeType: 2
|
||||
forumTopicId: 301539
|
||||
dashedName: delete-one-document-using-model-findbyidandremove
|
||||
@@ -8,15 +8,15 @@ dashedName: delete-one-document-using-model-findbyidandremove
|
||||
|
||||
# --description--
|
||||
|
||||
`findByIdAndRemove` and `findOneAndRemove` are like the previous update methods. They pass the removed document to the db. As usual, use the function argument `personId` as the search key.
|
||||
`findByIdAndRemove` e `findOneAndRemove` são como os métodos da atualização anterior. Eles passam o documento removido para a db. Como de costume, use o argumento da função `personId` como chave de pesquisa.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modify the `removeById` function to delete one person by the person's `_id`. You should use one of the methods `findByIdAndRemove()` or `findOneAndRemove()`.
|
||||
Modifique a função `removeById` para excluir uma pessoa pelo `_id` da pessoa. Você deve usar um dos métodos `findByIdAndRemove()` ou `findOneAndRemove()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Deleting an item should succeed
|
||||
A exclusão de um item deve ser bem-sucedida
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824c367417b2b2512c4d
|
||||
title: Compare the Properties of Two Elements
|
||||
title: Comparar as propriedades de dois elementos
|
||||
challengeType: 2
|
||||
forumTopicId: 301588
|
||||
dashedName: compare-the-properties-of-two-elements
|
||||
@@ -8,15 +8,15 @@ dashedName: compare-the-properties-of-two-elements
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Como observação, este projeto está sendo construído a partir do seguinte projeto no [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), ou clonado do [Github](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#8` in the `Comparisons` suite, change each `assert` to either `assert.isAbove` or `assert.isAtMost` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
|
||||
Em `tests/1_unit-tests.js`, no teste classificado como `#8` e na suíte `Comparisons`, modifique cada `assert` para `assert.isAbove` ou para `assert.isAtMost`, de maneira que cada teste passe (seja avaliado como `true`). Não altere os argumentos passados às afirmações.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Todos os testes devem passar.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -30,7 +30,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the first assertion - `isAbove` vs. `isAtMost`.
|
||||
Você deve escolher o método correto para a primeira assertiva - `isAbove` ou `isAtMost`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -48,7 +48,7 @@ You should choose the correct method for the first assertion - `isAbove` vs. `is
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the second assertion - `isAbove` vs. `isAtMost`.
|
||||
Você deve escolher o método correto para a segunda assertiva - `isAbove` ou `isAtMost`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -62,7 +62,7 @@ You should choose the correct method for the second assertion - `isAbove` vs. `i
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the third assertion - `isAbove` vs. `isAtMost`.
|
||||
Você deve escolher o método correto para a terceira assertiva - `isAbove` ou `isAtMost`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -80,7 +80,7 @@ You should choose the correct method for the third assertion - `isAbove` vs. `is
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the fourth assertion - `isAbove` vs. `isAtMost`.
|
||||
Você deve escolher o método correto para a quarta assertiva - `isAbove` ou `isAtMost`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a23c84252665b21eecc7eb0
|
||||
title: I before E except after C
|
||||
title: I antes de E, exceto depois de C
|
||||
challengeType: 5
|
||||
forumTopicId: 302288
|
||||
dashedName: i-before-e-except-after-c
|
||||
@@ -8,70 +8,70 @@ dashedName: i-before-e-except-after-c
|
||||
|
||||
# --description--
|
||||
|
||||
The phrase ["I before E, except after C"](https://en.wikipedia.org/wiki/I before E except after C) is a widely known mnemonic which is supposed to help when spelling English words.
|
||||
A frase [ "I antes de E, exceto depois de C" ](https://en.wikipedia.org/wiki/I before E except after C) é um mnemônico amplamente conhecido que deve ajudar ao soletrar palavras em inglês.
|
||||
|
||||
Using the words provided, check if the two sub-clauses of the phrase are plausible individually:
|
||||
Usando as palavras fornecidas, verifique se as duas subcláusulas da frase são plausíveis individualmente:
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<i>"I before E when not preceded by C".</i>
|
||||
<i>"I antes de E quando não for precedido por C".</i>
|
||||
</li>
|
||||
<li>
|
||||
<i>"E before I when preceded by C".</i>
|
||||
<i>"E antes de I quando for precedido por C".</i>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
If both sub-phrases are plausible then the original phrase can be said to be plausible.
|
||||
Se ambas as subfrases forem plausíveis, então a frase original pode ser considerada plausível.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write a function that accepts a word and check if the word follows this rule. The function should return true if the word follows the rule and false if it does not.
|
||||
Escreva uma função que aceite uma palavra e verifique se a palavra segue esta regra. A função deve retornar verdadeiro se a palavra seguir a regra e falso se não seguir.
|
||||
|
||||
# --hints--
|
||||
|
||||
`IBeforeExceptC` should be a function.
|
||||
`IBeforeExceptC` deve ser uma função.
|
||||
|
||||
```js
|
||||
assert(typeof IBeforeExceptC == 'function');
|
||||
```
|
||||
|
||||
`IBeforeExceptC("receive")` should return a boolean.
|
||||
`IBeforeExceptC("receive")` deve retornar um booleano.
|
||||
|
||||
```js
|
||||
assert(typeof IBeforeExceptC('receive') == 'boolean');
|
||||
```
|
||||
|
||||
`IBeforeExceptC("receive")` should return `true`.
|
||||
`IBeforeExceptC("receive")` deve retornar `true`.
|
||||
|
||||
```js
|
||||
assert.equal(IBeforeExceptC('receive'), true);
|
||||
```
|
||||
|
||||
`IBeforeExceptC("science")` should return `false`.
|
||||
`IBeforeExceptC("science")` deve retornar `false`.
|
||||
|
||||
```js
|
||||
assert.equal(IBeforeExceptC('science'), false);
|
||||
```
|
||||
|
||||
`IBeforeExceptC("imperceivable")` should return `true`.
|
||||
`IBeforeExceptC("imperceivable")` deve retornar `true`.
|
||||
|
||||
```js
|
||||
assert.equal(IBeforeExceptC('imperceivable'), true);
|
||||
```
|
||||
|
||||
`IBeforeExceptC("inconceivable")` should return `true`.
|
||||
`IBeforeExceptC("inconcebível")` deve retornar `verdadeiro`.
|
||||
|
||||
```js
|
||||
assert.equal(IBeforeExceptC('inconceivable'), true);
|
||||
```
|
||||
|
||||
`IBeforeExceptC("insufficient")` should return `false`.
|
||||
`IBeforeExceptC("insuficiente")` deve retornar `falso`.
|
||||
|
||||
```js
|
||||
assert.equal(IBeforeExceptC('insufficient'), false);
|
||||
```
|
||||
|
||||
`IBeforeExceptC("omniscient")` should return `false`.
|
||||
`IBeforeExceptC("onisciente")` deve retornar `falso`.
|
||||
|
||||
```js
|
||||
assert.equal(IBeforeExceptC('omniscient'), false);
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: build-a-freecodecamp-forum-homepage
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**História de usuário:** Posso ver uma lista dos posts mais recentes do fórum freeCodeCamp.
|
||||
**Especificação de usuário:** posso ver uma lista dos posts mais recentes do fórum freeCodeCamp.
|
||||
|
||||
**Especificação de usuário:** para cada tópico, posso ver o título e uma lista de links para usuários que recentemente postaram nele.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user