chore(i18n,curriculum): processed translations (#43008)
This commit is contained in:
camperbot
GitHub
@ -8,24 +8,28 @@ dashedName: reuse-patterns-using-capture-groups
|
||||
|
||||
# --description--
|
||||
|
||||
Algunos patrones que busques aparecerán múltiples veces en una cadena. Es un desperdicio repetir manualmente esa expresión regular. Existe una mejor forma de especificar que tienes múltiples subcadenas repetidas en tu cadena.
|
||||
|
||||
Puedes buscar subcadenas repetidas utilizando <dfn>grupos de captura</dfn>. Los paréntesis, `(` y `)`, son usados para encontrar subcadenas repetidas. Introduces la expresión regular del patrón que se repetirá entre los paréntesis.
|
||||
|
||||
Para especificar donde aparecerá esa cadena repetida, utilizarás una barra invertida (`\`) y luego un número. Este número inicia en 1 e incrementa con cada grupo de captura adicional que utilices. Un ejemplo podría ser `\1` para coincidir con el primer grupo.
|
||||
|
||||
El siguiente ejemplo encuentra cualquier palabra que ocurra dos veces separada por un espacio:
|
||||
Digamos que quieres hacer coincidir una palabra que aparece varias veces como la siguiente.
|
||||
|
||||
```js
|
||||
let repeatStr = "regex regex";
|
||||
let repeatRegex = /(\w+)\s\1/;
|
||||
repeatRegex.test(repeatStr);
|
||||
repeatStr.match(repeatRegex);
|
||||
let repeatStr = "row row row your boat";
|
||||
```
|
||||
|
||||
La llamada a la función `test` devolverá `true`, y la llamada a la función `match` devolverá `["regex regex", "regex"]`.
|
||||
Podrías usar `/row row row/`, pero ¿qué pasa si no conoces la palabra específica que se repite? <dfn>Los grupos de captura</dfn> pueden utilizarse para encontrar subcadenas repetidas.
|
||||
|
||||
Los grupos de captura se construyen encerrando entre paréntesis el patrón de expresión regular a capturar. En este caso, el objetivo es capturar una palabra formada por caracteres alfanuméricos, por lo que el grupo de captura será `\w+` encerrado entre paréntesis: `/(\w+)/`.
|
||||
|
||||
La subcadena que coincide con el grupo se guarda en una "variable" temporal, a la que se puede acceder dentro de la misma expresión regular utilizando una barra invertida y el número del grupo de captura (por ejemplo, `\1`). Los grupos de captura se numeran automáticamente por la posición de sus paréntesis de apertura (de izquierda a derecha), empezando por el 1.
|
||||
|
||||
El siguiente ejemplo encuentra cualquier palabra que aparezca tres veces separada por un espacio:
|
||||
|
||||
```js
|
||||
let repeatRegex = /(\w+) \1 \1/;
|
||||
repeatRegex.test(repeatStr); // Returns true
|
||||
repeatStr.match(repeatRegex); // Returns ["row row row", "row"]
|
||||
```
|
||||
|
||||
El uso del método `.match()` en una cadena devolverá un arreglo con la subcadena coincidente, junto con sus grupos capturados.
|
||||
|
||||
Utilizar el método `.match()` en una cadena devuelve un arreglo con la cadena que coincide, junto con su grupo de captura.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036143
|
||||
title: Extract State Logic to Redux
|
||||
title: Extrae la lógica de estado a Redux
|
||||
challengeType: 6
|
||||
forumTopicId: 301429
|
||||
dashedName: extract-state-logic-to-redux
|
||||
@ -8,23 +8,23 @@ dashedName: extract-state-logic-to-redux
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you finished the React component, you need to move the logic it's performing locally in its `state` into Redux. This is the first step to connect the simple React app to Redux. The only functionality your app has is to add new messages from the user to an unordered list. The example is simple in order to demonstrate how React and Redux work together.
|
||||
Ahora que has terminado el componente React, necesitas mover la lógica que está realizando localmente en su `state` hacia Redux. Este es el primer paso para conectar la aplicación simple de React a Redux. La única funcionalidad que tiene tu aplicación es añadir nuevos mensajes del usuario a una lista desordenada. El ejemplo es simple para demostrar cómo React y Redux trabajan juntos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
First, define an action type `ADD` and set it to a const `ADD`. Next, define an action creator `addMessage()` which creates the action to add a message. You'll need to pass a `message` to this action creator and include the message in the returned `action`.
|
||||
En primer lugar, define un tipo de acción `ADD` y asígnalo a una const `ADD`. A continuación, define un creador de acciones `addMessage()` que crea la acción para añadir un mensaje. Tendrás que pasar un `message` a este creador de acciones e incluir el mensaje en la `action` devuelta.
|
||||
|
||||
Then create a reducer called `messageReducer()` that handles the state for the messages. The initial state should equal an empty array. This reducer should add a message to the array of messages held in state, or return the current state. Finally, create your Redux store and pass it the reducer.
|
||||
Luego crea un reductor llamado `messageReducer()` que maneja el estado de los mensajes. El estado inicial debe ser igual a un arreglo vacío. Este reductor debe añadir un mensaje al arreglo de mensajes mantenido en el estado, o devolver el estado actual. Finalmente, crea tu almacén Redux y pásale el reductor.
|
||||
|
||||
# --hints--
|
||||
|
||||
The const `ADD` should exist and hold a value equal to the string `ADD`
|
||||
La const `ADD` debe existir y mantener un valor igual a la cadena `ADD`
|
||||
|
||||
```js
|
||||
assert(ADD === 'ADD');
|
||||
```
|
||||
|
||||
The action creator `addMessage` should return an object with `type` equal to `ADD` and `message` equal to the message that is passed in.
|
||||
El creador de acción `addMessage` debe devolver un objeto con `type` igual a `ADD` y `message` igual al mensaje que se pasa.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,13 +35,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`messageReducer` should be a function.
|
||||
`messageReducer` debe ser una función.
|
||||
|
||||
```js
|
||||
assert(typeof messageReducer === 'function');
|
||||
```
|
||||
|
||||
The store should exist and have an initial state set to an empty array.
|
||||
El almacén debe existir y tener un estado inicial establecido a un arreglo vacío.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -52,7 +52,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Dispatching `addMessage` against the store should immutably add a new message to the array of messages held in state.
|
||||
El envío de `addMessage` contra el almacén debe añadir un nuevo mensaje de forma inmutable al arreglo de mensajes mantenido en el estado.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -66,7 +66,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `messageReducer` should return the current state if called with any other actions.
|
||||
El `messageReducer` debe devolver el estado actual si se llama con cualquier otra acción.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036141
|
||||
title: Getting Started with React Redux
|
||||
title: Introducción a React Redux
|
||||
challengeType: 6
|
||||
forumTopicId: 301430
|
||||
dashedName: getting-started-with-react-redux
|
||||
@ -8,19 +8,19 @@ dashedName: getting-started-with-react-redux
|
||||
|
||||
# --description--
|
||||
|
||||
This series of challenges introduces how to use Redux with React. First, here's a review of some of the key principles of each technology. React is a view library that you provide with data, then it renders the view in an efficient, predictable way. Redux is a state management framework that you can use to simplify the management of your application's state. Typically, in a React Redux app, you create a single Redux store that manages the state of your entire app. Your React components subscribe to only the pieces of data in the store that are relevant to their role. Then, you dispatch actions directly from React components, which then trigger store updates.
|
||||
Esta serie de desafíos presenta cómo utilizar Redux con React. En primer lugar, repasamos algunos de los principios clave de cada tecnología. React es una librería de vistas a la que le proporcionas datos y luego renderiza la vista de forma eficiente y predecible. Redux es un framework de gestión de estados que puedes utilizar para simplificar la gestión del estado de tu aplicación. Por lo general, en una aplicación React Redux, se crea un único almacén Redux que gestiona el estado de toda la aplicación. Tus componentes de React se suscriben sólo a las piezas de datos del almacén que son relevantes para su función. Luego, se envían acciones directamente desde los componentes de React, que luego activan las actualizaciones del almacén.
|
||||
|
||||
Although React components can manage their own state locally, when you have a complex app, it's generally better to keep the app state in a single location with Redux. There are exceptions when individual components may have local state specific only to them. Finally, because Redux is not designed to work with React out of the box, you need to use the `react-redux` package. It provides a way for you to pass Redux `state` and `dispatch` to your React components as `props`.
|
||||
Aunque los componentes de React pueden gestionar su propio estado localmente, cuando se tiene una aplicación compleja, generalmente es mejor mantener el estado de la aplicación en una sola ubicación con Redux. Hay excepciones cuando los componentes individuales pueden tener un estado local específico sólo para ellos. Por último, debido a que Redux no está diseñado para trabajar con React de fábrica, es necesario utilizar el paquete `react-redux`. Proporciona una forma para pasar Redux `state` y `dispatch` a tus componentes React como `props`.
|
||||
|
||||
Over the next few challenges, first, you'll create a simple React component which allows you to input new text messages. These are added to an array that's displayed in the view. This should be a nice review of what you learned in the React lessons. Next, you'll create a Redux store and actions that manage the state of the messages array. Finally, you'll use `react-redux` to connect the Redux store with your component, thereby extracting the local state into the Redux store.
|
||||
A lo largo de los siguientes desafíos, primero crearás un simple componente React que te permita introducir nuevos mensajes de texto. Estos se añaden a un arreglo que se muestra en la vista. Esto debería ser un buen repaso de lo aprendido en las lecciones de React. A continuación, crearás un almacén Redux y acciones que gestionen el estado del arreglo de mensajes. Por último, utilizarás `react-redux` para conectar el almacén Redux con tu componente, extrayendo así el estado local en el almacén Redux.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Start with a `DisplayMessages` component. Add a constructor to this component and initialize it with a state that has two properties: `input`, that's set to an empty string, and `messages`, that's set to an empty array.
|
||||
Comienza con un componente `DisplayMessages`. Añade un constructor a este componente e inicialízalo con un estado que tenga dos propiedades: `input`, que se establece como una cadena vacía, y `messages`, que se establece como un arreglo vacío.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `DisplayMessages` component should render an empty `div` element.
|
||||
El componente `DisplayMessages` debe mostrar un elemento `div` vacío.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -31,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `DisplayMessages` constructor should be called properly with `super`, passing in `props`.
|
||||
El constructor `DisplayMessages` debe ser llamado correctamente con `super`, pasando `props`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -46,7 +46,7 @@ The `DisplayMessages` constructor should be called properly with `super`, passin
|
||||
);
|
||||
```
|
||||
|
||||
The `DisplayMessages` component should have an initial state equal to `{input: "", messages: []}`.
|
||||
El componente `DisplayMessages` debe tener un estado inicial igual a `{input: "", messages: []}`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036142
|
||||
title: Manage State Locally First
|
||||
title: Gestiona el estado localmente primero
|
||||
challengeType: 6
|
||||
forumTopicId: 301431
|
||||
dashedName: manage-state-locally-first
|
||||
@ -8,19 +8,19 @@ dashedName: manage-state-locally-first
|
||||
|
||||
# --description--
|
||||
|
||||
Here you'll finish creating the `DisplayMessages` component.
|
||||
Aquí terminarás de crear el componente `DisplayMessages`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
First, in the `render()` method, have the component render an `input` element, `button` element, and `ul` element. When the `input` element changes, it should trigger a `handleChange()` method. Also, the `input` element should render the value of `input` that's in the component's state. The `button` element should trigger a `submitMessage()` method when it's clicked.
|
||||
En primer lugar, en el método `render()`, haz que el componente renderice un elemento `input`, un elemento `button` y un elemento `ul`. Cuando el elemento `input` cambia, debe activar un método `handleChange()`. Además, el elemento `input` debe renderizar el valor de `input` que está en el estado del componente. El elemento `button` debe activar un método `submitMessage()` cuando se hace clic en él.
|
||||
|
||||
Second, write these two methods. The `handleChange()` method should update the `input` with what the user is typing. The `submitMessage()` method should concatenate the current message (stored in `input`) to the `messages` array in local state, and clear the value of the `input`.
|
||||
En segundo lugar, escribe estos dos métodos. El método `handleChange()` debe actualizar el `input` con lo que el usuario está escribiendo. El método `submitMessage()` debe concatenar el mensaje actual (almacenado en `input`) al arreglo `messages` del estado local, y borrar el valor de `input`.
|
||||
|
||||
Finally, use the `ul` to map over the array of `messages` and render it to the screen as a list of `li` elements.
|
||||
Por último, utiliza el `ul` para asignar el arreglo de `messages` y renderizarlo en la pantalla como una lista de elementos `li`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `DisplayMessages` component should initialize with a state equal to `{ input: "", messages: [] }`.
|
||||
El componente `DisplayMessages` debe inicializarse con un estado igual a `{ input: "", messages: [] }`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -36,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `DisplayMessages` component should render a `div` containing an `h2` element, a `button` element, a `ul` element, and `li` elements as children.
|
||||
El componente `DisplayMessages` debe renderizar un `div` que contenga un elemento `h2`, un elemento `button`, un elemento `ul` y elementos `li` como hijos.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -58,13 +58,13 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
`.map` should be used on the `messages` array.
|
||||
`.map` debe usarse en el arreglo `messages`.
|
||||
|
||||
```js
|
||||
assert(code.match(/this\.state\.messages\.map/g));
|
||||
```
|
||||
|
||||
The `input` element should render the value of `input` in local state.
|
||||
El elemento `input` debe renderizar el valor de `input` en estado local.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -83,7 +83,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
Calling the method `handleChange` should update the `input` value in state to the current input.
|
||||
La llamada al método `handleChange` debe actualizar el valor de `input` en estado a la entrada actual.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -106,7 +106,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
Clicking the `Add message` button should call the method `submitMessage` which should add the current `input` to the `messages` array in state.
|
||||
Al hacer clic en el botón `Add message` se debe llamar al método `submitMessage` que debe añadir el `input` actual al arreglo `messages` del estado.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -149,7 +149,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
The `submitMessage` method should clear the current input.
|
||||
El método `submitMessage` debe borrar la entrada actual.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036146
|
||||
title: Map Dispatch to Props
|
||||
title: Asigna el envío a props
|
||||
challengeType: 6
|
||||
forumTopicId: 301432
|
||||
dashedName: map-dispatch-to-props
|
||||
@ -8,9 +8,9 @@ dashedName: map-dispatch-to-props
|
||||
|
||||
# --description--
|
||||
|
||||
The `mapDispatchToProps()` function is used to provide specific action creators to your React components so they can dispatch actions against the Redux store. It's similar in structure to the `mapStateToProps()` function you wrote in the last challenge. It returns an object that maps dispatch actions to property names, which become component `props`. However, instead of returning a piece of `state`, each property returns a function that calls `dispatch` with an action creator and any relevant action data. You have access to this `dispatch` because it's passed in to `mapDispatchToProps()` as a parameter when you define the function, just like you passed `state` to `mapStateToProps()`. Behind the scenes, React Redux is using Redux's `store.dispatch()` to conduct these dispatches with `mapDispatchToProps()`. This is similar to how it uses `store.subscribe()` for components that are mapped to `state`.
|
||||
La función `mapDispatchToProps()` se utiliza para proporcionar creadores de acción específicos a tus componentes React para que puedan enviar acciones contra el almacén Redux. Su estructura es similar a la función `mapStateToProps()` que escribiste en el último desafío. Devuelve un objeto que asigna acciones de envío a nombres de propiedades, que se convierten en `props` del componente. Sin embargo, en lugar de devolver una pieza de `state`, cada propiedad devuelve una función que llama a `dispatch` con un creador de acciones y cualquier dato relevante de la acción. Tienes acceso a este `dispatch` porque se pasa a `mapDispatchToProps()` como parámetro cuando defines la función, igual que pasaste `state` a `mapStateToProps()`. Tras bambalinas, React Redux utiliza `store.dispatch()` para realizar estos envíos con `mapDispatchToProps()`. Esto es similar a cómo se utiliza `store.subscribe()` para los componentes que se asignan a `state`.
|
||||
|
||||
For example, you have a `loginUser()` action creator that takes a `username` as an action payload. The object returned from `mapDispatchToProps()` for this action creator would look something like:
|
||||
Por ejemplo, tienes un creador de acción `loginUser()` que toma un `username` como carga útil de acción. El objeto devuelto por `mapDispatchToProps()` para este creador de acción se vería algo como:
|
||||
|
||||
```jsx
|
||||
{
|
||||
@ -22,11 +22,11 @@ For example, you have a `loginUser()` action creator that takes a `username` as
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor provides an action creator called `addMessage()`. Write the function `mapDispatchToProps()` that takes `dispatch` as an argument, then returns an object. The object should have a property `submitNewMessage` set to the dispatch function, which takes a parameter for the new message to add when it dispatches `addMessage()`.
|
||||
El editor de código proporciona un creador de acción llamado `addMessage()`. Escribe la función `mapDispatchToProps()` que toma `dispatch` como argumento y devuelve un objeto. El objeto debe tener una propiedad `submitNewMessage` establecida en la función de envío, que toma un parámetro para el nuevo mensaje a añadir cuando envía `addMessage()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`addMessage` should return an object with keys `type` and `message`.
|
||||
`addMessage` debe devolver un objeto con las claves `type` y `message`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,19 +40,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`mapDispatchToProps` should be a function.
|
||||
`mapDispatchToProps` debe ser una función.
|
||||
|
||||
```js
|
||||
assert(typeof mapDispatchToProps === 'function');
|
||||
```
|
||||
|
||||
`mapDispatchToProps` should return an object.
|
||||
`mapDispatchToProps` debe devolver un objeto.
|
||||
|
||||
```js
|
||||
assert(typeof mapDispatchToProps() === 'object');
|
||||
```
|
||||
|
||||
Dispatching `addMessage` with `submitNewMessage` from `mapDispatchToProps` should return a message to the dispatch function.
|
||||
El envío de `addMessage` con `submitNewMessage` desde `mapDispatchToProps` debe devolver un mensaje a la función de envío.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036145
|
||||
title: Map State to Props
|
||||
title: Asigna el estado a props
|
||||
challengeType: 6
|
||||
forumTopicId: 301433
|
||||
dashedName: map-state-to-props
|
||||
@ -8,37 +8,37 @@ dashedName: map-state-to-props
|
||||
|
||||
# --description--
|
||||
|
||||
The `Provider` component allows you to provide `state` and `dispatch` to your React components, but you must specify exactly what state and actions you want. This way, you make sure that each component only has access to the state it needs. You accomplish this by creating two functions: `mapStateToProps()` and `mapDispatchToProps()`.
|
||||
El componente `Provider` te permite proporcionar `state` y `dispatch` a tus componentes React, pero debes especificar exactamente qué estado y acciones quieres. De esta manera, te aseguras de que cada componente sólo tiene acceso al estado que necesita. Esto se consigue creando dos funciones: `mapStateToProps()` y `mapDispatchToProps()`.
|
||||
|
||||
In these functions, you declare what pieces of state you want to have access to and which action creators you need to be able to dispatch. Once these functions are in place, you'll see how to use the React Redux `connect` method to connect them to your components in another challenge.
|
||||
En estas funciones, declaras a qué partes del estado quieres tener acceso y qué creadores de acción necesitas poder enviar. Una vez que estas funciones están en su lugar, verás cómo usar el método React Redux `connect` para conectarlos a tus componentes en otro desafío.
|
||||
|
||||
**Note:** Behind the scenes, React Redux uses the `store.subscribe()` method to implement `mapStateToProps()`.
|
||||
**Nota:** Tras bambalinas, React Redux utiliza el método `store.subscribe()` para implementar `mapStateToProps()`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a function `mapStateToProps()`. This function should take `state` as an argument, then return an object which maps that state to specific property names. These properties will become accessible to your component via `props`. Since this example keeps the entire state of the app in a single array, you can pass that entire state to your component. Create a property `messages` in the object that's being returned, and set it to `state`.
|
||||
Crea una función `mapStateToProps()`. Esta función debe tomar `state` como argumento, y luego devolver un objeto que asigna ese estado a nombres de propiedades específicas. Estas propiedades serán accesibles a tu componente a través de `props`. Dado que este ejemplo mantiene todo el estado de la aplicación en un solo arreglo, puedes pasar todo ese estado a tu componente. Crea una propiedad `messages` en el objeto que se devuelve, y establécela como `state`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The const `state` should be an empty array.
|
||||
La const `state` debe ser un arreglo vacío.
|
||||
|
||||
```js
|
||||
assert(Array.isArray(state) && state.length === 0);
|
||||
```
|
||||
|
||||
`mapStateToProps` should be a function.
|
||||
`mapStateToProps` debe ser una función.
|
||||
|
||||
```js
|
||||
assert(typeof mapStateToProps === 'function');
|
||||
```
|
||||
|
||||
`mapStateToProps` should return an object.
|
||||
`mapStateToProps` debe devolver un objeto.
|
||||
|
||||
```js
|
||||
assert(typeof mapStateToProps() === 'object');
|
||||
```
|
||||
|
||||
Passing an array as state to `mapStateToProps` should return this array assigned to a key of `messages`.
|
||||
Pasar un arreglo como estado a `mapStateToProps` debe devolver este arreglo asignado a una clave de `messages`.
|
||||
|
||||
```js
|
||||
assert(mapStateToProps(['messages']).messages.pop() === 'messages');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403614a
|
||||
title: Moving Forward From Here
|
||||
title: Avanzando desde aquí
|
||||
challengeType: 6
|
||||
forumTopicId: 301434
|
||||
dashedName: moving-forward-from-here
|
||||
@ -8,19 +8,19 @@ dashedName: moving-forward-from-here
|
||||
|
||||
# --description--
|
||||
|
||||
Congratulations! You finished the lessons on React and Redux. There's one last item worth pointing out before you move on. Typically, you won't write React apps in a code editor like this. This challenge gives you a glimpse of what the syntax looks like if you're working with npm and a file system on your own machine. The code should look similar, except for the use of `import` statements (these pull in all of the dependencies that have been provided for you in the challenges). The "Managing Packages with npm" section covers npm in more detail.
|
||||
¡Felicidades! Has terminado las lecciones sobre React y Redux. Hay un último punto que vale la pena señalar antes de seguir adelante. Por lo general, no escribirás aplicaciones React en un editor de código como este. Este desafío te da una idea de cómo es la sintaxis si trabajas con npm y un sistema de archivos en tu propia máquina. El código debería ser similar, excepto por el uso de las sentencias `import` (éstas traen todas las dependencias que se te han proporcionado en los desafíos). La sección "Gestión de paquetes con npm" cubre npm con más detalle.
|
||||
|
||||
Finally, writing React and Redux code generally requires some configuration. This can get complicated quickly. If you are interested in experimenting on your own machine, the <a href="https://github.com/facebookincubator/create-react-app" target="_blank" rel="nofollow">Create React App</a> comes configured and ready to go.
|
||||
Por último, escribir código React y Redux generalmente requiere cierta configuración. Esto puede complicarse rápidamente. Si te interesa experimentar en tu propia máquina, <a href="https://github.com/facebookincubator/create-react-app" target="_blank" rel="nofollow">Create React App</a> viene configurado y listo para funcionar.
|
||||
|
||||
Alternatively, you can enable Babel as a JavaScript Preprocessor in CodePen, add React and ReactDOM as external JavaScript resources, and work there as well.
|
||||
Alternativamente, puedes habilitar Babel como un preprocesador de JavaScript en CodePen, añadir React y ReactDOM como recursos externos de JavaScript, y trabajar allí también.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Log the message `'Now I know React and Redux!'` to the console.
|
||||
Imprime el mensaje `'Now I know React and Redux!'` en la consola.
|
||||
|
||||
# --hints--
|
||||
|
||||
The message `Now I know React and Redux!` should be logged to the console.
|
||||
El mensaje `Now I know React and Redux!` debe imprimirse en la consola.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036144
|
||||
title: Use Provider to Connect Redux to React
|
||||
title: Usa "Provider" para conectar Redux a React
|
||||
challengeType: 6
|
||||
forumTopicId: 301435
|
||||
dashedName: use-provider-to-connect-redux-to-react
|
||||
@ -8,9 +8,9 @@ dashedName: use-provider-to-connect-redux-to-react
|
||||
|
||||
# --description--
|
||||
|
||||
In the last challenge, you created a Redux store to handle the messages array and created an action for adding new messages. The next step is to provide React access to the Redux store and the actions it needs to dispatch updates. React Redux provides its `react-redux` package to help accomplish these tasks.
|
||||
En el último desafío, creaste un almacén Redux para manejar el arreglo de mensajes y creaste una acción para añadir nuevos mensajes. El siguiente paso es proporcionar a React acceso al almacén Redux y a las acciones que necesita para enviar las actualizaciones. React Redux proporciona su paquete `react-redux` para ayudar a realizar estas tareas.
|
||||
|
||||
React Redux provides a small API with two key features: `Provider` and `connect`. Another challenge covers `connect`. The `Provider` is a wrapper component from React Redux that wraps your React app. This wrapper then allows you to access the Redux `store` and `dispatch` functions throughout your component tree. `Provider` takes two props, the Redux store and the child components of your app. Defining the `Provider` for an App component might look like this:
|
||||
React Redux ofrece si API con dos características clave: `Provider` y `connect`. Otro desafío cubre `connect`. El `Provider` es un componente envolvente de React Redux que envuelve tu aplicación React. Esta envoltura te permite acceder a las funciones Redux `store` y `dispatch` a través de tu árbol de componentes. `Provider` toma dos props, el almacén Redux y los componentes hijos de tu aplicación. La definición del `Provider` para un componente de la App podría ser así:
|
||||
|
||||
```jsx
|
||||
<Provider store={store}>
|
||||
@ -20,13 +20,13 @@ React Redux provides a small API with two key features: `Provider` and `connect`
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor now shows all your Redux and React code from the past several challenges. It includes the Redux store, actions, and the `DisplayMessages` component. The only new piece is the `AppWrapper` component at the bottom. Use this top level component to render the `Provider` from `ReactRedux`, and pass the Redux store as a prop. Then render the `DisplayMessages` component as a child. Once you are finished, you should see your React component rendered to the page.
|
||||
El editor de código ahora muestra todo tu código Redux y React de los últimos desafíos. Incluye el almacén Redux, las acciones y el componente `DisplayMessages`. La única pieza nueva es el componente `AppWrapper` de la parte inferior. Usa este componente de nivel superior para renderizar el `Provider` de `ReactRedux`, y pasa el almacén Redux como prop. Luego, renderiza el componente `DisplayMessages` como hijo. Una vez que hayas terminado, deberías ver tu componente React renderizado en la página.
|
||||
|
||||
**Note:** React Redux is available as a global variable here, so you can access the Provider with dot notation. The code in the editor takes advantage of this and sets it to a constant `Provider` for you to use in the `AppWrapper` render method.
|
||||
**Nota:** React Redux está disponible como una variable global aquí, por lo que puedes acceder al "Provider" con notación de puntos. El código del editor aprovecha esto y lo establece en una constante `Provider` para que lo uses en el método de renderizado `AppWrapper`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `AppWrapper` should render.
|
||||
El `AppWrapper` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -37,7 +37,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Provider` wrapper component should have a prop of `store` passed to it, equal to the Redux store.
|
||||
El componente envolvente `Provider` debe tener una prop de `store` pasada, igual al almacén de Redux.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -51,7 +51,7 @@ The `Provider` wrapper component should have a prop of `store` passed to it, equ
|
||||
);
|
||||
```
|
||||
|
||||
`DisplayMessages` should render as a child of `AppWrapper`.
|
||||
`DisplayMessages` debe renderizarse como hijo de `AppWrapper`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -64,7 +64,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `DisplayMessages` component should render an `h2`, `input`, `button`, and `ul` element.
|
||||
El componente `DisplayMessages` debe renderizar un elemento `h2`, `input`, `button` y `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036154
|
||||
title: Combine Multiple Reducers
|
||||
title: Combina múltiples reductores
|
||||
challengeType: 6
|
||||
forumTopicId: 301436
|
||||
dashedName: combine-multiple-reducers
|
||||
@ -8,11 +8,11 @@ dashedName: combine-multiple-reducers
|
||||
|
||||
# --description--
|
||||
|
||||
When the state of your app begins to grow more complex, it may be tempting to divide state into multiple pieces. Instead, remember the first principle of Redux: all app state is held in a single state object in the store. Therefore, Redux provides reducer composition as a solution for a complex state model. You define multiple reducers to handle different pieces of your application's state, then compose these reducers together into one root reducer. The root reducer is then passed into the Redux `createStore()` method.
|
||||
Cuando el estado de tu aplicación empieza a ser más complejo, puede ser tentador dividir el estado en varias piezas. En su lugar, recuerda el primer principio de Redux: todo el estado de la aplicación se mantiene en un único objeto de estado en el almacén. Por lo tanto, Redux proporciona la composición de reductores como una solución para un modelo de estado complejo. Se definen varios reductores para manejar diferentes partes del estado de tu aplicación, y luego se componen estos reductores juntos en un reductor raíz. El reductor raíz se pasa al método Redux `createStore()`.
|
||||
|
||||
In order to let us combine multiple reducers together, Redux provides the `combineReducers()` method. This method accepts an object as an argument in which you define properties which associate keys to specific reducer functions. The name you give to the keys will be used by Redux as the name for the associated piece of state.
|
||||
Para permitirnos combinar múltiples reductores juntos, Redux proporciona el método `combineReducers()`. Este método acepta un objeto como argumento en el que se definen las propiedades que asocian las claves a funciones reductoras específicas. El nombre que le des a las claves será utilizado por Redux como el nombre de la pieza de estado asociada.
|
||||
|
||||
Typically, it is a good practice to create a reducer for each piece of application state when they are distinct or unique in some way. For example, in a note-taking app with user authentication, one reducer could handle authentication while another handles the text and notes that the user is submitting. For such an application, we might write the `combineReducers()` method like this:
|
||||
Por lo general, es una buena práctica crear un reductor para cada pieza de estado de la aplicación cuando son distintas o únicas de alguna manera. Por ejemplo, en una aplicación para tomar notas con autenticación de usuario, un reductor podría encargarse de la autenticación, mientras que otro se encarga del texto y las notas que el usuario envía. Para tal aplicación, podríamos escribir el método `combineReducers()` así:
|
||||
|
||||
```js
|
||||
const rootReducer = Redux.combineReducers({
|
||||
@ -21,15 +21,15 @@ const rootReducer = Redux.combineReducers({
|
||||
});
|
||||
```
|
||||
|
||||
Now, the key `notes` will contain all of the state associated with our notes and handled by our `notesReducer`. This is how multiple reducers can be composed to manage more complex application state. In this example, the state held in the Redux store would then be a single object containing `auth` and `notes` properties.
|
||||
Ahora, la clave `notes` contendrá todo el estado asociado a nuestras notas y manejado por nuestro `notesReducer`. Así es como se pueden componer múltiples reductores para gestionar un estado de aplicación más complejo. En este ejemplo, el estado mantenido en el almacén Redux sería entonces un único objeto que contiene las propiedades `auth` y `notes`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There are `counterReducer()` and `authReducer()` functions provided in the code editor, along with a Redux store. Finish writing the `rootReducer()` function using the `Redux.combineReducers()` method. Assign `counterReducer` to a key called `count` and `authReducer` to a key called `auth`.
|
||||
Están las funciones `counterReducer()` y `authReducer()` proporcionadas en el editor de código, junto con un almacén Redux. Termina de escribir la función `rootReducer()` utilizando el método `Redux.combineReducers()`. Asigna `counterReducer` a una clave llamada `count` y `authReducer` a una clave llamada `auth`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `counterReducer` should increment and decrement the `state`.
|
||||
El `counterReducer` debe incrementar y disminuir el `state`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `authReducer` should toggle the `state` of `authenticated` between `true` and `false`.
|
||||
El `authReducer` debe alternar el `state` de `authenticated` entre `true` y `false`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -59,7 +59,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The store `state` should have two keys: `count`, which holds a number, and `auth`, which holds an object. The `auth` object should have a property of `authenticated`, which holds a boolean.
|
||||
El almacén `state` debe tener dos claves: `count`, que contiene un número, y `auth`, que contiene un objeto. El objeto `auth` debe tener una propiedad de `authenticated`, que contiene un booleano.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -74,7 +74,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `rootReducer` should be a function that combines the `counterReducer` and the `authReducer`.
|
||||
El `rootReducer` debe ser una función que combine el `counterReducer` y el `authReducer`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403615b
|
||||
title: Copy an Object with Object.assign
|
||||
title: Copia un objeto con Object.assign
|
||||
challengeType: 6
|
||||
forumTopicId: 301437
|
||||
dashedName: copy-an-object-with-object-assign
|
||||
@ -8,21 +8,21 @@ dashedName: copy-an-object-with-object-assign
|
||||
|
||||
# --description--
|
||||
|
||||
The last several challenges worked with arrays, but there are ways to help enforce state immutability when state is an `object`, too. A useful tool for handling objects is the `Object.assign()` utility. `Object.assign()` takes a target object and source objects and maps properties from the source objects to the target object. Any matching properties are overwritten by properties in the source objects. This behavior is commonly used to make shallow copies of objects by passing an empty object as the first argument followed by the object(s) you want to copy. Here's an example:
|
||||
Los últimos desafíos trabajaron con arreglos, pero hay maneras de ayudar a reforzar la inmutabilidad del estado cuando el estado es también un `object`. Una herramienta útil para el manejo de objetos es la utilidad `Object.assign()`. `Object.assign()` toma un objeto de destino y objetos de origen y asigna propiedades de los objetos de origen al objeto de destino. Las propiedades que coinciden se sobrescriben con las propiedades de los objetos de origen. Este comportamiento se utiliza comúnmente para hacer copias superficiales de objetos pasando un objeto vacío como primer argumento seguido por el/los objeto(s) que se desea(n) copiar. Aquí hay un ejemplo:
|
||||
|
||||
```js
|
||||
const newObject = Object.assign({}, obj1, obj2);
|
||||
```
|
||||
|
||||
This creates `newObject` as a new `object`, which contains the properties that currently exist in `obj1` and `obj2`.
|
||||
Esto crea `newObject` como un nuevo `object`, que contiene las propiedades que existen actualmente en `obj1` y `obj2`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The Redux state and actions were modified to handle an `object` for the `state`. Edit the code to return a new `state` object for actions with type `ONLINE`, which set the `status` property to the string `online`. Try to use `Object.assign()` to complete the challenge.
|
||||
El estado y las acciones de Redux fueron modificados para manejar un `object` para el `state`. Edita el código para devolver un nuevo objeto `state` para las acciones de tipo `ONLINE`, que establece la propiedad `status` a la cadena `online`. Intenta utilizar `Object.assign()` para completar el desafío.
|
||||
|
||||
# --hints--
|
||||
|
||||
The Redux store should exist and initialize with a state that is equivalent to the `defaultState` object declared on line 1.
|
||||
El almacén Redux debe existir e inicializarse con un estado equivalente al objeto `defaultState` declarado en la línea 1.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,13 +39,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`wakeUp` and `immutableReducer` both should be functions.
|
||||
`wakeUp` e `immutableReducer` deben ser funciones.
|
||||
|
||||
```js
|
||||
assert(typeof wakeUp === 'function' && typeof immutableReducer === 'function');
|
||||
```
|
||||
|
||||
Dispatching an action of type `ONLINE` should update the property `status` in state to `online` and should NOT mutate state.
|
||||
El envío de una acción de tipo `ONLINE` debe actualizar la propiedad `status` del estado a `online` y NO debe mutar el estado.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -65,7 +65,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`Object.assign` should be used to return new state.
|
||||
`Object.assign` debe utilizarse para devolver el nuevo estado.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').includes('Object.assign'));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403614b
|
||||
title: Create a Redux Store
|
||||
title: Crea un almacén Redux
|
||||
challengeType: 6
|
||||
forumTopicId: 301439
|
||||
dashedName: create-a-redux-store
|
||||
@ -8,29 +8,29 @@ dashedName: create-a-redux-store
|
||||
|
||||
# --description--
|
||||
|
||||
Redux is a state management framework that can be used with a number of different web technologies, including React.
|
||||
Redux es un framework de gestión de estados que se puede utilizar con un número de diferentes tecnologías web, incluyendo React.
|
||||
|
||||
In Redux, there is a single state object that's responsible for the entire state of your application. This means if you had a React app with ten components, and each component had its own local state, the entire state of your app would be defined by a single state object housed in the Redux `store`. This is the first important principle to understand when learning Redux: the Redux store is the single source of truth when it comes to application state.
|
||||
En Redux, hay un único objeto de estado que es responsable de todo el estado de tu aplicación. Esto significa que si tuvieras una aplicación React con diez componentes, y cada componente tuviera su propio estado local, todo el estado de tu aplicación estaría definido por un único objeto de estado alojado en el `store` (almacén) de Redux. Este es el primer principio importante a entender cuando se aprende Redux: el almacén Redux es la única fuente de verdad cuando se trata del estado de la aplicación.
|
||||
|
||||
This also means that any time any piece of your app wants to update state, it **must** do so through the Redux store. The unidirectional data flow makes it easier to track state management in your app.
|
||||
Esto también significa que cada vez que cualquier pieza de tu aplicación quiera actualizar el estado, **debe** hacerlo a través del almacén Redux. El flujo de datos unidireccional facilita el seguimiento de la gestión de estados en tu aplicación.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The Redux `store` is an object which holds and manages application `state`. There is a method called `createStore()` on the Redux object, which you use to create the Redux `store`. This method takes a `reducer` function as a required argument. The `reducer` function is covered in a later challenge, and is already defined for you in the code editor. It simply takes `state` as an argument and returns `state`.
|
||||
El `store` de Redux es un objeto que guarda y gestiona el `state` de la aplicación. Hay un método llamado `createStore()` en el objeto Redux, que se utiliza para crear el `store` Redux. Este método toma una función `reducer` como argumento obligatorio. La función `reducer` se trata en un desafío posterior, y ya está definida para ti en el editor de código. Simplemente toma `state` como argumento y devuelve `state`.
|
||||
|
||||
Declare a `store` variable and assign it to the `createStore()` method, passing in the `reducer` as an argument.
|
||||
Declara una variable `store` y asígnala al método `createStore()`, pasando el `reducer` como argumento.
|
||||
|
||||
**Note:** The code in the editor uses ES6 default argument syntax to initialize this state to hold a value of `5`. If you're not familiar with default arguments, you can refer to the [ES6 section in the Curriculum](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions) which covers this topic.
|
||||
**Nota:** El código del editor utiliza la sintaxis de los argumentos por defecto de ES6 para inicializar este estado y mantener un valor de `5`. Si no estás familiarizado con los argumentos por defecto, puedes consultar la sección [ES6 en el Plan de Estudios](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions) que cubre este tema.
|
||||
|
||||
# --hints--
|
||||
|
||||
The Redux store should exist.
|
||||
El almacén Redux debe existir.
|
||||
|
||||
```js
|
||||
assert(typeof store.getState === 'function');
|
||||
```
|
||||
|
||||
The Redux store should have a value of 5 for the state.
|
||||
El almacén Redux debe tener un valor de 5 para el estado.
|
||||
|
||||
```js
|
||||
assert(store.getState() === 5);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403614d
|
||||
title: Define a Redux Action
|
||||
title: Define una acción Redux
|
||||
challengeType: 6
|
||||
forumTopicId: 301440
|
||||
dashedName: define-a-redux-action
|
||||
@ -8,17 +8,17 @@ dashedName: define-a-redux-action
|
||||
|
||||
# --description--
|
||||
|
||||
Since Redux is a state management framework, updating state is one of its core tasks. In Redux, all state updates are triggered by dispatching actions. An action is simply a JavaScript object that contains information about an action event that has occurred. The Redux store receives these action objects, then updates its state accordingly. Sometimes a Redux action also carries some data. For example, the action carries a username after a user logs in. While the data is optional, actions must carry a `type` property that specifies the 'type' of action that occurred.
|
||||
Dado que Redux es un framework de gestión de estado, la actualización del estado es una de sus tareas principales. En Redux, todas las actualizaciones de estado se activan mediante acciones de envío. Una acción es simplemente un objeto de JavaScript que contiene información sobre un evento de acción que ha ocurrido. El almacén Redux recibe estos objetos de acción, y luego actualiza su estado de acuerdo a ello. A veces una acción Redux también lleva algunos datos. Por ejemplo, la acción lleva un nombre de usuario después de que un usuario inicia sesión. Aunque los datos son opcionales, las acciones deben llevar una propiedad `type` que especifica el "tipo" de acción que se ha producido.
|
||||
|
||||
Think of Redux actions as messengers that deliver information about events happening in your app to the Redux store. The store then conducts the business of updating state based on the action that occurred.
|
||||
Piensa en las acciones Redux como mensajeros que entregan información sobre los eventos que ocurren en tu aplicación al almacén Redux. A continuación, el almacén se encarga de actualizar el estado en función de la acción realizada.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Writing a Redux action is as simple as declaring an object with a type property. Declare an object `action` and give it a property `type` set to the string `'LOGIN'`.
|
||||
Escribir una acción Redux es tan sencillo como declarar un objeto con una propiedad de tipo. Declara un objeto `action` y dale una propiedad `type` establecida a la cadena `'LOGIN'`.
|
||||
|
||||
# --hints--
|
||||
|
||||
An `action` object should exist.
|
||||
Debe existir un objeto `action`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -28,7 +28,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `action` object should have a key property `type` with value `LOGIN`.
|
||||
El objeto `action` debe tener una propiedad clave `type` con valor `LOGIN`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403614e
|
||||
title: Define an Action Creator
|
||||
title: Define un creador de acción
|
||||
challengeType: 6
|
||||
forumTopicId: 301441
|
||||
dashedName: define-an-action-creator
|
||||
@ -8,27 +8,27 @@ dashedName: define-an-action-creator
|
||||
|
||||
# --description--
|
||||
|
||||
After creating an action, the next step is sending the action to the Redux store so it can update its state. In Redux, you define action creators to accomplish this. An action creator is simply a JavaScript function that returns an action. In other words, action creators create objects that represent action events.
|
||||
Después de crear una acción, el siguiente paso es enviar la acción al almacén Redux para que pueda actualizar su estado. En Redux, se definen creadores de acción para lograr esto. Un creador de acción es simplemente una función de JavaScript que devuelve una acción. En otras palabras, los creadores de acción crean objetos que representan eventos de acción.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Define a function named `actionCreator()` that returns the `action` object when called.
|
||||
Define una función llamada `actionCreator()` que devuelve el objeto `action` cuando es llamado.
|
||||
|
||||
# --hints--
|
||||
|
||||
The function `actionCreator` should exist.
|
||||
La función `actionCreator` debe existir.
|
||||
|
||||
```js
|
||||
assert(typeof actionCreator === 'function');
|
||||
```
|
||||
|
||||
Running the `actionCreator` function should return the `action` object.
|
||||
La ejecución de la función `actionCreator` debe devolver el objeto `action`.
|
||||
|
||||
```js
|
||||
assert(typeof action === 'object');
|
||||
```
|
||||
|
||||
The returned `action` should have a key property `type` with value `LOGIN`.
|
||||
La `action` devuelta debe tener una propiedad clave `type` con valor `LOGIN`.
|
||||
|
||||
```js
|
||||
assert(action.type === 'LOGIN');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403614f
|
||||
title: Dispatch an Action Event
|
||||
title: Envía un evento de acción
|
||||
challengeType: 6
|
||||
forumTopicId: 301442
|
||||
dashedName: dispatch-an-action-event
|
||||
@ -8,9 +8,9 @@ dashedName: dispatch-an-action-event
|
||||
|
||||
# --description--
|
||||
|
||||
`dispatch` method is what you use to dispatch actions to the Redux store. Calling `store.dispatch()` and passing the value returned from an action creator sends an action back to the store.
|
||||
El método `dispatch` (enviar) es el que se utiliza para enviar acciones al almacén Redux. Llamar a `store.dispatch()` y pasar el valor devuelto por un creador de acción envía una acción de regreso al almacén.
|
||||
|
||||
Recall that action creators return an object with a type property that specifies the action that has occurred. Then the method dispatches an action object to the Redux store. Based on the previous challenge's example, the following lines are equivalent, and both dispatch the action of type `LOGIN`:
|
||||
Recordemos que los creadores de acción devuelven un objeto con una propiedad de tipo que especifica la acción que se ha producido. Luego, el método envía un objeto de acción al almacén Redux. Basándonos en el ejemplo del desafío anterior, las siguientes líneas son equivalentes, y ambas envían la acción de tipo `LOGIN`:
|
||||
|
||||
```js
|
||||
store.dispatch(actionCreator());
|
||||
@ -19,23 +19,23 @@ store.dispatch({ type: 'LOGIN' });
|
||||
|
||||
# --instructions--
|
||||
|
||||
The Redux store in the code editor has an initialized state that's an object containing a `login` property currently set to `false`. There's also an action creator called `loginAction()` which returns an action of type `LOGIN`. Dispatch the `LOGIN` action to the Redux store by calling the `dispatch` method, and pass in the action created by `loginAction()`.
|
||||
El almacén Redux en el editor de código tiene un estado inicializado que es un objeto que contiene una propiedad `login` actualmente establecida a `false`. También hay un creador de acción llamado `loginAction()` que devuelve una acción de tipo `LOGIN`. Envía la acción `LOGIN` al almacén Redux llamando al método `dispatch`, y pasa la acción creada por `loginAction()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Calling the function `loginAction` should return an object with `type` property set to the string `LOGIN`.
|
||||
La llamada a la función `loginAction` debe devolver un objeto con la propiedad `type` establecida a la cadena `LOGIN`.
|
||||
|
||||
```js
|
||||
assert(loginAction().type === 'LOGIN');
|
||||
```
|
||||
|
||||
The store should be initialized with an object with property `login` set to `false`.
|
||||
El almacén debe ser inicializado con un objeto con la propiedad `login` establecida a `false`.
|
||||
|
||||
```js
|
||||
assert(store.getState().login === false);
|
||||
```
|
||||
|
||||
The `store.dispatch()` method should be used to dispatch an action of type `LOGIN`.
|
||||
El método `store.dispatch()` debe utilizarse para enviar una acción de tipo `LOGIN`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403614c
|
||||
title: Get State from the Redux Store
|
||||
title: Obtén el estado del almacén Redux
|
||||
challengeType: 6
|
||||
forumTopicId: 301443
|
||||
dashedName: get-state-from-the-redux-store
|
||||
@ -8,21 +8,21 @@ dashedName: get-state-from-the-redux-store
|
||||
|
||||
# --description--
|
||||
|
||||
The Redux store object provides several methods that allow you to interact with it. For example, you can retrieve the current `state` held in the Redux store object with the `getState()` method.
|
||||
El objeto almacén Redux proporciona varios métodos que permiten interactuar con él. Por ejemplo, puedes recuperar el `state` actual que tiene el objeto almacén Redux con el método `getState()`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code from the previous challenge is re-written more concisely in the code editor. Use `store.getState()` to retrieve the `state` from the `store`, and assign this to a new variable `currentState`.
|
||||
El código del desafío anterior se reescribe de forma más concisa en el editor de código. Utiliza `store.getState()` para recuperar el `state` del `store`, y asígnalo a una nueva variable `currentState`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The Redux store should have a value of 5 for the initial state.
|
||||
El almacén Redux debe tener un valor de 5 para el estado inicial.
|
||||
|
||||
```js
|
||||
assert(store.getState() === 5);
|
||||
```
|
||||
|
||||
A variable `currentState` should exist and should be assigned the current state of the Redux store.
|
||||
Debe existir una variable `currentState` y se le debe asignar el estado actual del almacén Redux.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036150
|
||||
title: Handle an Action in the Store
|
||||
title: Maneja una acción en el almacén
|
||||
challengeType: 6
|
||||
forumTopicId: 301444
|
||||
dashedName: handle-an-action-in-the-store
|
||||
@ -8,29 +8,29 @@ dashedName: handle-an-action-in-the-store
|
||||
|
||||
# --description--
|
||||
|
||||
After an action is created and dispatched, the Redux store needs to know how to respond to that action. This is the job of a `reducer` function. Reducers in Redux are responsible for the state modifications that take place in response to actions. A `reducer` takes `state` and `action` as arguments, and it always returns a new `state`. It is important to see that this is the **only** role of the reducer. It has no side effects — it never calls an API endpoint and it never has any hidden surprises. The reducer is simply a pure function that takes state and action, then returns new state.
|
||||
Después de crear y enviar una acción, el almacén Redux necesita saber cómo responder a esa acción. Este es el trabajo de una función `reducer` (reductor). Los reductores en Redux son responsables de las modificaciones de estado que tienen lugar en respuesta a las acciones. Un `reducer` toma `state` y `action` como argumentos, y siempre devuelve un nuevo `state`. Es importante ver que esta es la **única** función del reductor. No tiene efectos secundarios: nunca llama a un endpoint del API y nunca tiene sorpresas ocultas. El reductor es simplemente una función pura que toma el estado y la acción, y luego devuelve el nuevo estado.
|
||||
|
||||
Another key principle in Redux is that `state` is read-only. In other words, the `reducer` function must **always** return a new copy of `state` and never modify state directly. Redux does not enforce state immutability, however, you are responsible for enforcing it in the code of your reducer functions. You'll practice this in later challenges.
|
||||
Otro principio clave en Redux es que `state` es de sólo lectura. En otras palabras, la función `reducer` debe **siempre** devolver una nueva copia de `state` y nunca modificar el estado directamente. Redux no impone la inmutabilidad del estado, sin embargo, tú eres responsable de imponerla en el código de tus funciones reductoras. Practicarás esto en desafíos posteriores.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has the previous example as well as the start of a `reducer` function for you. Fill in the body of the `reducer` function so that if it receives an action of type `'LOGIN'` it returns a state object with `login` set to `true`. Otherwise, it returns the current `state`. Note that the current `state` and the dispatched `action` are passed to the reducer, so you can access the action's type directly with `action.type`.
|
||||
El editor de código tiene el ejemplo anterior, así como el inicio de una función `reducer` para ti. Rellena el cuerpo de la función `reducer` para que si recibe una acción de tipo `'LOGIN'` devuelva un objeto de estado con `login` establecido a `true`. De lo contrario, devuelve el `state` actual. Ten en cuenta que el `state` actual y la `action` enviada se pasan al reductor, por lo que puedes acceder al tipo de la acción directamente con `action.type`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Calling the function `loginAction` should return an object with type property set to the string `LOGIN`.
|
||||
La llamada a la función `loginAction` debe devolver un objeto con la propiedad type establecida a la cadena `LOGIN`.
|
||||
|
||||
```js
|
||||
assert(loginAction().type === 'LOGIN');
|
||||
```
|
||||
|
||||
The store should be initialized with an object with property `login` set to `false`.
|
||||
El almacén debe ser inicializado con un objeto con la propiedad `login` establecida a `false`.
|
||||
|
||||
```js
|
||||
assert(store.getState().login === false);
|
||||
```
|
||||
|
||||
Dispatching `loginAction` should update the `login` property in the store state to `true`.
|
||||
El envío de `loginAction` debe actualizar la propiedad `login` en el estado del almacén a `true`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
If the action is not of type `LOGIN`, the store should return the current state.
|
||||
Si la acción no es de tipo `LOGIN`, el almacén debe devolver el estado actual.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036158
|
||||
title: Never Mutate State
|
||||
title: Nunca mutes el estado
|
||||
challengeType: 6
|
||||
forumTopicId: 301445
|
||||
dashedName: never-mutate-state
|
||||
@ -8,19 +8,19 @@ dashedName: never-mutate-state
|
||||
|
||||
# --description--
|
||||
|
||||
These final challenges describe several methods of enforcing the key principle of state immutability in Redux. Immutable state means that you never modify state directly, instead, you return a new copy of state.
|
||||
Estos desafíos finales describen varios métodos para hacer cumplir el principio clave de la inmutabilidad del estado en Redux. Estado inmutable significa que nunca se modifica el estado directamente, sino que se devuelve una nueva copia del estado.
|
||||
|
||||
If you took a snapshot of the state of a Redux app over time, you would see something like `state 1`, `state 2`, `state 3`,`state 4`, `...` and so on where each state may be similar to the last, but each is a distinct piece of data. This immutability, in fact, is what provides such features as time-travel debugging that you may have heard about.
|
||||
Si tomaras una captura del estado de una aplicación Redux a lo largo del tiempo, verías algo como `state 1`, `state 2`, `state 3`,`state 4`, `...` y así sucesivamente donde cada estado puede ser similar al anterior, pero cada uno es un dato distinto. Esta inmutabilidad, de hecho, es lo que proporciona características tales como la depuración de viajes en el tiempo de la que puedes haber oído hablar.
|
||||
|
||||
Redux does not actively enforce state immutability in its store or reducers, that responsibility falls on the programmer. Fortunately, JavaScript (especially ES6) provides several useful tools you can use to enforce the immutability of your state, whether it is a `string`, `number`, `array`, or `object`. Note that strings and numbers are primitive values and are immutable by nature. In other words, 3 is always 3. You cannot change the value of the number 3. An `array` or `object`, however, is mutable. In practice, your state will probably consist of an `array` or `object`, as these are useful data structures for representing many types of information.
|
||||
Redux no impone activamente la inmutabilidad del estado en su almacén o reductores, esa responsabilidad recae en el programador. Afortunadamente, JavaScript (especialmente ES6) proporciona varias herramientas útiles que puedes utilizar para reforzar la inmutabilidad de tu estado, ya sea un `string`, `number`, `array`, u `object`. Ten en cuenta que las cadenas y los números son valores primitivos y son inmutables por naturaleza. En otras palabras, 3 siempre es 3. No se puede cambiar el valor del número 3. Sin embargo, un `array` u `object` es mutable. En la práctica, tu estado probablemente consistirá en un `array` u `object`, ya que son estructuras de datos útiles para representar muchos tipos de información.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There is a `store` and `reducer` in the code editor for managing to-do items. Finish writing the `ADD_TO_DO` case in the reducer to append a new to-do to the state. There are a few ways to accomplish this with standard JavaScript or ES6. See if you can find a way to return a new array with the item from `action.todo` appended to the end.
|
||||
Hay un `store` y un `reducer` en el editor de código para gestionar los elementos de las tareas pendientes. Termina de escribir el caso `ADD_TO_DO` en el reductor para añadir una nueva tarea al estado. Hay algunas maneras de lograr esto con JavaScript estándar o ES6. Ve si puedes encontrar la forma de devolver un nuevo arreglo con el elemento de `action.todo` añadido al final.
|
||||
|
||||
# --hints--
|
||||
|
||||
The Redux store should exist and initialize with a state equal to the `todos` array in the code editor.
|
||||
El almacén Redux debe existir e inicializarse con un estado igual al arreglo `todos` del editor de código.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,13 +39,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`addToDo` and `immutableReducer` both should be functions.
|
||||
`addToDo` e `immutableReducer` deben ser funciones.
|
||||
|
||||
```js
|
||||
assert(typeof addToDo === 'function' && typeof immutableReducer === 'function');
|
||||
```
|
||||
|
||||
Dispatching an action of type `ADD_TO_DO` on the Redux store should add a `todo` item and should NOT mutate state.
|
||||
El envío de una acción de tipo `ADD_TO_DO` en el almacén Redux debe añadir un elemento `todo` y NO debe mutar el estado.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036153
|
||||
title: Register a Store Listener
|
||||
title: Registra un escucha al almacén
|
||||
challengeType: 6
|
||||
forumTopicId: 301446
|
||||
dashedName: register-a-store-listener
|
||||
@ -8,15 +8,15 @@ dashedName: register-a-store-listener
|
||||
|
||||
# --description--
|
||||
|
||||
Another method you have access to on the Redux `store` object is `store.subscribe()`. This allows you to subscribe listener functions to the store, which are called whenever an action is dispatched against the store. One simple use for this method is to subscribe a function to your store that simply logs a message every time an action is received and the store is updated.
|
||||
Otro método al que tienes acceso en el objeto Redux `store` es `store.subscribe()`. Esto te permite suscribir funciones de escucha al almacén, que se llaman cada vez que se envía una acción contra el almacén. Un uso sencillo de este método es suscribir una función a tu almacén que simplemente registra un mensaje cada vez que se recibe una acción y se actualiza el almacén.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write a callback function that increments the global variable `count` every time the store receives an action, and pass this function in to the `store.subscribe()` method. You'll see that `store.dispatch()` is called three times in a row, each time directly passing in an action object. Watch the console output between the action dispatches to see the updates take place.
|
||||
Escribe una función callback que incremente la variable global `count` cada vez que el almacén recibe una acción, y pasa esta función al método `store.subscribe()`. Verás que `store.dispatch()` es llamado tres veces seguidas, cada vez pasando directamente un objeto de acción. Observa la salida de la consola entre los envíos de acción para ver cómo se producen las actualizaciones.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dispatching the `ADD` action on the store should increment the state by `1`.
|
||||
El envío de acción `ADD` en el almacén debe incrementar el estado en `1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,19 +29,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
There should be a listener function subscribed to the store using `store.subscribe`.
|
||||
Debe haber una función de escucha suscrita al almacén usando `store.subscribe`.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/store\s*\.\s*subscribe\(/gm));
|
||||
```
|
||||
|
||||
The `store.subscribe` should receive a function.
|
||||
El `store.subscribe` debe recibir una función.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/(\s*function\s*)|(\s*\(\s*\)\s*=>)/gm))
|
||||
```
|
||||
|
||||
The callback to `store.subscribe` should also increment the global `count` variable as the store is updated.
|
||||
El callback a `store.subscribe` también debe incrementar la variable global `count` a medida que se actualiza el almacén.
|
||||
|
||||
```js
|
||||
assert(store.getState() === count);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403615a
|
||||
title: Remove an Item from an Array
|
||||
title: Elimina un elemento de un arreglo
|
||||
challengeType: 6
|
||||
forumTopicId: 301447
|
||||
dashedName: remove-an-item-from-an-array
|
||||
@ -8,15 +8,15 @@ dashedName: remove-an-item-from-an-array
|
||||
|
||||
# --description--
|
||||
|
||||
Time to practice removing items from an array. The spread operator can be used here as well. Other useful JavaScript methods include `slice()` and `concat()`.
|
||||
Es hora de practicar la eliminación de elementos de un arreglo. Aquí también se puede utilizar el operador de propagación. Otros métodos útiles de JavaScript son `slice()` y `concat()`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The reducer and action creator were modified to remove an item from an array based on the index of the item. Finish writing the reducer so a new state array is returned with the item at the specific index removed.
|
||||
El reductor y el creador de acción fueron modificados para eliminar un elemento de un arreglo en función del índice del elemento. Termina de escribir el reductor para que devuelva un nuevo arreglo de estados con el elemento en el índice específico eliminado.
|
||||
|
||||
# --hints--
|
||||
|
||||
The Redux store should exist and initialize with a state equal to `[0,1,2,3,4,5]`
|
||||
El almacén Redux debe existir e inicializarse con un estado igual a `[0,1,2,3,4,5]`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -30,7 +30,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`removeItem` and `immutableReducer` both should be functions.
|
||||
`removeItem` e `immutableReducer` deben ser funciones.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -38,7 +38,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Dispatching the `removeItem` action creator should remove items from the state and should NOT mutate state.
|
||||
Enviar el creador de acción `removeItem` debe eliminar elementos del estado y NO debe mutar el estado.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036155
|
||||
title: Send Action Data to the Store
|
||||
title: Envía datos de acción al almacén
|
||||
challengeType: 6
|
||||
forumTopicId: 301448
|
||||
dashedName: send-action-data-to-the-store
|
||||
@ -8,19 +8,19 @@ dashedName: send-action-data-to-the-store
|
||||
|
||||
# --description--
|
||||
|
||||
By now you've learned how to dispatch actions to the Redux store, but so far these actions have not contained any information other than a `type`. You can also send specific data along with your actions. In fact, this is very common because actions usually originate from some user interaction and tend to carry some data with them. The Redux store often needs to know about this data.
|
||||
A estas alturas ya has aprendido a enviar acciones al almacén de Redux, pero hasta ahora estas acciones no contenían más información que un `type`. También puedes enviar datos específicos junto con sus acciones. De hecho, esto es muy común porque las acciones suelen originarse a partir de alguna interacción del usuario y suelen llevar consigo algunos datos. El almacén Redux a menudo necesita conocer estos datos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There's a basic `notesReducer()` and an `addNoteText()` action creator defined in the code editor. Finish the body of the `addNoteText()` function so that it returns an `action` object. The object should include a `type` property with a value of `ADD_NOTE`, and also a `text` property set to the `note` data that's passed into the action creator. When you call the action creator, you'll pass in specific note information that you can access for the object.
|
||||
Hay un `notesReducer()` básico y un creador de acción `addNoteText()` definido en el editor de código. Termina el cuerpo de la función `addNoteText()` para que devuelva un objeto `action`. El objeto debe incluir una propiedad `type` con un valor de `ADD_NOTE`, y también una propiedad `text` establecida a los datos de `note` que se pasa al creador de acción. Cuando llames al creador de acción, pasarás información específica de la nota a la que puedes acceder para el objeto.
|
||||
|
||||
Next, finish writing the `switch` statement in the `notesReducer()`. You need to add a case that handles the `addNoteText()` actions. This case should be triggered whenever there is an action of type `ADD_NOTE` and it should return the `text` property on the incoming `action` as the new `state`.
|
||||
A continuación, termina de escribir la sentencia `switch` en el `notesReducer()`. Necesitas añadir un caso que maneje las acciones `addNoteText()`. Este caso debe activarse siempre que haya una acción de tipo `ADD_NOTE` y debe devolver la propiedad `text` de la `action` entrante como el nuevo `state`.
|
||||
|
||||
The action is dispatched at the bottom of the code. Once you're finished, run the code and watch the console. That's all it takes to send action-specific data to the store and use it when you update store `state`.
|
||||
La acción es enviada en la parte inferior del código. Una vez que hayas terminado, ejecuta el código y observa la consola. Eso es todo lo que se necesita para enviar datos específicos de la acción al almacén y utilizarlos cuando se actualiza el `state` del almacén.
|
||||
|
||||
# --hints--
|
||||
|
||||
The action creator `addNoteText` should return an object with keys `type` and `text`.
|
||||
El creador de acción `addNoteText` debe devolver un objeto con las claves `type` y `text`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -31,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Dispatching an action of type `ADD_NOTE` with the `addNoteText` action creator should update the `state` to the string passed to the action creator.
|
||||
Enviar una acción de tipo `ADD_NOTE` con el creador de acción `addNoteText` debe actualizar el `state` a la cadena pasada al creador de acción.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036151
|
||||
title: Use a Switch Statement to Handle Multiple Actions
|
||||
title: Usa una sentencia Switch para manejar múltiples acciones
|
||||
challengeType: 6
|
||||
forumTopicId: 301449
|
||||
dashedName: use-a-switch-statement-to-handle-multiple-actions
|
||||
@ -8,35 +8,35 @@ dashedName: use-a-switch-statement-to-handle-multiple-actions
|
||||
|
||||
# --description--
|
||||
|
||||
You can tell the Redux store how to handle multiple action types. Say you are managing user authentication in your Redux store. You want to have a state representation for when users are logged in and when they are logged out. You represent this with a single state object with the property `authenticated`. You also need action creators that create actions corresponding to user login and user logout, along with the action objects themselves.
|
||||
Puedes decirle al almacén Redux cómo manejar múltiples tipos de acción. Digamos que estás gestionando la autenticación de usuarios en tu almacén Redux. Quieres tener una representación de estado para cuando los usuarios están conectados y cuando están desconectados. Esto se representa con un único objeto de estado con la propiedad `authenticated`. También se necesitan creadores de acción que creen acciones correspondientes al inicio y cierre de sesión de los usuarios, junto con los propios objetos de acción.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has a store, actions, and action creators set up for you. Fill in the `reducer` function to handle multiple authentication actions. Use a JavaScript `switch` statement in the `reducer` to respond to different action events. This is a standard pattern in writing Redux reducers. The switch statement should switch over `action.type` and return the appropriate authentication state.
|
||||
El editor de código tiene un almacén, acciones y creadores de acción configurados para ti. Rellena la función `reducer` para manejar múltiples acciones de autenticación. Usa una sentencia `switch` de JavaScript en el `reducer` para responder a diferentes eventos de acción. Este es un patrón estándar en la escritura de reductores Redux. La sentencia switch debe cambiar sobre `action.type` y devolver el estado de autenticación apropiado.
|
||||
|
||||
**Note:** At this point, don't worry about state immutability, since it is small and simple in this example. For each action, you can return a new object — for example, `{authenticated: true}`. Also, don't forget to write a `default` case in your switch statement that returns the current `state`. This is important because once your app has multiple reducers, they are all run any time an action dispatch is made, even when the action isn't related to that reducer. In such a case, you want to make sure that you return the current `state`.
|
||||
**Nota:** En este punto, no te preocupes por la inmutabilidad del estado, ya que es pequeña y simple en este ejemplo. Para cada acción, puedes devolver un nuevo objeto, por ejemplo, `{authenticated: true}`. Además, no olvides escribir un caso `default` en tu sentencia switch que devuelva el `state` actual. Esto es importante porque una vez que tu aplicación tiene múltiples reductores, todos ellos se ejecutan cada vez que se realiza un envío de acción, incluso cuando la acción no está relacionada con ese reductor. En tal caso, querrás asegurarte de que devuelves el `state` actual.
|
||||
|
||||
# --hints--
|
||||
|
||||
Calling the function `loginUser` should return an object with type property set to the string `LOGIN`.
|
||||
La llamada a la función `loginUser` debe devolver un objeto con la propiedad type establecida a la cadena `LOGIN`.
|
||||
|
||||
```js
|
||||
assert(loginUser().type === 'LOGIN');
|
||||
```
|
||||
|
||||
Calling the function `logoutUser` should return an object with type property set to the string `LOGOUT`.
|
||||
La llamada a la función `logoutUser` debe devolver un objeto con la propiedad type establecida a la cadena `LOGOUT`.
|
||||
|
||||
```js
|
||||
assert(logoutUser().type === 'LOGOUT');
|
||||
```
|
||||
|
||||
The store should be initialized with an object with an `authenticated` property set to `false`.
|
||||
El almacén debe ser inicializado con un objeto con una propiedad `authenticated` establecida a `false`.
|
||||
|
||||
```js
|
||||
assert(store.getState().authenticated === false);
|
||||
```
|
||||
|
||||
Dispatching `loginUser` should update the `authenticated` property in the store state to `true`.
|
||||
El envío de `loginUser` debe actualizar la propiedad `authenticated` en el estado del almacén a `true`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Dispatching `logoutUser` should update the `authenticated` property in the store state to `false`.
|
||||
El envío de `logoutUser` debe actualizar la propiedad `authenticated` en el estado del almacén a `false`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -67,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `authReducer` function should handle multiple action types with a `switch` statement.
|
||||
La función `authReducer` debe manejar múltiples tipos de acción con una sentencia `switch`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036152
|
||||
title: Use const for Action Types
|
||||
title: Usa const para los tipos de acción
|
||||
challengeType: 6
|
||||
forumTopicId: 301450
|
||||
dashedName: use-const-for-action-types
|
||||
@ -8,35 +8,35 @@ dashedName: use-const-for-action-types
|
||||
|
||||
# --description--
|
||||
|
||||
A common practice when working with Redux is to assign action types as read-only constants, then reference these constants wherever they are used. You can refactor the code you're working with to write the action types as `const` declarations.
|
||||
Una práctica común cuando se trabaja con Redux es asignar tipos de acción como constantes de sólo lectura, y luego hacer referencia a estas constantes dondequiera que se utilicen. Puedes refactorizar el código con el que estás trabajando para escribir los tipos de acción como declaraciones `const`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Declare `LOGIN` and `LOGOUT` as `const` values and assign them to the strings `'LOGIN'` and `'LOGOUT'`, respectively. Then, edit the `authReducer()` and the action creators to reference these constants instead of string values.
|
||||
Declara `LOGIN` y `LOGOUT` como valores `const` y asígnalos a las cadenas `'LOGIN'` y `'LOGOUT'`, respectivamente. Luego, edita el `authReducer()` y los creadores de acción para que hagan referencia a estas constantes en lugar de valores de cadena.
|
||||
|
||||
**Note:** It's generally a convention to write constants in all uppercase, and this is standard practice in Redux as well.
|
||||
**Nota:** Generalmente es una convención escribir las constantes en mayúsculas, y esto es una práctica estándar en Redux también.
|
||||
|
||||
# --hints--
|
||||
|
||||
Calling the function `loginUser` should return an object with `type` property set to the string `LOGIN`.
|
||||
La llamada a la función `loginUser` debe devolver un objeto con la propiedad `type` establecida a la cadena `LOGIN`.
|
||||
|
||||
```js
|
||||
assert(loginUser().type === 'LOGIN');
|
||||
```
|
||||
|
||||
Calling the function `logoutUser` should return an object with `type` property set to the string `LOGOUT`.
|
||||
La llamada a la función `logoutUser` debe devolver un objeto con la propiedad `type` establecida a la cadena `LOGOUT`.
|
||||
|
||||
```js
|
||||
assert(logoutUser().type === 'LOGOUT');
|
||||
```
|
||||
|
||||
The store should be initialized with an object with property `login` set to `false`.
|
||||
El almacén debe ser inicializado con un objeto con la propiedad `login` establecida a `false`.
|
||||
|
||||
```js
|
||||
assert(store.getState().authenticated === false);
|
||||
```
|
||||
|
||||
Dispatching `loginUser` should update the `login` property in the store state to `true`.
|
||||
El envío de `loginUser` debe actualizar la propiedad `login` en el estado del almacén a `true`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Dispatching `logoutUser` should update the `login` property in the store state to `false`.
|
||||
El envío de `logoutUser` debe actualizar la propiedad `login` en el estado del almacén a `false`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -67,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `authReducer` function should handle multiple action types with a switch statement.
|
||||
La función `authReducer` debe manejar múltiples tipos de acción con una sentencia switch.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -83,7 +83,7 @@ The `authReducer` function should handle multiple action types with a switch sta
|
||||
);
|
||||
```
|
||||
|
||||
`LOGIN` and `LOGOUT` should be declared as `const` values and should be assigned strings of `LOGIN`and `LOGOUT`.
|
||||
`LOGIN` y `LOGOUT` deben declararse como valores `const` y se les debe asignar cadenas de `LOGIN` y `LOGOUT`.
|
||||
|
||||
```js
|
||||
const noWhiteSpace = __helpers.removeWhiteSpace(code);
|
||||
@ -94,7 +94,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The action creators and the reducer should reference the `LOGIN` and `LOGOUT` constants.
|
||||
Los creadores de la acción y el reductor deben hacer referencia a las constantes `LOGIN` y `LOGOUT`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036156
|
||||
title: Use Middleware to Handle Asynchronous Actions
|
||||
title: Usa middleware para manejar acciones asíncronas
|
||||
challengeType: 6
|
||||
forumTopicId: 301451
|
||||
dashedName: use-middleware-to-handle-asynchronous-actions
|
||||
@ -8,39 +8,39 @@ dashedName: use-middleware-to-handle-asynchronous-actions
|
||||
|
||||
# --description--
|
||||
|
||||
So far these challenges have avoided discussing asynchronous actions, but they are an unavoidable part of web development. At some point you'll need to call asynchronous endpoints in your Redux app, so how do you handle these types of requests? Redux provides middleware designed specifically for this purpose, called Redux Thunk middleware. Here's a brief description how to use this with Redux.
|
||||
Hasta ahora hemos evitado hablar de las acciones asíncronas, pero son una parte inevitable del desarrollo web. En algún momento necesitarás llamar a endpoints asíncronos en tu aplicación Redux, así que ¿cómo manejas este tipo de peticiones? Redux proporciona un middleware diseñado específicamente para este propósito, llamado Redux Thunk middleware. Aquí hay una breve descripción de cómo usar esto con Redux.
|
||||
|
||||
To include Redux Thunk middleware, you pass it as an argument to `Redux.applyMiddleware()`. This statement is then provided as a second optional parameter to the `createStore()` function. Take a look at the code at the bottom of the editor to see this. Then, to create an asynchronous action, you return a function in the action creator that takes `dispatch` as an argument. Within this function, you can dispatch actions and perform asynchronous requests.
|
||||
Para incluir el Redux Thunk middleware, lo pasas como argumento a `Redux.applyMiddleware()`. Esta declaración se proporciona entonces como un segundo parámetro opcional a la función `createStore()`. Echa un vistazo al código en la parte inferior del editor para ver esto. Entonces, para crear una acción asíncrona, se devuelve una función en el creador de acción que toma `dispatch` como argumento. Dentro de esta función, se pueden enviar acciones y realizar peticiones asíncronas.
|
||||
|
||||
In this example, an asynchronous request is simulated with a `setTimeout()` call. It's common to dispatch an action before initiating any asynchronous behavior so that your application state knows that some data is being requested (this state could display a loading icon, for instance). Then, once you receive the data, you dispatch another action which carries the data as a payload along with information that the action is completed.
|
||||
En este ejemplo, se simula una petición asíncrona con una llamada `setTimeout()`. Es común enviar una acción antes de iniciar cualquier comportamiento asíncrono para que el estado de tu aplicación sepa que se están solicitando algunos datos (este estado podría mostrar un icono de carga, por ejemplo). Luego, una vez que recibes los datos, envía otra acción que lleva los datos como carga útil junto con la información de que la acción se ha completado.
|
||||
|
||||
Remember that you're passing `dispatch` as a parameter to this special action creator. This is what you'll use to dispatch your actions, you simply pass the action directly to dispatch and the middleware takes care of the rest.
|
||||
Recuerda que estás pasando `dispatch` como parámetro a este creador de acciones especiales. Esto es lo que usarás para enviar tus acciones, simplemente pasas la acción directamente a dispatch y el middleware se encarga del resto.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write both dispatches in the `handleAsync()` action creator. Dispatch `requestingData()` before the `setTimeout()` (the simulated API call). Then, after you receive the (pretend) data, dispatch the `receivedData()` action, passing in this data. Now you know how to handle asynchronous actions in Redux. Everything else continues to behave as before.
|
||||
Escribe ambos envíos en el creador de acción `handleAsync()`. Envía `requestingData()` antes del `setTimeout()` (la llamada a la API simulada). A continuación, después de recibir los datos (fingidos), envía la acción `receivedData()`, pasando estos datos. Ahora ya sabes cómo manejar las acciones asíncronas en Redux. Todo lo demás sigue comportándose como antes.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `requestingData` action creator should return an object of type equal to the value of `REQUESTING_DATA`.
|
||||
El creador de acción `requestingData` debe devolver un objeto de tipo igual al valor de `REQUESTING_DATA`.
|
||||
|
||||
```js
|
||||
assert(requestingData().type === REQUESTING_DATA);
|
||||
```
|
||||
|
||||
The `receivedData` action creator should return an object of type equal to the value of `RECEIVED_DATA`.
|
||||
El creador de acción `receivedData` debe devolver un objeto de tipo igual al valor de `RECEIVED_DATA`.
|
||||
|
||||
```js
|
||||
assert(receivedData('data').type === RECEIVED_DATA);
|
||||
```
|
||||
|
||||
`asyncDataReducer` should be a function.
|
||||
`asyncDataReducer` debe ser una función.
|
||||
|
||||
```js
|
||||
assert(typeof asyncDataReducer === 'function');
|
||||
```
|
||||
|
||||
Dispatching the `requestingData` action creator should update the store `state` property of fetching to `true`.
|
||||
Enviar el creador de acción `requestingData` debe actualizar la propiedad store `state` de fetching a `true`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Dispatching `handleAsync` should dispatch the data request action and then dispatch the received data action after a delay.
|
||||
El envío de `handleAsync` debe enviar la acción de solicitud de datos y luego enviar la acción de datos recibidos después de un retraso.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036159
|
||||
title: Use the Spread Operator on Arrays
|
||||
title: Usa el operador de propagación en arreglos
|
||||
challengeType: 6
|
||||
forumTopicId: 301452
|
||||
dashedName: use-the-spread-operator-on-arrays
|
||||
@ -8,21 +8,21 @@ dashedName: use-the-spread-operator-on-arrays
|
||||
|
||||
# --description--
|
||||
|
||||
One solution from ES6 to help enforce state immutability in Redux is the spread operator: `...`. The spread operator has a variety of applications, one of which is well-suited to the previous challenge of producing a new array from an existing array. This is relatively new, but commonly used syntax. For example, if you have an array `myArray` and write:
|
||||
Una solución de ES6 para ayudar a reforzar la inmutabilidad del estado en Redux es el operador de propagación: `...`. El operador de propagación tiene una variedad de aplicaciones, una de las cuales es muy adecuada para el desafío anterior de producir un nuevo arreglo a partir de un arreglo existente. Se trata de una sintaxis relativamente nueva, pero de uso común. Por ejemplo, si tienes un arreglo `myArray` y escribes:
|
||||
|
||||
```js
|
||||
let newArray = [...myArray];
|
||||
```
|
||||
|
||||
`newArray` is now a clone of `myArray`. Both arrays still exist separately in memory. If you perform a mutation like `newArray.push(5)`, `myArray` doesn't change. The `...` effectively *spreads* out the values in `myArray` into a new array. To clone an array but add additional values in the new array, you could write `[...myArray, 'new value']`. This would return a new array composed of the values in `myArray` and the string `new value` as the last value. The spread syntax can be used multiple times in array composition like this, but it's important to note that it only makes a shallow copy of the array. That is to say, it only provides immutable array operations for one-dimensional arrays.
|
||||
`newArray` es ahora un clon de `myArray`. Ambos arreglos siguen existiendo por separado en la memoria. Si realizas una mutación como `newArray.push(5)`, `myArray` no cambia. El `...` efectivamente *distribuye* los valores de `myArray` en un nuevo arreglo. Para clonar un arreglo pero añadir valores adicionales en el nuevo arreglo, se podría escribir `[...myArray, 'new value']`. Esto devolvería un nuevo arreglo compuesto por los valores de `myArray` y la cadena `new value` como último valor. La sintaxis de propagación se puede utilizar varias veces en la composición de arreglos como este, pero es importante tener en cuenta que sólo hace una copia superficial del arreglo. Es decir, sólo proporciona operaciones de arreglos inmutables para arreglos unidimensionales.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the spread operator to return a new copy of state when a to-do is added.
|
||||
Utiliza el operador de propagación para devolver una nueva copia del estado cuando se añade una tarea.
|
||||
|
||||
# --hints--
|
||||
|
||||
The Redux store should exist and initialize with a state equal to `["Do not mutate state!"]`.
|
||||
El almacén Redux debe existir e inicializarse con un estado igual a `["Do not mutate state!"]`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -36,13 +36,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`addToDo` and `immutableReducer` both should be functions.
|
||||
`addToDo` e `immutableReducer` deben ser funciones.
|
||||
|
||||
```js
|
||||
assert(typeof addToDo === 'function' && typeof immutableReducer === 'function');
|
||||
```
|
||||
|
||||
Dispatching an action of type `ADD_TO_DO` on the Redux store should add a `todo` item and should NOT mutate state.
|
||||
Enviar una acción de tipo `ADD_TO_DO` en el almacén Redux debe añadir un elemento `todo` y NO debe mutar el estado.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -57,7 +57,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The spread operator should be used to return new state.
|
||||
El operador de propagación debe utilizarse para devolver el nuevo estado.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').includes('...state'));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036157
|
||||
title: Write a Counter with Redux
|
||||
title: Escribe un contador con Redux
|
||||
challengeType: 6
|
||||
forumTopicId: 301453
|
||||
dashedName: write-a-counter-with-redux
|
||||
@ -8,33 +8,33 @@ dashedName: write-a-counter-with-redux
|
||||
|
||||
# --description--
|
||||
|
||||
Now you've learned all the core principles of Redux! You've seen how to create actions and action creators, create a Redux store, dispatch your actions against the store, and design state updates with pure reducers. You've even seen how to manage complex state with reducer composition and handle asynchronous actions. These examples are simplistic, but these concepts are the core principles of Redux. If you understand them well, you're ready to start building your own Redux app. The next challenges cover some of the details regarding `state` immutability, but first, here's a review of everything you've learned so far.
|
||||
¡Ahora ya has aprendido todos los principios básicos de Redux! Has visto cómo crear acciones y creadores de acción, crear un almacén Redux, enviar tus acciones contra el almacén y diseñar actualizaciones de estado con reductores puros. Incluso has visto cómo gestionar estados complejos con la composición de reductores y manejar acciones asíncronas. Estos ejemplos son simplistas, pero estos conceptos son los principios básicos de Redux. Si los entiendes bien, estás listo para empezar a construir tu propia aplicación Redux. Los próximos desafíos cubren algunos de los detalles relacionados con la inmutabilidad de `state`, pero primero, aquí hay un repaso de todo lo que has aprendido hasta ahora.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In this lesson, you'll implement a simple counter with Redux from scratch. The basics are provided in the code editor, but you'll have to fill in the details! Use the names that are provided and define `incAction` and `decAction` action creators, the `counterReducer()`, `INCREMENT` and `DECREMENT` action types, and finally the Redux `store`. Once you're finished you should be able to dispatch `INCREMENT` or `DECREMENT` actions to increment or decrement the state held in the `store`. Good luck building your first Redux app!
|
||||
En esta lección, implementarás un simple contador con Redux desde cero. El editor de código proporciona lo básico, ¡pero tendrás que completar los detalles! Utiliza los nombres que se proporcionan y define los creadores de acciones `incAction` y `decAction`, el `counterReducer()`, los tipos de acción `INCREMENT` y `DECREMENT`, y finalmente el `store` de Redux. Una vez que hayas terminado deberías poder enviar acciones `INCREMENT` o `DECREMENT` para incrementar o disminuir el estado mantenido en el `store`. ¡Buena suerte construyendo tu primera aplicación Redux!
|
||||
|
||||
# --hints--
|
||||
|
||||
The action creator `incAction` should return an action object with `type` equal to the value of `INCREMENT`
|
||||
El creador de acción `incAction` debe devolver un objeto de acción con `type` igual al valor de `INCREMENT`
|
||||
|
||||
```js
|
||||
assert(incAction().type === INCREMENT);
|
||||
```
|
||||
|
||||
The action creator `decAction` should return an action object with `type` equal to the value of `DECREMENT`
|
||||
El creador de acción `decAction` debe devolver un objeto de acción con `type` igual al valor de `DECREMENT`
|
||||
|
||||
```js
|
||||
assert(decAction().type === DECREMENT);
|
||||
```
|
||||
|
||||
The Redux store should initialize with a `state` of 0.
|
||||
El almacén Redux debe inicializarse con un `state` de 0.
|
||||
|
||||
```js
|
||||
assert(store.getState() === 0);
|
||||
```
|
||||
|
||||
Dispatching `incAction` on the Redux store should increment the `state` by 1.
|
||||
El envío de `incAction` en el almacén Redux debe incrementar el `state` en 1.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Dispatching `decAction` on the Redux store should decrement the `state` by 1.
|
||||
El envío de `decAction` en el almacén Redux debe disminuir el `state` en 1.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -60,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`counterReducer` should be a function
|
||||
`counterReducer` debe ser una función
|
||||
|
||||
```js
|
||||
assert(typeof counterReducer === 'function');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Create Reusable CSS with Mixins
|
||||
title: Crea CSS reutilizable con Mixins
|
||||
challengeType: 0
|
||||
forumTopicId: 301455
|
||||
dashedName: create-reusable-css-with-mixins
|
||||
@ -8,9 +8,9 @@ dashedName: create-reusable-css-with-mixins
|
||||
|
||||
# --description--
|
||||
|
||||
In Sass, a <dfn>mixin</dfn> is a group of CSS declarations that can be reused throughout the style sheet.
|
||||
En Sass, un <dfn>mixin</dfn> es un grupo de declaraciones de CSS que pueden reutilizarse a través de la hoja de estilo.
|
||||
|
||||
Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider `box-shadow`:
|
||||
Las nuevas funciones de CSS tardan en ser adoptadas por completo y estar listas para su uso en todos los navegadores. A medida que se añaden funciones a los navegadores, las reglas CSS que las utilizan pueden necesitar prefijos de proveedor. Consideremos `box-shadow`:
|
||||
|
||||
```scss
|
||||
div {
|
||||
@ -21,7 +21,7 @@ div {
|
||||
}
|
||||
```
|
||||
|
||||
It's a lot of typing to re-write this rule for all the elements that have a `box-shadow`, or to change each value to test different effects. Mixins are like functions for CSS. Here is how to write one:
|
||||
Es mucho teclear para reescribir esta regla para todos los elementos que tienen un `box-shadow`, o para cambiar cada valor para probar diferentes efectos. Mixins son como funciones para CSS. Aquí está cómo escribir una:
|
||||
|
||||
```scss
|
||||
@mixin box-shadow($x, $y, $blur, $c){
|
||||
@ -32,7 +32,7 @@ It's a lot of typing to re-write this rule for all the elements that have a `box
|
||||
}
|
||||
```
|
||||
|
||||
The definition starts with `@mixin` followed by a custom name. The parameters (the `$x`, `$y`, `$blur`, and `$c` in the example above) are optional. Now any time a `box-shadow` rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the `@include` directive:
|
||||
La definición empieza con `@mixin` seguido de un nombre personalizado. Los parámetros ( `$x`, `$y`, `$blur`, y `$c` en el ejemplo anterior) son opcionales. Ahora cada vez que se necesite una regla `box-shadow`, una sola línea llamando al mixin reemplaza el tener que escribir todos los prefijos del proveedor. Se llama a un mixin con la directiva `@include`:
|
||||
|
||||
```scss
|
||||
div {
|
||||
@ -42,17 +42,17 @@ div {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write a mixin for `border-radius` and give it a `$radius` parameter. It should use all the vendor prefixes from the example. Then use the `border-radius` mixin to give the `#awesome` element a border radius of `15px`.
|
||||
Escribe un mixin para `border-radius` y dale un parámetro `$radius`. Debe utilizar todos los prefijos de proveedor del ejemplo. Luego usa el mixin `border-radius` para dar al elemento `#awesome` un border radius de `15px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should declare a mixin named `border-radius` which has a parameter named `$radius`.
|
||||
Tu código debe declarar un mixin llamado `border-radius` que tiene un parámetro llamado `$radius`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
Your code should include the `-webkit-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
Tu código debe incluir el prefijo de proveedor `-webkit-border-radius` que utiliza el parámetro `$radius`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -60,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should include the `-moz-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
Tu código debe incluir el prefijo de proveedor `-moz-border-radius` que utiliza el parámetro `$radius`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -68,13 +68,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should include the `-ms-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
Tu código debe incluir el prefijo de proveedor `-ms-border-radius` que utiliza el parámetro `$radius`.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
|
||||
```
|
||||
|
||||
Your code should include the general `border-radius` rule that uses the `$radius` parameter.
|
||||
Tu código debe incluir la regla general `border-radius` que utiliza el parámetro `$radius`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -83,7 +83,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should call the `border-radius mixin` using the `@include` keyword, setting it to `15px`.
|
||||
Tu código debe llamar al `border-radius mixin` usando la palabra clave `@include`, configurándolo a `15px`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: Extend One Set of CSS Styles to Another Element
|
||||
title: Hereda un conjunto de estilos CSS a otro elemento
|
||||
challengeType: 0
|
||||
forumTopicId: 301456
|
||||
dashedName: extend-one-set-of-css-styles-to-another-element
|
||||
@ -8,9 +8,9 @@ dashedName: extend-one-set-of-css-styles-to-another-element
|
||||
|
||||
# --description--
|
||||
|
||||
Sass has a feature called `extend` that makes it easy to borrow the CSS rules from one element and build upon them in another.
|
||||
Sass tiene una función llamada `extend` que facilita tomar prestadas las reglas CSS de un elemento y construir sobre ellas en otro.
|
||||
|
||||
For example, the below block of CSS rules style a `.panel` class. It has a `background-color`, `height` and `border`.
|
||||
Por ejemplo, el siguiente bloque de reglas CSS da estilo a la clase `.panel`. Este tiene un `background-color`, `height` y `border`.
|
||||
|
||||
```scss
|
||||
.panel{
|
||||
@ -20,7 +20,7 @@ For example, the below block of CSS rules style a `.panel` class. It has a `back
|
||||
}
|
||||
```
|
||||
|
||||
Now you want another panel called `.big-panel`. It has the same base properties as `.panel`, but also needs a `width` and `font-size`. It's possible to copy and paste the initial CSS rules from `.panel`, but the code becomes repetitive as you add more types of panels. The `extend` directive is a simple way to reuse the rules written for one element, then add more for another:
|
||||
Ahora tienes otro panel llamado `.big-panel`. Tiene las mismas propiedades base que `.panel`, pero también necesita `width` y `font-size`. Es posible copiar y pegar las reglas de CSS iniciales de `.panel`, pero el código se vuelve repetitivo a medida que agregas más tipos de paneles. La directiva `extend` es una forma simple de reutilizar las reglas escritas para un elemento y luego añadir más para otro:
|
||||
|
||||
```scss
|
||||
.big-panel{
|
||||
@ -30,15 +30,15 @@ Now you want another panel called `.big-panel`. It has the same base properties
|
||||
}
|
||||
```
|
||||
|
||||
The `.big-panel` will have the same properties as `.panel` in addition to the new styles.
|
||||
El `.big-panel` tendrá las mismas propiedades que `.panel` además de los nuevos estilos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Make a class `.info-important` that extends `.info` and also has a `background-color` set to magenta.
|
||||
Crea una clase `.info-important` que hereda `.info` y también tiene un `background-color` establecido en magenta.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `info-important` class should have a `background-color` set to `magenta`.
|
||||
Tu clase `info-important` debe tener un `background-color` establecido a `magenta`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `info-important` class should use `@extend` to inherit the styling from the `info` class.
|
||||
Tu clase `info-important` debe usar `@extend` para heredar el estilo de la clase `info`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Nest CSS with Sass
|
||||
title: Anida CSS con Sass
|
||||
challengeType: 0
|
||||
forumTopicId: 301457
|
||||
dashedName: nest-css-with-sass
|
||||
@ -8,9 +8,9 @@ dashedName: nest-css-with-sass
|
||||
|
||||
# --description--
|
||||
|
||||
Sass allows nesting of CSS rules, which is a useful way of organizing a style sheet.
|
||||
Sass permite anidar las reglas CSS, que es una forma útil de organizar una hoja de estilo.
|
||||
|
||||
Normally, each element is targeted on a different line to style it, like so:
|
||||
Normalmente, cada elemento está dirigido a una línea diferente para darle estilo, así:
|
||||
|
||||
```scss
|
||||
nav {
|
||||
@ -26,7 +26,7 @@ nav ul li {
|
||||
}
|
||||
```
|
||||
|
||||
For a large project, the CSS file will have many lines and rules. This is where nesting can help organize your code by placing child style rules within the respective parent elements:
|
||||
Para un proyecto grande, el archivo CSS tendrá muchas líneas y reglas. Aquí es donde la anidación puede ayudar a organizar tu código colocando reglas de estilo hijo dentro de los respectivos elementos padres:
|
||||
|
||||
```scss
|
||||
nav {
|
||||
@ -45,11 +45,11 @@ nav {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the nesting technique shown above to re-organize the CSS rules for both children of `.blog-post` element. For testing purposes, the `h1` should come before the `p` element.
|
||||
Utiliza la técnica de anidación mostrada anteriormente para reorganizar las reglas CSS para ambos hijos del elemento `.blog-post`. Para fines de prueba, el `h1` debe ir antes del elemento `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should re-organize the CSS rules so the `h1` and `p` are nested in the `.blog-post` parent element.
|
||||
Tu código debe reorganizar las reglas CSS para que `h1` y `p` estén anidados en el elemento padre `.blog-post`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: Split Your Styles into Smaller Chunks with Partials
|
||||
title: Divide tus estilos en trozos más pequeños con parciales
|
||||
challengeType: 0
|
||||
forumTopicId: 301459
|
||||
dashedName: split-your-styles-into-smaller-chunks-with-partials
|
||||
@ -8,25 +8,25 @@ dashedName: split-your-styles-into-smaller-chunks-with-partials
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>Partials</dfn> in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.
|
||||
<dfn>Parciales</dfn> en Sass son archivos separados que contienen segmentos de código CSS. Estos se importan y son utilizados en otros archivos Sass. Esta es una gran manera de agrupar código similar en un módulo para mantenerlo organizado.
|
||||
|
||||
Names for partials start with the underscore (`_`) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the `.scss` file extension. To bring the code in the partial into another Sass file, use the `@import` directive.
|
||||
Los nombres de los parciales comienzan con el carácter de guión bajo (`_`), que le dice a Sass que es un pequeño segmento de CSS y no para convertirlo en un archivo CSS. También, los archivos Sass terminan con la extensión de archivo `.scss`. Para introducir el código en el parcial en otro archivo Sass, utiliza la directiva `@import`.
|
||||
|
||||
For example, if all your mixins are saved in a partial named "\_mixins.scss", and they are needed in the "main.scss" file, this is how to use them in the main file:
|
||||
Por ejemplo, si todos tus mixins se guardan en un parcial llamado "\_mixins.scss", y son necesarios en el archivo "main.scss", es cómo usarlos en el archivo principal:
|
||||
|
||||
```scss
|
||||
@import 'mixins'
|
||||
```
|
||||
|
||||
Note that the underscore and file extension are not needed in the `import` statement - Sass understands it is a partial. Once a partial is imported into a file, all variables, mixins, and other code are available to use.
|
||||
Ten en cuenta que el guión bajo y la extensión del archivo no son necesarios en la declaración `import` - Sass entiende que es un parcial. Una vez que un parcial es importado en un archivo, todas las variables, mixins y otros códigos están disponibles para usar.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write an `@import` statement to import a partial named `_variables.scss` into the main.scss file.
|
||||
Escribe una instrucción `@import` para importar un nombre parcial `_variables.scss` en el archivo main.scss.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@import` directive, and should not include the underscore in the file name.
|
||||
Tu código debe usar la directiva `@import` y no debe incluir el guión bajo en el nombre del archivo.
|
||||
|
||||
```js
|
||||
assert(code.match(/@import\s+?('|")variables\1/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Store Data with Sass Variables
|
||||
title: Almacena datos con variables Sass
|
||||
challengeType: 0
|
||||
forumTopicId: 301460
|
||||
dashedName: store-data-with-sass-variables
|
||||
@ -8,18 +8,18 @@ dashedName: store-data-with-sass-variables
|
||||
|
||||
# --description--
|
||||
|
||||
One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.
|
||||
Una característica de Sass que es diferente de CSS es que utiliza variables. Se declaran y establecen para almacenar datos, de forma similar a JavaScript.
|
||||
|
||||
In JavaScript, variables are defined using the `let` and `const` keywords. In Sass, variables start with a `$` followed by the variable name.
|
||||
En JavaScript, las variables se definen mediante las palabras clave `let` y `const`. En Sass, las variables comienzan con un `$` seguido del nombre de la variable.
|
||||
|
||||
Here are a couple examples:
|
||||
Aquí hay un par de ejemplos:
|
||||
|
||||
```scss
|
||||
$main-fonts: Arial, sans-serif;
|
||||
$headings-color: green;
|
||||
```
|
||||
|
||||
And to use the variables:
|
||||
Y para usar las variables:
|
||||
|
||||
```scss
|
||||
h1 {
|
||||
@ -28,33 +28,33 @@ h1 {
|
||||
}
|
||||
```
|
||||
|
||||
One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.
|
||||
Un ejemplo en el que las variables son útiles es cuando un número de elementos tiene que ser del mismo color. Si se cambia ese color, el único lugar para editar el código es el valor de la variable.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a variable `$text-color` and set it to `red`. Then change the value of the `color` property for the `.blog-post` and `h2` to the `$text-color` variable.
|
||||
Crea una variable `$text-color` y asígnala como `red`. Luego, cambia el valor de la propiedad `color` para el `.blog-post` y `h2` a la variable `$text-color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a Sass variable declared for `$text-color` with a value of `red`.
|
||||
Tu código debe tener una variable Sass declarada para `$text-color` con un valor de `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$text-color\s*:\s*?red\s*;/g));
|
||||
```
|
||||
|
||||
Your code should use the `$text-color` variable to change the `color` for the `.blog-post` and `h2` items.
|
||||
Tu código debe utilizar la variable `$text-color` para cambiar el `color` de los elementos `.blog-post` y `h2`.
|
||||
|
||||
```js
|
||||
assert(code.match(/color\s*:\s*\$text-color\s*;?/g));
|
||||
```
|
||||
|
||||
Your `.blog-post` element should have a `color` of red.
|
||||
Tu elemento `.blog-post` debe tener un `color` rojo.
|
||||
|
||||
```js
|
||||
assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Your `h2` elements should have a `color` of red.
|
||||
Tu elemento `h2` debe tener un `color` rojo.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(255, 0, 0)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Use @each to Map Over Items in a List
|
||||
title: Usa @each para asignar elementos en una lista
|
||||
challengeType: 0
|
||||
forumTopicId: 301461
|
||||
dashedName: use-each-to-map-over-items-in-a-list
|
||||
@ -8,7 +8,7 @@ dashedName: use-each-to-map-over-items-in-a-list
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge showed how the `@for` directive uses a starting and ending value to loop a certain number of times. Sass also offers the `@each` directive which loops over each item in a list or map. On each iteration, the variable gets assigned to the current value from the list or map.
|
||||
El último desafío mostró cómo la directiva `@for` utiliza un valor inicial y final para hacer un bucle un determinado número de veces. Sass también ofrece la directiva `@each` que hace un bucle sobre cada elemento de una lista o mapa. En cada iteración, la variable se asigna al valor actual de la lista o del mapa.
|
||||
|
||||
```scss
|
||||
@each $color in blue, red, green {
|
||||
@ -16,7 +16,7 @@ The last challenge showed how the `@for` directive uses a starting and ending va
|
||||
}
|
||||
```
|
||||
|
||||
A map has slightly different syntax. Here's an example:
|
||||
Un mapa tiene una sintaxis ligeramente diferente. Aquí hay un ejemplo:
|
||||
|
||||
```scss
|
||||
$colors: (color1: blue, color2: red, color3: green);
|
||||
@ -26,7 +26,7 @@ $colors: (color1: blue, color2: red, color3: green);
|
||||
}
|
||||
```
|
||||
|
||||
Note that the `$key` variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have `color1`, `color2`... in it. Both of the above code examples are converted into the following CSS:
|
||||
Ten en cuenta que la variable `$key` es necesaria para hacer referencia a las claves en el mapa. De lo contrario, el CSS compilado tendría `color1`, `color2`... en él. Los dos ejemplos anteriores se convierten en el siguiente CSS:
|
||||
|
||||
```scss
|
||||
.blue-text {
|
||||
@ -44,29 +44,29 @@ Note that the `$key` variable is needed to reference the keys in the map. Otherw
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write an `@each` directive that goes through a list: `blue, black, red` and assigns each variable to a `.color-bg` class, where the `color` part changes for each item. Each class should set the `background-color` the respective color.
|
||||
Escribe una directiva `@each` que recorra una lista: `blue, black, red` y asigna cada variable a una clase `.color-bg`, donde la parte `color` cambia para cada elemento. Cada clase debe establecer el `background-color` al respectivo color.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@each` directive.
|
||||
Tu código debe utilizar la directiva `@each`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@each /g));
|
||||
```
|
||||
|
||||
Your `.blue-bg` class should have a `background-color` of blue.
|
||||
Tu clase `.blue-bg` debe tener un `background-color` de color azul.
|
||||
|
||||
```js
|
||||
assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
Your `.black-bg` class should have a `background-color` of black.
|
||||
Tu clase `.black-bg` debe tener un `background-color` de color negro.
|
||||
|
||||
```js
|
||||
assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Your `.red-bg` class should have a `background-color` of red.
|
||||
Tu clase `.red-bg` debe tener un `background-color` de color rojo.
|
||||
|
||||
```js
|
||||
assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: Use @for to Create a Sass Loop
|
||||
title: Usa @for para crear un bucle Sass
|
||||
challengeType: 0
|
||||
forumTopicId: 301462
|
||||
dashedName: use-for-to-create-a-sass-loop
|
||||
@ -8,11 +8,11 @@ dashedName: use-for-to-create-a-sass-loop
|
||||
|
||||
# --description--
|
||||
|
||||
The `@for` directive adds styles in a loop, very similar to a `for` loop in JavaScript.
|
||||
La directiva `@for` añade estilos en un bucle, muy similar a un bucle `for` en JavaScript.
|
||||
|
||||
`@for` is used in two ways: "start through end" or "start to end". The main difference is that the "start **to** end" *excludes* the end number as part of the count, and "start **through** end" *includes* the end number as part of the count.
|
||||
`@for` se utiliza de dos maneras: "de principio hasta el fin" o "de principio a fin". La principal diferencia es que el "de principio **a** fin" *excluye* el número final como parte de la cuenta, y "de principio **hasta** el fin" *incluye* el número final como parte de la cuenta.
|
||||
|
||||
Here's a start **through** end example:
|
||||
Aquí hay un ejemplo de principio **hasta** el fin:
|
||||
|
||||
```scss
|
||||
@for $i from 1 through 12 {
|
||||
@ -20,7 +20,7 @@ Here's a start **through** end example:
|
||||
}
|
||||
```
|
||||
|
||||
The `#{$i}` part is the syntax to combine a variable (`i`) with text to make a string. When the Sass file is converted to CSS, it looks like this:
|
||||
La parte `#{$i}` es la sintaxis para combinar una variable (`i`) con texto para hacer una cadena. Cuando el archivo Sass se convierte en CSS, tiene este aspecto:
|
||||
|
||||
```scss
|
||||
.col-1 {
|
||||
@ -38,47 +38,47 @@ The `#{$i}` part is the syntax to combine a variable (`i`) with text to make a s
|
||||
}
|
||||
```
|
||||
|
||||
This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.
|
||||
Esta es una manera poderosa de crear un diseño de cuadrícula (grid). Ahora tienes doce opciones de ancho de columna disponibles como clases CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write a `@for` directive that takes a variable `$j` that goes from 1 **to** 6.
|
||||
Escribe una directiva `@for` que tome una variable `$j` que vaya de 1 **a** 6.
|
||||
|
||||
It should create 5 classes called `.text-1` to `.text-5` where each has a `font-size` set to 15px multiplied by the index.
|
||||
Debes crear 5 clases llamadas `.text-1` a `.text-5` donde cada una tiene un `font-size` establecido en 15px multiplicado por el índice.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@for` directive.
|
||||
Tu código debe utilizar la directiva `@for`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@for /g));
|
||||
```
|
||||
|
||||
Your `.text-1` class should have a `font-size` of 15px.
|
||||
Tu clase `.text-1` debe tener un `font-size` de 15px.
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
Your `.text-2` class should have a `font-size` of 30px.
|
||||
Tu clase `.text-2` debe tener un `font-size` de 30px.
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
Your `.text-3` class should have a `font-size` of 45px.
|
||||
Tu clase `.text-3` debe tener un `font-size` de 45px.
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
Your `.text-4` class should have a `font-size` of 60px.
|
||||
Tu clase `.text-4` debe tener un `font-size` de 60px.
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
Your `.text-5` class should have a `font-size` of 75px.
|
||||
Tu clase `.text-5` debe tener un `font-size` de 75px.
|
||||
|
||||
```js
|
||||
assert($('.text-5').css('font-size') == '75px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Use @if and @else to Add Logic To Your Styles
|
||||
title: Usa @if y @else para añadir lógica a tus estilos
|
||||
challengeType: 0
|
||||
forumTopicId: 301463
|
||||
dashedName: use-if-and-else-to-add-logic-to-your-styles
|
||||
@ -8,7 +8,7 @@ dashedName: use-if-and-else-to-add-logic-to-your-styles
|
||||
|
||||
# --description--
|
||||
|
||||
The `@if` directive in Sass is useful to test for a specific case - it works just like the `if` statement in JavaScript.
|
||||
La directiva `@if` en Sass es útil para probar un caso específico: funciona igual que la sentencia `if` en JavaScript.
|
||||
|
||||
```scss
|
||||
@mixin make-bold($bool) {
|
||||
@ -18,7 +18,7 @@ The `@if` directive in Sass is useful to test for a specific case - it works jus
|
||||
}
|
||||
```
|
||||
|
||||
And just like in JavaScript, `@else if` and `@else` test for more conditions:
|
||||
Y al igual que en JavaScript, `@else if` y `@else` prueban más condiciones:
|
||||
|
||||
```scss
|
||||
@mixin text-effect($val) {
|
||||
@ -39,7 +39,7 @@ And just like in JavaScript, `@else if` and `@else` test for more conditions:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a mixin called `border-stroke` that takes a parameter `$val`. The mixin should check for the following conditions using `@if`, `@else if`, and `@else`:
|
||||
Crea un mixin llamado `border-stroke` que toma un parámetro `$val`. El mixin debe comprobar las siguientes condiciones utilizando `@if`, `@else if`, y `@else`:
|
||||
|
||||
```scss
|
||||
light - 1px solid black
|
||||
@ -47,17 +47,17 @@ medium - 3px solid black
|
||||
heavy - 6px solid black
|
||||
```
|
||||
|
||||
If `$val` is not `light`, `medium`, or `heavy`, the border should be set to `none`.
|
||||
Si `$val` no es `light`, `medium`, o `heavy`, el borde debe establecerse en `none`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should declare a mixin named `border-stroke` which has a parameter named `$val`.
|
||||
Tu código debe declarar un mixin llamado `border-stroke` que tiene un parámetro llamado `$val`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
Your mixin should have an `@if` statement to check if `$val` is `light`, and to set the `border` to `1px solid black`.
|
||||
Tu mixin debe tener una sentencia `@if` para comprobar si `$val` es `light`, y para establecer el `border` a `1px solid black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -67,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your mixin should have an `@else if` statement to check if `$val` is `medium`, and to set the `border` to `3px solid black`.
|
||||
Tu mixin debe tener una sentencia `@else if` para comprobar si `$val` es `medium`, y para establecer el `border` a `3px solid black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -77,7 +77,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your mixin should have an `@else if` statement to check if `$val` is `heavy`, and to set the `border` to `6px solid black`.
|
||||
Tu mixin debe tener una sentencia `@else if` para comprobar si `$val` es `heavy`, y para establecer el `border` a `6px solid black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -87,7 +87,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your mixin should have an `@else` statement to set the `border` to `none`.
|
||||
Tu mixin debe tener una sentencia `@else` para establecer el `border` a `none`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7168d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Bar Chart
|
||||
title: Visualiza datos con un gráfico de barras
|
||||
challengeType: 3
|
||||
forumTopicId: 301464
|
||||
dashedName: visualize-data-with-a-bar-chart
|
||||
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-bar-chart
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
|
||||
**Objetivo:** Crea una aplicación en [CodePen.io](https://codepen.io) que sea funcionalmente similar a esta: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue pasar todas las pruebas. Dale tu estilo personal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Puedes utilizar HTML, JavaScript, CSS y la librería de visualización basada en svg D3. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas D3, ya que sus posiciones se utilizan para determinar la alineación de los elementos gráficos. Encontrarás información sobre cómo generar ejes en <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
|
||||
|
||||
**User Story #1:** My chart should have a title with a corresponding `id="title"`.
|
||||
**Historia de usuario #1:** Mi gráfico debe tener un título con su correspondiente `id="title"`.
|
||||
|
||||
**User Story #2:** My chart should have a `g` element x-axis with a corresponding `id="x-axis"`.
|
||||
**Historia de usuario #2:** Mi gráfico debe tener un elemento `g` en el eje-x con su correspondiente `id="x-axis"`.
|
||||
|
||||
**User Story #3:** My chart should have a `g` element y-axis with a corresponding `id="y-axis"`.
|
||||
**Historia de usuario #3:** Mi gráfico debe tener un elemento `g` en el eje-y con su correspondiente `id="y-axis"`.
|
||||
|
||||
**User Story #4:** Both axes should contain multiple tick labels, each with a corresponding `class="tick"`.
|
||||
**Historia de usuario #4:** Ambos ejes debe contener múltiples etiquetas de marca, cada uno con su correspondiente `class="tick"`.
|
||||
|
||||
**User Story #5:** My chart should have a `rect` element for each data point with a corresponding `class="bar"` displaying the data.
|
||||
**Historia de usuario #5:** Mi gráfico debe tener un elemento `rect` por cada punto de datos con su correspondiente `class="bar"` mostrando los datos.
|
||||
|
||||
**User Story #6:** Each bar should have the properties `data-date` and `data-gdp` containing `date` and `GDP` values.
|
||||
**Historia de usuario #6:** Cada barra debe tener la propiedad `data-date` y `data-gdp` conteniendo los valores `date` y `GDP`.
|
||||
|
||||
**User Story #7:** The bar elements' `data-date` properties should match the order of the provided data.
|
||||
**Historia de usuario #7:** Las propiedades `data-date` de los elementos de la barra deben coincidir con el orden de los datos proporcionados.
|
||||
|
||||
**User Story #8:** The bar elements' `data-gdp` properties should match the order of the provided data.
|
||||
**Historia de usuario #8:** Las propiedades `data-gdp` de los elementos de la barra deben coincidir con el orden de los datos proporcionados.
|
||||
|
||||
**User Story #9:** Each bar element's height should accurately represent the data's corresponding `GDP`.
|
||||
**Historia de usuario #9:** La altura de cada elemento de barra debe representar con exactitud el `GDP` correspondiente a los datos.
|
||||
|
||||
**User Story #10:** The `data-date` attribute and its corresponding bar element should align with the corresponding value on the x-axis.
|
||||
**Historia de usuario #10:** El atributo `data-date` y su correspondiente elemento de barra deben alinearse con el valor correspondiente en el eje-x.
|
||||
|
||||
**User Story #11:** The `data-gdp` attribute and its corresponding bar element should align with the corresponding value on the y-axis.
|
||||
**Historia de usuario #11:** El atributo `data-gdp` y su correspondiente elemento de barra deben alinearse con el valor correspondiente en el eje-y.
|
||||
|
||||
**User Story #12:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Historia de usuario #12:** Puedo pasar el ratón por encima de un área y ver una descripción con su correspondiente `id="tooltip"` que muestra más información sobre el área.
|
||||
|
||||
**User Story #13:** My tooltip should have a `data-date` property that corresponds to the `data-date` of the active area.
|
||||
**User Story #13:** Mi descripción debe tener una propiedad `data-date` que corresponda con el `data-date` del área activa.
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
Aquí está el conjunto de datos que necesitarás para completar este proyecto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
Puedes crear tu proyecto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>utilizando la plantilla de CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas aprobadas.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -8,24 +8,28 @@ dashedName: reuse-patterns-using-capture-groups
|
||||
|
||||
# --description--
|
||||
|
||||
Por vezes você procurará padrões que ocorrem várias vezes em uma string. Não faz sentido repetir a regex manualmente. Existe uma forma muito melhor de especificar quando a string possui múltiplas ocorrências do padrão buscado.
|
||||
|
||||
Você pode usar <dfn>grupos de captura</dfn> para buscar substrings repetidas. Usamos parênteses (`(` e `)`) para criar grupos de captura. Só precisamos escrever a regex do padrão que se repete dentro deles.
|
||||
|
||||
E, para especificar que a string capturada pelo grupo se repetirá, você escreve uma barra invertida (`\`) seguida de um número. Esse número começa por 1 e aumenta em um para cada grupo de captura que você usa. Por exemplo, `\1` captura o primeiro grupo.
|
||||
|
||||
No exemplo abaixo, é capturada qualquer palavra que se repita depois de um espaço:
|
||||
Vamos supor que você deseja encontrar a correspondência de uma palavra que ocorra várias vezes como abaixo.
|
||||
|
||||
```js
|
||||
let repeatStr = "regex regex";
|
||||
let repeatRegex = /(\w+)\s\1/;
|
||||
repeatRegex.test(repeatStr);
|
||||
repeatStr.match(repeatRegex);
|
||||
let repeatStr = "row row row your boat";
|
||||
```
|
||||
|
||||
Nele, `test` retorna `true` e `match` retorna `["regex regex", "regex"]`.
|
||||
Você poderia usar `/row row row/`, mas e se você não souber a palavra específica repetida? <dfn>Grupos de captura</dfn> podem ser usados para localizar substrings repetidas.
|
||||
|
||||
Os grupos de captura são criados envolvendo o padrão de regex a ser capturado entre parênteses. Neste caso, o objetivo é capturar uma palavra composta de caracteres alfanuméricos para que o grupo de captura seja `\w+` entre parênteses: `/(\w+)/`.
|
||||
|
||||
A substring correspondente ao grupo é salva em uma "variável" temporária que pode ser acessada dentro da mesma expressão regular usando uma barra invertida e o número do grupo de captura (ex.: `\1`). Os grupos de captura são automaticamente numerados pela posição de abertura de seus parênteses (esquerda para direita), começando em 1.
|
||||
|
||||
O exemplo abaixo captura qualquer palavra que se repita três vezes, separada por espaços:
|
||||
|
||||
```js
|
||||
let repeatRegex = /(\w+) \1 \1/;
|
||||
repeatRegex.test(repeatStr); // Returns true
|
||||
repeatStr.match(repeatRegex); // Returns ["row row row", "row"]
|
||||
```
|
||||
|
||||
Usar o método `.match()` em uma string retornará um array com a substring correspondente, juntamente com seus grupos capturados.
|
||||
|
||||
O método `.match()` de uma string retorna um array com a string capturada e cada grupo capturado.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: call-out-optional-actions-with-btn-info
|
||||
|
||||
# --description--
|
||||
|
||||
O Bootstrap vem com várias cores pré-definidas para botões. A classe `btn-info` é usada para chamar atenção para ações opcionais que o usuário pode tomar.
|
||||
O Bootstrap vem com várias cores predefinidas para botões. A classe `btn-info` é usada para chamar atenção para ações opcionais que o usuário pode tomar.
|
||||
|
||||
Crie um novo botão do Bootstrap no nível de blocos abaixo do botão `Like` com o texto `Info`, e adicione as classes `btn-info` e `btn-block` do Bootstrap a ele.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd8acde08812
|
||||
title: Centralize Texto com Bootstrap
|
||||
title: Centralizar o texto com Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16771
|
||||
dashedName: center-text-with-bootstrap
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908846
|
||||
title: Crie um Título Bootstrap
|
||||
title: Criar um título com Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16812
|
||||
dashedName: create-a-bootstrap-headline
|
||||
@ -10,21 +10,21 @@ dashedName: create-a-bootstrap-headline
|
||||
|
||||
Agora vamos construir algo do zero para praticar nossa habilidade em HTML, CSS e Bootstrap.
|
||||
|
||||
Iremos construir um playground JQuery, o qual iremos em breve colocar em uso nos nos desafios JQuery.
|
||||
Vamos construir um playground jQuery, o qual vamos colocar em uso em breve nos desafios de jQuery.
|
||||
|
||||
Para começar, crie um elemento `h3`, com o texto `JQuery Playground`.
|
||||
Para começar, crie um elemento `h3`, com o texto `jQuery Playground`.
|
||||
|
||||
Colore seu elemento `h3` com a classe Bootstrap `text-primary`, e centralize-o com a classe Bootstrap `text-center`.
|
||||
Dê ao elemento `h3` uma cor com a classe `text-primary`, e centralize-o com a classe `text-center` do Bootstrap.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um elemento `h3` para sua página.
|
||||
Você deve adicionar um elemento `h3` à página.
|
||||
|
||||
```js
|
||||
assert($('h3') && $('h3').length > 0);
|
||||
```
|
||||
|
||||
Seu elemento `h3` deve ter uma tag de fechamento.
|
||||
O elemento `h3` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,19 +34,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Seu elemento `h3` deve ser colorido ao aplicar a classe `text-primary`
|
||||
O elemento `h3` deve ser colorido ao aplicar a classe `text-primary`
|
||||
|
||||
```js
|
||||
assert($('h3').hasClass('text-primary'));
|
||||
```
|
||||
|
||||
Seu elemento `h3` deve ser centralizado ao aplicar a classe `text-center`
|
||||
O elemento `h3` deve ser centralizado ao aplicar a classe `text-center`
|
||||
|
||||
```js
|
||||
assert($('h3').hasClass('text-center'));
|
||||
```
|
||||
|
||||
Seu elemento `h3` deve ter o texto `JQuery Playground`.
|
||||
O elemento `h3` deve ter o texto `jQuery Playground`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text()));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9bec908846
|
||||
title: Crie uma Linha Bootstrap
|
||||
title: Criar uma linha do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16813
|
||||
dashedName: create-a-bootstrap-row
|
||||
@ -8,13 +8,13 @@ dashedName: create-a-bootstrap-row
|
||||
|
||||
# --description--
|
||||
|
||||
Agora iremos criar uma linha Bootstrap para nossos elementos em linha.
|
||||
Agora vamos criar uma linha do Bootstrap para nossos elementos em linha.
|
||||
|
||||
Crie um elemento `div` abaixo da tag `h3`, com a classe `row`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar o elemento `div` abaixo do seu elemento `h3`.
|
||||
Você deve adicionar o elemento `div` abaixo do elemento `h3`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -25,19 +25,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Seu elemento `div` deve ter a classe `row`
|
||||
O elemento `div` deve ter a classe `row`
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('row'));
|
||||
```
|
||||
|
||||
Seu `row div` deve estar aninhado dentro de `container-fluid div`
|
||||
O `row div` deve estar aninhado dentro de `container-fluid div`
|
||||
|
||||
```js
|
||||
assert($('div.container-fluid div.row').length > 0);
|
||||
```
|
||||
|
||||
Seu elemento `div` deve ter uma tag de fechamento.
|
||||
O elemento `div` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908852
|
||||
title: Crie uma Classe para Selecionar com JQuery Selectors
|
||||
title: Criar uma classe para selecionar com jQuery Selectors
|
||||
challengeType: 0
|
||||
forumTopicId: 16815
|
||||
dashedName: create-a-class-to-target-with-jquery-selectors
|
||||
@ -8,13 +8,13 @@ dashedName: create-a-class-to-target-with-jquery-selectors
|
||||
|
||||
# --description--
|
||||
|
||||
Nem todas as classes precisam ter um CSS correspondente. As vezes criamos classes apenas com o propósito de selecionar esses elementos de forma mais fácil usando JQuery.
|
||||
Nem todas as classes precisam ter um CSS correspondente. Às vezes, criamos classes apenas com o propósito de selecionar esses elementos de forma mais fácil usando o jQuery.
|
||||
|
||||
De a cada um de seus elementos `button` a classe `target`.
|
||||
Dê a cada um dos elementos `button` a classe `target`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve aplicar a classe `target` para cada um de seus elementos `button`.
|
||||
Você deve aplicar a classe `target` para cada um dos elementos `button`.
|
||||
|
||||
```js
|
||||
assert($('.target').length > 5);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08845
|
||||
title: Crie um Título Personalizado
|
||||
title: Criar um título personalizado
|
||||
challengeType: 0
|
||||
forumTopicId: 16816
|
||||
dashedName: create-a-custom-heading
|
||||
@ -8,9 +8,9 @@ dashedName: create-a-custom-heading
|
||||
|
||||
# --description--
|
||||
|
||||
Iremos fazer um simples título para nossa foto de gato ao colocar o título e a imagem do gato relaxando na mesma linha.
|
||||
Vamos fazer um título simples para nossa foto de gato ao colocar na mesma linha o título e a imagem do gato relaxando.
|
||||
|
||||
Lembre-se, Bootstrap usa o sistema de rede responsiva, o que torna fácil colocar elementos em linhas e especificar cada largura relativa de um elemento. A maioria das classes Bootstrap podem ser aplicadas a um elemento `div`.
|
||||
Lembre-se: o Bootstrap usa o sistema de grade responsiva, o que torna fácil colocar elementos em linha e especificar cada largura relativa de um elemento. A maioria das classes do Bootstrap podem ser aplicadas a um elemento `div`.
|
||||
|
||||
Aninhe sua primeira imagem e seu elemento `h2` dentro de um único elemento `<div class="row">`. Aninhe o seu elemento `h2` dentro de uma `<div class="col-xs-8">` e sua imagem em uma `<div class="col-xs-4">` para que eles estejam na mesma linha.
|
||||
|
||||
@ -18,13 +18,13 @@ Notou como a imagem agora está no tamanho exato para encaixar com o texto?
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `h2` e o elemento `img` mais a cima devem ambos estarem aninhados juntos dentro de um elemento `div` com a classe `row`.
|
||||
O elemento `h2` e o elemento `img` mais acima devem estar aninhados juntos dentro de um elemento `div` com a classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0);
|
||||
```
|
||||
|
||||
Seu elemento `img` superior deve estar aninhado dentro de uma `div` com a classe `col-xs-4`.
|
||||
O elemento `img` superior deve estar aninhado dentro de uma `div` com a classe `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Seu elemento `h2` deve estar aninhado dentro de uma `div` com a classe `col-xs-8`.
|
||||
O elemento `h2` deve estar aninhado dentro de uma `div` com a classe `col-xs-8`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Todos os seus elementos `div` devem ter tags de fechamento.
|
||||
Todos os elementos `div` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908848
|
||||
title: Crie Poços Bootstrap
|
||||
title: Criar poços do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16825
|
||||
dashedName: create-bootstrap-wells
|
||||
@ -8,25 +8,25 @@ dashedName: create-bootstrap-wells
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap tem uma classe chamada `well` que podem criar uma sensação visual de profundidade para suas colunas.
|
||||
O Bootstrap tem uma classe chamada `well` que pode criar uma sensação visual de profundidade para suas colunas.
|
||||
|
||||
Aninhe um elemento `div` com a classe `well` dentro de cada um de seus elementos `col-xs-6` `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um elemento `div` com a classe `well` dentro de cada um de seus elementos `div` com a classe `col-xs-6`
|
||||
Você deve adicionar um elemento `div` com a classe `well` dentro de cada um dos elementos `div` com a classe `col-xs-6`
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-6').not(':has(>div.well)').length < 1);
|
||||
```
|
||||
|
||||
Ambos os seus elementos `div` com a classe `col-xs-6` deve estar aninhados dentro de seu elemento `div` com a classe `row`.
|
||||
Ambos os elementos `div` com a classe `col-xs-6` devem estar aninhados dentro do elemento `div` com a classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row > div.col-xs-6').length > 1);
|
||||
```
|
||||
|
||||
Todos os seus elementos `div` devem ter tags de fechamento.
|
||||
Todos os elementos `div` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1347bd9aedf08845
|
||||
title: Livre-se de CSS customizado para Bootstrap
|
||||
title: Limpar o CSS customizado para o Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 17565
|
||||
dashedName: ditch-custom-css-for-bootstrap
|
||||
@ -12,27 +12,27 @@ Nós podemos limpar nosso código e fazer o aplicativo de fotos de gato parecer
|
||||
|
||||
Não se preocupe - haverá muito tempo para customizar nosso CSS depois.
|
||||
|
||||
Delete as declarações CSS `.red-text`, `p` e `.smaller-image` de seu elemento `style` para que as únicas declarações restantes em seu elemento `style` sejam `h2` e `thick-green-border`.
|
||||
Exclua as declarações CSS `.red-text`, `p` e `.smaller-image` do elemento `style` para que as únicas declarações restantes no elemento `style` sejam `h2` e `thick-green-border`.
|
||||
|
||||
Em seguida, delete o elemento `p` que contem um link morto. Em seguida, remova a classe `red-text` do seu elemento `h2` e substitua-o com a classe Bootstrap `text-primary`.
|
||||
Em seguida, exclua o elemento `p` que contem um link morto. Depois disso, remova a classe `red-text` do elemento `h2` e substitua-a pela classe `text-primary`do Bootstrap.
|
||||
|
||||
Finalmente, remova a classe `smaller-image` do seu primeiro elemento `img` e substitua o com a classe `img-responsive`.
|
||||
Finalmente, remova a classe `smaller-image` do primeiro elemento `img` e substitua-a pela classe `img-responsive`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `h2` não deve mais conter a classe `red-text`.
|
||||
O elemento `h2` não deve mais conter a classe `red-text`.
|
||||
|
||||
```js
|
||||
assert(!$('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Seu elemento `h2` deve ter agora a classe `text-primary`.
|
||||
O elemento `h2` deve ter agora a classe `text-primary`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('text-primary'));
|
||||
```
|
||||
|
||||
Seus elementos de parágrafo não devem mais usar a fonte `Monospace`.
|
||||
Os elementos de parágrafo não devem mais usar a fonte `Monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,13 +42,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
A classe `smaller-image` deve ser removida da sua imagem superior.
|
||||
A classe `smaller-image` deve ser removida da imagem superior.
|
||||
|
||||
```js
|
||||
assert(!$('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Você deve adicionar a classe `img-responsive` para sua imagem superior.
|
||||
Você deve adicionar a classe `img-responsive` à imagem superior.
|
||||
|
||||
```js
|
||||
assert($('.img-responsive').length > 1);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908855
|
||||
title: Dê a Cada Elemento um id Único
|
||||
title: Dar a cada elemento um id único
|
||||
challengeType: 0
|
||||
forumTopicId: 18191
|
||||
dashedName: give-each-element-a-unique-id
|
||||
@ -8,9 +8,9 @@ dashedName: give-each-element-a-unique-id
|
||||
|
||||
# --description--
|
||||
|
||||
Nós também queremos ser capazes de usar JQuery para selecionar cada botão a partir do seu id único.
|
||||
Nós também queremos ser capazes de usar jQuery para selecionar cada botão a partir do seu id único.
|
||||
|
||||
Dê a cada um dos seus botões um id único, começando com `target1` e terminando com `target6`.
|
||||
Dê a cada um dos botões um id único, começando com `target1` e terminando com `target6`.
|
||||
|
||||
Certifique-se de que `target1` até `target3` estão em `#left-well`, e `target4` até `target6` estão em `#right well`.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908746
|
||||
title: Hospede nossa página em um div de contêiner fluido de Bootstrap
|
||||
title: Hospedar nossa página em um div de contêiner fluido do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18198
|
||||
dashedName: house-our-page-within-a-bootstrap-container-fluid-div
|
||||
@ -8,19 +8,19 @@ dashedName: house-our-page-within-a-bootstrap-container-fluid-div
|
||||
|
||||
# --description--
|
||||
|
||||
Agora vamos garantir que todo o conteúdo na sua página seja responsivo a dispositivo móveis.
|
||||
Agora, vamos garantir que todo o conteúdo na sua página seja responsivo a dispositivo móveis.
|
||||
|
||||
Vamos aninhar nosso elemento `h3` dentro de um elemento `div` com a classe `container-fluid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `div` teve ter a classe `container-fluid`.
|
||||
O elemento `div` teve ter a classe `container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('container-fluid'));
|
||||
```
|
||||
|
||||
Cada um de seus elementos `div` devem ter tags de fechamento.
|
||||
Cada um de seus elementos `div` deve ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -30,7 +30,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Seu elemento `h3` deve estar aninhando dentro de um elemento `div`.
|
||||
O elemento `h3` deve estar aninhando dentro de um elemento `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('h3').length > 0);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908856
|
||||
title: Dê um Label a Botões Bootstrap
|
||||
title: Dar um label a botões do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18222
|
||||
dashedName: label-bootstrap-buttons
|
||||
@ -8,31 +8,31 @@ dashedName: label-bootstrap-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Assim como nós rotulamos nossos wells, nós queremos rotular (label) nossos botões.
|
||||
Assim como fizemos com nossos poços, queremos também dar um label aos nossos botões.
|
||||
|
||||
Dê o texto a cada um de seus elementos `button` que corresponde ao seletor id.
|
||||
Dê a cada um de seus elementos `button` o texto que corresponde ao seu seletor id.
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `button` com o id `target1` teve ter o texto `#target1`.
|
||||
O elemento `button` com o id `target1` deve ter o texto `#target1`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target1', 'gi').test($('#target1').text()));
|
||||
```
|
||||
|
||||
Seu elemento `button` com o id `target2` deve ter o texto `#target2`.
|
||||
O elemento `button` com o id `target2` deve ter o texto `#target2`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target2', 'gi').test($('#target2').text()));
|
||||
```
|
||||
|
||||
Seu elemento `button` com o id `target3` deve ter o texto `#target3`.
|
||||
O elemento `button` com o id `target3` deve ter o texto `#target3`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target3', 'gi').test($('#target3').text()));
|
||||
```
|
||||
|
||||
Seu elemento `button` com o id `target4` deve ter o texto `#target4`.
|
||||
O elemento `button` com o id `target4` deve ter o texto `#target4`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target4', 'gi').test($('#target4').text()));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908854
|
||||
title: Dê um Label a Wells Bootstrap
|
||||
title: Dar um label aos poços do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18223
|
||||
dashedName: label-bootstrap-wells
|
||||
@ -8,15 +8,15 @@ dashedName: label-bootstrap-wells
|
||||
|
||||
# --description--
|
||||
|
||||
Pelo bem da clareza, vamos rotular ambos os nossos wells com seus ids.
|
||||
Para deixar claro, vamos rotular nossos dois poços com seus ids.
|
||||
|
||||
Acima do seu well da esquerda, dentro de seu elemento `col-xs-6` `div`, adicione um elemento `h4` com o texto `#left-well`.
|
||||
Acima do poço da esquerda, dentro do elemento `col-xs-6` `div`, adicione um elemento `h4` com o texto `#left-well`.
|
||||
|
||||
Acima do seu well da direita, dentro de seu elemento `col-xs-6` `div`, adicione um elemento `h4` com o texto `#right-well`.
|
||||
Acima do poço da direita, dentro do elemento `col-xs-6` `div`, adicione um elemento `h4` com o texto `#right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um elemento `h4` para cada um de seus elementos `<div class="col-xs-6">`.
|
||||
Você deve adicionar um elemento `h4` para cada um dos elementos `<div class="col-xs-6">`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -36,7 +36,7 @@ Um elemento `h4` deve ter o texto `#right-well`.
|
||||
assert(new RegExp('#right-well', 'gi').test($('h4').text()));
|
||||
```
|
||||
|
||||
Todos os seus elementos `h4` devem ter tags de fechamento.
|
||||
Todos os elementos `h4` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908845
|
||||
title: Alinhe os Elementos de Formulário de maneira Responsiva com o Bootstrap
|
||||
title: Alinhar os elementos de formulário de maneira responsiva com o Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18225
|
||||
required:
|
||||
@ -13,15 +13,15 @@ dashedName: line-up-form-elements-responsively-with-bootstrap
|
||||
|
||||
# --description--
|
||||
|
||||
Agora vamos colocar o seu `input` e o `button` de submissão do formulário na mesma linha. Faremos isso da mesma forma que fizemos antes: usando um elemento `div` com a classe `row`, e outros elementos `div` dentro do primeiro div usando a classe `col-xs-*`.
|
||||
Agora vamos colocar o `input` e o `button` de envio do formulário na mesma linha. Faremos isso da mesma forma que fizemos antes: usando um elemento `div` com a classe `row` e outros elementos `div` dentro do primeiro div usando a classe `col-xs-*`.
|
||||
|
||||
Aninhe ambos o `input` de texto e o `button` de submissão do formulário dentro de uma `div` com a classe `row`. Aninhe o texto do `input` do formulário dentro de uma div com a classe `col-xs-7`. Aninhe o seu `button` de submissão do formulário em uma `div` com a classe `col-xs-5`.
|
||||
Aninhe o `input` de texto e o `button` de envio do formulário dentro de uma `div` com a classe `row`. Aninhe o texto do `input` do formulário dentro de uma div com a classe `col-xs-7`. Aninhe o `button` de envio do formulário em uma `div` com a classe `col-xs-5`.
|
||||
|
||||
Esse é o último desafio que faremos para nossa aplicação Foto de Gato por agora. Esperamos que você tenha gostado de aprender Font Awesome, Bootstrap e design responsivo!
|
||||
Esse é o último desafio que faremos para nossa aplicação de fotos de gatos por agora. Esperamos que você tenha gostado de aprender Font Awesome, Bootstrap e design responsivo!
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu botão de submissão e o input de texto do formulário devem estar aninhados dentro de uma div com a classe `row`.
|
||||
O botão de envio e o input de texto do formulário devem estar aninhados dentro de uma div com a classe `row`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -30,19 +30,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Seu input de texto do formulário deve estar aninhado dentro de uma div com a classe `col-xs-7`.
|
||||
O input de texto do formulário deve estar aninhado dentro de uma div com a classe `col-xs-7`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-7:has(input[type="text"])').length > 0);
|
||||
```
|
||||
|
||||
Seu botão de submissão do formulário deve estar aninhado dentro de uma div com a classe `col-xs-5`.
|
||||
O botão de envio do formulário deve estar aninhado dentro de uma div com a classe `col-xs-5`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-5:has(button[type="submit"])').length > 0);
|
||||
```
|
||||
|
||||
Todos os seus elementos `div` devem ter tags de fechamento.
|
||||
Todos os elementos `div` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08812
|
||||
title: Torne Imagens Responsivas a dispositivos Móveis
|
||||
title: Tornar imagens responsivas a dispositivos móveis
|
||||
challengeType: 0
|
||||
forumTopicId: 18232
|
||||
dashedName: make-images-mobile-responsive
|
||||
@ -12,7 +12,7 @@ Primeiro, adicione uma nova imagem abaixo da existente. Defina o seu atributo `s
|
||||
|
||||
Seria ótimo se essa imagem pudesse ser exatamente do tamanho da nossa tela do celular.
|
||||
|
||||
Felizmente, com Bootstrap, tudo que precisamos fazer é adicionar a classe `img-responsive` para nossa imagem. Faça isso, e a imagem deve encaixar perfeitamente na largura da sua página.
|
||||
Felizmente, com o Bootstrap, tudo que precisamos fazer é adicionar a classe `img-responsive` para a nossa imagem. Faça isso, e a imagem deve encaixar perfeitamente na largura da página.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -22,25 +22,25 @@ Você deve ter o total de duas imagens.
|
||||
assert($('img').length === 2);
|
||||
```
|
||||
|
||||
Sua nova imagem deve estar abaixo da sua antiga e ter a classe `img-responsive`.
|
||||
A nova imagem deve estar abaixo da antiga e ter a classe `img-responsive`.
|
||||
|
||||
```js
|
||||
assert($('img:eq(1)').hasClass('img-responsive'));
|
||||
```
|
||||
|
||||
Sua nova imagem não deve ter a classe `smaller-image`.
|
||||
A nova imagem não deve ter a classe `smaller-image`.
|
||||
|
||||
```js
|
||||
assert(!$('img:eq(1)').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Sua nova imagem deve ter um `src` de `https://bit.ly/fcc-running-cats`.
|
||||
A nova imagem deve ter um `src` de `https://bit.ly/fcc-running-cats`.
|
||||
|
||||
```js
|
||||
assert($('img:eq(1)').attr('src') === 'https://bit.ly/fcc-running-cats');
|
||||
```
|
||||
|
||||
Seu novo elemento `img` deve ter uma tag de fechamento.
|
||||
O novo elemento `img` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aeda08845
|
||||
title: Caixas de seleção Responsivas
|
||||
title: Compreender caixas de seleção responsivas
|
||||
challengeType: 0
|
||||
forumTopicId: 18269
|
||||
required:
|
||||
@ -13,27 +13,27 @@ dashedName: responsively-style-checkboxes
|
||||
|
||||
# --description--
|
||||
|
||||
Já que as classes Bootstrap `col-xs-*` são aplicáveis a todos os elementos de `form`, você também pode usá-los nas suas caixas de seleções! Dessa forma, as caixas de seleções irão estar simetricamente distribuídas pela página, independente do quão largo for a resolução da tela.
|
||||
Já que as classes `col-xs-*` do Bootstrap são aplicáveis a todos os elementos de `form`, você também pode usá-las nas caixas de seleções! Dessa forma, as caixas de seleções vão estar simetricamente distribuídas pela página, independente da largura da resolução da tela.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aninhe todos as suas três caixas de seleção em um elemento `<div class="row">`. Então aninhe cada um deles no elemento `<div class="col-xs-4">`.
|
||||
Aninhe as três caixas de seleção em um elemento `<div class="row">`. Então aninhe cada uma deles no elemento `<div class="col-xs-4">`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Todas as suas caixas de seleção devem estar aninhadas dentro de uma `div` com a classe `row`.
|
||||
Todas as caixas de seleção devem estar aninhadas dentro de uma `div` com a classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(input[type="checkbox"])').length > 0);
|
||||
```
|
||||
|
||||
Cada uma das suas caixas de seleção devem estar aninhadas dentro de sua própria `div` com a classe `col-xs-4`.
|
||||
Cada uma das caixas de seleção devem estar aninhadas dentro da própria `div` com a classe `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2);
|
||||
```
|
||||
|
||||
Todos os seus elementos `div` devem ter tags de fechamento.
|
||||
Todos os elementos `div` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedb08845
|
||||
title: Botões Radio Responsivos
|
||||
title: Botões de opção de estilo responsivo
|
||||
challengeType: 0
|
||||
forumTopicId: 18270
|
||||
required:
|
||||
@ -13,27 +13,27 @@ dashedName: responsively-style-radio-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode usar as classes `col-xs-*` do Bootstrap nos elementos do `formulário` também! Dessa forma, nossos botões radio irão estar simetricamente distribuídos pela página, independente do quão largo a resolução da nossa tela for.
|
||||
Você pode usar as classes `col-xs-*` do Bootstrap nos elementos do `form` também! Dessa forma, nossos botões de opção vão estar simetricamente distribuídos pela página, independente da largura da resolução da tela.
|
||||
|
||||
Aninhe ambos os seus botões radio dentro de um elemento `<div class="row">`. Em seguida aninhe cada um deles dentro de um elemento `<div class="col-xs-6">`.
|
||||
Aninhe os botões de opção dentro de um elemento `<div class="row">`. Em seguida, aninhe cada um deles dentro de um elemento `<div class="col-xs-6">`.
|
||||
|
||||
**Nota:** Como um lembrete, botões radio são elementos `input` do tipo `radio`.
|
||||
**Observação:** como um lembrete, os botões de opção são elementos `input` do tipo `radio`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Todos os seus botões radio devem estar aninhados dentro de uma `div` com a classe `row`.
|
||||
Todos os botões de opção devem estar aninhados dentro de uma `div` com a classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(input[type="radio"])').length > 0);
|
||||
```
|
||||
|
||||
Cada um dos seus botões radio devem estar aninhados em seus próprios `div` com a classe `col-xs-6`.
|
||||
Cada um dos botões de opção devem estar aninhados nas próprias `div` com a classe `col-xs-6`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-6:has(input[type="radio"])').length > 1);
|
||||
```
|
||||
|
||||
Todos os seus elementos `div` devem ter tags de fechamento.
|
||||
Todos os elementos `div` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908847
|
||||
title: Divida Sua Linha Bootstrap
|
||||
title: Dividir sua linha do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18306
|
||||
dashedName: split-your-bootstrap-row
|
||||
@ -8,19 +8,19 @@ dashedName: split-your-bootstrap-row
|
||||
|
||||
# --description--
|
||||
|
||||
Agora que nós temos uma linha Bootstrap, vamos dividi-la em duas colunas para hospedar nossos elementos.
|
||||
Agora que nós temos uma linha do Bootstrap, vamos dividi-la em duas colunas para hospedar nossos elementos.
|
||||
|
||||
Crie dois elementos `div` dentro da sua linha (row), ambos com a classe `col-xs-6`.
|
||||
Crie dois elementos `div` dentro da linha (row), ambos com a classe `col-xs-6`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dois elementos `div class="col-xs-6"` devem estar aninhados dentro do seu elemento `div class="row"`.
|
||||
Dois elementos `div class="col-xs-6"` devem estar aninhados dentro do elemento `div class="row"`.
|
||||
|
||||
```js
|
||||
assert($('div.row > div.col-xs-6').length > 1);
|
||||
```
|
||||
|
||||
Todos os seus elementos `div` devem ter tags de fechamento.
|
||||
Todos os elementos `div` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed908845
|
||||
title: Inputs de Texto como Controles de Formulário
|
||||
title: Estilizar inputs de texto como controles de formulário
|
||||
challengeType: 0
|
||||
forumTopicId: 18312
|
||||
required:
|
||||
@ -13,33 +13,33 @@ dashedName: style-text-inputs-as-form-controls
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode adicionar o ícone Font Awesome `fa-paper-plane` adicionando `<i class="fa fa-paper-plane"></i>` dentro do seu elemento `button` de submissão.
|
||||
Você pode adicionar o ícone do Font Awesome `fa-paper-plane` incluindo `<i class="fa fa-paper-plane"></i>` dentro do elemento `button` de envio.
|
||||
|
||||
De ao seu campo input de texto do formulário a classe `form-control`. De ao seu botão de submissão do formulários as classes `btn btn-primary`. Também de a esse botão o ícone do Font Awesome `fa-paper-plane`.
|
||||
Dê ao campo de input de texto do formulário a classe `form-control`. Dê ao botão de envio do formulário as classes `btn btn-primary`. Também dê a esse botão o ícone do Font Awesome `fa-paper-plane`.
|
||||
|
||||
Todo texto dos elementos `<input>`, `<textarea>`, and `<select>` com a classe `.form-control` possuem largura de 100%.
|
||||
Todo texto dos elementos `<input>`, `<textarea>` e `<select>` com a classe `.form-control` possuem largura de 100%.
|
||||
|
||||
# --hints--
|
||||
|
||||
O botão de submissão no seu formulário deve ter a classe `btn btn-primary`.
|
||||
O botão de envio no seu formulário deve ter a classe `btn btn-primary`.
|
||||
|
||||
```js
|
||||
assert($('button[type="submit"]').hasClass('btn btn-primary'));
|
||||
```
|
||||
|
||||
Você deve adicionar um `<i class="fa fa-paper-plane"></i>` dentro do seu elemento `button` de submissão.
|
||||
Você deve adicionar uma `<i class="fa fa-paper-plane"></i>` dentro do elemento `button` de envio.
|
||||
|
||||
```js
|
||||
assert($('button[type="submit"]:has(i.fa.fa-paper-plane)').length > 0);
|
||||
```
|
||||
|
||||
O `input` de texto no seu formulário deve ter a classe `form-control`.
|
||||
O `input` de texto no formulário deve ter a classe `form-control`.
|
||||
|
||||
```js
|
||||
assert($('input[type="text"]').hasClass('form-control'));
|
||||
```
|
||||
|
||||
Cada um de seus elementos `i` devem ter tags de fechamento.
|
||||
Todos os seus elementos `i` devem ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348cd8acef08811
|
||||
title: Experimente o Botão Bootstrap de Cor de Arco-Íris
|
||||
title: Experimentar o botão do Bootstrap com as cores do arco-íris
|
||||
challengeType: 0
|
||||
forumTopicId: 18323
|
||||
dashedName: taste-the-bootstrap-button-color-rainbow
|
||||
@ -8,27 +8,27 @@ dashedName: taste-the-bootstrap-button-color-rainbow
|
||||
|
||||
# --description--
|
||||
|
||||
A classe `btn-primary` é a cor principal que você utilizará no seu app. É útil para destacar ações que você deseja que o usuário faça.
|
||||
A classe `btn-primary` tem a cor principal que você utilizará no seu app. É útil para destacar ações que você deseja que o usuário faça.
|
||||
|
||||
Substitua a classe `btn-default` do Bootstrap com `btn-primary` no seu botão.
|
||||
Substitua a classe `btn-default` do Bootstrap por `btn-primary` no botão.
|
||||
|
||||
Note que esse botão ainda precisa das classes `btn` e `btn-block`.
|
||||
Observe que esse botão ainda precisa das classes `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu botão deve ter a classe `btn-primary`.
|
||||
O botão deve ter a classe `btn-primary`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-primary'));
|
||||
```
|
||||
|
||||
Seu botão ainda deve ter as classes `btn` e `btn-block`.
|
||||
O botão ainda deve ter as classes `btn` e `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-block') && $('button').hasClass('btn'));
|
||||
```
|
||||
|
||||
Todos os seus elementos `button` devem ter tags de fechamento.
|
||||
Todos os elementos `button` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08845
|
||||
title: Use um span para apontar a Elementos na mesma Linha
|
||||
title: Usar um span para apontar para elementos na mesma linha
|
||||
challengeType: 0
|
||||
forumTopicId: 18370
|
||||
dashedName: use-a-span-to-target-inline-elements
|
||||
@ -8,17 +8,17 @@ dashedName: use-a-span-to-target-inline-elements
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode usar spans para criar elementos na mesma linha. Lembra-se quando usamos a classe `btn-block` para fazer o botão preencher toda a linha?
|
||||
Você pode usar spans para criar elementos na mesma linha. Lembra-se de quando usamos a classe `btn-block` para fazer o botão preencher toda a linha?
|
||||
|
||||
<button class='btn' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>botão normal</button>
|
||||
|
||||
<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>botão btn-block</button>
|
||||
|
||||
Isso ilustra a diferença entre um elemento "emlinha" (inline) e um elemento de "bloco" (block).
|
||||
Isso ilustra a diferença entre um elemento "em linha" (inline) e de um elemento de "bloco" (block).
|
||||
|
||||
Ao usar o elemento inline `span`, você pode colocar diversos elementos na mesma linha, e até estilizar diferentes partes da mesma linha de forma diferente.
|
||||
|
||||
Usando um elemento `span`, aninhe a palavra `love` dentro do elemento `p` que atualmente possui o texto `Things cats love`. Então de ao `span` a classe `text-danger` para tornar o texto vermelho.
|
||||
Usando um elemento `span`, aninhe a palavra `love` dentro do elemento `p` que atualmente possui o texto `Things cats love`. Em seguida, dê ao `span` a classe `text-danger` para tornar o texto vermelho.
|
||||
|
||||
Aqui está como você faria isso para o elemento `p` que possui o texto `Top 3 things cats hate`:
|
||||
|
||||
@ -28,13 +28,13 @@ Aqui está como você faria isso para o elemento `p` que possui o texto `Top 3 t
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `span` deve estar dentro do seu elemento `p`.
|
||||
O elemento `span` deve estar dentro do elemento `p`.
|
||||
|
||||
```js
|
||||
assert($('p span') && $('p span').length > 0);
|
||||
```
|
||||
|
||||
Seu elemento `span` deve ter apenas o texto `love`.
|
||||
O elemento `span` deve ter apenas o texto `love`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -46,13 +46,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Seu elemento `span` deve ter a classe `text-danger`.
|
||||
O elemento `span` deve ter a classe `text-danger`.
|
||||
|
||||
```js
|
||||
assert($('span').hasClass('text-danger'));
|
||||
```
|
||||
|
||||
Seu elemento `span` deve ter uma tag de fechamento.
|
||||
O elemento `span` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908857
|
||||
title: Use Comentários para Esclarece o Código
|
||||
title: Usar comentários para deixar o código mais claro
|
||||
challengeType: 0
|
||||
forumTopicId: 18347
|
||||
dashedName: use-comments-to-clarify-code
|
||||
@ -8,35 +8,35 @@ dashedName: use-comments-to-clarify-code
|
||||
|
||||
# --description--
|
||||
|
||||
Quando começarmos a usar JQuery, nós modificaremos elementos HTML sem a necessidade de realmente alterá-los no HTML.
|
||||
Quando começarmos a usar jQuery, nós modificaremos os elementos do HTML sem a necessidade de realmente alterá-los no HTML.
|
||||
|
||||
Vamos ter certeza de que todo mundo sabe que eles não deveriam realmente modificar nenhum desse código diretamente.
|
||||
|
||||
Lembre-se de que você pode iniciar um comentário com `<!--` e terminar um comentário com `-->`
|
||||
|
||||
Adicione um comentário no topo do seu HTML que diz `Code below this line should not be changed` (O código abaixo dessa linha não deve ser alterado)
|
||||
Adicione um comentário no topo do HTML, que diga `Code below this line should not be changed`
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve começar um comentário com `<!--` no topo do seu HTML.
|
||||
Você deve começar um comentário com `<!--` no topo do HTML.
|
||||
|
||||
```js
|
||||
assert(code.match(/^\s*<!--/));
|
||||
```
|
||||
|
||||
Seu comentário deve ter o texto `Code below this line should not be changed`.
|
||||
O comentário deve ter o texto `Code below this line should not be changed`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
|
||||
```
|
||||
|
||||
Você deve fechar o seu comentário com `-->`.
|
||||
Você deve fechar o comentário com `-->`.
|
||||
|
||||
```js
|
||||
assert(code.match(/-->.*\n+.+/g));
|
||||
```
|
||||
|
||||
Você deve ter o mesmo número de abertura e fechamento de comentários.
|
||||
Você deve ter o mesmo número de aberturas e fechamentos de comentários.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--/g).length === code.match(/-->/g).length);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08712
|
||||
title: Use Design Responsivo com Contêineres Fluidos do Bootstrap
|
||||
title: Usar design responsivo com contêineres fluidos do Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18362
|
||||
dashedName: use-responsive-design-with-bootstrap-fluid-containers
|
||||
@ -8,13 +8,13 @@ dashedName: use-responsive-design-with-bootstrap-fluid-containers
|
||||
|
||||
# --description--
|
||||
|
||||
Na seção do HTML5 e CSS do freeCodeCamp nós construímos uma aplicação de Foto de Gatos. Agora vamos voltar para isso. Dessa vez, nós estilizaremos usando o popular framework de CSS responsivo Bootstrap.
|
||||
Na seção do HTML5 e CSS do freeCodeCamp nós construímos uma aplicação de Fotos de Gatos. Agora vamos voltar para ela. Dessa vez, nós estilizaremos usando o framework de CSS responsivo popular conhecido como Bootstrap.
|
||||
|
||||
O Bootstrap descobrirá o quão larga sua tela é e responderá redimensionando os seus elementos HTML - daí o nome <dfn>design responsivo</dfn>.
|
||||
O Bootstrap descobrirá a largura da tela e responderá redimensionando os elementos do HTML - daí o nome <dfn>design responsivo</dfn>.
|
||||
|
||||
Com um design responsivo, não há necessidade de projetar uma versão móvel do seu site. Vai parecer bom em dispositivos com telas de qualquer largura.
|
||||
Com um design responsivo, não há necessidade de projetar uma versão móvel do seu site. Ele terá uma boa aparência em dispositivos com telas de qualquer largura.
|
||||
|
||||
Você pode incluir o Bootstrap em qualquer aplicativo, adicionando o seguinte código ao topo do seu HTML:
|
||||
Você pode incluir o Bootstrap em qualquer aplicativo, adicionando o seguinte código ao topo do HTML:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
|
||||
@ -22,17 +22,17 @@ Você pode incluir o Bootstrap em qualquer aplicativo, adicionando o seguinte c
|
||||
|
||||
Neste caso, já o adicionamos para você a esta página por trás dos panos. Note que usar a tag `>` ou `/>` para fechar a tag `link` é aceitável.
|
||||
|
||||
Para começar, devemos aninhar todos os nossos HTML (exceto a tag `link` e o elemento `style`) em um elemento `div` com a classe `container-fluid`.
|
||||
Para começar, devemos aninhar todo o HTML (exceto a tag `link` e o elemento `style`) em um elemento `div` com a classe `container-fluid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `div` deve ter a classe `container-fluid`.
|
||||
O elemento `div` deve ter a classe `container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('container-fluid'));
|
||||
```
|
||||
|
||||
Seu elemento `div` deve ter uma tag de fechamento.
|
||||
O elemento `div` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Todos os elementos HTML após a tag de fechamento `style` deve estar aninhado dentro de `.container-fluid`.
|
||||
Todos os elementos HTML após a tag de fechamento `style` devem estar aninhados dentro de `.container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('.container-fluid').children().length >= 8 && !$('.container-fluid').has("style").length && !$('.container-fluid').has("link").length);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad88fee1348ce8acef08815
|
||||
title: Use a Grid Bootstrap para Colocar Elementos Lado a Lado
|
||||
title: Usar o Bootstrap Grid para colocar elementos lado a lado
|
||||
challengeType: 0
|
||||
forumTopicId: 18371
|
||||
dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side
|
||||
@ -8,33 +8,33 @@ dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap usa o sistema responsivo de grid de 12 colunas, o que torna super fácil colocar elementos em linhas e especificar cada largura relativa de um elemento. A maioria das classes Bootstrap podem ser aplicadas a um elemento `div`.
|
||||
Bootstrap usa o sistema responsivo de grid de 12 colunas, o que torna superfácil colocar elementos em linhas e especificar cada largura relativa de um elemento. A maioria das classes do Bootstrap pode ser aplicada a um elemento `div`.
|
||||
|
||||
Bootstrap possui diferentes atributos de largura de colunas que utiliza dependendo do quão largo for a tela do usuário. Por exemplo, celulares possuem telas estreitas, e laptops possuem telas mais largas.
|
||||
O Bootstrap possui atributos de largura de colunas diferentes, que são utilizados dependendo da largura da tela do usuário. Por exemplo, celulares possuem telas estreitas, enquanto laptops possuem telas mais largas.
|
||||
|
||||
Tome como exemplo a classe Bootstrap `col-md-*`. Aqui, `md` significa médio, e `*` é o número especificando quantas colunas de largura o elemento deve ser. Nesse caso, a largura da coluna de um elemento em uma tela de tamanho mediano, como um laptop, está sendo especificado.
|
||||
Tome como exemplo a classe `col-md-*` do Bootstrap. Aqui, `md` significa médio, e `*` é um número especificando quantas colunas de largura o elemento deve ter. Nesse caso, a largura da coluna de um elemento em uma tela de tamanho mediano, como um laptop, está sendo especificada.
|
||||
|
||||
No app de Foto de Gatos que estamos construindo, utilizaremos `col-xs-*`, onde `xs` significa extra pequeno (como uma tela extra pequena de um telefone móvel), e `*` é o número de colunas especificando quantas colunas de largura o elemento deve ser.
|
||||
No app de Fotos de Gatos que estamos construindo, utilizaremos `col-xs-*`, onde `xs` significa extrapequeno (como uma tela extrapequena de um telefone móvel), e `*` é um número de colunas especificando quantas colunas de largura o elemento deve ter.
|
||||
|
||||
Coloque os botões `Like`, `Info` e `Delete` lado a lado ao aninhar todos os três em um elemento `<div class="row">`, em seguida, cada um deles dentro de um elemento `<div class="col-xs-4">`.
|
||||
Coloque os botões `Like`, `Info` e `Delete` lado a lado ao aninhar todos os três em um elemento `<div class="row">`. Em seguida, coloque cada um deles dentro de um elemento `<div class="col-xs-4">`.
|
||||
|
||||
A classe `row` é aplicada à `div`, e os próprios botões podem ser aninhados dentro dela.
|
||||
A classe `row` é aplicada à `div`. Os próprios botões podem ser aninhados dentro dela.
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu botões devem estar aninhados dentro do mesmo elemento `div` com a classe `row`.
|
||||
Os botões devem estar aninhados dentro do mesmo elemento `div` com a classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(button)').length > 0);
|
||||
```
|
||||
|
||||
Cada um dos seus botões Bootstrap devem estar aninhados dentro de seu próprio elemento `div` com a classe `col-xs-4`.
|
||||
Cada um dos botões do Bootstrap deve estar aninhado dentro do próprio elemento `div` com a classe `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-4:has(button)').length > 2);
|
||||
```
|
||||
|
||||
Cada um dos seus elementos `button` devem ter uma tag de fechamento.
|
||||
Cada um dos elementos `button` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -44,7 +44,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Cada um dos seus elementos `div` devem ter uma tag de fechamento.
|
||||
Cada um dos elementos `div` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348ce8acef08814
|
||||
title: Avise Seus Usuários de uma Ação Perigosa com btn-danger
|
||||
title: Avisar os usuários sobre uma ação perigosa com btn-danger
|
||||
challengeType: 0
|
||||
forumTopicId: 18375
|
||||
dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger
|
||||
@ -8,11 +8,11 @@ dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap vem com diversas cores pré-definidas para botões. A classe `btn-danger` é a cor de botão que você usará para notificar seus usuários que o botão executa uma ação destrutiva, como deletar uma foto de gato.
|
||||
O Bootstrap vem com diversas cores predefinidas para botões. A classe `btn-danger` é a cor de botão que você usará para notificar seus usuários de que o botão executa uma ação destrutiva, como excluir uma foto de gato.
|
||||
|
||||
Crie um botão com o texto `Delete` e de a ele a classe `btn-danger`.
|
||||
Crie um botão com o texto `Delete` e dê a ele a classe `btn-danger`.
|
||||
|
||||
Note que esses botões ainda precisam das classes `btn` e `btn-block`.
|
||||
Observe que esses botões ainda precisam das classes `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -22,19 +22,19 @@ Você deve criar um novo elemento `button` com o texto `Delete`.
|
||||
assert(new RegExp('Delete', 'gi').test($('button').text()));
|
||||
```
|
||||
|
||||
Todos os seus botões Bootstrap devem ter as classes `btn` e `btn-block`.
|
||||
Todos os botões do Bootstrap devem ter as classes `btn` e `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button.btn-block.btn').length > 2);
|
||||
```
|
||||
|
||||
Seu novo botão deve ter a classe `btn-danger`.
|
||||
O novo botão deve ter a classe `btn-danger`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-danger'));
|
||||
```
|
||||
|
||||
Todos os seus elementos `button` devem ter tags de fechamento.
|
||||
Todos os elementos `button` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd0f
|
||||
title: Construa um Relógio 25 + 5
|
||||
title: Criar um Relógio 25 + 5
|
||||
challengeType: 3
|
||||
forumTopicId: 301373
|
||||
dashedName: build-a-25--5-clock
|
||||
@ -8,71 +8,71 @@ dashedName: build-a-25--5-clock
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** Construir um app [CodePen.io](https://codepen.io) que é funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/XpKrrW>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/XpKrrW>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework frontend (como React por exemplo) porque essa seção trata de aprender frameworks fronted. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos olhando para apoiar outros frameworks frontend como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**User Story #1:** Eu consigo ver um elemento com `id="break-label"` que contém a string (e.g. "Break Length").
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento com `id="break-label"` que contém uma string (por exemplo, "Duração do intervalo").
|
||||
|
||||
**User Story #2:** Eu consigo ver um elemento com `id="session-label"` que contém a string (e.g. "Session Length").
|
||||
**Especificação de usuário nº 2:** eu consigo ver um elemento com `id="session-label"` que contém uma string (por exemplo, "Duração da sessão").
|
||||
|
||||
**User Story #3:** Eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-decrement"` e `id="session-decrement"`.
|
||||
**Especificação de usuário nº 3:** eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-decrement"` e `id="session-decrement"`.
|
||||
|
||||
**User Story #4:** Eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-increment"` e `id="session-increment"`.
|
||||
**Especificação de usuário nº 4:** eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-increment"` e `id="session-increment"`.
|
||||
|
||||
**User Story #5:** Eu consigo ver um elemento com um id correspondente `id="break-length"`, o que por padrão (no carregamento) exibe o valor de 5.
|
||||
**Especificação de usuário nº 5:** eu consigo ver um elemento com um `id="break-length"` correspondente, e que, por padrão (no carregamento), exibe o valor de 5.
|
||||
|
||||
**User Story #6:** Eu consigo ver um elemento com um id correspondente `id="session-length"`, o que por padrão exibe o valor de 25.
|
||||
**Especificação de usuário nº 6:** eu consigo ver um elemento com um `id="session-length"` correspondente, e que, por padrão, exibe o valor de 25.
|
||||
|
||||
**User Story #7:** Eu consigo ver um elemento com um id correspondente `id="timer-length"`, que contém a string indicando que uma sessão foi inicializada (e.g. "Session").
|
||||
**Especificação de usuário nº 7:** eu consigo ver um elemento com um `id="timer-label"` correspondente, e que contém a string indicando que uma sessão foi inicializada (por exemplo, "Sessão").
|
||||
|
||||
**User Story #8:** Eu consigo ver um elemento com id correspondente `id="time-left"`. NOTA: Pausado ou em execução, o valor nesse campo deve sempre ser exibido no formato `mm:ss` (i.e. 25:00).
|
||||
**Especificação de usuário nº 8:** eu consigo ver um elemento com `id="time-left"` correspondente. OBSERVAÇÃO: Pausado ou em execução, o valor nesse campo deve sempre ser exibido no formato `mm:ss` (por exemplo, 25:00).
|
||||
|
||||
**User Story #9:** Eu consigo ver um elemento clicável com id correspondente `id="start_stop"`.
|
||||
**Especificação de usuário nº 9:** eu consigo ver um elemento clicável com `id="start_stop"` correspondente.
|
||||
|
||||
**User Story #10:** Eu consigo ver um elemento clicável com id correspondente `id="reset"`.
|
||||
**Especificação de usuário nº 10:** eu consigo ver um elemento clicável com `id="reset"` correspondente.
|
||||
|
||||
**User Story #11:** Quando eu clico o elemento com id `reset`, qualquer temporizador em execução deve ser parado, o valor dentro de `id="break-length"` deve retornar `5`, o valor dentro de `id="session-length"` deve retornar 25, e o elemento com `id="time-left"` deve ser redefinido para o seu estado padrão.
|
||||
**Especificação de usuário nº 11:** quando eu clico no elemento com id `reset`, qualquer temporizador em execução deve ser parado. O valor dentro de `id="break-length"` deve retornar `5`, o valor dentro de `id="session-length"` deve retornar 25, e o elemento com `id="time-left"` deve ser redefinido para o seu estado padrão.
|
||||
|
||||
**User Story #12:** Quando eu clico o elemento com o id `break-decrement`, o valor dentro de `id="break-length"` decrementa 1, e eu consigo ver o valor atualizado.
|
||||
**Especificação de usuário nº 12:** quando eu clico no elemento com o id `break-decrement`, o valor dentro de `id="break-length"` decrementa 1, e eu consigo ver o valor atualizado.
|
||||
|
||||
**User Story #13:** Quando eu clico o elemento com id `break-increment`, o valor dentro de `id="break-length"` incrementa 1, e eu consigo ver o valor atualizado.
|
||||
**Especificação de usuário nº 13:** quando eu clico no elemento com id `break-increment`, o valor dentro de `id="break-length"` incrementa 1, e eu consigo ver o valor atualizado.
|
||||
|
||||
**User Story #14:** Quando eu clico o elemento com id `session-decrement`, o valor dentro de `id="session-length"` decrementa 1, e eu consigo ver o valor atualizado.
|
||||
**Especificação de usuário nº 14:** quando eu clico no elemento com id `session-decrement`, o valor dentro de `id="session-length"` decrementa 1, e eu consigo ver o valor atualizado.
|
||||
|
||||
**User Story #15:** Quando eu clico o elemento com id `session-increment`, o valor dentro de `id="session-length"` incrementa 1, e eu consigo ver o valor atualizado.
|
||||
**Especificação de usuário nº 15:** quando eu clico no elemento com id `session-increment`, o valor dentro de `id="session-length"` incrementa 1, e eu consigo ver o valor atualizado.
|
||||
|
||||
**User Story #16:** Eu não devo ser capaz de definir uma sessão ou quebrar o comprimento para <= 0.
|
||||
**Especificação de usuário nº 16:** eu não devo poder definir um comprimento de sessão ou de intervalo para <= 0.
|
||||
|
||||
**User Story #17:** Eu não devo ser capaz de definir uma sessão ou quebrar o comprimento para > 60.
|
||||
**Especificação de usuário nº 17:** eu não devo ser capaz de definir um comprimento de sessão ou de intervalo para > 60.
|
||||
|
||||
**User Story #18:** Quando eu clico pela primeira vez o elemento com `id="start_stop"`, o temporizador deve começar a correr a partir do valor exibido atualmente em `id="session-length"`, mesmo se o valor foi incrementado ou decrementado do valor original 25.
|
||||
**Especificação de usuário nº 18:** quando eu clico pela primeira vez no elemento com `id="start_stop"`, o temporizador deve começar a correr a partir do valor exibido atualmente em `id="session-length"`, mesmo se o valor foi incrementado ou decrementado do valor original 25.
|
||||
|
||||
**User Story #19:** Se o temporizador estiver em execução, o elemento com id `time-left` deve exibir o tempo restante no formato `mm:ss` (decrementando 1 e atualizando a saída a cada 1000ms).
|
||||
**Especificação de usuário nº 19:** se o temporizador estiver em execução, o elemento com id `time-left` deve exibir o tempo restante no formato `mm:ss` (decrementando 1 e atualizando a saída a cada 1000ms).
|
||||
|
||||
**User Story #20:** Se o timer estiver em execução e eu clicar o elemento com `id="start_stop"`, a contagem regressiva deve pausar.
|
||||
**Especificação de usuário nº 20:** se o timer estiver em execução e eu clicar no elemento com `id="start_stop"`, a contagem regressiva deve pausar.
|
||||
|
||||
**User Story #21:** Se o temporizador estiver pausado e eu clicar o elemento com `id="start_stop"`, a contagem regressiva deve continuar rodando a partir do ponto no qual foi pausado.
|
||||
**Especificação de usuário nº 21:** se o temporizador estiver pausado e eu clicar no elemento com `id="start_stop"`, a contagem regressiva deve continuar rodando a partir do ponto no qual foi pausado.
|
||||
|
||||
**User Story #22:** Quando a contagem regressiva de sessão chegar a zero (NOTA: temporizador DEVE alcançar 00:00), e uma nova contagem regressiva iniciar, o elemento com id `timer-label` deve exibir uma string indicando que uma quebra foi iniciada.
|
||||
**Especificação de usuário nº 22:** quando a contagem regressiva de sessão chegar a zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), e uma nova contagem regressiva iniciar, o elemento com id `timer-label` deve exibir uma string indicando que um intervalo foi iniciado.
|
||||
|
||||
**User Story #23:** Quando a contagem regressiva de sessão alcançar zero (NOTA: temporizador DEVE alcançar 00:00), uma nova contagem regressiva deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento `id="break-length"`.
|
||||
**Especificação de usuário nº 23:** quando a contagem regressiva de sessão alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), uma nova contagem regressiva de intervalo deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento `id="break-length"`.
|
||||
|
||||
**User Story #24:** Quando a contagem regressiva de quebra alcançar zero (NOTA: temporizador DEVE alcançar 00:00) e uma nova contagem regressiva iniciar, o elemento com o id `timer-label` deve exibir a string indicando que uma sessão foi iniciada.
|
||||
**Especificação de usuário nº 24:** quando a contagem regressiva de intervalo alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00) e uma nova contagem regressiva iniciar, o elemento com o id `timer-label` deve exibir a string indicando que uma sessão foi iniciada.
|
||||
|
||||
**User Story #23:** Quando a contagem regressiva de quebra alcançar zero (NOTA: temporizador DEVE alcançar 00:00), uma nova contagem regressiva de sessão deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento `id="session-length"`.
|
||||
**Especificação de usuário nº 25:** quando a contagem regressiva de intervalo alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), uma nova contagem regressiva de sessão deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento com `id="session-length"`.
|
||||
|
||||
**User Story #23:** Quando uma contagem regressiva alcançar zero (NOTA: temporizador DEVE alcançar 00:00), um som indicando que o tempo acabou deve ser reproduzido. Isso deve utilizar uma tag HTML5 `audio` e ter um id correspondente `id="beep"`.
|
||||
**Especificação de usuário nº 26:** quando uma contagem regressiva alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), um som indicando que o tempo acabou deve ser reproduzido. Isso deve utilizar uma tag HTML5 `audio` e ter um id correspondente a `id="beep"`.
|
||||
|
||||
**User Story #27:** O elemento audio com `id="beep"` deve ter 1 segundo ou mais de duração.
|
||||
**Especificação de usuário nº 27:** o elemento audio com `id="beep"` deve ter 1 segundo ou mais de duração.
|
||||
|
||||
**User Story #28:** O elemento audio com id `beep` deve parar de reproduzir e ser rebobinado para começar quando o elemento com o id `reset` for clicado.
|
||||
**Especificação de usuário nº 28:** o elemento audio com id `beep` deve parar de reproduzir e ser rebobinado para começar quando o elemento com o id `reset` for clicado.
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbc367417b2b2512bae
|
||||
title: Construa uma Máquina de Tambor
|
||||
title: Crie uma bateria eletrônica
|
||||
challengeType: 3
|
||||
forumTopicId: 301370
|
||||
dashedName: build-a-drum-machine
|
||||
@ -10,27 +10,27 @@ dashedName: build-a-drum-machine
|
||||
|
||||
**Objetivo:** Construa um app [CodePen.io](https://codepen.io) que seja funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/MJyNMd>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework frontend (como React por exemplo) porque essa seção trata de aprender frameworks fronted. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos olhando para apoiar outros frameworks frontend como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**User Story #1:** Eu devo ser capaz de ver um contêiner externo com um id correspondente `id="drum-machine"` que contém todos os outros elementos.
|
||||
**Especificação de usuário nº 1:** eu devo ser capaz de ver um contêiner externo com um `id="drum-machine"` correspondente que contém todos os outros elementos.
|
||||
|
||||
**User Story #2:** Dentro de `#drum-machine` eu consigo ver um elemento com um id correspondente `id="display"`.
|
||||
**Especificação de usuário nº 2:** dentro de `#drum-machine`, eu consigo ver um elemento com um `id="display"` correspondente.
|
||||
|
||||
**User Story #3:** Dentro de `#drum-machine` Eu consigo ver 9 elementos tambores clicáveis, cada um com o nome de classe `drum-pad`, um id único que descreve o clipe de áudio que o tambor será definido para executar, e um texto interno que corresponde a uma das teclas do teclado a seguir: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Os tambores DEVEM estar nesta ordem.
|
||||
**Especificação de usuário nº 3:** dentro de `#drum-machine`, eu consigo ver 9 elementos de tambores clicáveis, cada um com o nome de classe `drum-pad`, um id único que descreve o clipe de áudio que o tambor será definido para executar, e um texto interno que corresponde a uma das teclas do teclado a seguir: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Os tambores DEVEM estar nesta ordem.
|
||||
|
||||
**User Story #4:** Dentro de cada `.drum-pad`, deve ter um elemento HTML5 `audio` o qual tem o atributo `src` apontando para um clipe de áudio, o nome de classe `clip`, e um id correspondendo ao texto interno do seu `.drum-pad` parente (e.g. `id="Q"`, `id="W"`, `id="E"` etc.).
|
||||
**Especificação de usuário nº 4:** dentro de cada `.drum-pad`, deve haver um elemento HTML5 `audio`, que tem o atributo `src` apontando para um clipe de áudio, o nome de classe `clip`, e um id correspondendo ao texto interno do seu `.drum-pad` pai (por exemplo, `id="Q"`, `id="W"`, `id="E"` e assim por diante).
|
||||
|
||||
**User Story #5:** Quando eu clico em um elemento `.drum-pad`, o clipe de áudio dentro do seu elemento filho `audio` deve ser ativado.
|
||||
**Especificação de usuário nº 5:** quando eu clico em um elemento `.drum-pad`, o clipe de áudio dentro do seu elemento filho `audio` deve ser ativado.
|
||||
|
||||
**User Story #6:** Quando eu pressionar a tecla de gatilho associada com cada `.drum-pad`, o clipe de áudio dentro do elemento filho `audio` deve ser ativado (e.g. pressionando a tecla `Q` deve acionar o tambor o qual contém a string `Q`, pressionando a tecla `W` deve acionar o tambor o qual contém a string `W`, etc.).
|
||||
**Especificação de usuário nº 6:** quando eu pressionar a tecla de disparo associada a cada `.drum-pad`, o clipe de áudio dentro do elemento filho `audio` deve ser ativado (por exemplo, ao pressionar a tecla `Q`, deve ser acionado o tambor que tem a string `Q`, ao pressionar a tecla `W`, deve ser acionado o tambor que contém a string `W` e assim por diante).
|
||||
|
||||
**User Story #7:** Quando um `.drum-pad` é acionado, uma string descrevendo o clipe de áudio associado é exibido como o texto interno do elemento `#display` (cada string precisa ser única).
|
||||
**Especificação de usuário nº 7:** quando um `.drum-pad` é acionado, uma string descrevendo o clipe de áudio associado é exibido como o texto interno do elemento `#display` (cada string precisa ser única).
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd17
|
||||
title: Construa uma Calculadora JavaScript
|
||||
title: Criar uma calculadora JavaScript
|
||||
challengeType: 3
|
||||
forumTopicId: 301371
|
||||
dashedName: build-a-javascript-calculator
|
||||
@ -8,52 +8,52 @@ dashedName: build-a-javascript-calculator
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** Construa um app [CodePen.io](https://codepen.io) que seja funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/wgGVVX>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/wgGVVX>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework frontend (como React por exemplo) porque essa seção trata de aprender frameworks fronted. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos olhando para apoiar outros frameworks frontend como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**User Story #1:** Minha calculadora deve conter um elemento clicável contendo um `=` (sinal de igualdade) com o id correspondente `id="equals"`.
|
||||
**Especificação de usuário nº 1:** minha calculadora deve conter um elemento clicável contendo um `=` (sinal de igualdade) com o `id="equals"` correspondente.
|
||||
|
||||
**User Story #2:** Minha calculadora deve conter 10 elementos clicáveis contendo um número cada de 0 até 9, com os ids correspondentes a seguir: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"` e `id="nine"`.
|
||||
**Especificação de usuário nº 2:** minha calculadora deve conter 10 elementos clicáveis contendo um número cada, de 0 até 9, com os ids correspondentes a seguir: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"` e `id="nine"`.
|
||||
|
||||
**User Story #3:** Minha calculadora deve conter 4 elementos clicáveis cada um contendo uma das 4 operações matemáticas primárias com os ids correspondentes a seguir: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`.
|
||||
**Especificação de usuário nº 3:** minha calculadora deve conter 4 elementos clicáveis, cada um contendo uma das 4 operações matemáticas primárias com os ids correspondentes a seguir: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`.
|
||||
|
||||
**User Story #4:** Minha calculadora deve conter um elemento clicável contendo o símbolo `.` (ponto decimal) com o id correspondente `id="decimal"`.
|
||||
**Especificação de usuário nº 4:** minha calculadora deve conter um elemento clicável contendo o símbolo `.` (ponto decimal) com o `id="decimal"` correspondente.
|
||||
|
||||
**User Story #5:** Minha calculadora deve conter um elemento clicável com um `id="clear"`.
|
||||
**Especificação de usuário nº 5:** minha calculadora deve conter um elemento clicável com um `id="clear"`.
|
||||
|
||||
**User Story #6:** Minha calculadora deve conter um elemento para exibir valores com o id correspondente `id="display"`.
|
||||
**Especificação de usuário nº 6:** minha calculadora deve conter um elemento para exibir valores com o `id="display"` correspondente.
|
||||
|
||||
**User Story #7:** A qualquer momento, pressionando o botão `clear` irá limpar os valores de entrada e saída, e retorna a calculadora ao seu estado inicial; 0 deve ser mostrado no elemento com o id `display`.
|
||||
**Especificação de usuário nº 7:** a qualquer momento, pressionar o botão `clear` limpará os valores de entrada e saída, e retornará a calculadora ao seu estado inicial. "0" deve ser mostrado no elemento com o id `display`.
|
||||
|
||||
**User Story #8:** Enquanto eu coloco números de entrada, eu devo ser capaz de ver a minha entrada no elemento com id `display`.
|
||||
**Especificação de usuário nº 8:** enquanto eu coloco números de entrada, eu devo ser capaz de ver a minha entrada no elemento com id `display`.
|
||||
|
||||
**User Story #9:** Em qualquer ordem, eu devo ser capaz de adicionar, subtrair, multiplicar e dividir uma cadeia de números de qualquer tamanho, e quando eu pressionar `=`, o resultado correto deve ser mostrado no elemento com id `display`.
|
||||
**Especificação de usuário nº 9:** em qualquer ordem, eu devo ser capaz de adicionar, subtrair, multiplicar e dividir uma cadeia de números de qualquer tamanho, e quando eu pressionar `=`, o resultado correto deve ser mostrado no elemento com id `display`.
|
||||
|
||||
**User Story #10:** Ao inserir números, minha calculadora não deve permitir um número de começar com múltiplos zeros.
|
||||
**Especificação de usuário nº 10:** ao inserir números, minha calculadora não deve permitir um número de começar com múltiplos zeros.
|
||||
|
||||
**User Story #11:** Quando o elemento decimal for clicado, um `.` deve ser adicionado ao valor atualmente exibido; dois `.` em um número não deve ser aceito.
|
||||
**Especificação de usuário nº 11:** quando o elemento decimal for clicado, um `.` deve ser adicionado ao valor atualmente exibido. Dois `.` em um número não devem ser aceitos.
|
||||
|
||||
**User Story #12:** Eu devo ser capaz de executar qualquer operação (`+`, `-`, `*`, `/`) em números contendo pontos decimais.
|
||||
**Especificação de usuário nº 12:** eu devo ser capaz de executar qualquer operação (`+`, `-`, `*`, `/`) em números contendo pontos decimais.
|
||||
|
||||
**User Story #13:** Se 2 ou mais operadores forem inseridos consecutivamente, a operação executada deve ser o último operador inserido (excluindo o símbolo de negação (`-`)). Por exemplo, se `5 + * 7 =` for inserido, o resultado deve ser `35` (i.e. `5 * 7`); se `5 * - 5 =` for inserido, o resultado deve ser `-25` (i.e. `5 * (-5)`).
|
||||
**User Story #13:** Se 2 ou mais operadores forem inseridos consecutivamente, a operação executada deve ser o último operador inserido, excluindo o símbolo de negação (`-`). Por exemplo, se `5 + * 7 =` for inserido, o resultado deve ser `35` (ou seja, `5 * 7`); se `5 * - 5 =` for inserido, o resultado deve ser `-25` (ou seja, `5 * (-5)`).
|
||||
|
||||
**User Story #14:** Pressionando um operador imediatamente após um `=` deve iniciar um novo cálculo que opera no resultado da avaliação anterior.
|
||||
**Especificação de usuário nº 14:** pressionar um operador imediatamente após um `=` deve iniciar um novo cálculo que opera no resultado da avaliação anterior.
|
||||
|
||||
**User Story #15:** Minha calculadora deve ter diversas casas decimais de precisão ao se tratar de arredondamento (note que não há um padrão exato, mas você deve ser capaz de lidar com cálculos como `2 / 7` com precisão razoável de pelo menos 4 casas decimais).
|
||||
**Especificação de usuário nº 15:** minha calculadora deve ter diversas casas decimais de precisão ao se tratar de arredondamento (note que não há um padrão exato, mas você deve ser capaz de lidar com cálculos como `2 / 7` com precisão razoável de pelo menos 4 casas decimais).
|
||||
|
||||
**Nota Para a Lógica da Calculadora:** Deve-se notar que há duas principais escolas de pensamento na lógica da entrada da calculadora: <dfn>lógica da execução imediata</dfn> e <dfn>lógica da fórmula</dfn>. Nosso exemplo utiliza a lógica da fórmula e observa a ordem de precedência de operação, execução imediata não faz isso. Qualquer uma é aceitável, mas por favor note que dependendo de qual você escolher, sua calculadora pode alcançar diferentes resultados do que os nossos para certas equações (veja abaixo um exemplo). Desde que sua matemática possa ser verificada por outra calculadora em produção, por favor não considere isso um bug.
|
||||
**Nota para a lógica da calculadora:** deve-se notar que há duas principais escolas de pensamento na lógica de entrada da calculadora: a <dfn>lógica da execução imediata</dfn> e a <dfn>lógica da fórmula</dfn>. Nosso exemplo utiliza a lógica da fórmula e observa a ordem de precedência de operação. A lógica de execução imediata não faz isso. Qualquer uma é aceitável, mas observe que, dependendo de qual você escolher, sua calculadora pode alcançar diferentes resultados do que os nossos para certas equações (veja abaixo um exemplo). Desde que sua matemática possa ser verificada por outra calculadora em produção, não considere isso um bug.
|
||||
|
||||
**EXEMPLO:** `3 + 5 x 6 - 2 / 4 =`
|
||||
|
||||
- **Lógica de execução imediata:** `11.5`
|
||||
- **Lógica de Fórmula/Expressão:** `32.5`
|
||||
- **Lógica de fórmula/expressão:** `32.5`
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7157d8c242eddfaeb5bd13
|
||||
title: Construa um Pré-Visualizador de Marcação
|
||||
title: Criar um pré-visualizador de markdown
|
||||
challengeType: 3
|
||||
forumTopicId: 301372
|
||||
dashedName: build-a-markdown-previewer
|
||||
@ -8,29 +8,29 @@ dashedName: build-a-markdown-previewer
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** Construir um app [CodePen.io](https://codepen.io) que seja funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/GrZVVO>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/GrZVVO>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework frontend (como React por exemplo) porque essa seção trata de aprender frameworks fronted. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos olhando para apoiar outros frameworks frontend como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**User Story #1:** Eu consigo ver um elemento `textarea` com o id correspondente `id="editor"`.
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento `textarea` com o `id="editor"` correspondente.
|
||||
|
||||
**User Story #2:** Eu consigo ver um elemento com o id correspondente `id="preview"`.
|
||||
**Especificação de usuário nº 2:** eu consigo ver um elemento com o `id="preview"` correspondente.
|
||||
|
||||
**User Story #3:** Quando eu insiro texto no elemento `#editor`, o elemento `#preview` é atualizado enquanto eu escrevo para exibir o conteúdo do textarea.
|
||||
**Especificação de usuário nº 3:** quando eu insiro texto no elemento `#editor`, o elemento `#preview` é atualizado enquanto eu escrevo para exibir o conteúdo do textarea.
|
||||
|
||||
**User Story #4:** Quando insiro marcação do GitHub no elemento `#editor`, o texto é renderizado como HTML no elemento `#preview` enquanto eu escrevo (DICA: Você não precisa analisar a marcação você mesmo - você pode importar a biblioteca Marked para isso: <https://cdnjs.com/libraries/marked>).
|
||||
**Especificação de usuário nº 4:** quando insiro marcação do GitHub no elemento `#editor`, o texto é renderizado como HTML no elemento `#preview` enquanto eu escrevo (DICA: você não precisa analisar a marcação você mesmo - você pode importar a biblioteca Marked para isso: <https://cdnjs.com/libraries/marked>).
|
||||
|
||||
**User Story #5:** Quando meu pré-visualizador de marcação carregar pela primeira vez, o texto padrão no campo `#editor` deve conter uma marcação válida que representa pelo menos um de cada um dos elementos a seguir: um header (tamanho H1), um sub header (tamanho H2), um link, um código em linha, um código de bloco, uma lista de item, um blockquote, uma imagem, e um texto em negrito.
|
||||
**Especificação de usuário nº 5:** quando meu pré-visualizador de marcação carregar pela primeira vez, o texto padrão no campo `#editor` deve conter uma marcação válida que represente pelo menos um de cada um dos elementos a seguir: um header (tamanho H1), um subheader (tamanho H2), um link, um código em linha, um código de bloco, uma lista de item, um blockquote, uma imagem e um texto em negrito.
|
||||
|
||||
**User Story #6:** Quando meu pré-visualizador de marcação carregar pela primeira vez, a marcação padrão no campo `#editor` deve ser renderizado como HTML no elemento `#preview`.
|
||||
**Especificação de usuário nº 6:** quando meu pré-visualizador de marcação carregar pela primeira vez, a marcação padrão no campo `#editor` deve ser renderizada como HTML no elemento `#preview`.
|
||||
|
||||
**Bônus opcional (você não precisa fazer esse teste passar):** Meu pré-visualizador de marcação interpreta retorno de carro e os renderiza como elementos `br` (quebra de linha).
|
||||
**Bônus opcional (você não precisa de aprovação nesse teste):** meu pré-visualizador de marcação interpreta o retorno de carro e o renderiza como elementos `br` (quebra de linha).
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: Construa uma Máquina de Citação Aleatória
|
||||
title: Criar uma máquina de citação aleatória
|
||||
challengeType: 3
|
||||
forumTopicId: 301374
|
||||
dashedName: build-a-random-quote-machine
|
||||
@ -8,37 +8,37 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** Construa um app [CodePen.io](https://codepen.io) que seja funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework frontend (como React por exemplo) porque essa seção trata de aprender frameworks fronted. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos olhando para apoiar outros frameworks frontend como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para completar este projeto. Você deve usar um framework de front-end (como React, por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**User Story #1:** Eu consigo ver um elemento de embrulho com o id correspondente `id="quote-box"`.
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento wrapper com o `id="quote-box"` correspondente.
|
||||
|
||||
**User Story #2:** Dentro de `#quote-box`, Eu consigo ver um elemento com o id correspondente `id="text"`.
|
||||
**Especificação de usuário nº 2:** dentro de `#quote-box`, eu consigo ver um elemento com o `id="text"` correspondente.
|
||||
|
||||
**User Story #3:** Dentro de `#quote-box`, eu consigo ver um elemento com o id correspondente `id="author"`.
|
||||
**Especificação de usuário nº 3:** dentro de `#quote-box`, eu consigo ver um elemento com o `id="author"` correspondente.
|
||||
|
||||
**User Story #4:** Dentro de `#quote-box`, eu consigo ver um elemento clicável com o id correspondente `id="new-quote"`.
|
||||
**Especificação de usuário nº 4:** dentro de `#quote-box`, eu consigo ver um elemento clicável com o `id="new-quote"` correspondente.
|
||||
|
||||
**User Story #5:** Dentro de `#quote-box`, eu consigo ver um elemento clicável `a` com o id correspondente `id="tweet-quote"`.
|
||||
**Especificação de usuário nº 5:** dentro de `#quote-box`, eu consigo ver um elemento clicável `a` com o `id="tweet-quote"` correspondente.
|
||||
|
||||
**User Story #6:** Ao carregar pela primeira vez, minha máquina de citação exibe uma citação aleatória no elemento com `id="text"`.
|
||||
**Especificação de usuário nº 6:** ao carregar pela primeira vez, minha máquina de citação exibe uma citação aleatória no elemento com `id="text"`.
|
||||
|
||||
**User Story #7:** Ao carregar pela primeira vez, minha máquina de citação exibe o autor da citação aleatória no elemento com `id="author"`.
|
||||
**Especificação de usuário nº 7:** ao carregar pela primeira vez, minha máquina de citação exibe o autor da citação aleatória no elemento com `id="author"`.
|
||||
|
||||
**User Story #8:** Quando o botão `#new-quote` é clicado, minha máquina de citação deve buscar uma nova citação e exibi-la no elemento `#text`.
|
||||
**Especificação de usuário nº 8:** quando o botão `#new-quote` é clicado, minha máquina de citação deve buscar uma nova citação e exibi-la no elemento `#text`.
|
||||
|
||||
**User Story #9:** Minha máquina de citação deve buscar o novo autor da citação quando o botão `#new-quote` for clicado e o exibir no elemento `#author`.
|
||||
**Especificação de usuário nº 9:** minha máquina de citação deve buscar o novo autor da citação quando o botão `#new-quote` for clicado e o exibir no elemento `#author`.
|
||||
|
||||
**User Story #10:** Eu posso tweetar a citação atual ao clicar no elemento `#tweet-quote` `a`. Esse elemento `a` deve incluir o caminho `"twitter.com/intent/tweet"` no seu atributo `href` para tweetar a citação atual.
|
||||
**Especificação de usuário nº 10:** eu posso tweetar a citação atual ao clicar no elemento `#tweet-quote` `a`. Esse elemento `a` deve incluir o caminho `"twitter.com/intent/tweet"` no seu atributo `href` para tweetar a citação atual.
|
||||
|
||||
**User Story #11:** O elemento de embrulho `#quote-box` deve ser centralizado horizontalmente. Por favor execute testes com o zoom do navegador em 100% e com a página maximizada.
|
||||
**Especificação de usuário nº 11:** o elemento wrapper `#quote-box` deve ser centralizado horizontalmente. Execute testes com o zoom do navegador em 100% e com a página maximizada.
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
**Nota:** Twitter não permite que links sejam carregados em um iframe. Tente usar o atributo `target="_blank"` ou `target="_top"` no elemento `#tweet-quote` se o seu tweet não carregar. `target="_top"` irá substituir a aba atual para garantir que o seu trabalho foi salvo.
|
||||
|
||||
|
||||
@ -14,31 +14,31 @@ Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_sto
|
||||
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM obrigatórios (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**Especificação de usuário nº 1:** Meu gráfico deve ter um título com um `id="title"` correspondente.
|
||||
**Especificação de usuário nº 1:** meu gráfico deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 2:** Meu gráfico deve ter um elemento `g` no eixo x com um `id="x-axis"` correspondente.
|
||||
**Especificação de usuário nº 2:** meu gráfico deve ter um elemento `g` no eixo x com um `id="x-axis"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 3:** Meu gráfico deve ter um elemento `g` no eixo y com um `id="y-axis"` correspondente.
|
||||
**Especificação de usuário nº 3:** meu gráfico deve ter um elemento `g` no eixo y com um `id="y-axis"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 4:** Ambos os eixos devem conter múltiplos rótulos (labels) de marcação, cada um com uma `class="tick"` correspondente.
|
||||
**Especificação de usuário nº 4:** ambos os eixos devem conter múltiplos rótulos (labels) de marcação, cada um com uma `class="tick"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 5:** Meu gráfico deve ter um elemento `rect` para cada ponto com uma classe `class="bar"` correspondente exibindo os dados.
|
||||
**Especificação de usuário nº 5:** meu gráfico deve ter um elemento `rect` para cada ponto com uma classe `class="bar"` correspondente exibindo os dados.
|
||||
|
||||
**Especificação de usuário nº 6:** Cada barra deve ter as propriedades `data-date` e `data-gdp`, contendo os valores `date` e `GDP`, respectivamente.
|
||||
**Especificação de usuário nº 6:** cada barra deve ter as propriedades `data-date` e `data-gdp`, contendo os valores `date` e `GDP`, respectivamente.
|
||||
|
||||
**Especificação de usuário nº 7:** As propriedades `data-date` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
**Especificação de usuário nº 7:** as propriedades `data-date` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
|
||||
**Especificação de usuário nº 8:** As propriedades `data-gdp` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
**Especificação de usuário nº 8:** as propriedades `data-gdp` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
|
||||
**Especificação de usuário nº 9:** A altura de cada barra deve representar corretamente os dados de `GDP` correspondentes.
|
||||
**Especificação de usuário nº 9:** a altura de cada barra deve representar corretamente os dados de `GDP` correspondentes.
|
||||
|
||||
**Especificação de usuário nº 10:** O atributo `data-date` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo x.
|
||||
**Especificação de usuário nº 10:** o atributo `data-date` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo x.
|
||||
|
||||
**Especificação de usuário nº 11:** O atributo `data-gdp` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo y.
|
||||
**Especificação de usuário nº 11:** o atributo `data-gdp` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo y.
|
||||
|
||||
**Especificação de usuário nº 12:** Eu posso passar o mouse sobre uma área e ver uma dica com uma `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
**Especificação de usuário nº 12:** eu posso passar o mouse sobre uma área e ver uma dica com uma `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**Especificação de usuário nº 13:** Minha ferramenta de dica (tooltip) deve ter uma propriedade `data-date` que corresponda à `data-date` da área ativa, isto é, onde o mouse está em cima.
|
||||
**Especificação de usuário nº 13:** minha ferramenta de dica (tooltip) deve ter uma propriedade `data-date` que corresponda à `data-date` da área ativa.
|
||||
|
||||
Aqui está o dataset de que você precisará para completar este projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bbf
|
||||
title: Visualize Data with a Choropleth Map
|
||||
title: Visualizar dados com um mapa coroplético
|
||||
challengeType: 3
|
||||
forumTopicId: 301465
|
||||
dashedName: visualize-data-with-a-choropleth-map
|
||||
@ -8,42 +8,42 @@ dashedName: visualize-data-with-a-choropleth-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os elementos DOM obrigatórios (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**User Story #1:** My choropleth should have a title with a corresponding `id="title"`.
|
||||
**Especificação de usuário nº 1: ** meu coropleto deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**User Story #2:** My choropleth should have a description element with a corresponding `id="description"`.
|
||||
**Especificação de usuário nº 2: ** meu coropleto deve ter um elemento de descrição com uma `id="description"` correspondente.
|
||||
|
||||
**User Story #3:** My choropleth should have counties with a corresponding `class="county"` that represent the data.
|
||||
**Especificação de usuário nº 3: ** meu coropleto deve ter condados com um `class="county"` correspondente que representa os dados.
|
||||
|
||||
**User Story #4:** There should be at least 4 different fill colors used for the counties.
|
||||
**Especificação de usuário nº 4: ** deve haver pelo menos 4 cores de preenchimento diferentes usadas para os condados.
|
||||
|
||||
**User Story #5:** My counties should each have `data-fips` and `data-education` properties containing their corresponding `fips` and `education` values.
|
||||
**Especificação de usuário nº 5:** cada um dos meus condados devem ter propriedades `data-fips` e `data-education` contendo seus correspondentes valores de `fips` e `education`.
|
||||
|
||||
**User Story #6:** My choropleth should have a county for each provided data point.
|
||||
** Especificação de usuário nº 6: ** meu coropleto deve ter um condado para cada dado fornecido.
|
||||
|
||||
**User Story #7:** The counties should have `data-fips` and `data-education` values that match the sample data.
|
||||
**Especificação de usuário nº 7:** os condados devem ter os valores `data-fips` e `data-education` que correspondam aos dados da amostra.
|
||||
|
||||
**User Story #8:** My choropleth should have a legend with a corresponding `id="legend"`.
|
||||
**Especificação de usuário nº 8:** meu cloropleto deve ter uma legenda com um `id="legend"` correspondente.
|
||||
|
||||
**User Story #9:** There should be at least 4 different fill colors used for the legend.
|
||||
**Especificação de usuário nº 9:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para a legenda.
|
||||
|
||||
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Especificação de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-education` property that corresponds to the `data-education` of the active area.
|
||||
**Especificação de usuário nº 11:** minha dica deve ter uma propriedade `data-education` que corresponde ao `data-education` da área ativa.
|
||||
|
||||
Here are the datasets you will need to complete this project:
|
||||
Aqui estão os conjuntos de dados de que você precisará para completar esse projeto:
|
||||
|
||||
- **US Education Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **US County Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
- **Dados educacionais dos EUA:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **Dados dos condados dos EUA:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7188d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Heat Map
|
||||
title: Visualizar dados com um mapa de calor
|
||||
challengeType: 3
|
||||
forumTopicId: 301466
|
||||
dashedName: visualize-data-with-a-heat-map
|
||||
@ -8,51 +8,51 @@ dashedName: visualize-data-with-a-heat-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**User Story #1:** My heat map should have a title with a corresponding `id="title"`.
|
||||
**Especificação de usuário nº 1: ** meu mapa de calor deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**User Story #2:** My heat map should have a description with a corresponding `id="description"`.
|
||||
**Especificação de usuário nº 2: ** meu mapa de calor deve ter uma descrição com uma `id="description"` correspondente.
|
||||
|
||||
**User Story #3:** My heat map should have an x-axis with a corresponding `id="x-axis"`.
|
||||
**Especificação de usuário nº 3:** meu mapa de calor deve ter eixo x com um `id="x-axis"` correspondente.
|
||||
|
||||
**User Story #4:** My heat map should have a y-axis with a corresponding `id="y-axis"`.
|
||||
**Especificação de usuário nº 4:** meu mapa de calor deve ter eixo y com um `id="y-axis"` correspondente.
|
||||
|
||||
**User Story #5:** My heat map should have `rect` elements with a `class="cell"` that represent the data.
|
||||
**Especificação de usuário nº 5: ** meu mapa de calor deve ter elementos `rect` com uma `class="cell"` correspondente que representa os dados.
|
||||
|
||||
**User Story #6:** There should be at least 4 different fill colors used for the cells.
|
||||
**Especificação de usuário nº 6:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para as células.
|
||||
|
||||
**User Story #7:** Each cell will have the properties `data-month`, `data-year`, `data-temp` containing their corresponding `month`, `year`, and `temperature` values.
|
||||
**Especificação de usuário nº 7:** cada célula deve ter as propriedades `data-month`, `data-year`, `data-temp` contendo os valores de `month`, `year` e `temperature` correspondentes.
|
||||
|
||||
**User Story #8:** The `data-month`, `data-year` of each cell should be within the range of the data.
|
||||
**Especificação de usuário nº 8:** os valores `data-month` e `data-year` de cada célula devem estar dentro do intervalo dos dados.
|
||||
|
||||
**User Story #9:** My heat map should have cells that align with the corresponding month on the y-axis.
|
||||
**Especificação de usuário nº 9:** meu mapa de calor deve ter células que estejam alinhadas com o mês correspondente no eixo y.
|
||||
|
||||
**User Story #10:** My heat map should have cells that align with the corresponding year on the x-axis.
|
||||
**Especificação de usuário nº 10:** meu mapa de calor deve ter células que estejam alinhadas com o ano correspondente no eixo x.
|
||||
|
||||
**User Story #11:** My heat map should have multiple tick labels on the y-axis with the full month name.
|
||||
**Especificação de usuário nº 11:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo y com o nome do mês por extenso.
|
||||
|
||||
**User Story #12:** My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015.
|
||||
**Especificação de usuário nº 12:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo x com os anos entre 1754 e 2015.
|
||||
|
||||
**User Story #13:** My heat map should have a legend with a corresponding `id="legend"`.
|
||||
**Especificação de usuário nº 13:** meu mapa de calor deve ter uma legenda com o `id="legend"` correspondente.
|
||||
|
||||
**User Story #14:** My legend should contain `rect` elements.
|
||||
**Especificação de usuário nº 14:** minha legenda deve conter elementos `rect`.
|
||||
|
||||
**User Story #15:** The `rect` elements in the legend should use at least 4 different fill colors.
|
||||
**Especificação de usuário nº 15:** os elementos `rect` na legenda devem usar pelo menos 4 cores diferentes de preenchimento.
|
||||
|
||||
**User Story #16:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Especificação de usuário nº 16:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**User Story #17:** My tooltip should have a `data-year` property that corresponds to the `data-year` of the active area.
|
||||
**Especificação de usuário nº 17:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-year` da área ativa.
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
Aqui está o conjunto de dados de que você vai precisar para completar esse projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Scatterplot Graph
|
||||
title: Visualizar dados com um gráfico de dispersão
|
||||
challengeType: 3
|
||||
forumTopicId: 301467
|
||||
dashedName: visualize-data-with-a-scatterplot-graph
|
||||
@ -8,47 +8,47 @@ dashedName: visualize-data-with-a-scatterplot-graph
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**User Story #1:** I can see a title element that has a corresponding `id="title"`.
|
||||
**Especificação de usuário nº 1:** eu posso ver um elemento de título que tem um `id="title"` correspondente.
|
||||
|
||||
**User Story #2:** I can see an x-axis that has a corresponding `id="x-axis"`.
|
||||
**Especificação de usuário nº 2:** eu posso ver um eixo x com um `id="x-axis"` correspondente.
|
||||
|
||||
**User Story #3:** I can see a y-axis that has a corresponding `id="y-axis"`.
|
||||
**Especificação de usuário nº 3:** eu posso ver um eixo y com um `id="y-axis"` correspondente.
|
||||
|
||||
**User Story #4:** I can see dots, that each have a class of `dot`, which represent the data being plotted.
|
||||
**Especificação de usuário nº 4:** eu posso ver pontos e cada um deles tem uma classe `dot`, que representa os dados a serem plotados.
|
||||
|
||||
**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding `x` and `y` values.
|
||||
**Especificação de usuário nº 5:** cada ponto deve ter as propriedades `data-xvalue` e `data-yvalue` contendo seus valores correspondentes de `x` e de `y`.
|
||||
|
||||
**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or `Date` objects are acceptable for test evaluation. For `data-yvalue` (minutes), use `Date` objects.
|
||||
**Especificação de usuário nº 6:** os valores `data-xvalue` e `data-yvalue` de cada ponto devem estar dentro do intervalo factual de dados e no formato de dados correto. Para `data-xvalue`, objetos de inteiros (anos completos) ou `Date` são aceitáveis para a avaliação dos testes. Para `data-yvalue` (minutos), use objetos `Date`.
|
||||
|
||||
**User Story #7:** The `data-xvalue` and its corresponding dot should align with the corresponding point/value on the x-axis.
|
||||
**Especificação de usuário nº 7:** o `data-xvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo x.
|
||||
|
||||
**User Story #8:** The `data-yvalue` and its corresponding dot should align with the corresponding point/value on the y-axis.
|
||||
**Especificação de usuário nº 8:** o `data-yvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo y.
|
||||
|
||||
**User Story #9:** I can see multiple tick labels on the y-axis with `%M:%S` time format.
|
||||
**Especificação de usuário nº 9:** eu posso ver diversas etiquetas de confirmação no eixo y com o formato de tempo `%M:%S`.
|
||||
|
||||
**User Story #10:** I can see multiple tick labels on the x-axis that show the year.
|
||||
**Especificação de usuário nº 10:** eu posso ver diversas etiquetas de confirmação no eixo x que mostram o ano.
|
||||
|
||||
**User Story #11:** I can see that the range of the x-axis labels are within the range of the actual x-axis data.
|
||||
**Especificação de usuário nº 11:** eu posso ver que o intervalo de etiquetas com o eixo x está dentro do intervalo factual de dados do eixo x.
|
||||
|
||||
**User Story #12:** I can see that the range of the y-axis labels are within the range of the actual y-axis data.
|
||||
**Especificação de usuário nº 12:** eu posso ver que o intervalo de etiquetas com o eixo y está dentro do intervalo factual de dados do eixo y.
|
||||
|
||||
**User Story #13:** I can see a legend containing descriptive text that has `id="legend"`.
|
||||
**Especificação de usuário nº 13:** eu posso ver uma legenda que tem `id="legend"` e contém texto descritivo.
|
||||
|
||||
**User Story #14:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Especificação de usuário nº 14:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**User Story #15:** My tooltip should have a `data-year` property that corresponds to the `data-xvalue` of the active area.
|
||||
**Especificação de usuário nº 15:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-xvalue` da área ativa.
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
Aqui está o conjunto de dados de que você vai precisar para completar esse projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc0
|
||||
title: Visualize Data with a Treemap Diagram
|
||||
title: Visualizar dados com um diagrama Treemap
|
||||
challengeType: 3
|
||||
forumTopicId: 301468
|
||||
dashedName: visualize-data-with-a-treemap-diagram
|
||||
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-treemap-diagram
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**User Story #1:** My tree map should have a title with a corresponding `id="title"`.
|
||||
**Especificação de usuário nº 1: ** meu treemap deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**User Story #2:** My tree map should have a description with a corresponding `id="description"`.
|
||||
**Especificação de usuário nº 2: ** meu treemap deve ter uma descrição com uma `id="description"` correspondente.
|
||||
|
||||
**User Story #3:** My tree map should have `rect` elements with a corresponding `class="tile"` that represent the data.
|
||||
**Especificação de usuário nº 3: ** meu treemap deve ter elementos `rect` com uma `class="tile"` que representa os dados.
|
||||
|
||||
**User Story #4:** There should be at least 2 different fill colors used for the tiles.
|
||||
**Especificação de usuário nº 4:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para os blocos.
|
||||
|
||||
**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding `name`, `category`, and `value`.
|
||||
**Especificação de usuário nº 5:** cada bloco deve ter as propriedades `data-name`, `data-category` e `data-value` contendo os valores de `name`, `category` e `value` correspondentes.
|
||||
|
||||
**User Story #6:** The area of each tile should correspond to the `data-value` amount: tiles with a larger `data-value` should have a bigger area.
|
||||
**Especificação de usuário nº 6:** a área de cada bloco deve corresponder à quantidade de `data-value`: blocos com um `data-value` maior devem ter uma área maior.
|
||||
|
||||
**User Story #7:** My tree map should have a legend with corresponding `id="legend"`.
|
||||
**Especificação de usuário nº 7:** meu treemap deve ter uma legenda com o `id="legend"` correspondente.
|
||||
|
||||
**User Story #8:** My legend should have `rect` elements with a corresponding `class="legend-item"`.
|
||||
**Especificação de usuário nº 8:** minha legenda deve ter elementos `rect` com um `class="legend-item"` correspondente.
|
||||
|
||||
**User Story #9:** The `rect` elements in the legend should use at least 2 different fill colors.
|
||||
**Especificação de usuário nº 9:** os elementos `rect` na legenda devem usar pelo menos 2 cores diferentes de preenchimento.
|
||||
|
||||
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Especificação de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-value` property that corresponds to the `data-value` of the active area.
|
||||
**Especificação de usuário nº 11:** minha dica deve ter uma propriedade `data-value` que corresponda à `data-value` da área ativa.
|
||||
|
||||
For this project you can use any of the following datasets:
|
||||
Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados:
|
||||
|
||||
- **Kickstarter Pledges:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Movie Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Video Game Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
- **Contribuições do Kickstarter:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Venda de filmes:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Venda de videogames:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: Add a Tooltip to a D3 Element
|
||||
title: Adicionar uma dica a um elemento D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301470
|
||||
dashedName: add-a-tooltip-to-a-d3-element
|
||||
@ -8,71 +8,71 @@ dashedName: add-a-tooltip-to-a-d3-element
|
||||
|
||||
# --description--
|
||||
|
||||
A tooltip shows more information about an item on a page when the user hovers over that item. There are several ways to add a tooltip to a visualization, this challenge uses the SVG `title` element.
|
||||
Uma dica mostra mais informações sobre um item em uma página quando o usuário passa o mouse por cima do item. Existem várias maneiras de adicionar uma dica a uma visualização. Este desafio usa o elemento SVG `title`.
|
||||
|
||||
`title` pairs with the `text()` method to dynamically add data to the bars.
|
||||
`title` está junto com o método `text()` para adicionar dinamicamente dados às barras.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Append a `title` element under each `rect` node. Then call the `text()` method with a callback function so the text displays the data value.
|
||||
Acrescente um elemento `title` sob cada nó de `rect`. Em seguida, chame o método `text()` com uma função de callback para que o texto mostre o valor dos dados.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 9 `title` elements.
|
||||
O código deve ter 9 elementos `title`.
|
||||
|
||||
```js
|
||||
assert($('title').length == 9);
|
||||
```
|
||||
|
||||
The first `title` element should have tooltip text of `12`.
|
||||
O primeiro elemento `title` deve ter o texto de dica `12`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(0).text() == '12');
|
||||
```
|
||||
|
||||
The second `title` element should have tooltip text of `31`.
|
||||
O segundo elemento `title` deve ter o texto de dica `31`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(1).text() == '31');
|
||||
```
|
||||
|
||||
The third `title` element should have tooltip text of `22`.
|
||||
O terceiro elemento `title` deve ter o texto de dica `22`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(2).text() == '22');
|
||||
```
|
||||
|
||||
The fourth `title` element should have tooltip text of `17`.
|
||||
O quarto elemento `title` deve ter o texto de dica `17`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(3).text() == '17');
|
||||
```
|
||||
|
||||
The fifth `title` element should have tooltip text of `25`.
|
||||
O quinto elemento `title` deve ter o texto de dica `25`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(4).text() == '25');
|
||||
```
|
||||
|
||||
The sixth `title` element should have tooltip text of `18`.
|
||||
O sexto elemento `title` deve ter o texto de dica `18`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(5).text() == '18');
|
||||
```
|
||||
|
||||
The seventh `title` element should have tooltip text of `29`.
|
||||
O sétimo elemento `title` deve ter o texto de dica `29`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(6).text() == '29');
|
||||
```
|
||||
|
||||
The eighth `title` element should have tooltip text of `14`.
|
||||
O oitavo elemento `title` deve ter o texto de dica `14`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(7).text() == '14');
|
||||
```
|
||||
|
||||
The ninth `title` element should have tooltip text of `9`.
|
||||
O nono elemento `title` deve ter o texto de dica `9`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(8).text() == '9');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: Add Attributes to the Circle Elements
|
||||
title: Adicionar atributos aos elementos de círculo
|
||||
challengeType: 6
|
||||
forumTopicId: 301471
|
||||
dashedName: add-attributes-to-the-circle-elements
|
||||
@ -8,27 +8,27 @@ dashedName: add-attributes-to-the-circle-elements
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge created the `circle` elements for each point in the `dataset`, and appended them to the SVG canvas. But D3 needs more information about the position and size of each `circle` to display them correctly.
|
||||
O último desafio criou os elementos `circle` para cada ponto no `dataset` e anexou-os ao canvas do SVG. Porém, o D3 precisa de mais informações sobre a posição e o tamanho de cada `circle` para exibi-los corretamente.
|
||||
|
||||
A `circle` in SVG has three main attributes. The `cx` and `cy` attributes are the coordinates. They tell D3 where to position the *center* of the shape on the SVG canvas. The radius (`r` attribute) gives the size of the `circle`.
|
||||
Um `circle` em SVG tem três atributos principais. Os atributos `cx` e `cy` são as coordenadas. Elas informam ao D3 onde posicionar o *centro* da forma no canvas do SVG. O raio (atributo `r`) fornece o tamanho de `circle`.
|
||||
|
||||
Just like the `rect` `y` coordinate, the `cy` attribute for a `circle` is measured from the top of the SVG canvas, not from the bottom.
|
||||
Assim como ocorre com `rect`, em sua coordenada `y`, o atributo `cy` de um `circle` é medido do topo do canvas do SVG, não da parte inferior.
|
||||
|
||||
All three attributes can use a callback function to set their values dynamically. Remember that all methods chained after `data(dataset)` run once per item in `dataset`. The `d` parameter in the callback function refers to the current item in `dataset`, which is an array for each point. You use bracket notation, like `d[0]`, to access the values in that array.
|
||||
Todos os três atributos podem usar uma função de callback para definir seus valores dinamicamente. Lembre-se de que todos os métodos encadeados após `data(dataset)` são executados uma vez por item no `dataset`. O parâmetro `d` na função de callback se refere ao item atual no `dataset`, que é um array para aquele ponto. Use a notação de colchetes, por exemplo `d[0]`, para acessar valores naquele array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add `cx`, `cy`, and `r` attributes to the `circle` elements. The `cx` value should be the first number in the array for each item in `dataset`. The `cy` value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The `r` value should be `5` for all circles.
|
||||
Adicione os atributos `cx`, `cy` e `r` aos elementos `circle`. O valor de `cx` deve ser o primeiro número do array para cada item no `dataset`. O valor de `cy` deve ser baseado no segundo número do array, mas certifique-se de mostrar o gráfico voltado para o lado certo, em vez de invertido. O valor de `r` deve ser `5` para todos os círculos.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 10 `circle` elements.
|
||||
O código deve ter 10 elementos `circle`.
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
The first `circle` element should have a `cx` value of `34`, a `cy` value of `422`, and an `r` value of `5`.
|
||||
O primeiro elemento `circle` deve ter um valor `cx` de `34`, um valor `cy` de `422` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -38,7 +38,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second `circle` element should have a `cx` value of `109`, a `cy` value of `220`, and an `r` value of `5`.
|
||||
O segundo elemento `circle` deve ter um valor `cx` de `109`, um valor `cy` de `220` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third `circle` element should have a `cx` value of `310`, a `cy` value of `380`, and an `r` value of `5`.
|
||||
O terceiro elemento `circle` deve ter um valor `cx` de `310`, um valor `cy` de `380` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -58,7 +58,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth `circle` element should have a `cx` value of `79`, a `cy` value of `89`, and an `r` value of `5`.
|
||||
O quarto elemento `circle` deve ter um valor `cx` de `79`, um valor `cy` de `89` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -68,7 +68,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth `circle` element should have a `cx` value of `420`, a `cy` value of `280`, and an `r` value of `5`.
|
||||
O quinto elemento `circle` deve ter um valor `cx` de `420`, um valor `cy` de `280` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -78,7 +78,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The sixth `circle` element should have a `cx` value of `233`, a `cy` value of `355`, and an `r` value of `5`.
|
||||
O sexto elemento `circle` deve ter um valor `cx` de `233`, um valor `cy` de `355` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -88,7 +88,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The seventh `circle` element should have a `cx` value of `333`, a `cy` value of `404`, and an `r` value of `5`.
|
||||
O sétimo elemento `circle` deve ter um valor `cx` de `333`, um valor `cy` de `404` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -98,7 +98,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The eighth `circle` element should have a `cx` value of `222`, a `cy` value of `167`, and an `r` value of `5`.
|
||||
O oitavo elemento `circle` deve ter um valor `cx` de `222`, um valor `cy` de `167` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -108,7 +108,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The ninth `circle` element should have a `cx` value of `78`, a `cy` value of `180`, and an `r` value of `5`.
|
||||
O nono elemento `circle` deve ter um valor `cx` de `78`, um valor `cy` de `180` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -118,7 +118,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The tenth `circle` element should have a `cx` value of `21`, a `cy` value of `377`, and an `r` value of `5`.
|
||||
O décimo elemento `circle` deve ter um valor `cx` de `21`, um valor `cy` de `377` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: Add Axes to a Visualization
|
||||
title: Adicionar eixos a uma visualização
|
||||
challengeType: 6
|
||||
forumTopicId: 301472
|
||||
dashedName: add-axes-to-a-visualization
|
||||
@ -8,15 +8,15 @@ dashedName: add-axes-to-a-visualization
|
||||
|
||||
# --description--
|
||||
|
||||
Another way to improve the scatter plot is to add an x-axis and a y-axis.
|
||||
Outra maneira de melhorar o diagrama de dispersão é adicionar um eixo x e um eixo y.
|
||||
|
||||
D3 has two methods, `axisLeft()` and `axisBottom()`, to render the y-axis and x-axis, respectively. Here's an example to create the x-axis based on the `xScale` in the previous challenges:
|
||||
O D3 tem dois métodos, `axisLeft()` e `axisBottom()`, para renderizar o eixo y e o eixo x, respectivamente. Aqui temos um exemplo para criar o eixo x com base na `xScale` dos desafios anteriores:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
```
|
||||
|
||||
The next step is to render the axis on the SVG canvas. To do so, you can use a general SVG component, the `g` element. The `g` stands for group. Unlike `rect`, `circle`, and `text`, an axis is just a straight line when it's rendered. Because it is a simple shape, using `g` works. The last step is to apply a `transform` attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible. SVG supports different types of `transforms`, but positioning an axis needs `translate`. When it's applied to the `g` element, it moves the whole group over and down by the given amounts. Here's an example:
|
||||
O próximo passo é renderizar o eixo no canvas do SVG. Para fazer isso, você pode usar um componente SVG geral, o elemento `g`. O `g` representa o grupo. Ao contrário de `rect`, `circle` e `text`, um eixo é apenas uma linha reta quando é renderizado. Por ser uma forma simples, usar `g` funciona. O último passo é aplicar um atributo `transform` para posicionar o eixo no lugar certo no canvas do SVG. Caso contrário, a linha seria renderizada ao longo da borda do canvas do SVG e não seria visível. O SVG suporta diferentes tipos de `transforms`, mas posicionar um eixo precisa de `translate`. Quando aplicado ao elemento `g`, ele move o grupo inteiro para cima e para baixo pelos valores indicados. Exemplo:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
@ -26,21 +26,21 @@ svg.append("g")
|
||||
.call(xAxis);
|
||||
```
|
||||
|
||||
The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the `call()` method. The y-axis works in the same way, except the `translate` argument is in the form `(x, 0)`. Because `translate` is a string in the `attr()` method above, you can use concatenation to include variable values for its arguments.
|
||||
O código acima coloca o eixo x na parte inferior do canvas do SVG. Então, ele é passado como um argumento para o método `call()`. O eixo y funciona da mesma forma, exceto pelo fato de o argumento `translate` estar no formato `(x, 0)`. Como `translate` é uma string no método `attr()` acima, você pode usar a concatenação para incluir valores de variáveis para seus argumentos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The scatter plot now has an x-axis. Create a y-axis in a variable named `yAxis` using the `axisLeft()` method. Then render the axis using a `g` element. Make sure to use a `transform` attribute to translate the axis by the amount of padding units right, and `0` units down. Remember to `call()` the axis.
|
||||
O diagrama de dispersão agora tem um eixo x. Crie um eixo y em uma variável chamada `yAxis` usando o método `axisLeft()`. Em seguida, renderize o eixo usando um elemento `g`. Certifique-se de usar o atributo `transform` para mover o eixo pela quantidade de unidades de preenchimento à direita, e `0` unidades para baixo. Lembre-se de usar `call()` para o eixo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `axisLeft()` method with `yScale` passed as the argument.
|
||||
O código deve usar o método `axisLeft()` com `yScale` passado para o argumento.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.axisLeft\(yScale\)/g));
|
||||
```
|
||||
|
||||
The y-axis `g` element should have a `transform` attribute to translate the axis by `(60, 0)`.
|
||||
O elemento `g` do eixo y deve ter um atributo `transform` para mover o eixo por `(60, 0)`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should call the `yAxis`.
|
||||
O código deve ter uma tag `yAxis`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: Add Classes with D3
|
||||
title: Adicionar classes com o D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301473
|
||||
dashedName: add-classes-with-d3
|
||||
@ -8,29 +8,29 @@ dashedName: add-classes-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the `attr()` method to add any HTML attribute to an element, including a class name.
|
||||
É difícil de gerenciar diversos estilos inline em elementos do HTML, mesmo para aplicações pequenas. É mais fácil adicionar uma classe aos elementos e estilizar aquela classe uma vez usando as regras de CSS. O D3 tem o método `attr()` para adicionar qualquer atributo HTML a um elemento, incluindo o nome da classe.
|
||||
|
||||
The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of `container` to a selection:
|
||||
O método `attr()` funciona da mesma forma que `style()`. Ele recebe valores separados por vírgulas e pode usar uma função de callback. Aqui está um exemplo para adicionar uma classe `container` a uma seleção:
|
||||
|
||||
```js
|
||||
selection.attr("class", "container");
|
||||
```
|
||||
|
||||
Note that the `class` parameter will remain the same whenever you need to add a class and only the `container` parameter will change.
|
||||
Observe que o parâmetro `class` permanecerá o mesmo sempre que você precisar adicionar uma classe e que somente o parâmetro `container` mudará.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the `attr()` method to the code in the editor and put a class of `bar` on the `div` elements.
|
||||
Adicione o método `attr()` ao código no editor e coloque uma classe `bar` nos elementos `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` elements should have a class of `bar`.
|
||||
Os elementos `div` devem ter a classe `bar`.
|
||||
|
||||
```js
|
||||
assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
|
||||
```
|
||||
|
||||
Your code should use the `attr()` method.
|
||||
O código deve usar o método `attr()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.attr/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be4
|
||||
title: Access the JSON Data from an API
|
||||
title: Acessar os dados de JSON de uma API
|
||||
challengeType: 6
|
||||
forumTopicId: 301499
|
||||
dashedName: access-the-json-data-from-an-api
|
||||
@ -8,37 +8,37 @@ dashedName: access-the-json-data-from-an-api
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous challenge, you saw how to get JSON data from the freeCodeCamp Cat Photo API.
|
||||
No desafio anterior, você viu como obter dados de JSON da API de fotos de gatos do freeCodeCamp.
|
||||
|
||||
Now you'll take a closer look at the returned data to better understand the JSON format. Recall some notation in JavaScript:
|
||||
Agora, dê uma olhada nos dados retornados para entender melhor o formato JSON. Vamos relembrar um pouco da notação do JavaScript:
|
||||
|
||||
<blockquote>[ ] -> Square brackets represent an array<br>{ } -> Curly brackets represent an object<br>" " -> Double quotes represent a string. They are also used for key names in JSON</blockquote>
|
||||
<blockquote>[ ] -> colchetes representam um array<br>{ } -> chaves representam um objeto<br>" " -> aspas duplas representam uma string. Elas também são usadas para nomes de chaves em JSON</blockquote>
|
||||
|
||||
Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need.
|
||||
Entender a estrutura dos dados que uma API retorna é importante, pois influencia a forma como você obtém os valores de que necessita.
|
||||
|
||||
On the right, click the `Get Message` button to load the freeCodeCamp Cat Photo API JSON into the HTML.
|
||||
À direita, clique no botão `Get Message` para carregar o JSON da API de fotos de gatos do freeCodeCamp no HTML.
|
||||
|
||||
The first and last character you see in the JSON data are square brackets `[ ]`. This means that the returned data is an array. The second character in the JSON data is a curly `{` bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo.
|
||||
O primeiro e o último caracteres que você verá nos dados do JSON serão colchetes `[ ]`. Isso significa que os dados retornados são um array. O segundo caractere nos dados do JSON é uma abertura de chave `{`, que marca o início de um objeto. Se olhar mais atentamente, você verá que há três objetos separados. Os dados do JSON são um array de três objetos, onde cada objeto contém informações sobre uma foto de gato.
|
||||
|
||||
You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has `"id":0` where `id` is a key and `0` is its corresponding value. Similarly, there are keys for `imageLink`, `altText`, and `codeNames`. Each cat photo object has these same keys, but with different values.
|
||||
Você aprendeu anteriormente que objetos contêm "pares de chave-valor" separados por vírgulas. No exemplo de fotos de gatos, o primeiro objeto tem o `"id":0`, onde `id` é uma chave e `0` é o seu valor correspondente. Do mesmo modo, há chaves para `imageLink`, `altText` e `codeNames`. Cada objeto de foto de gato tem as mesmas chaves, mas com valores diferentes.
|
||||
|
||||
Another interesting "key-value pair" in the first object is `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Here `codeNames` is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.
|
||||
Outro "par chave-valor" interessante no primeiro objeto é `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Aqui, `codeNames` é a chave e seu valor é um array com três strings. É possível ter arrays de objetos, além de uma chave com um array como valor.
|
||||
|
||||
Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the `altText` property of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called `json`:
|
||||
Lembre-se de como acessar dados em array e em objetos. Arrays usam a notação de colchetes para acessar um índice específico de um item. Objetos usam os colchetes ou a notação de ponto para acessar o valor de determinada propriedade. Aqui vemos um exemplo que imprime a propriedade `altText` da primeira foto de gatos - observe que os dados do JSON representados no editor são salvos em uma variável chamada `json`:
|
||||
|
||||
```js
|
||||
console.log(json[0].altText);
|
||||
```
|
||||
|
||||
The console would display the string `A white cat wearing a green helmet shaped melon on its head.`.
|
||||
O console exibirá a string `A white cat wearing a green helmet shaped melon on its head.`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
For the cat with the `id` of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value.
|
||||
Para o gato com o `id` de 2, imprima no console o segundo valor do array `codeNames`. Você deve usar notação de colchetes e de ponto no objeto (que é salvo na variável `json`) para acessar o valor.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use bracket and dot notation to access the proper code name, and print `Loki` to the console.
|
||||
Seu código deve usar notação de colchetes e de ponto para acessar o nome do código apropriado e imprimir `Loki` no console.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be2
|
||||
title: Change Text with click Events
|
||||
title: Alterar texto com eventos de clique
|
||||
challengeType: 6
|
||||
forumTopicId: 301500
|
||||
dashedName: change-text-with-click-events
|
||||
@ -8,11 +8,11 @@ dashedName: change-text-with-click-events
|
||||
|
||||
# --description--
|
||||
|
||||
When the click event happens, you can use JavaScript to update an HTML element.
|
||||
Quando ocorre o evento de clique, você pode usar o JavaScript para atualizar um elemento HTML.
|
||||
|
||||
For example, when a user clicks the `Get Message` button, it changes the text of the element with the class `message` to say `Here is the message`.
|
||||
Por exemplo, quando um usuário clica no botão `Get Message`, ele muda o texto do elemento com a classe `message` para que passe a dizer `Here is the message`.
|
||||
|
||||
This works by adding the following code within the click event:
|
||||
Isso ocorre quando adicionamos o seguinte código ao evento de clique:
|
||||
|
||||
```js
|
||||
document.getElementsByClassName('message')[0].textContent="Here is the message";
|
||||
@ -20,11 +20,11 @@ document.getElementsByClassName('message')[0].textContent="Here is the message";
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add code inside the `onclick` event handler to change the text inside the `message` element to say `Here is the message`.
|
||||
Adicione código ao manipulador de evento `onclick` para alterar o texto dentro do elemento `message` de modo que ele diga `Here is the message`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `document.getElementsByClassName` method to select the element with class `message` and set its `textContent` to the given string.
|
||||
O código deve usar o método `document.getElementsByClassName` para selecionar o elemento com ac classe `message` e definir o `textContent` como a string mencionada.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be5
|
||||
title: Convert JSON Data to HTML
|
||||
title: Converter dados do JSON para HTML
|
||||
challengeType: 6
|
||||
forumTopicId: 16807
|
||||
dashedName: convert-json-data-to-html
|
||||
@ -8,15 +8,15 @@ dashedName: convert-json-data-to-html
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you're getting data from a JSON API, you can display it in the HTML.
|
||||
Agora que você está recebendo dados de uma API de JSON, você pode exibir os dados no HTML.
|
||||
|
||||
You can use a `forEach` method to loop through the data since the cat photo objects are held in an array. As you get to each item, you can modify the HTML elements.
|
||||
Você pode usar um método `forEach` para percorrer os dados, já que os objetos de foto de gatos são mantidos em um array. Ao percorrer cada item, você pode modificar os elementos do HTML.
|
||||
|
||||
First, declare an html variable with `let html = "";`.
|
||||
Primeiro, declare uma variável html com `let html = "";`.
|
||||
|
||||
Then, loop through the JSON, adding HTML to the variable that wraps the key names in `strong` tags, followed by the value. When the loop is finished, you render it.
|
||||
Em seguida, percorra o JSON por meio de um laço, adicionando HTML à variável que envolve os nomes das chaves em tags `strong`, seguidas pelo valor. Quando o laço estiver concluído, você o renderiza.
|
||||
|
||||
Here's the code that does this:
|
||||
Aqui está o código para fazer isso:
|
||||
|
||||
```js
|
||||
let html = "";
|
||||
@ -30,13 +30,13 @@ json.forEach(function(val) {
|
||||
});
|
||||
```
|
||||
|
||||
**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to cross-site scripting attacks.
|
||||
**Observação:** para este desafio, você precisa adicionar novos elementos HTML à página. Por isso, você não pode confiar em `textContent`. Em vez disso, você precisa usar `innerHTML`, o que pode tornar um site vulnerável a ataques de scripts entre sites.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `forEach` method to loop over the JSON data and create the HTML elements to display it.
|
||||
Adicione um método `forEach` para percorrer os dados do JSON e criar os elementos HTML para exibi-los.
|
||||
|
||||
Here is some example JSON:
|
||||
Aqui está um exemplo de JSON:
|
||||
|
||||
```json
|
||||
[
|
||||
@ -52,19 +52,19 @@ Here is some example JSON:
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should store the data in the `html` variable
|
||||
O código deve armazenar os dados na variável `html`
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/html(\+=|=html\+)/g))
|
||||
```
|
||||
|
||||
Your code should use a `forEach` method to loop over the JSON data from the API.
|
||||
O código deve usar um método `forEach` para percorrer os dados do JSON da API.
|
||||
|
||||
```js
|
||||
assert(code.match(/json\.forEach/g));
|
||||
```
|
||||
|
||||
Your code should wrap the key names in `strong` tags.
|
||||
O código deve envolver os nomes das chaves em tags `strong`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<strong>.+<\/strong>/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be8
|
||||
title: Get Geolocation Data to Find A User's GPS Coordinates
|
||||
title: Obter dados de geolocalização para encontrar as coordenadas de GPS de um usuário
|
||||
challengeType: 6
|
||||
forumTopicId: 18188
|
||||
dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
|
||||
@ -8,15 +8,15 @@ dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
|
||||
|
||||
# --description--
|
||||
|
||||
Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information.
|
||||
Outra coisa legal que você consegue fazer é acessar a localização atual do usuário. Cada navegador tem um modo de navegação incorporado que pode dar a você esta informação.
|
||||
|
||||
The navigator will get the user's current longitude and latitude.
|
||||
O modo de navegação obterá a longitude e a latitude atuais do usuário.
|
||||
|
||||
You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.
|
||||
Será solicitado que você permita ou evite que este site conheça sua localização atual. O desafio pode ser concluído das duas maneiras, desde que o código esteja correto.
|
||||
|
||||
By selecting allow, you will see the text on the output phone change to your latitude and longitude.
|
||||
Ao selecionar que você permite, você verá o texto na saída do telefone mudar para sua latitude e longitude atuais.
|
||||
|
||||
Here's code that does this:
|
||||
Aqui está o código para fazer isso:
|
||||
|
||||
```js
|
||||
if (navigator.geolocation){
|
||||
@ -26,33 +26,33 @@ if (navigator.geolocation){
|
||||
}
|
||||
```
|
||||
|
||||
First, it checks if the `navigator.geolocation` object exists. If it does, the `getCurrentPosition` method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the `position` object's values for latitude and longitude using dot notation and updates the HTML.
|
||||
Primeiro, ele verifica se o objeto `navigator.geolocation` existe. Se existir, o método `getCurrentPosition` do objeto é chamado. Ele inicia uma solicitação assíncrona da posição do usuário. Se a solicitação tiver sucesso, a função de callback do método é executada. Essa função acessa os valores do objeto `position` para latitude e longitude usando a notação de ponto e atualiza o HTML.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the example code inside the `script` tags to check a user's current location and insert it into the HTML.
|
||||
Adicione o código de exemplo entre as tags `script` para verificar a localização atual do usuário e coloque-o no HTML.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use `navigator.geolocation` to access the user's current location.
|
||||
Seu código deve usar `navigator.geolocation` para acessar a localização atual do usuário.
|
||||
|
||||
```js
|
||||
assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
|
||||
```
|
||||
|
||||
Your code should use `position.coords.latitude` to display the user's latitudinal location.
|
||||
Seu código deve usar `position.coords.latitude` para acessar a localização latitudinal do usuário.
|
||||
|
||||
```js
|
||||
assert(code.match(/position\.coords\.latitude/g));
|
||||
```
|
||||
|
||||
Your code should use `position.coords.longitude` to display the user's longitudinal location.
|
||||
Seu código deve usar `position.coords.longitude` para acessar a localização longitudinal do usuário.
|
||||
|
||||
```js
|
||||
assert(code.match(/position\.coords\.longitude/g));
|
||||
```
|
||||
|
||||
You should display the user's position within the `div` element with `id="data"`.
|
||||
Você deve exibir a posição do usuário dentro do elemento `div` com o `id="data"`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5ccfad82bb2dc6c965a848e5
|
||||
title: Get JSON with the JavaScript fetch method
|
||||
title: Obter o JSON com o método fetch do JavaScript
|
||||
challengeType: 6
|
||||
forumTopicId: 301501
|
||||
dashedName: get-json-with-the-javascript-fetch-method
|
||||
@ -8,9 +8,9 @@ dashedName: get-json-with-the-javascript-fetch-method
|
||||
|
||||
# --description--
|
||||
|
||||
Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to `XMLHttpRequest`, but the syntax is considered easier to understand.
|
||||
Outra maneira de solicitar dados externos é usar o método `fetch()` do JavaScript. Ele é equivalente ao método `XMLHttpRequest`, mas a sintaxe é considerada mais fácil de entender.
|
||||
|
||||
Here is the code for making a GET request to `/json/cats.json`
|
||||
Aqui está o código para fazer uma solicitação de GET para `/json/cats.json`
|
||||
|
||||
```js
|
||||
|
||||
@ -22,29 +22,29 @@ fetch('/json/cats.json')
|
||||
|
||||
```
|
||||
|
||||
Take a look at each piece of this code.
|
||||
Dê uma olhada em cada parte deste código.
|
||||
|
||||
The first line is the one that makes the request. So, `fetch(URL)` makes a `GET` request to the URL specified. The method returns a Promise.
|
||||
A primeira linha é aquela que faz a solicitação. Então, `fetch(URL)` faz uma solicitação de `GET` para o URL especificado. O método retorna uma Promise.
|
||||
|
||||
After a Promise is returned, if the request was successful, the `then` method is executed, which takes the response and converts it to JSON format.
|
||||
Após a devolução da promise, se a solicitação tiver sido bem-sucedida, o método `then` é executado, recebendo a resposta e convertendo-a para o formato JSON.
|
||||
|
||||
The `then` method also returns a Promise, which is handled by the next `then` method. The argument in the second `then` is the JSON object you are looking for!
|
||||
O método `then` também retorna uma promise, que é tratada pelo próximo método `then`. O argumento no segundo `then` é o objeto do JSON que você está procurando!
|
||||
|
||||
Now, it selects the element that will receive the data by using `document.getElementById()`. Then it modifies the HTML code of the element by inserting a string created from the JSON object returned from the request.
|
||||
Agora, ele seleciona o elemento que receberá os dados usando `document.getElementById()`. Em seguida, modifica o código HTML do elemento, inserindo uma string criada a partir do objeto do JSON retornado pela solicitação.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`.
|
||||
Atualize o código para criar e enviar uma solicitação de `GET` para a API de fotos de gatos do freeCodeCamp. Desta vez, porém, use o método `fetch` em vez de `XMLHttpRequest`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should make a `GET` request with `fetch`.
|
||||
O código deve fazer uma solicitação de `GET` com `fetch`.
|
||||
|
||||
```js
|
||||
assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
|
||||
```
|
||||
|
||||
Your code should use `then` to convert the response to JSON.
|
||||
O código deve usar `then` para converter a resposta para JSON.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -54,13 +54,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should use `then` to handle the data converted to JSON by the other `then`.
|
||||
O código deve usar `then` para lidar com os dados convertidos para JSON pelo outro `then`.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g));
|
||||
```
|
||||
|
||||
Your code should get the element with id `message` and change its inner HTML to the string of JSON data.
|
||||
O código deve obter o elemento com o id `message` e alterar seu HTML interno para a string de dados do JSON.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be3
|
||||
title: Get JSON with the JavaScript XMLHttpRequest Method
|
||||
title: Obter o JSON com o método XMLHttpRequest do JavaScript
|
||||
challengeType: 6
|
||||
forumTopicId: 301502
|
||||
dashedName: get-json-with-the-javascript-xmlhttprequest-method
|
||||
@ -8,19 +8,19 @@ dashedName: get-json-with-the-javascript-xmlhttprequest-method
|
||||
|
||||
# --description--
|
||||
|
||||
You can also request data from an external source. This is where APIs come into play.
|
||||
Você também pode solicitar dados de uma fonte externa. Esse é o ponto em que as APIs entram no jogo.
|
||||
|
||||
Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another. You'll learn how to update HTML with the data we get from APIs using a technology called AJAX.
|
||||
Lembre-se de que as APIs - ou Interfaces de Programação de Aplicativos - são ferramentas que os computadores usam para se comunicarem uns com os outros. Você aprenderá como atualizar o HTML com os dados que recebemos das APIs usando uma tecnologia chamada AJAX.
|
||||
|
||||
Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.
|
||||
A maioria das APIs da web transfere dados em um formato chamado JSON. JSON é uma abreviação de JavaScript Object Notation.
|
||||
|
||||
JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a `{` and a `}`.
|
||||
A sintaxe do JSON é bastante semelhante à notação de um literal de objeto do JavaScript. O JSON tem propriedades de objeto e seus valores atuais, envolvidos por um `{` e um `}`.
|
||||
|
||||
These properties and their values are often referred to as "key-value pairs".
|
||||
Essas propriedades e seus valores são geralmente conhecidos como "pares chave-valor".
|
||||
|
||||
However, JSON transmitted by APIs are sent as `bytes`, and your application receives it as a `string`. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The `JSON.parse` method parses the string and constructs the JavaScript object described by it.
|
||||
Porém, o JSON transmitido pelas APIs é enviado como `bytes` e sua aplicação o recebe como uma `string`. Os JSON podem ser convertidos em objetos do JavaScript, mas não são objetos do JavaScript por padrão. O método `JSON.parse` analisa a string e constrói o objeto do JavaScript descrito por ela.
|
||||
|
||||
You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:
|
||||
Você pode solicitar o JSON da API de fotos de gato do freeCodeCamp. Aqui está o código que você pode inserir no evento de clique para fazer isto:
|
||||
|
||||
```js
|
||||
const req = new XMLHttpRequest();
|
||||
@ -32,21 +32,21 @@ req.onload = function(){
|
||||
};
|
||||
```
|
||||
|
||||
Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a `GET` request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text.
|
||||
Aqui está uma análise do que cada parte está fazendo. O objeto `XMLHttpRequest` do JavaScript tem uma série de propriedades e métodos que são usados para transferir dados. Primeiro, uma instância do objeto `XMLHttpRequest` é criada e salva na variável `req`. Em seguida, o método `open` inicia uma solicitação. Este exemplo está solicitando dados de uma API, portanto é uma solicitação `GET`. O segundo argumento para `open` é o URL da API de onde você está solicitando os dados. O terceiro argumento é um valor booleano, onde `true` torna a solicitação assíncrona. O método `send` envia a solicitação. Por fim, o manipulador de eventos `onload` analisa os dados retornados e aplica o método `JSON.stringify` para converter o objeto do JavaScript em uma string. Essa string é, então, inserida como o texto da mensagem.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. Then click the `Get Message` button. Your AJAX function will replace the `The message will go here` text with the raw JSON output from the API.
|
||||
Atualize o código para criar e enviar uma solicitação de `GET` para a API de fotos de gatos do freeCodeCamp. Em seguida, clique no botão `Get Message`. Sua função AJAX substituirá o texto `The message will go here` pela saída bruta do JSON da API.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should create a new `XMLHttpRequest`.
|
||||
O código deve criar uma nova `XMLHttpRequest`.
|
||||
|
||||
```js
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should use the `open` method to initialize a `GET` request to the freeCodeCamp Cat Photo API.
|
||||
O código deve usar o método `open` para inicializar uma solicitação de `GET` para a API de fotos de gatos do freeCodeCamp.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,13 +56,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should use the `send` method to send the request.
|
||||
O código deve usar o método `send` para enviar a solicitação.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*\)/g));
|
||||
```
|
||||
|
||||
Your code should have an `onload` event handler set to a function.
|
||||
O código deve ter um manipulador de evento `onload` definido para uma função.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -70,13 +70,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should use the `JSON.parse` method to parse the `responseText`.
|
||||
O código deve usar o método `JSON.parse` para analisar o `responseText`.
|
||||
|
||||
```js
|
||||
assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
|
||||
```
|
||||
|
||||
Your code should get the element with class `message` and change its inner HTML to the string of JSON data.
|
||||
O código deve obter o elemento com a classe `message` e alterar seu HTML interno para a string de dados do JSON.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be1
|
||||
title: Handle Click Events with JavaScript using the onclick property
|
||||
title: Tratar eventos de clique com o JavaScript usando a propriedade onclick
|
||||
challengeType: 6
|
||||
forumTopicId: 301503
|
||||
dashedName: handle-click-events-with-javascript-using-the-onclick-property
|
||||
@ -8,7 +8,7 @@ dashedName: handle-click-events-with-javascript-using-the-onclick-property
|
||||
|
||||
# --description--
|
||||
|
||||
You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called `DOMContentLoaded`. Here's the code that does this:
|
||||
Você quer que seu código execute apenas quando a página tenha terminado de carregar. Para isso, você pode incluir um evento JavaScript ao documento chamado `DOMContentLoaded`. Aqui está o código para fazer isso:
|
||||
|
||||
```js
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
```
|
||||
|
||||
You can implement event handlers that go inside of the `DOMContentLoaded` function. You can implement an `onclick` event handler which triggers when the user clicks on the element with id `getMessage`, by adding the following code:
|
||||
Você pode implementar manipuladores de eventos que vão dentro da função `DOMContentLoaded`. Você pode implementar um manipulador de evento `onclick` que dispara quando o usuário clica no elemento com id `getMessage`, adicionando o código a seguir:
|
||||
|
||||
```js
|
||||
document.getElementById('getMessage').onclick = function(){};
|
||||
@ -24,17 +24,17 @@ document.getElementById('getMessage').onclick = function(){};
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a click event handler inside of the `DOMContentLoaded` function for the element with id of `getMessage`.
|
||||
Adicione um manipulador de eventos de clique em uma função `DOMContentLoaded` para o elemento com o id `getMessage`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `document.getElementById` method to select the `getMessage` element.
|
||||
O código deve usar o método `document.getElementById` para selecionar o elemento `getMessage`.
|
||||
|
||||
```js
|
||||
assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should add an `onclick` event handler.
|
||||
O código deve adicionar um manipulador de evento `onclick`.
|
||||
|
||||
```js
|
||||
assert(typeof document.getElementById('getMessage').onclick === 'function');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be9
|
||||
title: Post Data with the JavaScript XMLHttpRequest Method
|
||||
title: Publicar dados com o método XMLHttpRequest do JavaScript
|
||||
challengeType: 6
|
||||
forumTopicId: 301504
|
||||
dashedName: post-data-with-the-javascript-xmlhttprequest-method
|
||||
@ -8,9 +8,9 @@ dashedName: post-data-with-the-javascript-xmlhttprequest-method
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.
|
||||
Nos exemplos anteriores, você recebeu dados de um recurso externo. Você também pode enviar dados para um recurso externo, contanto que esse recurso suporte solicitações AJAX e que você conheça o URL.
|
||||
|
||||
JavaScript's `XMLHttpRequest` method is also used to post data to a server. Here's an example:
|
||||
O método `XMLHttpRequest` do JavaScript também é usado para publicar dados em um servidor. Exemplo:
|
||||
|
||||
```js
|
||||
const xhr = new XMLHttpRequest();
|
||||
@ -26,27 +26,27 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
|
||||
xhr.send(body);
|
||||
```
|
||||
|
||||
You've seen several of these methods before. Here the `open` method initializes the request as a `POST` to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of `4` means the operation is complete, and a `status` of `201` means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field.
|
||||
Você já viu vários desses métodos antes. Aqui, o método `open` inicializa a solicitação como um `POST` para um determinado URL de um recurso externo, usando o booleano `true` para torná-lo assíncrono. O método `setRequestHeader` define o valor de um cabeçalho de solicitação HTTP, que contém informações sobre o remetente e sobre a solicitação. Ele deve ser chamado após o método `open`, mas antes do método `send`. Os dois parâmetros são o nome do cabeçalho e o valor a ser definido como o corpo desse cabeçalho. Em seguida, o listener do evento `onreadystatechange` trata a mudança no estado da solicitação. Um `readyState` com o valor `4` significa que a operação foi concluída, enquanto o `status` `201` significa que a solicitação foi um sucesso. O HTML do documento pode ser atualizado. Por fim, o método `send` envia a solicitação com o valor de `body`, que era a chave `userName` fornecida pelo usuário no campo `input`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Update the code so it makes a `POST` request to the API endpoint. Then type your name in the input field and click `Send Message`. Your AJAX function should replace `Reply from Server will be here.` with data from the server. Format the response to display your name appended with the text `loves cats`.
|
||||
Atualize o código para fazer uma solicitação de `POST` para o endpoint da API. Em seguida, digite seu nome no campo de entrada e clique em `Send Message`. Sua função do AJAX deve substituir `Reply from Server will be here.` pelos dados do servidor. Formate a resposta para que ela exiba seu nome anexado ao texto `loves cats`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should create a new `XMLHttpRequest`.
|
||||
O código deve criar uma nova `XMLHttpRequest`.
|
||||
|
||||
```js
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should use the `open` method to initialize a `POST` request to the server.
|
||||
O código deve usar o método `open` para inicializar uma solicitação de `POST` para o servidor.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should use the `setRequestHeader` method.
|
||||
O código deve usar o método `setRequestHeader`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,13 +56,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should have an `onreadystatechange` event handler set to a function.
|
||||
O código deve ter um manipulador de evento `onreadystatechange` definido para uma função.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.onreadystatechange\s*?=/g));
|
||||
```
|
||||
|
||||
Your code should get the element with class `message` and change its `textContent` to `userName loves cats`
|
||||
O código deve obter o elemento com a classe `message` e mudar seu `textContent` para `userName loves cats`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -72,7 +72,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should use the `send` method.
|
||||
O código deve usar o método `send`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*?body\s*?\)/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be7
|
||||
title: Pre-filter JSON to Get the Data You Need
|
||||
title: Pré-filtrar o JSON para obter os dados de que você precisa
|
||||
challengeType: 6
|
||||
forumTopicId: 18257
|
||||
dashedName: pre-filter-json-to-get-the-data-you-need
|
||||
@ -8,11 +8,11 @@ dashedName: pre-filter-json-to-get-the-data-you-need
|
||||
|
||||
# --description--
|
||||
|
||||
If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it.
|
||||
Se você não quiser renderizar todas as fotos de gatos que você obtém na API de fotos de gatos do freeCodeCamp, você pode pré-filtrar o JSON antes de percorrer todo ele.
|
||||
|
||||
Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose `id` key has a value of `1`.
|
||||
Como os dados do JSON estão armazenados em um array, você pode usar o método `filter` para tirar da seleção os gatos que têm a chave `id` com o valor de `1`.
|
||||
|
||||
Here's the code to do this:
|
||||
Aqui está o código para fazer isso:
|
||||
|
||||
```js
|
||||
json = json.filter(function(val) {
|
||||
@ -22,11 +22,11 @@ json = json.filter(function(val) {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add code to `filter` the json data to remove the cat with the `id` value of `1`.
|
||||
Adicione código ao método `filter` para filtrar os dados do json e remover o gato que tem em seu `id` o valor `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `filter` method.
|
||||
Você deve usar o método `filter`.
|
||||
|
||||
```js
|
||||
assert(code.match(/json\.filter/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be6
|
||||
title: Render Images from Data Sources
|
||||
title: Renderizar imagens de fontes de dados
|
||||
challengeType: 6
|
||||
forumTopicId: 18265
|
||||
dashedName: render-images-from-data-sources
|
||||
@ -8,11 +8,11 @@ dashedName: render-images-from-data-sources
|
||||
|
||||
# --description--
|
||||
|
||||
The last few challenges showed that each object in the JSON array contains an `imageLink` key with a value that is the URL of a cat's image.
|
||||
Os últimos desafios mostraram que cada objeto no array do JSON continha uma chave `imageLink` com um valor, que é o URL de uma imagem de gato.
|
||||
|
||||
When you're looping through these objects, you can use this `imageLink` property to display this image in an `img` element.
|
||||
Ao percorrer esses objetos, você pode usar essa propriedade `imageLink` para exibir essa imagem em um elemento `img`.
|
||||
|
||||
Here's the code that does this:
|
||||
Aqui está o código para fazer isso:
|
||||
|
||||
```js
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||
@ -20,17 +20,17 @@ html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add code to use the `imageLink` and `altText` properties in an `img` tag.
|
||||
Adicione código para usar as propriedades `imageLink` e `altText` em uma tag `img`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `imageLink` property to display the images.
|
||||
Você deve usar a propriedade `imageLink` para exibir as imagens.
|
||||
|
||||
```js
|
||||
assert(code.match(/val\.imageLink/g));
|
||||
```
|
||||
|
||||
You should use the `altText` for the `alt` attribute values of the images.
|
||||
Você deve usar o `altText` nos valores do atributo `alt` das imagens.
|
||||
|
||||
```js
|
||||
assert(code.match(/val\.altText/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb8367417b2b2512c10
|
||||
title: Delete One Document Using model.findByIdAndRemove
|
||||
title: Exclua um documento usando model.findByIdAndRemove
|
||||
challengeType: 2
|
||||
forumTopicId: 301539
|
||||
dashedName: delete-one-document-using-model-findbyidandremove
|
||||
@ -8,15 +8,15 @@ dashedName: delete-one-document-using-model-findbyidandremove
|
||||
|
||||
# --description--
|
||||
|
||||
`findByIdAndRemove` and `findOneAndRemove` are like the previous update methods. They pass the removed document to the db. As usual, use the function argument `personId` as the search key.
|
||||
`findByIdAndRemove` e `findOneAndRemove` são como os métodos da atualização anterior. Eles passam o documento removido para a db. Como de costume, use o argumento da função `personId` como chave de pesquisa.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modify the `removeById` function to delete one person by the person's `_id`. You should use one of the methods `findByIdAndRemove()` or `findOneAndRemove()`.
|
||||
Modifique a função `removeById` para excluir uma pessoa pelo `_id` da pessoa. Você deve usar um dos métodos `findByIdAndRemove()` ou `findOneAndRemove()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Deleting an item should succeed
|
||||
A exclusão de um item deve ser bem-sucedida
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824c367417b2b2512c4d
|
||||
title: Compare the Properties of Two Elements
|
||||
title: Comparar as propriedades de dois elementos
|
||||
challengeType: 2
|
||||
forumTopicId: 301588
|
||||
dashedName: compare-the-properties-of-two-elements
|
||||
@ -8,15 +8,15 @@ dashedName: compare-the-properties-of-two-elements
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Como observação, este projeto está sendo construído a partir do seguinte projeto no [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), ou clonado do [Github](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#8` in the `Comparisons` suite, change each `assert` to either `assert.isAbove` or `assert.isAtMost` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
|
||||
Em `tests/1_unit-tests.js`, no teste classificado como `#8` e na suíte `Comparisons`, modifique cada `assert` para `assert.isAbove` ou para `assert.isAtMost`, de maneira que cada teste passe (seja avaliado como `true`). Não altere os argumentos passados às afirmações.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Todos os testes devem passar.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -30,7 +30,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the first assertion - `isAbove` vs. `isAtMost`.
|
||||
Você deve escolher o método correto para a primeira assertiva - `isAbove` ou `isAtMost`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -48,7 +48,7 @@ You should choose the correct method for the first assertion - `isAbove` vs. `is
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the second assertion - `isAbove` vs. `isAtMost`.
|
||||
Você deve escolher o método correto para a segunda assertiva - `isAbove` ou `isAtMost`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -62,7 +62,7 @@ You should choose the correct method for the second assertion - `isAbove` vs. `i
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the third assertion - `isAbove` vs. `isAtMost`.
|
||||
Você deve escolher o método correto para a terceira assertiva - `isAbove` ou `isAtMost`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -80,7 +80,7 @@ You should choose the correct method for the third assertion - `isAbove` vs. `is
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the fourth assertion - `isAbove` vs. `isAtMost`.
|
||||
Você deve escolher o método correto para a quarta assertiva - `isAbove` ou `isAtMost`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a23c84252665b21eecc7eb0
|
||||
title: I before E except after C
|
||||
title: I antes de E, exceto depois de C
|
||||
challengeType: 5
|
||||
forumTopicId: 302288
|
||||
dashedName: i-before-e-except-after-c
|
||||
@ -8,70 +8,70 @@ dashedName: i-before-e-except-after-c
|
||||
|
||||
# --description--
|
||||
|
||||
The phrase ["I before E, except after C"](https://en.wikipedia.org/wiki/I before E except after C) is a widely known mnemonic which is supposed to help when spelling English words.
|
||||
A frase [ "I antes de E, exceto depois de C" ](https://en.wikipedia.org/wiki/I before E except after C) é um mnemônico amplamente conhecido que deve ajudar ao soletrar palavras em inglês.
|
||||
|
||||
Using the words provided, check if the two sub-clauses of the phrase are plausible individually:
|
||||
Usando as palavras fornecidas, verifique se as duas subcláusulas da frase são plausíveis individualmente:
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<i>"I before E when not preceded by C".</i>
|
||||
<i>"I antes de E quando não for precedido por C".</i>
|
||||
</li>
|
||||
<li>
|
||||
<i>"E before I when preceded by C".</i>
|
||||
<i>"E antes de I quando for precedido por C".</i>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
If both sub-phrases are plausible then the original phrase can be said to be plausible.
|
||||
Se ambas as subfrases forem plausíveis, então a frase original pode ser considerada plausível.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write a function that accepts a word and check if the word follows this rule. The function should return true if the word follows the rule and false if it does not.
|
||||
Escreva uma função que aceite uma palavra e verifique se a palavra segue esta regra. A função deve retornar verdadeiro se a palavra seguir a regra e falso se não seguir.
|
||||
|
||||
# --hints--
|
||||
|
||||
`IBeforeExceptC` should be a function.
|
||||
`IBeforeExceptC` deve ser uma função.
|
||||
|
||||
```js
|
||||
assert(typeof IBeforeExceptC == 'function');
|
||||
```
|
||||
|
||||
`IBeforeExceptC("receive")` should return a boolean.
|
||||
`IBeforeExceptC("receive")` deve retornar um booleano.
|
||||
|
||||
```js
|
||||
assert(typeof IBeforeExceptC('receive') == 'boolean');
|
||||
```
|
||||
|
||||
`IBeforeExceptC("receive")` should return `true`.
|
||||
`IBeforeExceptC("receive")` deve retornar `true`.
|
||||
|
||||
```js
|
||||
assert.equal(IBeforeExceptC('receive'), true);
|
||||
```
|
||||
|
||||
`IBeforeExceptC("science")` should return `false`.
|
||||
`IBeforeExceptC("science")` deve retornar `false`.
|
||||
|
||||
```js
|
||||
assert.equal(IBeforeExceptC('science'), false);
|
||||
```
|
||||
|
||||
`IBeforeExceptC("imperceivable")` should return `true`.
|
||||
`IBeforeExceptC("imperceivable")` deve retornar `true`.
|
||||
|
||||
```js
|
||||
assert.equal(IBeforeExceptC('imperceivable'), true);
|
||||
```
|
||||
|
||||
`IBeforeExceptC("inconceivable")` should return `true`.
|
||||
`IBeforeExceptC("inconcebível")` deve retornar `verdadeiro`.
|
||||
|
||||
```js
|
||||
assert.equal(IBeforeExceptC('inconceivable'), true);
|
||||
```
|
||||
|
||||
`IBeforeExceptC("insufficient")` should return `false`.
|
||||
`IBeforeExceptC("insuficiente")` deve retornar `falso`.
|
||||
|
||||
```js
|
||||
assert.equal(IBeforeExceptC('insufficient'), false);
|
||||
```
|
||||
|
||||
`IBeforeExceptC("omniscient")` should return `false`.
|
||||
`IBeforeExceptC("onisciente")` deve retornar `falso`.
|
||||
|
||||
```js
|
||||
assert.equal(IBeforeExceptC('omniscient'), false);
|
||||
|
||||
@ -12,7 +12,7 @@ dashedName: build-a-freecodecamp-forum-homepage
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**História de usuário:** Posso ver uma lista dos posts mais recentes do fórum freeCodeCamp.
|
||||
**Especificação de usuário:** posso ver uma lista dos posts mais recentes do fórum freeCodeCamp.
|
||||
|
||||
**Especificação de usuário:** para cada tópico, posso ver o título e uma lista de links para usuários que recentemente postaram nele.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user