chore(i18n,curriculum): update translations (#43178)
This commit is contained in:
camperbot
GitHub
@ -2,7 +2,6 @@
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: 將網格劃分爲區域模板
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
|
||||
forumTopicId: 301130
|
||||
dashedName: divide-the-grid-into-an-area-template
|
||||
---
|
||||
|
||||
@ -33,11 +33,15 @@ io.use(
|
||||
);
|
||||
```
|
||||
|
||||
記得要把 `key` 和 `store` 加到 app 的 `session` 中間件。 這樣，*SocketIO* 才知道該對哪個 session 執行此配置。
|
||||
請注意，爲 Socket.IO 配置 Passport 認證與我們爲 API 配置的 `session` 中間件非常相似。 這是因爲它們旨在使用相同的身份驗證方法 — — 從 cookie 獲取會話 id 並驗證它。
|
||||
|
||||
以前，當我們配置 `session` 中間件的時候，我們沒有爲 session 明確設置 cookie 名稱（`key`）。 這是因爲 `session` 包使用了默認值。 現在我們已經添加了另一個需要從 cookie 訪問相同值的軟件包， 我們需要在兩個配置對象中設置 `key` 值。
|
||||
|
||||
請將帶有 cookie 名稱的 `key` 添加到匹配 Socket.IO 密鑰的 `session` 中間件。 另外，將 `store` 引用添加到選項中，靠近我們設置 `saveUninitialized: true` 的位置。 這樣，Socket.IO 才知道與哪個 session 關聯。
|
||||
|
||||
<hr />
|
||||
|
||||
接下來，我們可以定義 `success` 與 `fail` 的回調函數：
|
||||
接下來，定義 `success` 與 `fail` 回調函數：
|
||||
|
||||
```js
|
||||
function onAuthorizeSuccess(data, accept) {
|
||||
@ -53,15 +57,15 @@ function onAuthorizeFail(data, message, error, accept) {
|
||||
}
|
||||
```
|
||||
|
||||
現在，我們可以通過 `socket.request.user` 訪問用戶數據。 爲此，你可以這樣做：
|
||||
現在，我們可以通過 `socket.request.user` 訪問用戶對象。 例如，你可以這樣做：
|
||||
|
||||
```js
|
||||
console.log('user ' + socket.request.user.name + ' connected');
|
||||
```
|
||||
|
||||
這樣，我們可以在 console 裏看到誰連接到了我們的服務器。
|
||||
它將在服務器控制檯記錄已連接的用戶！
|
||||
|
||||
完成上述要求後，請提交你的頁面鏈接。 如果你遇到了問題，可以參考[這裏](https://gist.github.com/camperbot/1414cc9433044e306dd7fd0caa1c6254)的答案。
|
||||
完成以上要求後，請提交你的頁面鏈接。 如果你遇到了問題，可以參考[這裏](https://gist.github.com/camperbot/1414cc9433044e306dd7fd0caa1c6254)的答案。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -13,9 +13,9 @@ dashedName: test-for-truthiness
|
||||
`isTrue()` 僅當給出的值爲 Boolean 的 `true` 時可以通過測試；`isNotTrue()` 則會在給出除 `true` 以外的值時通過測試。
|
||||
|
||||
```js
|
||||
assert.isTrue(true, 'this will pass with the boolean value true');
|
||||
assert.isTrue('true', 'this will NOT pass with the string value "true"');
|
||||
assert.isTrue(1, 'this will NOT pass with the number value 1');
|
||||
assert.isTrue(true, 'This will pass with the boolean value true');
|
||||
assert.isTrue('true', 'This will NOT pass with the string value "true"');
|
||||
assert.isTrue(1, 'This will NOT pass with the number value 1');
|
||||
```
|
||||
|
||||
`isFalse()` 和 `isNotFalse()` 同樣存在，與上面提到的兩個方法類似，只不過它們針對值爲 `false` 的布爾值。
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: 将网格划分为区域模板
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
|
||||
forumTopicId: 301130
|
||||
dashedName: divide-the-grid-into-an-area-template
|
||||
---
|
||||
|
||||
@ -33,11 +33,15 @@ io.use(
|
||||
);
|
||||
```
|
||||
|
||||
记得要把 `key` 和 `store` 加到 app 的 `session` 中间件。 这样，*SocketIO* 才知道该对哪个 session 执行此配置。
|
||||
请注意，为 Socket.IO 配置 Passport 认证与我们为 API 配置的 `session` 中间件非常相似。 这是因为它们旨在使用相同的身份验证方法 — — 从 cookie 获取会话 id 并验证它。
|
||||
|
||||
以前，当我们配置 `session` 中间件的时候，我们没有为 session 明确设置 cookie 名称（`key`）。 这是因为 `session` 包使用了默认值。 现在我们已经添加了另一个需要从 cookie 访问相同值的软件包， 我们需要在两个配置对象中设置 `key` 值。
|
||||
|
||||
请将带有 cookie 名称的 `key` 添加到匹配 Socket.IO 密钥的 `session` 中间件。 另外，将 `store` 引用添加到选项中，靠近我们设置 `saveUninitialized: true` 的位置。 这样，Socket.IO 才知道与哪个 session 关联。
|
||||
|
||||
<hr />
|
||||
|
||||
接下来，我们可以定义 `success` 与 `fail` 的回调函数：
|
||||
接下来，定义 `success` 与 `fail` 回调函数：
|
||||
|
||||
```js
|
||||
function onAuthorizeSuccess(data, accept) {
|
||||
@ -53,15 +57,15 @@ function onAuthorizeFail(data, message, error, accept) {
|
||||
}
|
||||
```
|
||||
|
||||
现在，我们可以通过 `socket.request.user` 访问用户数据。 为此，你可以这样做：
|
||||
现在，我们可以通过 `socket.request.user` 访问用户对象。 例如，你可以这样做：
|
||||
|
||||
```js
|
||||
console.log('user ' + socket.request.user.name + ' connected');
|
||||
```
|
||||
|
||||
这样，我们可以在 console 里看到谁连接到了我们的服务器。
|
||||
它将在服务器控制台记录已连接的用户！
|
||||
|
||||
完成上述要求后，请提交你的页面链接。 如果你遇到了问题，可以参考[这里](https://gist.github.com/camperbot/1414cc9433044e306dd7fd0caa1c6254)的答案。
|
||||
完成以上要求后，请提交你的页面链接。 如果你遇到了问题，可以参考[这里](https://gist.github.com/camperbot/1414cc9433044e306dd7fd0caa1c6254)的答案。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -13,9 +13,9 @@ dashedName: test-for-truthiness
|
||||
`isTrue()` 仅当给出的值为 Boolean 的 `true` 时可以通过测试；`isNotTrue()` 则会在给出除 `true` 以外的值时通过测试。
|
||||
|
||||
```js
|
||||
assert.isTrue(true, 'this will pass with the boolean value true');
|
||||
assert.isTrue('true', 'this will NOT pass with the string value "true"');
|
||||
assert.isTrue(1, 'this will NOT pass with the number value 1');
|
||||
assert.isTrue(true, 'This will pass with the boolean value true');
|
||||
assert.isTrue('true', 'This will NOT pass with the string value "true"');
|
||||
assert.isTrue(1, 'This will NOT pass with the number value 1');
|
||||
```
|
||||
|
||||
`isFalse()` 和 `isNotFalse()` 同样存在，与上面提到的两个方法类似，只不过它们针对值为 `false` 的布尔值。
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: Divide la cuadrícula en una plantilla de área
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
|
||||
forumTopicId: 301130
|
||||
dashedName: divide-the-grid-into-an-area-template
|
||||
---
|
||||
|
||||
@ -43,7 +43,7 @@ assert.deepEqual(
|
||||
);
|
||||
```
|
||||
|
||||
Todos los elementos del primer arreglo deben ser añadidos al segundo arreglo en su orden original.
|
||||
Todos los elementos del primer arreglo deben ser añadidos al segundo arreglo en su orden original. `frankenSplice([1, 2, 3, 4], [], 0)` debe devolver `[1, 2, 3, 4]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]);
|
||||
|
||||
@ -33,13 +33,13 @@ No crees ninguna variable nueva.
|
||||
|
||||
# --hints--
|
||||
|
||||
`studlyCapVar` debe definirse y tener un valor de `10`.
|
||||
`studlyCapVar` debe estar definido y tener un valor de `10`.
|
||||
|
||||
```js
|
||||
assert(typeof studlyCapVar !== 'undefined' && studlyCapVar === 10);
|
||||
```
|
||||
|
||||
`properCamelCase` debe definirse y tener una cadena con valor `A String`.
|
||||
`properCamelCase` debe estar definido y tener una cadena con valor `A String`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -47,25 +47,25 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`titleCaseOver` debe definirse y tener una cadena con valor `9000`.
|
||||
`titleCaseOver` debe estar definido y tener una cadena con valor `9000`.
|
||||
|
||||
```js
|
||||
assert(typeof titleCaseOver !== 'undefined' && titleCaseOver === 9000);
|
||||
```
|
||||
|
||||
`studlyCapVar` debe usar camelCase tanto en las sección de declaración como de asignación.
|
||||
`studlyCapVar` debe usar camelCase tanto en las secciones de declaración como de asignación.
|
||||
|
||||
```js
|
||||
assert(code.match(/studlyCapVar/g).length === 2);
|
||||
```
|
||||
|
||||
`properCamelCase` debe usar camelCase tanto en las sección de declaración como de asignación.
|
||||
`properCamelCase` debe usar camelCase tanto en las secciones de declaración como de asignación.
|
||||
|
||||
```js
|
||||
assert(code.match(/properCamelCase/g).length === 2);
|
||||
```
|
||||
|
||||
`titleCaseOver` debe usar camelCase tanto en las sección de declaración como de asignación.
|
||||
`titleCaseOver` debe usar camelCase tanto en las secciones de declaración como de asignación.
|
||||
|
||||
```js
|
||||
assert(code.match(/titleCaseOver/g).length === 2);
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: iterate-over-all-properties
|
||||
|
||||
# --description--
|
||||
|
||||
Ahora has visto dos tipos de propiedades: <dfn>propiedades directas</dfn> y propiedades `prototype`. Las propiedades directas se definen directamente en la propia instancia del objeto. Y las propiedades `prototype` se definen en el `prototype`.
|
||||
Ahora has visto dos tipos de propiedades: <dfn>propiedades directas</dfn> y propiedades `prototype`. Las propiedades directas se definen directamente en la propia instancia del objeto. Y las propiedades prototype se definen en el `prototype`.
|
||||
|
||||
```js
|
||||
function Bird(name) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17523bc
|
||||
title: Certificato API e microservizi
|
||||
title: Certificato di sviluppo Back End e API
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a553ca864b52e1d8bceea14
|
||||
title: Certificato Visualizzazione Dati
|
||||
title: Certificato Data Visualization
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -9,7 +9,7 @@ tests:
|
||||
title: Controllo del prezzo delle azioni
|
||||
-
|
||||
id: 587d824a367417b2b2512c45
|
||||
title: Pannello messaggi Anonimo
|
||||
title: Pannello messaggi anonimo
|
||||
-
|
||||
id: 5e46f979ac417301a38fb932
|
||||
title: Port Scanner
|
||||
|
||||
@ -9,7 +9,7 @@ tests:
|
||||
title: Costruisci un visualizzatore di Markdown
|
||||
-
|
||||
id: bd7156d8c242eddfaeb5bd13
|
||||
title: Costruisci una Classifica Camper
|
||||
title: Costruisci una Classifica dei Camper
|
||||
-
|
||||
id: bd7155d8c242eddfaeb5bd13
|
||||
title: Costruisci una scatola delle ricette
|
||||
|
||||
@ -9,10 +9,10 @@ tests:
|
||||
title: Convertitore Metrico-Imperiale
|
||||
-
|
||||
id: 587d8249367417b2b2512c42
|
||||
title: Tracciatore di Problemi
|
||||
title: Tracciatore di problemi
|
||||
-
|
||||
id: 587d824a367417b2b2512c43
|
||||
title: Biblioteca Personale
|
||||
title: Biblioteca personale
|
||||
-
|
||||
id: 5e601bf95ac9d0ecd8b94afd
|
||||
title: Risolutore Sudoku
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 606243f50267e718b1e755f4
|
||||
title: Certificato Database Relazionali
|
||||
title: Certificato Database Relazionale
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
@ -18,4 +18,4 @@ tests:
|
||||
title: Database della Tavola Periodica
|
||||
-
|
||||
id: 602da04c22201c65d2a019f4
|
||||
title: Final Boss
|
||||
title: Gioco di indovinare il numero
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: Dividere la griglia in un template area
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
|
||||
forumTopicId: 301130
|
||||
dashedName: divide-the-grid-into-an-area-template
|
||||
---
|
||||
@ -15,25 +14,25 @@ Puoi raggruppare le celle della griglia in un'<dfn>area</dfn> e dare un nome per
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"footer footer footer";
|
||||
"advert footer footer";
|
||||
```
|
||||
|
||||
Il codice qui sopra riunisce le tre celle superiori in un'area denominata `header`, le tre celle inferiori in un'area `footer`, e crea due aree nella riga intermedia; `advert` e `content`. **Nota:** Ogni parola nel codice rappresenta una cella e ogni coppia di virgolette rappresenta una riga. In aggiunta alle etichette personalizzate, puoi usare un punto (`.`) per designare una cella vuota nella griglia.
|
||||
Questo codice raggruppa le celle della griglia in quattro aree; `header`, `advert`, `content` e `footer`. Ogni parola rappresenta una cella e ogni coppia di virgolette rappresenta una riga.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Posiziona il template dell'area in modo che la cella etichettata `advert` diventi una cella vuota.
|
||||
Cambia il template in modo che l'area `footer` copra l'intera riga inferiore. La definizione delle aree non avrà alcun effetto visivo in questo momento. Più tardi, farai usare un'area ad un oggetto per vedere come funziona.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `grid-template-areas` simile all'anteprima ma con `.` al posto dell'area `advert`.
|
||||
La classe `container` dovrebbe avere una proprietà `grid-template-areas` simile all'esempio ma con con l'area `footer` che si espande attraverso tutta la riga più in basso.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(
|
||||
/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
|
||||
/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@ -63,7 +62,7 @@ assert(
|
||||
/* Only change code below this line */
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"footer footer footer";
|
||||
"advert footer footer";
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
@ -99,7 +98,7 @@ assert(
|
||||
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
". content content"
|
||||
"advert content content"
|
||||
"footer footer footer";
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -43,7 +43,7 @@ assert.deepEqual(
|
||||
);
|
||||
```
|
||||
|
||||
Tutti gli elementi del primo array dovrebbero essere aggiunti al secondo array nel loro ordine originale.
|
||||
Tutti gli elementi del primo array dovrebbero essere aggiunti al secondo array nel loro ordine originale. `frankenSplice([1, 2, 3, 4], [], 0)` dovrebbe restituire `[1, 2, 3, 4]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]);
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: iterate-over-all-properties
|
||||
|
||||
# --description--
|
||||
|
||||
Ora hai visto due tipi di proprietà: <dfn>proprietà proprie</dfn> e proprietà di prototipo (`prototype`). Le proprietà proprie sono definite direttamente nell'istanza dell'oggetto. E le proprietà di prototipo sono definite sul `prototype`.
|
||||
Ora hai visto due tipi di proprietà: <dfn>proprietà proprie</dfn> e proprietà di prototipo (`prototype`). Le proprietà proprie sono definite direttamente nell'istanza dell'oggetto. E le proprietà di prototipo sono definite nel `prototype`.
|
||||
|
||||
```js
|
||||
function Bird(name) {
|
||||
|
||||
@ -20,7 +20,7 @@ Puoi aggiungere Bootstrap a qualsiasi app inserendo il seguente codice nella par
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
|
||||
```
|
||||
|
||||
In questo caso, lo abbiamo già aggiunto per te a questa pagina dietro le quinte. Nota che che usare `>` o `/>` per chiudere il tag `link` è accettabile.
|
||||
In questo caso, lo abbiamo già aggiunto per te a questa pagina dietro le quinte. Nota che è accettabile usare sia `>` che `/>` per chiudere il tag `link`.
|
||||
|
||||
Per iniziare, dovremmo annidare tutto il nostro HTML (tranne il tag `link` e l'elemento `style`) in un elemento `div` di classe `container-fluid`.
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: build-a-25--5-clock
|
||||
|
||||
**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/XpKrrW>.
|
||||
|
||||
Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
|
||||
Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai passare tutti i test. Usa il tuo stile personale.
|
||||
|
||||
Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: build-a-drum-machine
|
||||
|
||||
**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/MJyNMd>.
|
||||
|
||||
Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
|
||||
Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai passare tutti i test. Usa il tuo stile personale.
|
||||
|
||||
Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
|
||||
|
||||
@ -18,7 +18,7 @@ Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React,
|
||||
|
||||
**User Story #2:** All'interno di `#drum-machine` posso vedere un elemento con un corrispondente `id="display"`.
|
||||
|
||||
**User Story #3:** Dentro a `#drum-machine` posso vedere 9 elementi tamburo cliccabili, ognuno di classe `drum-pad`, con un id univoco che descrive la clip audio che l'elemento dovrà avviare, e un testo interno che corrisponde a uno dei seguenti tasti sulla tastiera: `Q` `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. I tamburi DEVONO essere in questo ordine.
|
||||
**User Story #3:** Dentro a `#drum-machine` posso vedere 9 elementi tamburo cliccabili, ognuno di classe `drum-pad`, con un id univoco che descrive la clip audio che l'elemento dovrà avviare, e un testo interno che corrisponde a uno dei seguenti tasti sulla tastiera: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. I tamburi DEVONO essere in questo ordine.
|
||||
|
||||
**User Story #4:** All'interno di ogni `.drum-pad`, ci dovrebbe essere un elemento HTML5 `audio` che ha un attributo `src` che indica una clip audio, un nome di classe `clip` e un id corrispondente al testo interno del `.drum-pad` genitore (ad es. `id="Q"`, `id="W"`, `id="E"` ecc.).
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: build-a-javascript-calculator
|
||||
|
||||
**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/wgGVVX>.
|
||||
|
||||
Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
|
||||
Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai passare tutti i test. Usa il tuo stile personale.
|
||||
|
||||
Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
|
||||
|
||||
@ -26,7 +26,7 @@ Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React,
|
||||
|
||||
**User Story #6:** La mia calcolatrice dovrebbe contenere un elemento per visualizzare i valori con un corrispondente `id="display"`.
|
||||
|
||||
**User Story #7:** In qualsiasi momento, premendo il pulsante `clear` dovrebbero essere cancellati i valori di input e output, e la calcolatrice dovrebbe tornare suo stato iniziale; nell'elemento con l'id `display` dovrebbe essere mostrato 0.
|
||||
**User Story #7:** In qualsiasi momento, premendo il pulsante `clear` dovrebbero essere cancellati i valori di input e output, e la calcolatrice dovrebbe tornare al suo stato iniziale; nell'elemento con l'id `display` dovrebbe essere mostrato 0.
|
||||
|
||||
**User Story #8:** Quando inserisco dei numeri, dovrei essere in grado di vedere il mio input nell'elemento con l'id `display`.
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: build-a-markdown-previewer
|
||||
|
||||
**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/GrZVVO>.
|
||||
|
||||
Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
|
||||
Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai passare tutti i test. Usa il tuo stile personale.
|
||||
|
||||
Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
||||
|
||||
Compila le [user stories](https://en.wikipedia.org/wiki/User_story) qui sotto e fai passare tutti i test. Dalle il tuo stile personale.
|
||||
Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai passare tutti i test. Usa il tuo stile personale.
|
||||
|
||||
Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ Vedi come abbiamo fatto rimbalzare tutti gli elementi del tuo `button`? Li abbia
|
||||
|
||||
Hai appena usato la funzione `.addClass()` di jQuery, che ti permette di aggiungere classi agli elementi.
|
||||
|
||||
Innanzitutto, individuiamo bene gli elementi `div` con la classe `well` utilizzando il selettore `$(".well")`.
|
||||
Innanzitutto, individuiamo gli elementi `div` con la classe `well` utilizzando il selettore `$(".well")`.
|
||||
|
||||
Nota che, proprio come con le dichiarazioni CSS, devi digitare un `.` prima del nome della classe.
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ La variabile `styles` dovrebbe avere una proprietà `border` impostata su un val
|
||||
assert(styles.border === '2px solid purple');
|
||||
```
|
||||
|
||||
Il componente dovrebbe presentare un elemento `div`.
|
||||
Il componente dovrebbe mostrare un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Cliccando sull'elemento `button` dovrebbe essere eseguito il metodo `handleClick` e dovrebbe essere impostare lo stato `text` a `You clicked!`.
|
||||
Cliccando sull'elemento `button` dovrebbe essere eseguito il metodo `handleClick` e dovrebbe impostare lo stato `text` a `You clicked!`.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -40,7 +40,7 @@ Ecco un esempio:
|
||||
|
||||
Definisci una nuova costante `JSX` che esegua il render di un `div` che contenga i seguenti elementi in ordine:
|
||||
|
||||
Un `h1`, un `p`e una lista non ordinata che contiene tre elementi `li`. Puoi includere qualsiasi testo desideri all'interno di ogni elemento.
|
||||
Un `h1`, un `p` e una lista non ordinata che contiene tre elementi `li`. Puoi includere qualsiasi testo desideri all'interno di ogni elemento.
|
||||
|
||||
**Nota:** Quando si visualizzano più elementi come questo, è possibile avvolgerli tutti in parentesi, ma non è strettamente necessario. Nota anche che questa sfida utilizza un tag `div` per avvolgere tutti gli elementi figli all'interno di un singolo elemento genitore. Se rimuovi il `div`, il JSX non sarà più transcodificato. Tienilo a mente, perché questo si applicherà anche quando restituirai elementi JSX in componenti React.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036170
|
||||
title: Creare un componente con state
|
||||
title: Creare un componente con stato
|
||||
challengeType: 6
|
||||
forumTopicId: 301391
|
||||
dashedName: create-a-stateful-component
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: introducing-inline-styles
|
||||
|
||||
# --description--
|
||||
|
||||
Ci sono altri concetti complessi che aggiungono potenti funzionalità al tuo codice React. Ma forse ti stai chiedendo come stilizzare quegli elementi JSX che crei in React. Probabilmente sai che non sarà esattamente come lavorare con HTML a causa del [modo in cui applichi le classi agli elementi JSX](/learn/front-end-development-libraries/react/define-an-html-class-in-jsx).
|
||||
Ci sono altri concetti complessi che aggiungono potenti funzionalità al tuo codice React. Ma forse ti stai chiedendo come stilizzare quegli elementi JSX che crei in React. Probabilmente sai che non sarà esattamente come lavorare con HTML a causa del [modo in cui applichi le classi agli elementi JSX](/italian/learn/front-end-development-libraries/react/define-an-html-class-in-jsx).
|
||||
|
||||
Se importi degli stili da un foglio di stile, non è poi così diverso. Applichi una classe al tuo elemento JSX usando l'attributo `className` e applichi gli stili alla classe nel tuo foglio di stile. Un'altra opzione è quella di applicare degli stili in linea, che sono molto comuni nello sviluppo di ReactJS.
|
||||
|
||||
@ -31,7 +31,6 @@ Vedi come abbiamo usato camelCase nella proprietà `fontSize`? Questo perché Re
|
||||
Aggiungi un attributo `style` al `div`nell'editor di codice per dare al testo un colore rosso e una dimensione del carattere di `72px`.
|
||||
|
||||
Nota che è possibile impostare facoltativamente la dimensione del carattere come un numero, omettendo le unità `px` o scrivendole come `72px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il componente dovrebbe mostrare un elemento `div`.
|
||||
|
||||
@ -33,11 +33,15 @@ io.use(
|
||||
);
|
||||
```
|
||||
|
||||
Assicurati di aggiungere la `key` e lo `store` al middleware `session` montato sull'app. Questo è necessario per dire a *SocketIO* a quale sessione riferirsi.
|
||||
Nota che la configurazione dell'autenticazione Passport per Socket.IO è molto simile a quella che abbiamo preparato per il middleware `session` per l'API. Questo perché utilizzano lo stesso metodo di autenticazione - ottenere l'id di sessione da un cookie e convalidarlo.
|
||||
|
||||
In precedenza, quando abbiamo configurato il middleware `session`, non abbiamo esplicitamente impostato il nome del cookie per la sessione (`key`). Questo perché il pacchetto `session` usava il valore predefinito. Ora che abbiamo aggiunto un altro pacchetto che necessita di accedere allo stesso valore dai cookie, abbiamo bisogno di impostare esplicitamente il valore `key` in entrambi gli oggetti di configurazione.
|
||||
|
||||
Assicurati di aggiungere la `key` con il nome del cookie al middleware `session` che corrisponde alla chiave Socket.IO. Inoltre, aggiungi il riferimento `store` alle opzioni, vicino a dove abbiamo impostato `saveUninitialized: true`. Questo è necessario per dire a Socket.IO a quale sessione deve fare riferimento.
|
||||
|
||||
<hr />
|
||||
|
||||
Ora, definisci le funzioni di callback per `success` e `fail`:
|
||||
Ora definisci le funzioni di callback per `success` e `fail`:
|
||||
|
||||
```js
|
||||
function onAuthorizeSuccess(data, accept) {
|
||||
@ -61,7 +65,7 @@ console.log('user ' + socket.request.user.name + ' connected');
|
||||
|
||||
Scriverà sulla console del server chi si è connesso!
|
||||
|
||||
Invia la tua pagina quando pensi che sia corretto. Se dovessi incontrare degli errori, puoi controllare il progetto fino a questo punto [qui](https://gist.github.com/camperbot/1414cc9433044e306dd7fd0caa1c6254).
|
||||
Invia la tua pagina quando pensi di averlo fatto correttamente. Se dovessi incontrare degli errori, puoi controllare il progetto fino a questo punto [qui](https://gist.github.com/camperbot/1414cc9433044e306dd7fd0caa1c6254).
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -103,7 +107,7 @@ Invia la tua pagina quando pensi che sia corretto. Se dovessi incontrare degli e
|
||||
);
|
||||
```
|
||||
|
||||
passportSocketIo dovrebbe essere richiesta correttamente.
|
||||
passportSocketIo dovrebbe essere richiesto correttamente.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -121,7 +125,7 @@ passportSocketIo dovrebbe essere richiesta correttamente.
|
||||
);
|
||||
```
|
||||
|
||||
passportSocketIo dovrebbe essere configurata correttamente.
|
||||
passportSocketIo dovrebbe essere configurato correttamente.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -10,29 +10,37 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iii---put-me
|
||||
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
Nel prossimo esempio vedremo come inviare i dati in nel corpo di un payload di richiesta. Stiamo per testare una richiesta PUT. L'endpoint `'/travellers'` accetta un oggetto JSON che prende la struttura:
|
||||
Quando testi una richiesta `PUT`, invierai spesso dei dati con essa. I dati che includi con la tua richiesta `PUT` sono chiamati corpo della richiesta.
|
||||
|
||||
```json
|
||||
{
|
||||
"surname": [last name of a traveller of the past]
|
||||
}
|
||||
Per inviare una richiesta `PUT` e un oggetto JSON all'endpoint `'/travellers'`, è possibile utilizzare i metodi `put` e `send` del plugin`chai-http`:
|
||||
|
||||
```js
|
||||
chai
|
||||
.request(server)
|
||||
.put('/travellers')
|
||||
.send({
|
||||
"surname": [last name of a traveller of the past]
|
||||
})
|
||||
...
|
||||
```
|
||||
|
||||
La rotta risponde con:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": [first name], "surname": [last name], "dates": [birth - death years]
|
||||
"name": [first name],
|
||||
"surname": [last name],
|
||||
"dates": [birth - death years]
|
||||
}
|
||||
```
|
||||
|
||||
Vedi il codice del server per maggiori dettagli.
|
||||
Vedi il codice del server per le diverse risposte all'endpoint `'/travellers'`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
All'interno di `tests/2_functional-tests.js`, modifica il test `'send {surname: "Colombo"}'` (`// #3`):
|
||||
All'interno di `tests/2_functional-tests.js`, cambia il test `'Send {surname: "Colombo"}'` (`// #3`) e usa i metodi `put` e `send` per testare l'endpoint `'/travellers'`.
|
||||
|
||||
Invia la seguente risposta JSON come payload:
|
||||
Invia il seguente oggetto JSON con la tua richiesta PUT:
|
||||
|
||||
```json
|
||||
{
|
||||
@ -42,12 +50,12 @@ Invia la seguente risposta JSON come payload:
|
||||
|
||||
Controlla quanto segue, all'interno della callback `request.end`:
|
||||
|
||||
1. `status`
|
||||
2. `type`
|
||||
3. `body.name`
|
||||
4. `body.surname`
|
||||
1. Lo `status` dovrebbe essere `200`
|
||||
2. Il `type` dovrebbe essere `application/json`
|
||||
3. Il `body.name` dovrebbe essere `Cristoforo`
|
||||
4. Il `body.surname` dovrebbe essere `Colombo`
|
||||
|
||||
Segui l'ordine di asserzione indicato sopra - facciamo affidamento su di esso. Assicurati di rimuovere `assert.fail()`, una volta finito.
|
||||
Segui l'ordine di asserzione indicato sopra - facciamo affidamento su di esso. Inoltre, assicurati di rimuovere `assert.fail()` una volta finito.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -65,7 +73,7 @@ Tutti i test dovrebbero essere superati.
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti verificare che 'res.status' sia 200.
|
||||
Dovresti verificare che `res.status` sia 200.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -81,7 +89,7 @@ Dovresti verificare che 'res.status' sia 200.
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti verificare che 'res.type' sia 'application/json'.
|
||||
Dovresti verificare che `res.type` sia `'application/json'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -97,7 +105,7 @@ Dovresti verificare che 'res.type' sia 'application/json'.
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti verificare che 'res.body.name' sia 'Cristoforo''.
|
||||
Dovresti verificare che `res.body.name` sia `'Cristoforo'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -113,7 +121,7 @@ Dovresti verificare che 'res.body.name' sia 'Cristoforo''.
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti verificare che 'res.body.surname' sia 'Colombo''.
|
||||
Dovresti verificare che `res.body.surname` sia `'Colombo'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -13,9 +13,9 @@ Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza
|
||||
`isTrue()` testa per il valore boleano `true` e `isNotTrue()` passa per qualsiasi cosa che non sia il valore booleano `true`.
|
||||
|
||||
```js
|
||||
assert.isTrue(true, 'this will pass with the boolean value true');
|
||||
assert.isTrue('true', 'this will NOT pass with the string value "true"');
|
||||
assert.isTrue(1, 'this will NOT pass with the number value 1');
|
||||
assert.isTrue(true, 'This will pass with the boolean value true');
|
||||
assert.isTrue('true', 'This will NOT pass with the string value "true"');
|
||||
assert.isTrue(1, 'This will NOT pass with the number value 1');
|
||||
```
|
||||
|
||||
Esistono anche `isFalse()` e `isNotFalse()`, si comportano in maniera simile alle loro controparti con true tranne per il fatto che testano per il valore booleano `false`.
|
||||
|
||||
@ -1,15 +1,21 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17523bc
|
||||
title: APIs and Microservices Certificate
|
||||
title: Certificado de APIs e desenvolvimento de back-end
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
- id: bd7158d8c443edefaeb5bdef
|
||||
title: Timestamp Microservice
|
||||
- id: bd7158d8c443edefaeb5bdff
|
||||
title: Request Header Parser Microservice
|
||||
- id: bd7158d8c443edefaeb5bd0e
|
||||
title: URL Shortener Microservice
|
||||
- id: 5a8b073d06fa14fcfde687aa
|
||||
title: Exercise Tracker
|
||||
- id: bd7158d8c443edefaeb5bd0f
|
||||
title: File Metadata Microservice
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bdef
|
||||
title: Microsserviço de timestamp
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bdff
|
||||
title: Microsserviço conversor de requisição de cabeçalho
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bd0e
|
||||
title: Microsserviço redutor de URL
|
||||
-
|
||||
id: 5a8b073d06fa14fcfde687aa
|
||||
title: Rastreador de exercícios
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bd0f
|
||||
title: Microsserviço de metadados de arquivos
|
||||
|
||||
@ -6,16 +6,16 @@ isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: bd7168d8c242eddfaeb5bd13
|
||||
title: Visualize dados com um gráfico de barras
|
||||
title: Visualizar dados com um gráfico de barras
|
||||
-
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualize dados com um gráfico de dispersão
|
||||
title: Visualizar dados com um gráfico de dispersão
|
||||
-
|
||||
id: bd7188d8c242eddfaeb5bd13
|
||||
title: Visualize dados com um mapa de calor
|
||||
title: Visualizar dados com um mapa de calor
|
||||
-
|
||||
id: 587d7fa6367417b2b2512bbf
|
||||
title: Visualize dados com um mapa coroplético
|
||||
title: Visualizar dados com um mapa coroplético
|
||||
-
|
||||
id: 587d7fa6367417b2b2512bc0
|
||||
title: Visualize dados com um diagrama Treemap
|
||||
title: Visualizar dados com um diagrama Treemap
|
||||
|
||||
@ -1,15 +1,21 @@
|
||||
---
|
||||
id: 561acd10cb82ac38a17513bc
|
||||
title: Front End Libraries Certificate
|
||||
title: Certificado de desenvolvimento com bibliotecas de front-end
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
- id: bd7158d8c442eddfaeb5bd13
|
||||
title: Build a Random Quote Machine
|
||||
- id: bd7157d8c242eddfaeb5bd13
|
||||
title: Build a Markdown Previewer
|
||||
- id: 587d7dbc367417b2b2512bae
|
||||
title: Build a Drum Machine
|
||||
- id: bd7158d8c442eddfaeb5bd17
|
||||
title: Build a JavaScript Calculator
|
||||
- id: bd7158d8c442eddfaeb5bd0f
|
||||
title: Build a 25 + 5 Clock
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: Criar uma máquina de citação aleatória
|
||||
-
|
||||
id: bd7157d8c242eddfaeb5bd13
|
||||
title: Criar um pré-visualizador de markdown
|
||||
-
|
||||
id: 587d7dbc367417b2b2512bae
|
||||
title: Criar uma bateria eletrônica
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd17
|
||||
title: Criar uma calculadora JavaScript
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd0f
|
||||
title: Criar um Relógio 25 + 5
|
||||
|
||||
@ -18,19 +18,19 @@ tests:
|
||||
title: Camada de abstração de pesquisa de imagens
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bd0f
|
||||
title: Microserviço de metadados de arquivos
|
||||
title: Microsserviço de metadados de arquivos
|
||||
-
|
||||
id: bd7158d8c443eddfaeb5bdef
|
||||
title: Crie um aplicativo de votação
|
||||
title: Criar um aplicativo de votação
|
||||
-
|
||||
id: bd7158d8c443eddfaeb5bdff
|
||||
title: Crie um aplicativo de coordenação da vida noturna
|
||||
title: Criar um aplicativo de coordenação da vida noturna
|
||||
-
|
||||
id: bd7158d8c443eddfaeb5bd0e
|
||||
title: Faça um gráfico do mercado de ações
|
||||
title: Fazer um gráfico do mercado de ações
|
||||
-
|
||||
id: bd7158d8c443eddfaeb5bd0f
|
||||
title: Gerencie um clube de negociações de livros
|
||||
title: Gerenciar um clube de negociações de livros
|
||||
-
|
||||
id: bd7158d8c443eddfaeb5bdee
|
||||
title: Crie um clone do Pinterest
|
||||
title: Criar um clone do Pinterest
|
||||
|
||||
@ -6,31 +6,31 @@ isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: bd7157d8c242eddfaeb5bd13
|
||||
title: Crie um pré-visualizador de markdown
|
||||
title: Criar um pré-visualizador de markdown
|
||||
-
|
||||
id: bd7156d8c242eddfaeb5bd13
|
||||
title: Crie um painel de estatísticas dos campers
|
||||
title: Criar um painel de estatísticas dos campers
|
||||
-
|
||||
id: bd7155d8c242eddfaeb5bd13
|
||||
title: Crie uma caixa de receitas
|
||||
title: Criar uma caixa de receitas
|
||||
-
|
||||
id: bd7154d8c242eddfaeb5bd13
|
||||
title: Crie o Jogo da Vida
|
||||
title: Criar o Jogo da Vida
|
||||
-
|
||||
id: bd7153d8c242eddfaeb5bd13
|
||||
title: Crie um jogo de RPG do tipo Dungeon Crawler
|
||||
title: Criar um jogo de RPG do tipo Dungeon Crawler
|
||||
-
|
||||
id: bd7168d8c242eddfaeb5bd13
|
||||
title: Visualize dados com um gráfico de barras
|
||||
title: Visualizar dados com um gráfico de barras
|
||||
-
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualize dados com um gráfico de dispersão
|
||||
title: Visualizar dados com um gráfico de dispersão
|
||||
-
|
||||
id: bd7188d8c242eddfaeb5bd13
|
||||
title: Visualize dados com um mapa de calor
|
||||
title: Visualizar dados com um mapa de calor
|
||||
-
|
||||
id: bd7198d8c242eddfaeb5bd13
|
||||
title: Mostrar contiguidade nacional com um gráfico direcionado de força
|
||||
-
|
||||
id: bd7108d8c242eddfaeb5bd13
|
||||
title: Mapeamento de dados através do mundo
|
||||
title: Mapear dados através do mundo
|
||||
|
||||
@ -6,31 +6,31 @@ isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: bd7158d8c242eddfaeb5bd13
|
||||
title: Crie uma página de portfólio pessoal
|
||||
title: Criar uma página de portfólio pessoal
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: Crie uma máquina de citação aleatória
|
||||
title: Criar uma máquina de citação aleatória
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd0f
|
||||
title: Construa um relógio de 25 + 5
|
||||
title: Criar um Relógio 25 + 5
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd17
|
||||
title: Crie uma calculadora JavaScript
|
||||
title: Criar uma calculadora JavaScript
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd10
|
||||
title: Exibir o clima local
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd1f
|
||||
title: Use a API de JSON do TwitchTV
|
||||
title: Usar a API de JSON do TwitchTV
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd18
|
||||
title: Estilize stories do Camper News
|
||||
title: Estilizar stories do Camper News
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd19
|
||||
title: Crie um visualizador da Wikipédia
|
||||
title: Criar um visualizador da Wikipédia
|
||||
-
|
||||
id: bd7158d8c442eedfaeb5bd1c
|
||||
title: Crie um jogo da velha
|
||||
title: Criar um jogo da velha
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd1c
|
||||
title: Crie um Genius
|
||||
title: Criar um Genius
|
||||
|
||||
@ -6,16 +6,16 @@ isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd18
|
||||
title: Crie uma página de homenagem
|
||||
title: Criar uma página de homenagem
|
||||
-
|
||||
id: 587d78af367417b2b2512b03
|
||||
title: Crie um formulário de pesquisa
|
||||
title: Criar um formulário de pesquisa
|
||||
-
|
||||
id: 587d78af367417b2b2512b04
|
||||
title: Crie uma página inicial para um produto
|
||||
title: Criar uma página inicial para um produto
|
||||
-
|
||||
id: 587d78b0367417b2b2512b05
|
||||
title: Crie uma página de documentação técnica
|
||||
title: Criar uma página de documentação técnica
|
||||
-
|
||||
id: bd7158d8c242eddfaeb5bd13
|
||||
title: Crie uma página de portfólio pessoal
|
||||
title: Criar uma página de portfólio pessoal
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad82fee1322bd9aedf08721
|
||||
title: Diferenças entre unidades absolutas e relativas
|
||||
title: Diferenciar entre unidades absolutas e relativas
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN66JSL'
|
||||
forumTopicId: 301089
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: delete-html-elements
|
||||
|
||||
A tela do nosso telefone não possui muito espaço vertical.
|
||||
|
||||
Vamos remover os elementos desnecessário para podermos começar a construir nosso CatPhotoApp.
|
||||
Vamos remover os elementos desnecessários para podermos começar a construir nosso CatPhotoApp.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ O HTML5 apresenta tags HTML mais descritivas. Essas tags incluem `main`, `header
|
||||
|
||||
Essas tags conferem uma estrutura descritiva ao seu HTML, tornam seu HTML mais fácil de ler e ajudam com a otimização dos mecanismos de busca (SEO) e com a acessibilidade. A tag `main` do HTML5 ajuda os mecanismos de busca e outros desenvolvedores a encontrar o conteúdo principal de sua página.
|
||||
|
||||
Vemos abaixo um exemplo de uso de um elemento `main` com dois elementos filhos dentre dele:
|
||||
Vemos abaixo um exemplo de uso de um elemento `main` com dois elementos filhos dentro dele:
|
||||
|
||||
```html
|
||||
<main>
|
||||
@ -53,7 +53,7 @@ O elemento `p` deve conter as primeiras palavras do texto adicional `kitty ipsum
|
||||
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
O seu código deve ter um elemento `main`.
|
||||
O código deve ter um elemento `main`.
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: say-hello-to-html-elements
|
||||
|
||||
# --description--
|
||||
|
||||
Bem-vindo aos desafios sobre HTML da freeCodeCamp. Eles guiarão você no aprendizado sobre desenvolvimento web.
|
||||
Boas-vindas aos desafios de código em HTML do freeCodeCamp. Eles guiarão você no aprendizado sobre desenvolvimento web.
|
||||
|
||||
Em primeiro lugar, você construirá uma página simples usando HTML. Você poderá editar o código em seu editor, que se encontra incorporado a esta página.
|
||||
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: Dividir o grid em áreas
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
|
||||
forumTopicId: 301130
|
||||
dashedName: divide-the-grid-into-an-area-template
|
||||
---
|
||||
|
||||
@ -43,7 +43,7 @@ assert.deepEqual(
|
||||
);
|
||||
```
|
||||
|
||||
Todos os elementos do primeiro array devem ser adicionados no segundo array em suas ordens originais.
|
||||
Todos os elementos do primeiro array devem ser adicionados no segundo array em suas ordens originais. `frankenSplice([1, 2, 3, 4], [], 0)` deve retornar `[1, 2, 3, 4]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244df
|
||||
title: Várias opções idênticas em instruções switch
|
||||
title: Lidar com várias opções idênticas em instruções switch
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cdBKWCV'
|
||||
forumTopicId: 18242
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: iterate-over-all-properties
|
||||
|
||||
# --description--
|
||||
|
||||
Até agora você já viu dois tipos de propriedades: as propriedades <dfn>own properties</dfn> e `prototype`. Propriedades próprias (ou Own properties) são definidas diretamente na própria instância do objeto. E as propriedades `prototype` são definidas no `prototype`.
|
||||
Até agora você já viu dois tipos de propriedades: as propriedades <dfn>own properties</dfn> e `prototype`. Propriedades próprias (ou Own properties) são definidas diretamente na própria instância do objeto. E as propriedades do protótipo são definidas em `prototype`.
|
||||
|
||||
```js
|
||||
function Bird(name) {
|
||||
|
||||
@ -29,7 +29,7 @@ Você deve ter o total de 6 elementos `button`.
|
||||
assert($('button') && $('button').length > 5);
|
||||
```
|
||||
|
||||
Todos os elementos `button` devem conter tag de fechamento.
|
||||
Todos os elementos `button` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -12,7 +12,7 @@ dashedName: add-font-awesome-icons-to-all-of-our-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Font Awesome é uma biblioteca conveniente de ícones. Estes ícones podem ser fontes da web ou gráficos vetoriais. Estes ícones são tratados assim como as fontes. Você pode especificar seu tamanho utilizando pixels, e eles vão assumir o tamanho de fonte dos elementos pais do HTML.
|
||||
Font Awesome é uma biblioteca conveniente de ícones. Estes ícones podem ser fontes da web ou gráficos vetoriais. Estes ícones são tratados assim como as fontes. Você pode especificar seu tamanho utilizando pixels, e eles irão assumir o tamanho de fonte de seus elementos HTML parentes.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ dashedName: add-font-awesome-icons-to-our-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Font Awesome é uma biblioteca conveniente de ícones. Estes ícones podem ser fontes da web ou gráficos vetoriais. Estes ícones são tratados assim como as fontes. Você pode especificar seu tamanho utilizando pixels, e eles vão assumir o tamanho de fonte dos elementos pais do HTML.
|
||||
Font Awesome é uma biblioteca conveniente de ícones. Estes ícones podem ser fontes da web ou gráficos vetoriais. Estes ícones são tratados assim como as fontes. Você pode especificar seu tamanho utilizando pixels, e eles irão assumir o tamanho de fonte de seus elementos HTML parentes.
|
||||
|
||||
Você pode incluir o Font Awesome em qualquer aplicativo, adicionando o seguinte código ao topo do seu HTML:
|
||||
|
||||
|
||||
@ -8,11 +8,11 @@ dashedName: call-out-optional-actions-with-btn-info
|
||||
|
||||
# --description--
|
||||
|
||||
O Bootstrap vem com várias cores predefinidas para botões. A classe `btn-info` é usada para chamar atenção para ações opcionais que o usuário pode tomar.
|
||||
O Bootstrap vem com diversas cores predefinidas para botões. A classe `btn-info` é usada para chamar atenção para ações opcionais que o usuário pode tomar.
|
||||
|
||||
Crie um novo botão do Bootstrap no nível de blocos abaixo do botão `Like` com o texto `Info`, e adicione as classes `btn-info` e `btn-block` do Bootstrap a ele.
|
||||
|
||||
Observe que esses botões ainda precisam das classes `btn` e `btn-block`.
|
||||
Note que esses botões ainda precisam das classes `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -34,7 +34,7 @@ O novo botão deve ter a classe `btn-info`.
|
||||
assert($('button').hasClass('btn-info'));
|
||||
```
|
||||
|
||||
Todos os seus elementos `button` deve ter tags de fechamento.
|
||||
Todos os elementos `button` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -12,7 +12,7 @@ Nós também queremos ser capazes de usar jQuery para selecionar cada botão a p
|
||||
|
||||
Dê a cada um dos botões um id único, começando com `target1` e terminando com `target6`.
|
||||
|
||||
Certifique-se de que `target1` até `target3` estão em `#left-well`, e `target4` até `target6` estão em `#right well`.
|
||||
Certifique-se de que `target1` até `target3` estão em `#left-well`, e `target4` até `target6` estão em `#right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ O Bootstrap vem com diversas cores predefinidas para botões. A classe `btn-dang
|
||||
|
||||
Crie um botão com o texto `Delete` e dê a ele a classe `btn-danger`.
|
||||
|
||||
Observe que esses botões ainda precisam das classes `btn` e `btn-block`.
|
||||
Note que esses botões ainda precisam das classes `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ dashedName: build-a-25--5-clock
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento com `id="break-label"` que contém uma string (por exemplo, "Duração do intervalo").
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-drum-machine
|
||||
|
||||
**Objetivo:** Construa um app [CodePen.io](https://codepen.io) que seja funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/MJyNMd>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** eu devo ser capaz de ver um contêiner externo com um `id="drum-machine"` correspondente que contém todos os outros elementos.
|
||||
|
||||
@ -28,9 +28,9 @@ Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, Reac
|
||||
|
||||
**Especificação de usuário nº 7:** quando um `.drum-pad` é acionado, uma string descrevendo o clipe de áudio associado é exibido como o texto interno do elemento `#display` (cada string precisa ser única).
|
||||
|
||||
Você pode 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`
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ dashedName: build-a-javascript-calculator
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** minha calculadora deve conter um elemento clicável contendo um `=` (sinal de igualdade) com o `id="equals"` correspondente.
|
||||
|
||||
@ -38,7 +38,7 @@ Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, Reac
|
||||
|
||||
**Especificação de usuário nº 12:** eu devo ser capaz de executar qualquer operação (`+`, `-`, `*`, `/`) em números contendo pontos decimais.
|
||||
|
||||
**User Story #13:** Se 2 ou mais operadores forem inseridos consecutivamente, a operação executada deve ser o último operador inserido, excluindo o símbolo de negação (`-`). Por exemplo, se `5 + * 7 =` for inserido, o resultado deve ser `35` (ou seja, `5 * 7`); se `5 * - 5 =` for inserido, o resultado deve ser `-25` (ou seja, `5 * (-5)`).
|
||||
**Especificação de usuário nº 13:** Se 2 ou mais operadores forem inseridos consecutivamente, a operação executada deve ser o último operador inserido, excluindo o símbolo de negação (`-`). Por exemplo, se `5 + * 7 =` for inserido, o resultado deve ser `35` (ou seja, `5 * 7`); se `5 * - 5 =` for inserido, o resultado deve ser `-25` (ou seja, `5 * (-5)`).
|
||||
|
||||
**Especificação de usuário nº 14:** pressionar um operador imediatamente após um `=` deve iniciar um novo cálculo que opera no resultado da avaliação anterior.
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ dashedName: build-a-markdown-previewer
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento `textarea` com o `id="editor"` correspondente.
|
||||
|
||||
@ -28,9 +28,9 @@ Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, Reac
|
||||
|
||||
**Bônus opcional (você não precisa de aprovação nesse teste):** meu pré-visualizador de marcação interpreta o retorno de carro e o renderiza como elementos `br` (quebra de linha).
|
||||
|
||||
Você pode 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`
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento wrapper com o `id="quote-box"` correspondente.
|
||||
|
||||
@ -36,9 +36,9 @@ Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, Reac
|
||||
|
||||
**Especificação de usuário nº 11:** o elemento wrapper `#quote-box` deve ser centralizado horizontalmente. Execute testes com o zoom do navegador em 100% e com a página maximizada.
|
||||
|
||||
Você pode 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`
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
|
||||
**Observação:** o Twitter não permite que links sejam carregados em um iframe. Tente usar o atributo `target="_blank"` ou `target="_top"` no elemento `#tweet-quote` se o seu tweet não carregar. `target="_top"` vai substituir a aba atual para garantir que o seu trabalho foi salvo.
|
||||
|
||||
|
||||
@ -35,7 +35,7 @@ Você deve deixar o `$(document).ready(function() {` no início do seu elemento
|
||||
assert(code.match(/\$\(document\)\.ready\(function\(\)\s?\{/g));
|
||||
```
|
||||
|
||||
Você deve deixar intacto o fechamento `});` da função `document.ready`.
|
||||
Você deve deixar intacto o fechamento `})` da função `document.ready`.
|
||||
|
||||
```js
|
||||
assert(code.match(/.*\s*\}\);/g));
|
||||
|
||||
@ -19,9 +19,9 @@ Primeiro, vamos ter como alvo seus elementos `div` com a classe `well` usando o
|
||||
|
||||
Observe que, assim como com declarações CSS, você digita um `.` antes do nome da classe.
|
||||
|
||||
Em seguida, use a função `.addClass()` do jQuery para adicionar as classes `animated<code> e <code>shake`.
|
||||
Em seguida, use a função `.addClass()` do jQuery para adicionar as classes `animated` e `shake`.
|
||||
|
||||
Por exemplo, você poderia fazer todos os elementos com a classe `text-primary` sacudir adicionando o seguinte ao seu `$(document).ready(function() {`:
|
||||
Por exemplo, você poderia fazer todos os elementos com a classe `text-primary` sacudir adicionando o seguinte à sua `document ready function`:
|
||||
|
||||
```js
|
||||
$(".text-primary").addClass("animated shake");
|
||||
|
||||
@ -17,7 +17,7 @@ Primeiro, vamos tomar como alvo seu elemento `button` com o id `target3` usando
|
||||
|
||||
Note que, assim como as declarações CSS, você digita um `#` antes do nome do id.
|
||||
|
||||
Em seguida use a função `.addClass` do jQuery para adicionar as classes `animated` e `fadeOut`.
|
||||
Em seguida use a função `.addClass()` do jQuery para adicionar as classes `animated` e `fadeOut`.
|
||||
|
||||
Aqui está como você faria o elemento `button` com o id `target6` desaparecer:
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ dashedName: target-even-elements-using-jquery
|
||||
|
||||
Você também pode ter como alvo elementos baseados em suas posições usando os seletores `:odd` ou `:even`.
|
||||
|
||||
Note que jQuery é indexado a zero, o que significa que o primeiro elemento em uma seleção tem a posição 0. Isso pode ser um pouco confuso, pois, contra-intuitivamente, `:odd` seleciona o segundo elemento (position1), fourth element (position 3) e assim por diante.
|
||||
Note que jQuery é indexado a zero, o que significa que o primeiro elemento em uma seleção tem a posição 0. Isso pode ser um pouco confuso, pois, contraintuitivamente, `:odd` seleciona o segundo elemento (position1), fourth element (position 3) e assim por diante.
|
||||
|
||||
Aqui está como você teria como alvo todos os elementos ímpares com a classe `target` e dar a eles as classes:
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ Por exemplo, vamos fazer todos os nossos elementos `button` quicar. Basta adicio
|
||||
$("button").addClass("animated bounce");
|
||||
```
|
||||
|
||||
Note que nós já incluímos ambas as bibliotecas jQuery e Animate.css por trás dos panos para que você possa utilizá-las no editor. Então você está usando jQuery para aplicar a classe `bounce` do Animate.css ao seus elementos `button`.
|
||||
Note que nós já incluímos ambas as bibliotecas jQuery e Animate.css por trás dos panos para que você possa utilizá-las no editor. Então você está usando jQuery para aplicar a classe `bounce` do Animate.css ao seus elementos `button`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -39,7 +39,7 @@ Você deve usar apenas jQuery para adicionar essas classes ao elemento.
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
Seu código jQuery deve estar dentro da função `$(document).ready()`.
|
||||
Seu código jQuery deve estar dentro da função `$(document).ready();`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -18,7 +18,7 @@ O editor de código tem todo o código que você escreveu nesta seção até ago
|
||||
|
||||
# --hints--
|
||||
|
||||
O `AppWrapper` deve ser renderizardo na página.
|
||||
O `AppWrapper` deve ser renderizado na página.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O componente `Presentational` deve renderizar os elementos `h2`, `input`, `button`, e `ul`.
|
||||
O componente `Presentational` deve renderizar os elementos `h2`, `input`, `button` e `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -20,7 +20,7 @@ Finalmente, use o `ul` para mapear em cima do array `messages` e o renderize na
|
||||
|
||||
# --hints--
|
||||
|
||||
O componente `DisplayMessages` deve inicializar com o estado igual a `{ input: "", messages: []}`.
|
||||
O componente `DisplayMessages` deve inicializar com o estado igual a `{ input: "", messages: [] }`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036182
|
||||
title: Adicione estilos em linha no React
|
||||
title: Adicionar estilos em linha no React
|
||||
challengeType: 6
|
||||
forumTopicId: 301378
|
||||
dashedName: add-inline-styles-in-react
|
||||
@ -8,7 +8,7 @@ dashedName: add-inline-styles-in-react
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode ter percebido no último desafio que existem diversas outras diferenças de sintaxe de estilos HTML em linha em adição ao atributo `style` definido para um objeto JavaScript. Primeiro, os nomes de certas propriedades de estilo CSS usam camel case. Por exemplo, o último desafio definiu o tamanho da fonte com `fontSize` ao invés de `font-size`. Palavras com hifens como `font-size` são sintaxes inválidas para propriedades de objeto JavaScript, então React usa camel case. Como regra, qualquer propriedades de estilos com hífen são escritas usando camel case em JSX.
|
||||
Você pode ter percebido no último desafio que existem diversas outras diferenças de sintaxe de estilos HTML em linha em adição ao atributo `style` definido para um objeto JavaScript. Primeiro, os nomes de certas propriedades de estilo CSS usam camel case. Por exemplo, o último desafio definiu o tamanho da fonte com `fontSize` ao invés de `font-size`. Palavras com hifens como `font-size` são sintaxes inválidas para propriedades de objeto JavaScript, então React usa camel case. Como regra, qualquer propriedades de estilos com hífen são escritas usando camel case em JSX.
|
||||
|
||||
Todas as unidades de valor de comprimento das propriedades (como `height`,`width`, e `fontSize`) são assumidos para estar em `px` a não ser que seja especificado outra forma. Se você quiser usar `em`, por exemplo, você envolve o valor e as unidades em aspas, como `{fontSize: "4em"}`. Além dos valores de comprimento que tem como padrão `px`, todas os outros valores de propriedade devem estar entre aspas.
|
||||
|
||||
@ -30,7 +30,7 @@ A variável `styles` devem ter a propriedade `color` definida com o valor `purpl
|
||||
assert(styles.color === 'purple');
|
||||
```
|
||||
|
||||
A variável `styles` devem ter a propriedade `fontSize` definida com o valor `40`.
|
||||
A variável `styles` deve ter a propriedade `fontSize` definida com o valor `40`.
|
||||
|
||||
```js
|
||||
assert(styles.fontSize === 40);
|
||||
|
||||
@ -24,7 +24,7 @@ Assim que você completar os passos acima você deve ser capaz de clicar o botã
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` deve retornar um elemento `div` o qual envolve dois elementos, os elementos `button` e `h1`, nessa ordem.
|
||||
`MyComponent` deve retornar um elemento `div` o qual envolve dois elementos, os elementos button e `h1`, nessa ordem.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: change-inline-css-conditionally-based-on-component-state
|
||||
|
||||
Nesse ponto, você já viu diversas aplicações de renderização condicional e o uso de estilos em linha. Aqui está mais um exemplo que combina ambos esses tópicos. Você também pode renderizar CSS condicionalmente baseado no estado de um componente React. Para fazer isso, você verifica por uma condição, e se essa condição for atendida, você modifica o objeto styles que foi atribuído aos elementos do JSX no método de renderização.
|
||||
|
||||
É importante entender esse paradigma porque é uma mudança dramática da abordagem mais tradicional de aplicar estilos ao modificar diretamente os elementos DOM (o que é muito comum com jQuery, por exemplo). Nessa abordagem, você precisa monitorar quando um elemento mudar e também lidar com a manipulação diretamente. Pode se tornar difícil acompanhar as mudanças, tornando a interface de usuário potencialmente imprevisível. Quando você define um objeto estilo baseado em uma condição, você descreve como a interface deve se parecer com uma função do estado da aplicação. Há um fluxo claro de informação que só avança em uma direção. Esse é o método preferido ao escrever aplicações com React.
|
||||
É importante entender esse paradigma porque é uma mudança dramática da abordagem mais tradicional de aplicar estilos ao modificar diretamente os elementos DOM (o que é muito comum com jQuery, por exemplo). Nessa abordagem, você precisa monitorar quando um elemento mudar e também lidar com a manipulação diretamente. Pode se tornar difícil acompanhar as mudanças, tornando a interface de usuário potencialmente imprevisível. Quando você define um objeto estilo baseado em uma condição, você descreve como a interface deve se parecer com uma função do estado da aplicação. Há um fluxo claro de informação que só avança em uma direção. Esse é o método preferido ao escrever aplicações com React.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O componente `TypesOfFood` deve retornar o component `Fruits`.
|
||||
O componente `TypesOfFood` deve retornar o componente `Fruits`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -55,7 +55,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O componente `Fruits` deve retornar o componente `Vegetables` abaixo do componente `Fruits`.
|
||||
O componente `TypesOfFood` deve retornar o componente `Vegetables` abaixo do componente `Fruits`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -52,7 +52,7 @@ A constante `JSX` deve retornar um elemento `div`.
|
||||
assert(JSX.type === 'div');
|
||||
```
|
||||
|
||||
O `div` deve conter uma tag `h1` como o primeiro elemento.
|
||||
A `div` deve conter uma tag `h1` como o primeiro elemento.
|
||||
|
||||
```js
|
||||
assert(JSX.props.children[0].type === 'h1');
|
||||
@ -64,7 +64,7 @@ A `div` deve conter uma tag `p` como o segundo elemento.
|
||||
assert(JSX.props.children[1].type === 'p');
|
||||
```
|
||||
|
||||
O `div` deve conter uma tag `ul` como o terceiro elemento.
|
||||
A `div` deve conter uma tag `ul` como o terceiro elemento.
|
||||
|
||||
```js
|
||||
assert(JSX.props.children[2].type === 'ul');
|
||||
|
||||
@ -12,7 +12,7 @@ O React é uma biblioteca de visualização de código aberto criada e mantida p
|
||||
|
||||
React usa a sintaxe de extensão do JavaScript chamada JSX que o permite escrever HTML diretamente no JavaScript. Isso possui diversos benefícios. Ela permite a você usar todo o poder programático do JavaScript dentro do HTML, e ajuda a manter o seu código legível. Em grande parte, JSX é semelhante ao HTML que você já aprendeu, no entanto existem algumas diferenças chaves que cobriremos durante esses desafios.
|
||||
|
||||
Por exemplo, porque o JSX é uma extensão sintática de JavaScript, você realmente pode escrever JavaScript diretamente dentro do JSX. Para isso, você simplesmente inclui o código que você quer que seja tratado como JavaScript dentro de chaves: `{'this is treated as JavaScript code'}`. Mantenha isso em mente, já que é utilizado em diversos desafios futuros.
|
||||
Por exemplo, porque o JSX é uma extensão sintática de JavaScript, você realmente pode escrever JavaScript diretamente dentro do JSX. Para isso, você simplesmente inclui o código que você quer que seja tratado como JavaScript dentro de chaves: `{ 'this is treated as JavaScript code' }`. Mantenha isso em mente, já que é utilizado em diversos desafios futuros.
|
||||
|
||||
No entanto, porque JSX não é JavaScript válido, código JSX precisa ser compilado em JavaScript. O transpilador Babel é uma ferramenta popular para esse processo. Para sua conveniência, já está adicionado por trás dos panos para esses desafios. Se por acaso você escrever JSX inválido sintaticamente, você verá o primeiro teste nesses desafios falhar.
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: create-a-stateful-component
|
||||
|
||||
Um dos tópicos mais importantes em React é `state`. State consiste em qualquer dado que sua aplicação precisar saber, que pode ser alterado durante o tempo. Você quer que seus aplicativos respondam a mudanças de estado e apresentem uma interface atualizada quando necessário. React oferece uma boa solução para o gerenciamento de estados de aplicações web modernas.
|
||||
|
||||
Você pode criar um estado em um componente React ao declarar a propriedade `state` na classe do componente no seu `constructor`. Isso inicializa o componente com `state` quando é criado. A propriedade `state` deve ser definida para um `objeto` JavaScript. Declarando, ele se parece com isso:
|
||||
Você pode criar um estado em um componente React ao declarar a propriedade `state` na classe do componente no seu `constructor`. Isso inicializa o componente com `state` quando é criado. A propriedade `state` deve ser definida para um `object` JavaScript. Declarando, ele se parece com isso:
|
||||
|
||||
```jsx
|
||||
this.state = {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036181
|
||||
title: Introducing Inline Styles
|
||||
title: Introduzir estilos em linha
|
||||
challengeType: 6
|
||||
forumTopicId: 301395
|
||||
dashedName: introducing-inline-styles
|
||||
@ -8,33 +8,32 @@ dashedName: introducing-inline-styles
|
||||
|
||||
# --description--
|
||||
|
||||
There are other complex concepts that add powerful capabilities to your React code. But you may be wondering about the more simple problem of how to style those JSX elements you create in React. You likely know that it won't be exactly the same as working with HTML because of [the way you apply classes to JSX elements](/learn/front-end-development-libraries/react/define-an-html-class-in-jsx).
|
||||
Existem outros conceitos complexos que adicionam recursos poderosos ao seu código React. Mas você pode estar se perguntando sobre o problema mais simples de como estilizar esses elementos JSX que você cria em React. Você provavelmente sabe que não será exatamente o mesmo que trabalhar com HTML por causa [da forma como aplica classes aos elementos JSX](/learn/front-end-development-libraries/react/define-an-html-class-in-jsx).
|
||||
|
||||
If you import styles from a stylesheet, it isn't much different at all. You apply a class to your JSX element using the `className` attribute, and apply styles to the class in your stylesheet. Another option is to apply inline styles, which are very common in ReactJS development.
|
||||
Se você importar estilos de uma folha de estilos, não é muito diferente. Você aplica uma classe ao seu elemento JSX usando o atributo `className` e aplica estilos à classe em sua folha de estilos. Outra opção é aplicar estilos em linha, que são muito comuns no desenvolvimento de ReactJS.
|
||||
|
||||
You apply inline styles to JSX elements similar to how you do it in HTML, but with a few JSX differences. Here's an example of an inline style in HTML:
|
||||
Você aplica estilos em linha em elementos JSX similares a como você faz isso em HTML, mas com algumas diferenças em JSX. Aqui está um exemplo de estilo integrado em HTML:
|
||||
|
||||
```jsx
|
||||
<div style="color: yellow; font-size: 16px">Mellow Yellow</div>
|
||||
```
|
||||
|
||||
JSX elements use the `style` attribute, but because of the way JSX is transpiled, you can't set the value to a `string`. Instead, you set it equal to a JavaScript `object`. Here's an example:
|
||||
Elementos JSX usam o atributo `style`, mas por causa da forma como o JSX é transpilado, você não pode definir o valor para uma `string`. Em vez disso, você o definiu para ser igual a um `object` em JavaScript. Exemplo:
|
||||
|
||||
```jsx
|
||||
<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
|
||||
```
|
||||
|
||||
Notice how we camelCase the `fontSize` property? This is because React will not accept kebab-case keys in the style object. React will apply the correct property name for us in the HTML.
|
||||
Percebeu como colocamos em camelCase a propriedade `fontSize`? Isso é porque o React não aceitará chaves hifenizadas (em kebab-case) no objeto de estilo. React aplicará o nome de propriedade correto para nós no HTML.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `style` attribute to the `div` in the code editor to give the text a color of red and font size of `72px`.
|
||||
|
||||
Note that you can optionally set the font size to be a number, omitting the units `px`, or write it as `72px`.
|
||||
Adicione um atributo `style` para o `div` no editor de código para dar ao texto a cor vermelha e tamanho da fonte de `72px`.
|
||||
|
||||
Note que você pode opcionalmente definir o tamanho da fonte como um número. omitindo as unidades `px`, ou escreva-o como `72px`.
|
||||
# --hints--
|
||||
|
||||
The component should render a `div` element.
|
||||
O componente deve renderizar um elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -45,7 +44,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `div` element should have a color of `red`.
|
||||
O elemento `div` deve ter a cor `red`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,7 +55,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `div` element should have a font size of `72px`.
|
||||
O elemento `div` deve ter um tamanho de fonte de `72px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: optimize-re-renders-with-shouldcomponentupdate
|
||||
|
||||
Até agora, se qualquer componente recebe um novo `state` ou novas `props`, ele se renderiza novamente com todos os seus filhos. Normalmente isto está ok. Mas React fornece um método de ciclo de vida que você pode chamar quando componentes filhos recebem um novo `state` ou `props`, e declarar especificamente se os componentes devem atualizar ou não. O método é `shouldComponentUpdate()`, e leva `nextProps` e `nextState` como parâmetros.
|
||||
|
||||
Esse método é uma maneira útil de otimizar o desempenho. Por exemplo, o comportamento padrão é que seu componente renderiza novamente quando recebe novas `props`, mesmo que as `props` não tenham mudado. Você pode usar `shouldComponentUpdate()` para evitar isso comparando as `props`. O método deve retornar um valor `booleano` que indica ao React se deve ou não atualizar o componente. Você pode comparar os "props" atuais (`this.props`) para os próximos props (`nextProps`) para determinar se você precisa atualizar ou não, e retorne `true` ou `false` de acordo.
|
||||
Esse método é uma maneira útil de otimizar o desempenho. Por exemplo, o comportamento padrão é que seu componente renderiza novamente quando recebe novas `props`, mesmo que as `props` não tenham mudado. Você pode usar `shouldComponentUpdate()` para evitar isso comparando as `props`. O método deve retornar um valor `boolean` que indica ao React se deve ou não atualizar o componente. Você pode comparar os "props" atuais (`this.props`) para os próximos props (`nextProps`) para determinar se você precisa atualizar ou não, e retorne `true` ou `false` de acordo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O componente </code>OnlyEvens` deve retornar uma tag <code>h1` que renderiza o valor de `this.props.value`.
|
||||
O componente `OnlyEvens` deve retornar uma tag `h1` que renderiza o valor de `this.props.value`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
|
||||
@ -22,7 +22,7 @@ Você usa **atributos HTML personalizados** criados por você e suportados por R
|
||||
const Welcome = (props) => <h1>Hello, {props.user}!</h1>
|
||||
```
|
||||
|
||||
É padrão chamar esse valor `"props"` e, quando lidar com componentes funcionais sem estado, você basicamente considera isso como um argumento para uma função que retorna JSX. Você pode acessar o valor do argumento no corpo da função. Com componentes de classe, você verá que isto é um pouco diferente.
|
||||
É padrão chamar esse valor `props` e, quando lidar com componentes funcionais sem estado, você basicamente considera isso como um argumento para uma função que retorna JSX. Você pode acessar o valor do argumento no corpo da função. Com componentes de classe, você verá que isto é um pouco diferente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ Componentes do React são passados a `ReactDOM.render()` um pouco diferente dos
|
||||
|
||||
# --instructions--
|
||||
|
||||
Os componentes `Fruits` e `Vegetables` são definidos para você nos bastidores. Renderize ambos os componentes como filhos do componente `TypesOfFood` e, em seguida, renderize `TypesOfFood` para o DOM. Há uma `div` com `id='challenge-node'` disponível para você usar.
|
||||
Os componentes `Fruits` e `Vegetables` são definidos para você nos bastidores. Renderize ambos os componentes como filhos do componente `TypesOfFood` e, em seguida, renderize `TypesOfFood` para o DOM. Há um `div` com `id='challenge-node'` disponível para você usar.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: render-conditionally-from-props
|
||||
|
||||
# --description--
|
||||
|
||||
Até agora, você viu como usar o `if/else`, `&&`, e o operador ternário (`condition ? expressionIfTrue : expressionIfFalse`) para tomar decisões condicionais sobre o que renderizar e quando. No entanto, resta um tópico importante para discutir que permite que você combine todos esses conceitos com outro poderoso recurso React: props. Usar props para renderizar código condicionalmente é muito comum entre desenvolvedores React — isto é, eles usam o valor de uma determinada propriedade para tomar decisões automaticamente sobre o que renderizar.
|
||||
Até agora, você viu como usar a condição `if/else`, `&&` e o operador ternário (`condition ? expressionIfTrue : expressionIfFalse`) para tomar decisões condicionais sobre o que renderizar e quando. No entanto, resta um tópico importante para discutir que permite que você combine todos esses conceitos com outro poderoso recurso React: props. Usar props para renderizar código condicionalmente é muito comum entre desenvolvedores React — isto é, eles usam o valor de uma determinada propriedade para tomar decisões automaticamente sobre o que renderizar.
|
||||
|
||||
Neste desafio, você vai configurar um componente filho para tomar decisões de renderização com base em props. Você também usará o operador ternário, mas você pode ver como vários dos outros conceitos que foram abordados nos últimos desafios poderão ser igualmente úteis neste contexto.
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ Como você esperaria, `ReactDOM.render()` deve ser chamado após as declaraçõe
|
||||
|
||||
# --instructions--
|
||||
|
||||
O editor de código tem um componente JSX simples. Use o método `ReactDOM.render()` para renderizar este componente na página. Você pode passar elementos JSX definidos diretamente como o primeiro argumento e usar `document.getElementById()` para selecionar o nó do DOM onde renderizá-los. Há uma `div` com `id='challenge-node'` disponível para você usar. Certifique-se de não alterar a constante `JSX`.
|
||||
O editor de código tem um componente JSX simples. Use o método `ReactDOM.render()` para renderizar este componente na página. Você pode passar elementos JSX definidos diretamente como o primeiro argumento e usar `document.getElementById()` para selecionar o nó do DOM onde renderizá-los. Há um `div` com `id='challenge-node'` disponível para você usar. Certifique-se de não alterar a constante `JSX`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036185
|
||||
title: Use && para uma forma mais concisa do condicional
|
||||
title: Use && for a More Concise Conditional
|
||||
challengeType: 6
|
||||
forumTopicId: 301413
|
||||
dashedName: use--for-a-more-concise-conditional
|
||||
|
||||
@ -22,15 +22,16 @@ Uma vez que o componente está renderizando informações na página, os usuári
|
||||
|
||||
# --hints--
|
||||
|
||||
O componente `CheckUserAge` deve renderizar com um único elemento `input` e um único elemento</code>button`.</p>
|
||||
O componente `CheckUserAge` deve renderizar com um único elemento `input` e um único elemento`button`.
|
||||
|
||||
<pre><code class="js">assert(
|
||||
```js
|
||||
assert(
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input')
|
||||
.length === 1 &&
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button')
|
||||
.length === 1
|
||||
);
|
||||
`</pre>
|
||||
```
|
||||
|
||||
O state do componente `CheckUserAge` deve ser inicializado com uma propriedade de `userAge` e uma propriedade `input`, ambos definidos com o valor de uma string vazia.
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O componente `TypesOfFood` deve retornar os elementos `h2` e `ul`.
|
||||
O componente `TypesOfFruit` deve retornar os elementos `h2` e `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -36,7 +36,7 @@ Observe que você tem que envolver o objeto literalmente entre parênteses, caso
|
||||
|
||||
# --instructions--
|
||||
|
||||
`MyComponent` tem uma propriedade `visibilty` que foi inicializada como `false`. O método de renderização retorna uma view se o valor de `visibility` for verdadeiro e uma view diferente se for falsa.
|
||||
`MyComponent` tem uma propriedade `visibility` que foi inicializada como `false`. O método de renderização retorna uma view se o valor de `visibility` for verdadeiro e uma view diferente se for falsa.
|
||||
|
||||
Atualmente, não há forma de atualizar a propriedade `visibility` no `state` do componente. O valor deve alternar entre verdadeiro e falso. Há um manipulador de cliques no botão que aciona um método de classe chamado `toggleVisibility()`. Passe uma função para `setState` para definir esse método para que o `state` de `visibility` alterne para o valor oposto quando o método for chamado. Se `visibility` for `false`, o método define para `true`, e vice-versa.
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` deve existir e ser rendizado no DOM.
|
||||
`MyComponent` deve existir e ser renderizado no DOM.
|
||||
|
||||
```js
|
||||
assert(document.getElementById('challenge-node').childNodes.length === 1);
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: copy-an-object-with-object-assign
|
||||
|
||||
# --description--
|
||||
|
||||
Os últimos desafios funcionaram com arrays, mas também existem maneiras de ajudar a impor a imutabilidade do state quando o state for um `object`. Uma ferramenta útil para lidar com objetos é o `Object.assign()`. `Object.assign()` recebe um objeto alvo e objetos fonte e mapeia propriedades dos objetos de origem para o objeto alvo. Qualquer propriedades correspondentes são substituídas por propriedades nos objetos de origem. Esse comportamento é comumente usado para fazer cópias rasas de objetos, passando um objeto vazio como o primeiro argumento seguido do(s) objeto(s) que você deseja copiar. Exemplo:
|
||||
Os últimos desafios funcionaram com arrays, mas também existem maneiras de ajudar a impor a imutabilidade do state quando o state for um `object`. Uma ferramenta útil para lidar com objetos é a utilidade do `Object.assign()`. `Object.assign()` recebe um objeto alvo e objetos fonte e mapeia propriedades dos objetos de origem para o objeto alvo. Qualquer propriedades correspondentes são substituídas por propriedades nos objetos de origem. Esse comportamento é comumente usado para fazer cópias rasas de objetos, passando um objeto vazio como o primeiro argumento seguido do(s) objeto(s) que você deseja copiar. Exemplo:
|
||||
|
||||
```js
|
||||
const newObject = Object.assign({}, obj1, obj2);
|
||||
|
||||
@ -29,7 +29,7 @@ Chamando a função `loginAction` deve retornar um objeto com a propriedade `typ
|
||||
assert(loginAction().type === 'LOGIN');
|
||||
```
|
||||
|
||||
A store deve ser inicializada com um objeto com a propriedade `login` definido como `false`.
|
||||
A store deve ser inicializada com um objeto com a propriedade `login` definida como `false`.
|
||||
|
||||
```js
|
||||
assert(store.getState().login === false);
|
||||
|
||||
@ -18,7 +18,7 @@ O editor de código tem o exemplo anterior, bem como o início de uma função `
|
||||
|
||||
# --hints--
|
||||
|
||||
Chamar a função `loginAction` deve retornar um objeto com a propriedade `type` definida para a string `LOGIN`.
|
||||
Chamar a função `loginAction` deve retornar um objeto com a propriedade type definida para a string `LOGIN`.
|
||||
|
||||
```js
|
||||
assert(loginAction().type === 'LOGIN');
|
||||
|
||||
@ -12,9 +12,9 @@ Até agora você aprendeu como enviar ações para a store do Redux, mas até ag
|
||||
|
||||
# --instructions--
|
||||
|
||||
Há dois criadores de ações básicos, `notesReducer()` e um `addNoteText()`, definidos no editor de código. Finalize o corpo da função `addNodeText()` para que ela retorne um objeto `action`. O objeto deve incluir a propriedade `type` com o valor `ADD_NOTE` e também uma propriedade `text` definida para o dado `note` que foi passado ao criador de ação. Quando você chama o criador de ação, você passará uma informação note específica que você pode acessar para o objeto.
|
||||
Há dois criadores de ações básicos, `notesReducer()` e um `addNoteText()`, definidos no editor de código. Finalize o corpo da função `addNoteText()` para que ela retorne um objeto `action`. O objeto deve incluir a propriedade `type` com o valor `ADD_NOTE` e também uma propriedade `text` definida para o dado `note` que foi passado ao criador de ação. Quando você chama o criador de ação, você passará uma informação note específica que você pode acessar para o objeto.
|
||||
|
||||
Em seguida, termine de escreve a instrução `switch` no `notesReducer()`. Você precisa adicionar um caso que lide com ações do `addNodeText()`. Esse caso deve ser acionado sempre que há uma ação do tipo `ADD_NOTE` e ele deve retornar a propriedade `text` na `action` chegando como o novo `state`.
|
||||
Em seguida, termine de escreve a instrução `switch` no `notesReducer()`. Você precisa adicionar um caso que lide com ações do `addNoteText()`. Esse caso deve ser acionado sempre que há uma ação do tipo `ADD_NOTE` e ele deve retornar a propriedade `text` na `action` chegando como o novo `state`.
|
||||
|
||||
A ação é despachada no final do código. Quando terminar, rode o código e olhe o console. Isso é tudo que é necessário para enviar dados específicos de ações ao store e o usar quando você atualizar o `state` do store.
|
||||
|
||||
@ -31,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Despachar uma ação do tipo `ADD_NOTE` com o criador de ação `addNodeText` deve atualizar o `state` para a string passada para o criador da ação.
|
||||
Despachar uma ação do tipo `ADD_NOTE` com o criador de ação `addNoteText` deve atualizar o `state` para a string passada para o criador da ação.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -18,13 +18,13 @@ O editor de código tem uma store, actions e criadores de actions configurados p
|
||||
|
||||
# --hints--
|
||||
|
||||
Chamar a função `loginUser` deve retornar um objeto com a propriedade `type` definida para a string `LOGIN`.
|
||||
Chamar a função `loginUser` deve retornar um objeto com a propriedade type definida para a string `LOGIN`.
|
||||
|
||||
```js
|
||||
assert(loginUser().type === 'LOGIN');
|
||||
```
|
||||
|
||||
Chamar a função `logoutUser` deve retornar um objeto com a propriedade `type` definida para a string `LOGOUT`.
|
||||
Chamar a função `logoutUser` deve retornar um objeto com a propriedade type definida para a string `LOGOUT`.
|
||||
|
||||
```js
|
||||
assert(logoutUser().type === 'LOGOUT');
|
||||
|
||||
@ -67,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
A função `authReducer` deve lidar com vários tipos de ação com um comando `switch`.
|
||||
A função `authReducer` deve lidar com vários tipos de ação com um comando switch.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -28,7 +28,7 @@ O criador de ação `requestingData` deve retornar um objeto de tipo igual ao va
|
||||
assert(requestingData().type === REQUESTING_DATA);
|
||||
```
|
||||
|
||||
O criador de ação `receivedData` deve retornar um objeto de tipo igual ao valor de `REQUESTING_DATA`.
|
||||
O criador de ação `receivedData` deve retornar um objeto de tipo igual ao valor de `RECEIVED_DATA`.
|
||||
|
||||
```js
|
||||
assert(receivedData('data').type === RECEIVED_DATA);
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: extend-one-set-of-css-styles-to-another-element
|
||||
|
||||
# --description--
|
||||
|
||||
Sass tem um recurso chamado `extend` que faz com que seja fácil pegar emprestado as regras CSS de um elemento e construr a partir delas em outro.
|
||||
Sass tem um recurso chamado `extend` que faz com que seja fácil pegar emprestado as regras CSS de um elemento e construir a partir delas em outro.
|
||||
|
||||
Por exemplo, o bloco abaixo de regras CSS estiliza uma classe `.panel`. Tem um `background-color`, um `height` e um `border`.
|
||||
|
||||
|
||||
@ -16,6 +16,48 @@ Crie um aplicativo full stack em JavaScript que seja funcionalmente semelhante a
|
||||
|
||||
Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`. Como opção, envie também um link para o código-fonte do projeto no campo `GitHub Link`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Suas respostas devem ter as seguintes estruturas.
|
||||
|
||||
Exercício:
|
||||
|
||||
```js
|
||||
{
|
||||
username: "fcc_test"
|
||||
description: "test",
|
||||
duration: 60,
|
||||
date: "Mon Jan 01 1990",
|
||||
_id: "5fb5853f734231456ccb3b05"
|
||||
}
|
||||
```
|
||||
|
||||
Usuário:
|
||||
|
||||
```js
|
||||
{
|
||||
username: "fcc_test",
|
||||
_id: "5fb5853f734231456ccb3b05"
|
||||
}
|
||||
```
|
||||
|
||||
Log:
|
||||
|
||||
```js
|
||||
{
|
||||
username: "fcc_test",
|
||||
count: 1,
|
||||
_id: "5fd01a41c5b5cf05d080502f",
|
||||
log: [{
|
||||
description: "test",
|
||||
duration: 60,
|
||||
date: "Mon Jan 01 1990",
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
**Dica:** para a propriedade `date`, o método `toDateString` da API `Date` pode ser usado para conseguir o resultado esperado.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve fornecer seu próprio projeto, não o exemplo de URL.
|
||||
|
||||
@ -88,7 +88,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
Se você passar um URL inválido que não siga o formato válido `http://www.example.com` , a resposta em JSON conterá `{ error: 'invalid url' }`
|
||||
Se você passar um URL inválido que não siga o formato válido `http://www.example.com`, a resposta em JSON conterá `{ error: 'invalid url' }`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
|
||||
@ -28,7 +28,7 @@ Adicione a versão "2.14.0" do pacote "moment" ao campo `dependencies` do seu ar
|
||||
|
||||
# --hints--
|
||||
|
||||
"dependencies" deve incluir o "moment"
|
||||
As "dependencies" devem incluir o "moment"
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -10,29 +10,37 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iii---put-me
|
||||
|
||||
Lembrando que este projeto está sendo construído a partir do [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), ou pose ser clonado no [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
No próximo exemplo, veremos como enviar dados em uma payload de solicitação (corpo). Vamos testar uma solicitação de PUT. O endpoint `'/travellers'` aceita um objeto JSON que tem essa estrutura:
|
||||
Ao testar uma solicitação de `PUT`, você geralmente envia dados com ela. Os dados que você inclui com sua solicitação de `PUT` são chamados de corpo (body) da solicitação.
|
||||
|
||||
Para enviar uma solicitação de `PUT` e um objeto JSON para o endpoint `'/travellers'`, você pode usar os métodos `put` e `send` do plugin `chai-http`:
|
||||
|
||||
```js
|
||||
chai
|
||||
.request(server)
|
||||
.put('/travellers')
|
||||
.send({
|
||||
"surname": [last name of a traveller of the past]
|
||||
})
|
||||
...
|
||||
```
|
||||
|
||||
A rota responderá com:
|
||||
|
||||
```json
|
||||
{
|
||||
"surname": [last name of a traveller of the past]
|
||||
"name": [first name],
|
||||
"surname": [last name],
|
||||
"dates": [birth - death years]
|
||||
}
|
||||
```
|
||||
|
||||
A rota responde com:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": [first name], "surname": [last name], "dates": [birth - death years]
|
||||
}
|
||||
```
|
||||
|
||||
Veja o código do servidor para mais detalhes.
|
||||
Consulte o código do servidor para ver as diferentes respostas para o endpoint `'/travellers'`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dentro de `tests/2_functional-tests.js`, altere o teste `'send {surname: "Colombo"}'` test (`// #3`):
|
||||
Em `tests/2_functional-tests.js`, altere o teste `'Send {surname: "Colombo"}'` (`// #3`) e use os métodos `put` e `send` para testar o endpoint `'/travellers'`.
|
||||
|
||||
Enviar a seguinte resposta JSON como payload:
|
||||
Envie o objeto JSON a seguir com a sua solicitação de PUT:
|
||||
|
||||
```json
|
||||
{
|
||||
@ -40,14 +48,14 @@ Enviar a seguinte resposta JSON como payload:
|
||||
}
|
||||
```
|
||||
|
||||
Verifique o seguinte, dentro da função de callback de `request.end`:
|
||||
Verifique o seguinte dentro da função de callback de `request.end`:
|
||||
|
||||
1. `status`
|
||||
2. `type`
|
||||
3. `body.name`
|
||||
4. `body.surname`
|
||||
1. O `status` deve ser `200`
|
||||
2. O `type` deve ser `application/json`
|
||||
3. O `body.name` deve ser `Cristoforo`
|
||||
4. O `body.surname` deve ser `Colombo`
|
||||
|
||||
Siga a ordem de declarações acima, pois dependemos disso. Não se esqueça de remover `assert.fail()` assim que o teste terminar.
|
||||
Siga a ordem de declarações acima, pois dependemos disso. Além disso, não se esqueça de remover `assert.fail()` assim que o teste terminar.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -65,7 +73,7 @@ Todos os testes devem passar.
|
||||
);
|
||||
```
|
||||
|
||||
Você deve testar se 'res.status' será 200.
|
||||
Você deve testar se `res.status` será 200.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -81,7 +89,7 @@ Você deve testar se 'res.status' será 200.
|
||||
);
|
||||
```
|
||||
|
||||
Você deve testar se 'res.type' será 'application/json'.
|
||||
Você deve testar se `res.type` será `'application/json'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -97,7 +105,7 @@ Você deve testar se 'res.type' será 'application/json'.
|
||||
);
|
||||
```
|
||||
|
||||
Você deve testar se 'res.body.name' será 'Cristoforo'.
|
||||
Você deve testar se `res.body.name` será `'Cristoforo'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -113,7 +121,7 @@ Você deve testar se 'res.body.name' será 'Cristoforo'.
|
||||
);
|
||||
```
|
||||
|
||||
Você deve testar se 'res.body.surname' será 'Colombo'.
|
||||
Você deve testar se `res.body.surname` será `'Colombo'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -8,15 +8,17 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-met
|
||||
|
||||
# --description--
|
||||
|
||||
Lembrando que este projeto está sendo construído a partir do [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), ou pose ser clonado no [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). Este exercício é semelhante ao anterior. Vejamos mais detalhes aqui.
|
||||
Lembrando que este projeto está sendo construído a partir do [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), ou pose ser clonado no [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
Agora que vimos como é feito, é a sua vez de fazer do zero.
|
||||
Este exercício é semelhante ao anterior.
|
||||
|
||||
Agora que você sabe como testar uma solicitação de `PUT`, é sua vez de fazer isso do zero.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dentro de `tests/2_functional-tests.js`, altere o teste `'send {surname: "da Verrazzano"}'` test (`// #4`):
|
||||
Em `tests/2_functional-tests.js`, altere o teste `'Send {surname: "da Verrazzano"}'` (`// #4`) e use os métodos `put` e `send` para testar o endpoint `'/travellers'`.
|
||||
|
||||
Envie a resposta em JSON a seguir como payload para a rota `/travellers`:
|
||||
Envie o objeto JSON a seguir com a sua solicitação de PUT:
|
||||
|
||||
```json
|
||||
{
|
||||
@ -24,14 +26,14 @@ Envie a resposta em JSON a seguir como payload para a rota `/travellers`:
|
||||
}
|
||||
```
|
||||
|
||||
Verifique o seguinte, dentro de uma função de callback de `request.end`:
|
||||
Verifique o seguinte dentro da função de callback de `request.end`:
|
||||
|
||||
1. `status`
|
||||
2. `type`
|
||||
3. `body.name`
|
||||
4. `body.surname`
|
||||
1. O `status` deve ser `200`
|
||||
2. O `type` deve ser `application/json`
|
||||
3. O `body.name` deve ser `Giovanni`
|
||||
4. O `body.surname` deve ser `da Verrazzano`
|
||||
|
||||
Siga a ordem de declarações acima, pois dependemos disso. Não se esqueça de remover `assert.fail()` assim que o teste terminar.
|
||||
Siga a ordem de declarações acima, pois dependemos disso. Além disso, não se esqueça de remover `assert.fail()` assim que o teste terminar.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -49,7 +51,7 @@ Todos os testes devem passar
|
||||
);
|
||||
```
|
||||
|
||||
Você deve testar se 'res.status' será 200
|
||||
Você deve testar que `res.status` seja 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -65,7 +67,7 @@ Você deve testar se 'res.status' será 200
|
||||
);
|
||||
```
|
||||
|
||||
Você deve testar se 'res.type' será 'application/json'
|
||||
Você deve testar se `res.type` será `'application/json'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -81,7 +83,7 @@ Você deve testar se 'res.type' será 'application/json'
|
||||
);
|
||||
```
|
||||
|
||||
Você deve testar se 'res.body.name' será 'Giovanni'
|
||||
Você deve testar se `res.body.name` será `'Giovanni'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -97,7 +99,7 @@ Você deve testar se 'res.body.name' será 'Giovanni'
|
||||
);
|
||||
```
|
||||
|
||||
Você deve testar se 'res.body.surname' será 'da Verrazzano'
|
||||
Você deve testar se `res.body.surname` será `'da Verrazzano'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -12,9 +12,9 @@ Lembrando que este projeto está sendo construído a partir do [Replit](https://
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dentro de `tests/2_functional-tests.js`, altere o teste `'Test GET /hello with your name'` (`// #2`) para afirmar o `status` e a resposta `text` para fazer o teste passar.
|
||||
Dentro de `tests/2_functional-tests.js`, altere o teste `'Test GET /hello with your name'` (`// #2`) para afirmar o `status` e o `text` da resposta para fazer o teste passar.
|
||||
|
||||
Envie seu nome na consulta, acrescentando `?name=<your_name>` à rota. O endpoint responde com `'hello <your_name>'`.
|
||||
Envie seu nome como consulta do URL, acrescentando `?name=<your_name>` à rota. O endpoint responde com `'hello <your_name>'`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -32,7 +32,7 @@ Todos os testes devem passar
|
||||
);
|
||||
```
|
||||
|
||||
Você deve testar se 'res.status' == 200
|
||||
Você deve testar que `res.status` == 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -48,7 +48,7 @@ Você deve testar se 'res.status' == 200
|
||||
);
|
||||
```
|
||||
|
||||
Você deve testar se 'res.text' == 'hello Guest'
|
||||
Você deve testar se `res.text` == `'hello <your_name>'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -10,37 +10,36 @@ dashedName: run-functional-tests-on-api-endpoints-using-chai-http
|
||||
|
||||
Lembrando que este projeto está sendo construído a partir do [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), ou pose ser clonado no [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
O Mocha permite testar operações assíncronas. Há uma pequena (GRANDE) diferença. Você consegue identificar?
|
||||
O Mocha permite que você teste operações assíncronas, como chamadas para endpoints de API, com um plugin chamado `chai-http`.
|
||||
|
||||
Podemos testar os endpoints de API usando um plugin, chamado `chai-http`. Vamos ver como isso funciona. E lembre-se: as chamadas de API são assíncronas.
|
||||
|
||||
A seguir, vemos um exemplo de um teste usando `chai-http` para a suite `'GET /hello?name=[name] => "hello [name]"'`. O teste envia uma string de nome em uma string de consulta de url (`?name=John`) usando uma solicitação de `GET` para o `server`. Na função de callback do método `end`, o objeto de resposta (`res`) é recebido e contém a propriedade `status`. O primeiro `assert.equal` verifica se o status é igual a `200`. O segundo `assert.equal` verifica se a string de resposta (`res.text`) é igual a `"hello John"`.
|
||||
A seguir, vemos um exemplo de um teste usando `chai-http` para a suite chamada `'GET /hello?name=[name] => "hello [name]"'`:
|
||||
|
||||
```js
|
||||
suite('GET /hello?name=[name] => "hello [name]"', function () {
|
||||
test("?name=John", function (done) {
|
||||
test('?name=John', function (done) {
|
||||
chai
|
||||
.request(server)
|
||||
.get("/hello?name=John")
|
||||
.get('/hello?name=John')
|
||||
.end(function (err, res) {
|
||||
assert.equal(res.status, 200, "response status should be 200");
|
||||
assert.equal(
|
||||
res.text,
|
||||
"hello John",
|
||||
'response should be "hello John"'
|
||||
);
|
||||
assert.equal(res.status, 200, 'Response status should be 200');
|
||||
assert.equal(res.text, 'hello John', 'Response should be "hello John"');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Observe o parâmetro `done` na função de callback do teste. Chamá-la no final sem um argumento é necessário para sinalizar uma conclusão assíncrona bem-sucedida.
|
||||
O teste envia uma solicitação de `GET` para o servidor com um nome (name) como a string de consulta do URL (`?name=John`). Na função de callback do método `end`, o objeto de resposta (`res`) é recebido e contém a propriedade `status`.
|
||||
|
||||
O primeiro `assert.equal` verifica se o status é igual a `200`. O segundo `assert.equal` verifica se a string de resposta (`res.text`) é igual a `"hello John"`.
|
||||
|
||||
Além disso, observe o parâmetro `done` na função de callback do teste. Chamá-la sem um argumento no final de um teste é necessário para sinalizar que a operação assíncrona está completa.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dentro de `tests/2_functional-tests.js`, altere o teste `'Test GET /hello with no name'` (`// #1`) para afirmar o `status` e a resposta `text` para fazer o teste passar. Não altere os argumentos passados às afirmações.
|
||||
Dentro de `tests/2_functional-tests.js`, altere o teste `'Test GET /hello with no name'` (`// #1`) para afirmar o `status` e o `text` da resposta para fazer o teste passar. Não altere os argumentos passados para as assertivas.
|
||||
|
||||
Não deve haver nome na consulta. O endpoint responde com `hello Guest`.
|
||||
Não deve haver consulta de URL. Não deve haver consulta de name no URL. O endpoint responde com `hello Guest`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -58,7 +57,7 @@ Todos os testes devem passar
|
||||
);
|
||||
```
|
||||
|
||||
Você deve testar se 'res.status' == 200
|
||||
Você deve testar que `res.status` == 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -74,7 +73,7 @@ Você deve testar se 'res.status' == 200
|
||||
);
|
||||
```
|
||||
|
||||
Você deve testar se 'res.text' == 'hello Guest'
|
||||
Você deve testar se `res.text` == `'hello Guest'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user