chore(i18n,curriculum): processed translations (#43008)
This commit is contained in:
camperbot
GitHub
@@ -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));
|
||||
|
||||
Reference in New Issue
Block a user