Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be4
|
||||
title: Access the JSON Data from an API
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Acessar os dados JSON de uma API
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> No desafio anterior, você viu como obter dados JSON da FreeCodeCamp Cat Photo API. Agora, você examinará mais de perto os dados retornados para entender melhor o formato JSON. Lembre-se de algumas notações em JavaScript: <blockquote> [] -> colchetes representam uma matriz <br> {} -> colchetes encaracolados representam um objeto <br> "" -> Aspas duplas representam uma string. Eles também são usados para nomes de chaves no JSON </blockquote> Compreender a estrutura dos dados que uma API retorna é importante porque influencia a maneira como você recupera os valores necessários. À direita, clique no botão "Obter Mensagem" para carregar o JSON da API do FreeCodeCamp Cat Photo no HTML. O primeiro e último caractere que você vê nos dados JSON são colchetes <code>[ ]</code> . Isso significa que os dados retornados são uma matriz. O segundo caractere nos dados JSON é um colchete <code>{</code> cruzado, que inicia um objeto. Olhando de perto, você pode ver que existem três objetos separados. Os dados JSON são uma matriz de três objetos, onde cada objeto contém informações sobre uma foto de gato. Você aprendeu anteriormente que os objetos contêm "pares de valores-chave" separados por vírgulas. No exemplo Cat Photo, o primeiro objeto tem <code>"id":0</code> onde "id" é uma chave e 0 é seu valor correspondente. Da mesma forma, existem chaves para "imageLink", "altText" e "codeNames". Cada objeto de foto de gato tem essas mesmas chaves, mas com valores diferentes. Outro par "chave-valor" interessante no primeiro objeto é <code>"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]</code> . Aqui "codeNames" é a chave e seu valor é uma matriz de três strings. É possível ter matrizes de objetos, bem como uma chave com uma matriz como um valor. Lembre-se de como acessar dados em matrizes e objetos. Os arrays usam a notação de colchetes para acessar um índice específico de um item. Os objetos usam a notação entre colchetes ou pontos para acessar o valor de uma determinada propriedade. Aqui está um exemplo que imprime o "altText" da primeira foto do gato - note que os dados JSON analisados no editor são salvos em uma variável chamada <code>json</code> : <blockquote> console.log (json [0] .altText); <br> // Prints "Um gato branco usando um capacete verde em forma de melão na cabeça." </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Para o gato com o "id" de 2, imprima para o console o segundo valor na matriz <code>codeNames</code> . Você deve usar a notação de colchetes e pontos no objeto (que é salvo na variável <code>json</code> ) para acessar o valor. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve usar a notação de colchetes e pontos para acessar o nome de código adequado e imprimir "Loki" no console.
|
||||
testString: 'assert(code.match(/(?:json\[2\]\.codeNames\[1\]|json\[2\]\[("|")codeNames\1\]\[1\])/g), "Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be2
|
||||
title: Change Text with click Events
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Alterar texto com eventos de clique
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Quando o evento click acontece, você pode usar o JavaScript para atualizar um elemento HTML. Por exemplo, quando um usuário clica no botão "Obter mensagem", ele altera o texto do elemento com a <code>message</code> da classe para dizer "Aqui está a mensagem". Isso funciona adicionando o seguinte código dentro do evento click: <code>document.getElementsByClassName('message')[0].textContent="Here is the message";</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione código dentro do manipulador de eventos <code>onclick</code> para alterar o texto dentro do elemento da <code>message</code> para dizer "Aqui está a mensagem". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve usar o método <code>document.getElementsByClassName</code> para selecionar o elemento com <code>message</code> classe e definir seu <code>textContent</code> para a string dada.
|
||||
testString: 'assert(code.match(/document\.getElementsByClassName\(\s*?("|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?("|")Here is the message\2/g), "Your code should use the <code>document.getElementsByClassName</code> method to select the element with class <code>message</code> and set its <code>textContent</code> to the given string.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be5
|
||||
title: Convert JSON Data to HTML
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Converter dados JSON em HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Agora que você está obtendo dados de uma API JSON, é possível exibi-los no HTML. Você pode usar um método <code>forEach</code> para percorrer os dados, pois os objetos photo do cat são mantidos em um array. Ao chegar em cada item, você pode modificar os elementos HTML. Primeiro, declare uma variável html com <code>var html = "";</code> . Em seguida, percorra o JSON, adicionando HTML à variável que encapsula os nomes das chaves em tags <code>strong</code> , seguida do valor. Quando o loop terminar, você o renderiza. Aqui está o código que faz isso: <blockquote> json.forEach (function (val) { <br> var keys = Object.keys (val); <br> html + = "<div class = 'cat'>"; <br> keys.forEach (função (chave) { <br> html + = "<strong>" + chave + "</ strong>:" + val [tecla] + "<br>"; <br> }); <br> html + = "</ div> <br>"; <br> }); </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione um método <code>forEach</code> para fazer um loop pelos dados JSON e crie os elementos HTML para exibi-los. Aqui está um exemplo de JSON <blockquote> [ <br> { <br> "id": 0, <br> "imageLink": "https://s3.amazonaws.com/freecodecamp/funny-cat.jpg", <br> "altText": "Um gato branco usando um capacete verde em forma de melão na cabeça.", <br> "codeNames": ["Juggernaut", "Sra. Wallace", "Buttercup" <br> ] <br> } <br> ] </blockquote></section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve armazenar os dados na variável <code>html</code>
|
||||
testString: 'assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g), "Your code should store the data in the <code>html</code> variable");'
|
||||
- text: Seu código deve usar um método <code>forEach</code> para executar um loop pelos dados JSON da API.
|
||||
testString: 'assert(code.match(/json\.forEach/g), "Your code should use a <code>forEach</code> method to loop over the JSON data from the API.");'
|
||||
- text: Seu código deve envolver os nomes das chaves em tags <code>strong</code> .
|
||||
testString: 'assert(code.match(/<strong>.+<\/strong>/g), "Your code should wrap the key names in <code>strong</code> tags.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be8
|
||||
title: Get Geolocation Data to Find A User's GPS Coordinates
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Obter dados de localização geográfica para localizar coordenadas de GPS de um usuário
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Outra coisa legal que você pode fazer é acessar a localização atual do seu usuário. Cada navegador possui um navegador integrado que pode fornecer essas informações. O navegador obterá a longitude e a latitude atuais do usuário. Você verá um aviso para permitir ou bloquear este site de saber sua localização atual. O desafio pode ser concluído de qualquer forma, desde que o código esteja correto. Ao selecionar Permitir, você verá o texto no telefone de saída alterado para sua latitude e longitude. Aqui está o código que faz isso: <blockquote> if (navigator.geolocation) { <br> navigator.geolocation.getCurrentPosition (function (position) { <br> document.getElementById ('data'). innerHTML = "latitude:" + position.coords.latitude + "<br> longitude:" + position.coords.longitude; <br> }); <br> } </blockquote> Primeiro, verifica se o objeto <code>navigator.geolocation</code> existe. Em caso afirmativo, o método <code>getCurrentPosition</code> nesse objeto é chamado, o que inicia uma solicitação assíncrona para a posição do usuário. Se a solicitação for bem-sucedida, a função de retorno de chamada no método será executada. Essa função acessa os valores do objeto de <code>position</code> para latitude e longitude usando a notação de ponto e atualiza o HTML. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione o código de exemplo dentro das tags de <code>script</code> para verificar a localização atual de um usuário e inseri-lo no HTML. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve usar <code>navigator.geolocation</code> para acessar a localização atual do usuário.
|
||||
testString: 'assert(code.match(/navigator\.geolocation\.getCurrentPosition/g), "Your code should use <code>navigator.geolocation</code> to access the user's current location.");'
|
||||
- text: Seu código deve usar <code>position.coords.latitude</code> para exibir a localização latitudinal do usuário.
|
||||
testString: 'assert(code.match(/position\.coords\.latitude/g), "Your code should use <code>position.coords.latitude</code> to display the user's latitudinal location.");'
|
||||
- text: Seu código deve usar <code>position.coords.longitude</code> para exibir a localização longitudinal do usuário.
|
||||
testString: 'assert(code.match(/position\.coords\.longitude/g), "Your code should use <code>position.coords.longitude</code> to display the user's longitudinal location.");'
|
||||
- text: Você deve exibir a posição do usuário no elemento div de <code>data</code> .
|
||||
testString: 'assert(code.match(/document\.getElementById\(\s*?("|")data\1\s*?\)\.innerHTML/g), "You should display the user's position within the <code>data</code> div element.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<h4>You are here:</h4>
|
||||
<div id="data">
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be3
|
||||
title: Get JSON with the JavaScript XMLHttpRequest Method
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Obtenha o JSON com o método JavaScript XMLHttpRequest
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você também pode solicitar dados de uma fonte externa. É aqui que entram as APIs. Lembre-se de que as APIs - ou Interfaces de Programação de Aplicativos - são ferramentas que os computadores usam para se comunicarem entre si. Você aprenderá a atualizar o HTML com os dados que obtemos das APIs usando uma tecnologia chamada AJAX. A maioria das APIs da web transfere dados em um formato chamado JSON. JSON significa JavaScript Object Notation. A sintaxe JSON é muito semelhante à notação literal do objeto JavaScript. O JSON tem propriedades de objeto e seus valores atuais, entre um <code>{</code> e um <code>}</code> . Essas propriedades e seus valores são geralmente chamados de "pares de valor-chave". No entanto, o JSON transmitido por APIs é enviado como <code>bytes</code> e seu aplicativo o recebe como uma <code>string</code> . Estes podem ser convertidos em objetos JavaScript, mas eles não são objetos JavaScript por padrão. O método <code>JSON.parse</code> analisa a sequência e constrói o objeto JavaScript descrito por ela. Você pode solicitar o JSON da Cat Photo API do freeCodeCamp. Aqui está o código que você pode colocar no seu evento de clique para fazer isso: <blockquote> req = new XMLHttpRequest (); <br> req.open ("GET", '/ json / cats.json', true); <br> req.send (); <br> req.onload = function () { <br> json = JSON.parse (req.responseText); <br> document.getElementsByClassName ('message') [0] .innerHTML = JSON.stringify (json); <br> }; </blockquote> Aqui está uma revisão do que cada peça está fazendo. O objeto JavaScript <code>XMLHttpRequest</code> possui várias propriedades e métodos usados para transferir dados. Primeiro, uma instância do objeto <code>XMLHttpRequest</code> é criada e salva na variável <code>req</code> . Em seguida, o método <code>open</code> inicializa uma solicitação - este exemplo está solicitando dados de uma API, portanto, é uma solicitação "GET". O segundo argumento para <code>open</code> é o URL da API da qual você está solicitando dados. O terceiro argumento é um valor booleano em que <code>true</code> faz dele uma solicitação assíncrona. O método <code>send</code> envia o pedido. Finalmente, o manipulador de eventos <code>onload</code> analisa os dados retornados e aplica o método <code>JSON.stringify</code> para converter o objeto JavaScript em uma string. Essa sequência é inserida como o texto da mensagem. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Atualize o código para criar e enviar uma solicitação "GET" para a FreeCodeCamp Cat Photo API. Em seguida, clique no botão "Obter mensagem". Sua função AJAX substituirá o texto "A mensagem irá para cá" pela saída JSON bruta da API. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve criar um novo <code>XMLHttpRequest</code> .
|
||||
testString: 'assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g), "Your code should create a new <code>XMLHttpRequest</code>.");'
|
||||
- text: Seu código deve usar o método <code>open</code> para inicializar uma solicitação "GET" para a FreeCodeCamp Cat Photo API.
|
||||
testString: 'assert(code.match(/\.open\(\s*?("|")GET\1\s*?,\s*?("|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g), "Your code should use the <code>open</code> method to initialize a "GET" request to the freeCodeCamp Cat Photo API.");'
|
||||
- text: Seu código deve usar o <code>send</code> método para enviar o pedido.
|
||||
testString: 'assert(code.match(/\.send\(\s*\)/g), "Your code should use the <code>send</code> method to send the request.");'
|
||||
- text: Seu código deve ter um manipulador de eventos <code>onload</code> configurado para uma função.
|
||||
testString: 'assert(code.match(/\.onload\s*=\s*function\(\s*?\)\s*?{/g), "Your code should have an <code>onload</code> event handler set to a function.");'
|
||||
- text: Seu código deve usar o método <code>JSON.parse</code> para analisar o <code>responseText</code> .
|
||||
testString: 'assert(code.match(/JSON\.parse\(.*\.responseText\)/g), "Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.");'
|
||||
- text: Seu código deve obter o elemento com <code>message</code> classe e alterar seu HTML interno para a string de dados JSON.
|
||||
testString: 'assert(code.match(/document\.getElementsByClassName\(\s*?("|")message\1\s*?\)\[0\]\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g), "Your code should get the element with class <code>message</code> and change its inner HTML to the string of JSON data.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be1
|
||||
title: Handle Click Events with JavaScript using the onclick property
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Manipular eventos de clique com JavaScript usando a propriedade onclick
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você quer que seu código seja executado somente quando a página terminar de carregar. Para esse propósito, você pode anexar um evento JavaScript ao documento chamado <code>DOMContentLoaded</code> . Aqui está o código que faz isso: <blockquote> document.addEventListener ('DOMContentLoaded', function () { <br><br> }); </blockquote> Você pode implementar manipuladores de eventos que vão dentro da função <code>DOMContentLoaded</code> . Você pode implementar um manipulador de eventos <code>onclick</code> que é acionado quando o usuário clica no elemento com o ID <code>getMessage</code> , adicionando o seguinte código: <blockquote> document.getElementById ('getMessage'). onclick = function () {}; </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione um manipulador de eventos click dentro da função <code>DOMContentLoaded</code> para o elemento com o id de <code>getMessage</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve usar o método <code>document.getElementById</code> para selecionar o elemento <code>getMessage</code> .
|
||||
testString: 'assert(code.match(/document\.getElementById\(\s*?("|")getMessage\1\s*?\)/g), "Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.");'
|
||||
- text: Seu código deve adicionar um manipulador de eventos <code>onclick</code> .
|
||||
testString: 'assert(typeof document.getElementById("getMessage").onclick === "function", "Your code should add an <code>onclick</code> event handler.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be9
|
||||
title: Post Data with the JavaScript XMLHttpRequest Method
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Postar dados com o método JavaScript XMLHttpRequest
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Nos exemplos anteriores, você recebeu dados de um recurso externo. Você também pode enviar dados para um recurso externo, desde que esse recurso suporte solicitações AJAX e você saiba o URL. O método <code>XMLHttpRequest</code> do JavaScript também é usado para postar dados em um servidor. Aqui está um exemplo: <blockquote> req = new XMLHttpRequest (); <br> req.open ("POST", url, true); <br> req.setRequestHeader ('Content-Type', 'text / plain'); <br> req.onreadystatechange = function () { <br> if (req.readyState == 4 && req.status == 200) { <br> document.getElementsByClassName ('message') [0] .innerHTML = req.responseText; <br> } <br> }; <br> req.send (userName); </blockquote> Você já viu vários desses métodos antes. Aqui, o método <code>open</code> inicializa a solicitação como um "POST" para a URL fornecida do recurso externo e usa o booleano <code>true</code> para torná-lo assíncrono. O método <code>setRequestHeader</code> define o valor de um cabeçalho de solicitação HTTP, que contém informações sobre o remetente e a solicitação. Deve ser chamado após o método <code>open</code> , mas antes do método <code>send</code> . 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 ouvinte de evento <code>onreadystatechange</code> manipula uma alteração no estado da solicitação. Um <code>readyState</code> de 4 significa que a operação está completa e um <code>status</code> de 200 significa que foi uma solicitação bem-sucedida. O HTML do documento pode ser atualizado. Finalmente, o método <code>send</code> envia a solicitação com o valor <code>userName</code> , que foi dado pelo usuário no campo de <code>input</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Atualize o código para criar e enviar uma solicitação "POST". Em seguida, digite seu nome na caixa de entrada e clique em "Enviar mensagem". Sua função AJAX substituirá "Responder pelo servidor estará aqui". com a resposta do servidor. Neste caso, é o seu nome acrescentado com "ama gatos". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve criar um novo <code>XMLHttpRequest</code> .
|
||||
testString: 'assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g), "Your code should create a new <code>XMLHttpRequest</code>.");'
|
||||
- text: Seu código deve usar o método <code>open</code> para inicializar uma solicitação "POST" para o servidor.
|
||||
testString: 'assert(code.match(/\.open\(\s*?("|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g), "Your code should use the <code>open</code> method to initialize a "POST" request to the server.");'
|
||||
- text: Seu código deve usar o método <code>setRequestHeader</code> .
|
||||
testString: 'assert(code.match(/\.setRequestHeader\(\s*?("|")Content-Type\1\s*?,\s*?("|")text\/plain\2\s*?\)/g), "Your code should use the <code>setRequestHeader</code> method.");'
|
||||
- text: Seu código deve ter um manipulador de eventos <code>onreadystatechange</code> definido para uma função.
|
||||
testString: 'assert(code.match(/\.onreadystatechange\s*?=/g), "Your code should have an <code>onreadystatechange</code> event handler set to a function.");'
|
||||
- text: Seu código deve obter o elemento com <code>message</code> classe e alterar seu HTML interno para o <code>responseText</code> .
|
||||
testString: 'assert(code.match(/document\.getElementsByClassName\(\s*?("|")message\1\s*?\)\[0\]\.innerHTML\s*?=\s*?.+?\.responseText/g), "Your code should get the element with class <code>message</code> and change its inner HTML to the <code>responseText</code>.");'
|
||||
- text: Seu código deve usar o método <code>send</code> .
|
||||
testString: 'assert(code.match(/\.send\(\s*?userName\s*?\)/g), "Your code should use the <code>send</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('sendMessage').onclick=function(){
|
||||
|
||||
var userName=document.getElementById('name').value;
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Friends</h1>
|
||||
<p class="message box">
|
||||
Reply from Server will be here
|
||||
</p>
|
||||
<p>
|
||||
<label for="name">Your name:
|
||||
<input type="text" id="name"/>
|
||||
</label>
|
||||
<button id="sendMessage">
|
||||
Send Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be7
|
||||
title: Pre-filter JSON to Get the Data You Need
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Pré-filtre JSON para obter os dados de que você precisa
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Se você não quiser renderizar todas as fotos de gatos que você recebe da FreeCodeCamp Cat Photo API, é possível pré-filtrar o JSON antes de fazer um loop por ele. Dado que os dados JSON são armazenados em uma matriz, você pode usar o método <code>filter</code> para filtrar o gato cuja chave "id" tem um valor de 1. Aqui está o código para fazer isso: <blockquote> json = json.filter (function (val) { <br> retorno (val.id! == 1); <br> }); </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione o código para <code>filter</code> os dados do json para remover o gato com o valor "id" de 1. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve usar o método de <code>filter</code> .
|
||||
testString: 'assert(code.match(/json\.filter/g), "Your code should use the <code>filter</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>"
|
||||
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
|
||||
|
||||
html += "</div>"
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be6
|
||||
title: Render Images from Data Sources
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Renderizar imagens de fontes de dados
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Os últimos desafios mostraram que cada objeto no array JSON contém uma chave <code>imageLink</code> com um valor que é o URL da imagem de um gato. Quando você está circulando por esses objetos, você pode usar essa propriedade <code>imageLink</code> para exibir essa imagem em um elemento <code>img</code> . Aqui está o código que faz isso: <code>html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione código para usar os <code>imageLink</code> e <code>altText</code> propriedades em uma <code>img</code> tag. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Você deve usar a propriedade <code>imageLink</code> para exibir as imagens.
|
||||
testString: 'assert(code.match(/val\.imageLink/g), "You should use the <code>imageLink</code> property to display the images.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
html += "</div><br>";
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user