chore(i18n,curriculum): update translations (#42742)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5ea9997bbec2e9bc47e94daf
|
||||
title: Understanding Sockets and Creating a TCP Server
|
||||
title: 瞭解套接字並創建 TCP 服務器
|
||||
challengeType: 11
|
||||
videoId: F1QI9tNuDQg
|
||||
dashedName: understanding-sockets-and-creating-a-tcp-server
|
||||
@ -10,7 +10,7 @@ dashedName: understanding-sockets-and-creating-a-tcp-server
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following functions creates a socket object?
|
||||
以下哪個函數創建套接字對象？
|
||||
|
||||
## --answers--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5ea9997bbec2e9bc47e94daf
|
||||
title: Understanding Sockets and Creating a TCP Server
|
||||
title: 了解套接字并创建 TCP 服务器
|
||||
challengeType: 11
|
||||
videoId: F1QI9tNuDQg
|
||||
dashedName: understanding-sockets-and-creating-a-tcp-server
|
||||
@ -10,7 +10,7 @@ dashedName: understanding-sockets-and-creating-a-tcp-server
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following functions creates a socket object?
|
||||
以下哪个函数创建套接字对象？
|
||||
|
||||
## --answers--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403618b
|
||||
title: Give Sibling Elements a Unique Key Attribute
|
||||
title: Proporciona a los elementos hermanos un atributo de clave única
|
||||
challengeType: 6
|
||||
forumTopicId: 301394
|
||||
dashedName: give-sibling-elements-a-unique-key-attribute
|
||||
@ -8,19 +8,19 @@ dashedName: give-sibling-elements-a-unique-key-attribute
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge showed how the `map` method is used to dynamically render a number of elements based on user input. However, there was an important piece missing from that example. When you create an array of elements, each one needs a `key` attribute set to a unique value. React uses these keys to keep track of which items are added, changed, or removed. This helps make the re-rendering process more efficient when the list is modified in any way.
|
||||
El último desafío mostró cómo el método `map` es usado para representar dinámicamente un número de elementos según la entrada del usuario. Sin embargo, faltaba una pieza importante de ese ejemplo. Cuando creas un arreglo de elementos, cada uno necesita un atributo `key` establecido en un valor único. React usa estas claves para realizar un seguimiento de los elementos que se agregan, cambian o eliminan. Esto ayuda a que el proceso de re-renderización sea más eficiente cuando la lista se modifica de alguna manera.
|
||||
|
||||
**Note:** Keys only need to be unique between sibling elements, they don't need to be globally unique in your application.
|
||||
**Nota:** Las claves solo necesitan ser únicas entre elementos hermanos, no es necesario que sean únicas globalmente en tu aplicación.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has an array with some front end frameworks and a stateless functional component named `Frameworks()`. `Frameworks()` needs to map the array to an unordered list, much like in the last challenge. Finish writing the `map` callback to return an `li` element for each framework in the `frontEndFrameworks` array. This time, make sure to give each `li` a `key` attribute, set to a unique value. The `li` elements should also contain text from `frontEndFrameworks`.
|
||||
El editor de código tiene un arreglo con algunos frameworks frontend y un componente funcional sin estado llamado `Frameworks()`. `Frameworks()` necesita mapear el arreglo a una lista desordenada, como en el último desafío. Finaliza la escritura del callback `map` para devolver un elemento `li` por cada framework en el arreglo `frontEndFrameworks`. Esta vez, debes asegurarte de dar a cada elemento `li` un atributo `key`, establecido a un valor único. Los elementos `li` también deben contener texto de `frontEndFrameworks`.
|
||||
|
||||
Normally, you want to make the key something that uniquely identifies the element being rendered. As a last resort the array index may be used, but typically you should try to use a unique identification.
|
||||
Normalmente, deseas hacer que la clave sea algo que identifique de manera única el elemento que se está procesando. Como último recurso se puede utilizar el índice del arreglo, pero normalmente se debe intentar usar una identificación única.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `Frameworks` component should exist and render to the page.
|
||||
El componente `Frameworks` debe de existir y renderizar a la página.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -28,19 +28,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`Frameworks` should render an `h1` element.
|
||||
`Frameworks` debe renderizar un elemento `h1`.
|
||||
|
||||
```js
|
||||
assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1);
|
||||
```
|
||||
|
||||
`Frameworks` should render a `ul` element.
|
||||
`Frameworks` debe renderizar un elemento `ul`.
|
||||
|
||||
```js
|
||||
assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1);
|
||||
```
|
||||
|
||||
The `ul` tag should render 6 child `li` elements.
|
||||
La etiqueta `ul` debe renderizar 6 elementos hijos `li`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -54,7 +54,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Each list item element should have a unique `key` attribute.
|
||||
Cada elemento de la lista de elementos debe tener un atributo `key` único.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -73,7 +73,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Each list item element should contain text from `frontEndFrameworks`.
|
||||
Cada elemento de la lista de elementos debe contener un texto de `frontEndFrameworks`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036181
|
||||
title: Introducing Inline Styles
|
||||
title: Introducción a los estilos en línea
|
||||
challengeType: 6
|
||||
forumTopicId: 301395
|
||||
dashedName: introducing-inline-styles
|
||||
@ -8,29 +8,33 @@ dashedName: introducing-inline-styles
|
||||
|
||||
# --description--
|
||||
|
||||
There are other complex concepts that add powerful capabilities to your React code. But you may be wondering about the more simple problem of how to style those JSX elements you create in React. You likely know that it won't be exactly the same as working with HTML because of [the way you apply classes to JSX elements](/learn/front-end-libraries/react/define-an-html-class-in-jsx).
|
||||
Hay otros conceptos complejos que añaden poderosas capacidades a tu código de React. Pero tal vez te estés preguntando sobre el problema más sencillo de cómo dar estilo a esos elementos JSX que creas en React. Probablemente sepas que no será exactamente lo mismo que trabajar con HTML debido a [la manera en que aplicas clases a los elementos JSX](/learn/front-end-libraries/react/define-an-html-class-in-jsx).
|
||||
|
||||
If you import styles from a stylesheet, it isn't much different at all. You apply a class to your JSX element using the `className` attribute, and apply styles to the class in your stylesheet. Another option is to apply inline styles, which are very common in ReactJS development.
|
||||
Si importas estilos desde una hoja de estilos, esto no es muy diferente. Aplica una clase a tu elemento JSX usando el atributo `className`, y aplica estilos a la clase en tu hoja de estilos. Otra opción es aplicar estilos en línea, los cuales son muy comunes en el desarrollo de ReactJS.
|
||||
|
||||
You apply inline styles to JSX elements similar to how you do it in HTML, but with a few JSX differences. Here's an example of an inline style in HTML:
|
||||
Los estilos en línea se aplican a los elementos JSX de forma similar a como se hace en HTML, pero con algunas diferencias en JSX. Aquí hay un ejemplo de un estilo en línea en HTML:
|
||||
|
||||
`<div style="color: yellow; font-size: 16px">Mellow Yellow</div>`
|
||||
```jsx
|
||||
<div style="color: yellow; font-size: 16px">Mellow Yellow</div>
|
||||
```
|
||||
|
||||
JSX elements use the `style` attribute, but because of the way JSX is transpiled, you can't set the value to a `string`. Instead, you set it equal to a JavaScript `object`. Here's an example:
|
||||
Los elementos JSX usan el atributo `style`, pero debido a la forma en que JSX es transpilado, no puede establecer el valor a un `string`. Es su lugar, lo establece igual a un `object` de JavaScript. Aquí un ejemplo:
|
||||
|
||||
`<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>`
|
||||
```jsx
|
||||
<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
|
||||
```
|
||||
|
||||
Notice how we camelCase the "fontSize" property? This is because React will not accept kebab-case keys in the style object. React will apply the correct property name for us in the HTML.
|
||||
¿Notas cómo ponemos en camelCase la propiedad `fontSize`? Esto es porque React no aceptará claves kebab-case en el objeto de estilo. React aplicará el nombre correcto de la propiedad por nosotros en el HTML.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `style` attribute to the `div` in the code editor to give the text a color of red and font size of 72px.
|
||||
Agrega un atributo `style` al `div` en el editor de código para darle al texto un color rojo y un tamaño de fuente de `72px`.
|
||||
|
||||
Note that you can optionally set the font size to be a number, omitting the units "px", or write it as "72px".
|
||||
Ten en cuenta que puedes establecer opcionalmente el tamaño de la fuente para que sea un número, omitiendo las unidades `px`, o escribirlo como `72px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The component should render a `div` element.
|
||||
El componente debe renderizar un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -41,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `div` element should have a color of `red`.
|
||||
El elemento `div` debe tener un color de `red`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -52,7 +56,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `div` element should have a font size of `72px`.
|
||||
El elemento `div` debe tener un tamaño de fuente de `72px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036161
|
||||
title: Learn About Self-Closing JSX Tags
|
||||
title: Aprende sobre las etiquetas JSX auto-cerradas
|
||||
challengeType: 6
|
||||
forumTopicId: 301396
|
||||
dashedName: learn-about-self-closing-jsx-tags
|
||||
@ -8,35 +8,35 @@ dashedName: learn-about-self-closing-jsx-tags
|
||||
|
||||
# --description--
|
||||
|
||||
So far, you’ve seen how JSX differs from HTML in a key way with the use of `className` vs. `class` for defining HTML classes.
|
||||
Hasta ahora, has visto cómo JSX difiere de HTML de una manera clave con el uso de `className` vs. `class` para definir clases HTML.
|
||||
|
||||
Another important way in which JSX differs from HTML is in the idea of the self-closing tag.
|
||||
Otra forma importante en la que JSX difiere de HTML está en la idea de la etiqueta de auto-cierre.
|
||||
|
||||
In HTML, almost all tags have both an opening and closing tag: `<div></div>`; the closing tag always has a forward slash before the tag name that you are closing. However, there are special instances in HTML called “self-closing tags”, or tags that don’t require both an opening and closing tag before another tag can start.
|
||||
En HTML, casi todas las etiquetas tienen una etiqueta de apertura y cierre: `<div></div>`; la etiqueta de cierre siempre tiene una barra inclinada antes del nombre de la etiqueta que está cerrando. Sin embargo, hay instancias especiales en HTML llamadas “etiquetas auto-cerradas”, o etiquetas que no requieren una etiqueta de apertura y cierre antes de que otra etiqueta pueda comenzar.
|
||||
|
||||
For example the line-break tag can be written as `<br>` or as `<br />`, but should never be written as `<br></br>`, since it doesn't contain any content.
|
||||
Por ejemplo, la etiqueta salto de línea puede escribirse como `<br>` o como `<br />`, pero nunca debería escribirse como `<br></br>`, ya que no contiene ningún contenido.
|
||||
|
||||
In JSX, the rules are a little different. Any JSX element can be written with a self-closing tag, and every element must be closed. The line-break tag, for example, must always be written as `<br />` in order to be valid JSX that can be transpiled. A `<div>`, on the other hand, can be written as `<div />` or `<div></div>`. The difference is that in the first syntax version there is no way to include anything in the `<div />`. You will see in later challenges that this syntax is useful when rendering React components.
|
||||
En JSX, las reglas son un poco diferentes. Cualquier elemento JSX se puede escribir con una etiqueta de auto-cierre, y cada elemento debe ser cerrado. La etiqueta de salto de línea, por ejemplo, siempre debe escribirse como `<br />` para ser un JSX válido que puede ser transpilado. Por otra parte, un `<div>` puede escribirse como `<div />` o `<div></div>`. La diferencia es que en la primera versión de sintaxis no hay forma de incluir nada en la `<div />`. Verás en desafíos posteriores que esta sintaxis es útil al renderizar componentes de React.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Fix the errors in the code editor so that it is valid JSX and successfully transpiles. Make sure you don't change any of the content - you only need to close tags where they are needed.
|
||||
Corrige los errores en el editor de código para que sea JSX válido y se transpile exitosamente. Asegúrate de no cambiar nada del contenido: sólo tienes que cerrar las etiquetas donde se necesite.
|
||||
|
||||
# --hints--
|
||||
|
||||
The constant `JSX` should return a `div` element.
|
||||
La constante `JSX` debe devolver un elemento `div`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(JSX.type, 'div');
|
||||
```
|
||||
|
||||
The `div` should contain a `br` tag.
|
||||
El `div` debe contener una etiqueta `br`.
|
||||
|
||||
```js
|
||||
assert(Enzyme.shallow(JSX).find('br').length === 1);
|
||||
```
|
||||
|
||||
The `div` should contain an `hr` tag.
|
||||
El `div` debe contener una etiqueta `hr`.
|
||||
|
||||
```js
|
||||
assert(Enzyme.shallow(JSX).find('hr').length === 1);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036180
|
||||
title: Optimize Re-Renders with shouldComponentUpdate
|
||||
title: Optimiza re-renderizadores con shouldComponentUpdate
|
||||
challengeType: 6
|
||||
forumTopicId: 301398
|
||||
dashedName: optimize-re-renders-with-shouldcomponentupdate
|
||||
@ -8,17 +8,17 @@ dashedName: optimize-re-renders-with-shouldcomponentupdate
|
||||
|
||||
# --description--
|
||||
|
||||
So far, if any component receives new `state` or new `props`, it re-renders itself and all its children. This is usually okay. But React provides a lifecycle method you can call when child components receive new `state` or `props`, and declare specifically if the components should update or not. The method is `shouldComponentUpdate()`, and it takes `nextProps` and `nextState` as parameters.
|
||||
Hasta ahora, si cualquier componente recibe un nuevo `state` o un nuevo `props`, se vuelve a renderizar a sí mismo y a todos sus hijos. Normalmente, esto está bien. Pero React proporciona un método de ciclo de vida al que puedes llamar cuando los componentes hijos reciben nuevos `state` o `props`, y declarar específicamente si los componentes deben actualizarse o no. El método es `shouldComponentUpdate()`y toma `nextProps` y `nextState` como parámetros.
|
||||
|
||||
This method is a useful way to optimize performance. For example, the default behavior is that your component re-renders when it receives new `props`, even if the `props` haven't changed. You can use `shouldComponentUpdate()` to prevent this by comparing the `props`. The method must return a `boolean` value that tells React whether or not to update the component. You can compare the current props (`this.props`) to the next props (`nextProps`) to determine if you need to update or not, and return `true` or `false` accordingly.
|
||||
Este método es una forma útil de optimizar el rendimiento. Por ejemplo, el comportamiento predeterminado es que el componente re-renderiza cuando recibe nuevos `props`, incluso si los `props` no han cambiado. Puedes usar `shouldComponentUpdate()` para evitar esto comparando los `props`. El método debe devolver un valor `boolean` que le diga a React si actualizar o no el componente. Puedes comparar los "props" actuales (`this.props`) a los siguientes "props" (`nextProps`) para determinar si necesita actualizar o no, y devuelve `true` o `false` en consecuencia.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `shouldComponentUpdate()` method is added in a component called `OnlyEvens`. Currently, this method returns `true` so `OnlyEvens` re-renders every time it receives new `props`. Modify the method so `OnlyEvens` updates only if the `value` of its new props is even. Click the `Add` button and watch the order of events in your browser's console as the lifecycle hooks are triggered.
|
||||
El método `shouldComponentUpdate()` se añade en un componente llamado `OnlyEvens`. Actualmente, este método devuelve `true`, así que `OnlyEvens` re-renderizar cada vez que recibe nuevos `props`. Modifica el método para que `OnlyEvens` se actualice sólo si el `value` de sus nuevos accesorios es par. Haz clic en el botón `Add` y observa el orden de los eventos en la consola de tu navegador mientras se activan los "hooks" del ciclo de vida.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `Controller` component should render the `OnlyEvens` component as a child.
|
||||
El componente `Controller` debe renderizar el componente `OnlyEvens` como un componente hijo.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -32,7 +32,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `shouldComponentUpdate` method should be defined on the `OnlyEvens` component.
|
||||
El método `shouldComponentUpdate` debe definirse en el componente `OnlyEvens`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `OnlyEvens` component should return an `h1` tag which renders the value of `this.props.value`.
|
||||
El componente `OnlyEvens` debe devolver una etiqueta `h1` que renderiza el valor de `this.props.value`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@ -64,7 +64,7 @@ The `OnlyEvens` component should return an `h1` tag which renders the value of `
|
||||
})();
|
||||
```
|
||||
|
||||
`OnlyEvens` should re-render only when `nextProps.value` is even.
|
||||
`OnlyEvens` debe re-renderizar sólo cuando `nextProps.value` sea par.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403616c
|
||||
title: Override Default Props
|
||||
title: Reemplaza las "props" predeterminadas
|
||||
challengeType: 6
|
||||
forumTopicId: 301399
|
||||
dashedName: override-default-props
|
||||
@ -8,17 +8,17 @@ dashedName: override-default-props
|
||||
|
||||
# --description--
|
||||
|
||||
The ability to set default props is a useful feature in React. The way to override the default props is to explicitly set the prop values for a component.
|
||||
La capacidad de establecer valores por defecto para las props es una característica útil en React. La manera de reemplazar las props predeterminadas es establecer explícitamente los valores de las props para un componente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `ShoppingCart` component now renders a child component `Items`. This `Items` component has a default prop `quantity` set to the integer `0`. Override the default prop by passing in a value of `10` for `quantity`.
|
||||
El componente `ShoppingCart` ahora renderiza un componente hijo `Items`. Este componente `Items` tiene una prop predeterminada `quantity` establecida al entero `0`. Reemplaza la prop predeterminada pasando un valor de `10` para `quantity`.
|
||||
|
||||
**Note:** Remember that the syntax to add a prop to a component looks similar to how you add HTML attributes. However, since the value for `quantity` is an integer, it won't go in quotes but it should be wrapped in curly braces. For example, `{100}`. This syntax tells JSX to interpret the value within the braces directly as JavaScript.
|
||||
**Nota:** Recuerda que la sintaxis para agregar una prop a un componente se parece a la sintaxis para agregar atributos en un elemento HTML. Sin embargo, dado que el valor de `quantity` es un entero, no irá entre comillas pero debe estar envuelto entre llaves. Por ejemplo, `{100}`. Esta sintaxis le dice a JSX que interprete el valor dentro de las llaves directamente como JavaScript.
|
||||
|
||||
# --hints--
|
||||
|
||||
The component `ShoppingCart` should render.
|
||||
El componente `ShoppingCart` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The component `Items` should render.
|
||||
El componente `Items` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Items` component should have a prop of `{ quantity: 10 }` passed from the `ShoppingCart` component.
|
||||
El componente `Items` debe tener una prop de `{ quantity: 10 }` heredada desde el componente `ShoppingCart`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403617b
|
||||
title: Pass a Callback as Props
|
||||
title: Pasa un callback como "props"
|
||||
challengeType: 6
|
||||
forumTopicId: 301400
|
||||
dashedName: pass-a-callback-as-props
|
||||
@ -8,17 +8,17 @@ dashedName: pass-a-callback-as-props
|
||||
|
||||
# --description--
|
||||
|
||||
You can pass `state` as props to child components, but you're not limited to passing data. You can also pass handler functions or any method that's defined on a React component to a child component. This is how you allow child components to interact with their parent components. You pass methods to a child just like a regular prop. It's assigned a name and you have access to that method name under `this.props` in the child component.
|
||||
Puedes pasar `state` como "props" a los componentes hijos, pero no estás limitado a pasar datos. También puedes pasar funciones manejadoras o cualquier método que se defina en un componente React a un componente hijo. Así es como tú permites que los componentes hijos interactúen con sus componentes padres. Pasas métodos a un hijo igual que un "prop" normal. Se le asigna un nombre y tienes acceso a ese nombre de método en `this.props` en el componente hijo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There are three components outlined in the code editor. The `MyApp` component is the parent that will render the `GetInput` and `RenderInput` child components. Add the `GetInput` component to the render method in `MyApp`, then pass it a prop called `input` assigned to `inputValue` from `MyApp`'s `state`. Also create a prop called `handleChange` and pass the input handler `handleChange` to it.
|
||||
Hay tres componentes descritos en el editor de código. El componente `MyApp` es el padre que renderizará los componentes hijos `GetInput` y `RenderInput`. Añade el componente `GetInput` al método de renderizar en `MyApp`, luego pásale un "prop" llamado `input` asignado a `inputValue` desde el estado `state` de `MyApp`. También crea un "prop" llamado `handleChange` y pasa el controlador de entrada `handleChange` a este.
|
||||
|
||||
Next, add `RenderInput` to the render method in `MyApp`, then create a prop called `input` and pass the `inputValue` from `state` to it. Once you are finished you will be able to type in the `input` field in the `GetInput` component, which then calls the handler method in its parent via props. This updates the input in the `state` of the parent, which is passed as props to both children. Observe how the data flows between the components and how the single source of truth remains the `state` of the parent component. Admittedly, this example is a bit contrived, but should serve to illustrate how data and callbacks can be passed between React components.
|
||||
A continuación, añade `RenderInput` al método de renderizar en `MyApp`, luego crea un "prop" llamado `input` y pasa él `inputValue` desde el estado `state` a este. Una vez que hayas terminado podrás escribir en el campo `input` en el componente `GetInput`, que luego llama al método manejador en su padre a través de "props". Esto actualiza la entrada en el `state` del padre, que se pasa como "props" a ambos hijos. Observa cómo fluyen los datos entre los componentes y cómo la única fuente de verdad sigue siendo el `state` del componente padre. Es cierto que este ejemplo es un poco inventado, pero debe servir para ilustrar cómo los datos y los callbacks pueden ser pasados entre componentes React.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `MyApp` component should render.
|
||||
El componente `MyApp` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `GetInput` component should render.
|
||||
El componente `GetInput` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `RenderInput` component should render.
|
||||
El componente `RenderInput` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `GetInput` component should receive the `MyApp` state property `inputValue` as props and contain an `input` element which modifies `MyApp` state.
|
||||
El componente `GetInput` debe recibir la propiedad de estado `MyApp` `inputValue` como "props" y contener un elemento `input` que modifica el estado de `MyApp`.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -74,7 +74,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
The `RenderInput` component should receive the `MyApp` state property `inputValue` as props.
|
||||
El componente `RenderInput` debe recibir la propiedad de estado `MyApp` `inputValue` como "props".
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036169
|
||||
title: Pass Props to a Stateless Functional Component
|
||||
title: Pasa props a un componente funcional sin estado
|
||||
challengeType: 6
|
||||
forumTopicId: 301402
|
||||
dashedName: pass-props-to-a-stateless-functional-component
|
||||
@ -8,7 +8,7 @@ dashedName: pass-props-to-a-stateless-functional-component
|
||||
|
||||
# --description--
|
||||
|
||||
The previous challenges covered a lot about creating and composing JSX elements, functional components, and ES6 style class components in React. With this foundation, it's time to look at another feature very common in React: **props**. In React, you can pass props, or properties, to child components. Say you have an `App` component which renders a child component called `Welcome` which is a stateless functional component. You can pass `Welcome` a `user` property by writing:
|
||||
Los desafíos anteriores cubrieron varios casos de creación y composición de elementos de JSX, componentes funcionales y componentes de clase estilo ES6 en React. Con estos cimientos, ha llegado la hora de observar otro patrón de uso muy común en React: **props**. En React, se pueden pasar props, o propiedades a componentes hijos. Digamos, que tienes un componente `App` que devuelve un componente hijo llamado `Welcome`, el cual es un componente funcional sin estado. Puedes pasarle una propiedad llamada `user` a `Welcome` escribiendo:
|
||||
|
||||
```jsx
|
||||
<App>
|
||||
@ -16,21 +16,21 @@ The previous challenges covered a lot about creating and composing JSX elements,
|
||||
</App>
|
||||
```
|
||||
|
||||
You use **custom HTML attributes** created by you and supported by React to be passed to the component. In this case, the created property `user` is passed to the component `Welcome`. Since `Welcome` is a stateless functional component, it has access to this value like so:
|
||||
Puedes utilizar **atributos personalizados de HTML** creados por ti y soportados por React para ser pasados por props a tu componente. En este caso, la propiedad creada `user` es pasada como atributo al componente `Welcome`. Dado que `Welcome` es un componente funcional sin estado, tiene acceso a este valor de la siguiente manera:
|
||||
|
||||
```jsx
|
||||
const Welcome = (props) => <h1>Hello, {props.user}!</h1>
|
||||
```
|
||||
|
||||
It is standard to call this value `props` and when dealing with stateless functional components, you basically consider it as an argument to a function which returns JSX. You can access the value of the argument in the function body. With class components, you will see this is a little different.
|
||||
Este valor es llamado `props` por convención y, cuando se trata de componentes funcionales sin estado, se lo considera como un argumento pasado a una función que retorna JSX. Puedes acceder el valor del argumento en el cuerpo de la función. En los componentes de clase, verás que esto es un poco diferente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There are `Calendar` and `CurrentDate` components in the code editor. When rendering `CurrentDate` from the `Calendar` component, pass in a property of `date` assigned to the current date from JavaScript's `Date` object. Then access this `prop` in the `CurrentDate` component, showing its value within the `p` tags. Note that for `prop` values to be evaluated as JavaScript, they must be enclosed in curly brackets, for instance `date={Date()}`.
|
||||
Hay componentes `Calendar` y `CurrentDate` en el editor de código. Al prensentar `CurrentDate` desde el componente `Calendar`, pasa una propiedad de `date` asignada a la fecha actual desde el objeto `Date` de JavaScript. Luego, accede a este `prop` dentro del componente `CurrentDate`, mostrando su valor dentro de las etiquetas `p`. Tenga en cuenta que los valores `prop` se evalúen como JavaScript, deben estar encerrados dentro de corchetes, por ejemplo `date={Date()}`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `Calendar` component should return a single `div` element.
|
||||
El componente `Calendar` debe retornar un único elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -41,7 +41,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second child of the `Calendar` component should be the `CurrentDate` component.
|
||||
El segundo componente hijo del componente `Calendar` debe ser el componente `CurrentDate`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -52,7 +52,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `CurrentDate` component should have a prop called `date`.
|
||||
El componente `CurrentDate` debe tener una propiedad llamada `date`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -63,7 +63,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `date` prop of the `CurrentDate` should contain a string of text.
|
||||
La propiedad `date` del componente `CurrentDate` debe contener una cadena de texto.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -75,13 +75,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `date` prop should be generated by calling `Date()`
|
||||
La propiedad `date` debe ser generada invocando el método `Date()`
|
||||
|
||||
```js
|
||||
assert(/<CurrentDatedate={Date\(\)}\/>/.test(__helpers.removeWhiteSpace(code)));
|
||||
```
|
||||
|
||||
The `CurrentDate` component should render the value from the `date` prop in the `p` tag.
|
||||
El componente `CurrentDate` debe mostrar el valor del prop `date` dentro de la etiqueta `p`.
|
||||
|
||||
```js
|
||||
let date = 'dummy date';
|
||||
|
||||
@ -35,7 +35,7 @@ Ogni sfida ha dei test che puoi eseguire in qualsiasi momento cliccando sul puls
|
||||
|
||||
# --instructions--
|
||||
|
||||
Per superare il test di questa sfida, modifica il testo dell'elemento `h1` per dire `Hello World`.
|
||||
Per superare il test di questa sfida, modifica il testo dell'elemento `h1` in modo che dica `Hello World`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ Cambia la funzione callback per l'attributo `y` per raddrizzare le barre. Ricord
|
||||
|
||||
# --hints--
|
||||
|
||||
Il primo `rect` dovrebbe avere `y` di `64`.
|
||||
Il primo `rect` dovrebbe avere un valore `y` di `64`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('y') == h - dataset[0] * 3);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bc9
|
||||
title: Update the Height of an Element Dynamically
|
||||
title: Aggiornare dinamicamente l'altezza di un elemento
|
||||
challengeType: 6
|
||||
forumTopicId: 301493
|
||||
dashedName: update-the-height-of-an-element-dynamically
|
||||
@ -8,13 +8,13 @@ dashedName: update-the-height-of-an-element-dynamically
|
||||
|
||||
# --description--
|
||||
|
||||
The previous challenges covered how to display data from an array and how to add CSS classes. You can combine these lessons to create a simple bar chart. There are two steps to this:
|
||||
Le sfide precedenti hanno spiegato come visualizzare i dati presi da un array e come aggiungere classi CSS. Puoi combinare queste lezioni per creare un semplice grafico a barre. Puoi farlo in due passaggi:
|
||||
|
||||
1) Create a `div` for each data point in the array
|
||||
1) Creare un `div` per ogni data point nell'array
|
||||
|
||||
2) Give each `div` a dynamic height, using a callback function in the `style()` method that sets height equal to the data value
|
||||
2) Dare ad ogni `div` un'altezza dinamica, usanto una funzione callback nel metodo `style()` che imposta un'altezza pari al valore del dato
|
||||
|
||||
Recall the format to set a style using a callback function:
|
||||
Ricordati il formato per impostare uno stile usando una funzione callback:
|
||||
|
||||
```js
|
||||
selection.style("cssProperty", (d) => d)
|
||||
@ -22,59 +22,59 @@ selection.style("cssProperty", (d) => d)
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the `style()` method to the code in the editor to set the `height` property for each element. Use a callback function to return the value of the data point with the string `px` added to it.
|
||||
Aggiungi il metodo `style()` al codice nell'editor per impostare la proprietà `height` per ogni elemento. Usa una funzione callback per restituire il valore del data point con la stringa `px` aggiunta ad esso.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `div` should have a `height` of `12` pixels.
|
||||
Il primo `div` dovrebbe avere un'`height` di `12` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(0)[0].style.height === '12px');
|
||||
```
|
||||
|
||||
The second `div` should have a `height` of `31` pixels.
|
||||
Il secondo `div` dovrebbe avere un'`height` di `31` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(1)[0].style.height === '31px');
|
||||
```
|
||||
|
||||
The third `div` should have a `height` of `22` pixels.
|
||||
Il terzo `div` dovrebbe avere un'`height` di `22` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(2)[0].style.height === '22px');
|
||||
```
|
||||
|
||||
The fourth `div` should have a `height` of `17` pixels.
|
||||
Il quarto `div` dovrebbe avere un'`height` di `17` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(3)[0].style.height === '17px');
|
||||
```
|
||||
|
||||
The fifth `div` should have a `height` of `25` pixels.
|
||||
Il quinto `div` dovrebbe avere un'`height` di `25` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(4)[0].style.height === '25px');
|
||||
```
|
||||
|
||||
The sixth `div` should have a `height` of `18` pixels.
|
||||
Il sesto `div` dovrebbe avere un'`height` di `18` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(5)[0].style.height === '18px');
|
||||
```
|
||||
|
||||
The seventh `div` should have a `height` of `29` pixels.
|
||||
Il settimo `div` dovrebbe avere un'`height` di `29` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(6)[0].style.height === '29px');
|
||||
```
|
||||
|
||||
The eighth `div` should have a `height` of `14` pixels.
|
||||
L'ottavo `div` dovrebbe avere un'`height` di `14` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(7)[0].style.height === '14px');
|
||||
```
|
||||
|
||||
The ninth `div` should have a `height` of `9` pixels.
|
||||
Il nono `div` dovrebbe avere un'`height` di `9` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(8)[0].style.height === '9px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdd
|
||||
title: Use Dynamic Scales
|
||||
title: Usare scale dinamiche
|
||||
challengeType: 6
|
||||
forumTopicId: 301495
|
||||
dashedName: use-dynamic-scales
|
||||
@ -8,13 +8,13 @@ dashedName: use-dynamic-scales
|
||||
|
||||
# --description--
|
||||
|
||||
The D3 `min()` and `max()` methods are useful to help set the scale.
|
||||
I metodi D3 `min()` e `max()` sono utili per impostare la scala.
|
||||
|
||||
Given a complex data set, one priority is to set the scale so the visualization fits the SVG container's width and height. You want all the data plotted inside the SVG canvas so it's visible on the web page.
|
||||
Dato un insieme di dati complesso, una priorità è quella di impostare la scala in modo che la visualizzazione si adatti alla larghezza e all'altezza del contenitore SVG. Vogliamo che tutti i dati siano tracciati all'interno della tela SVG in modo da essere visibili sulla pagina web.
|
||||
|
||||
The example below sets the x-axis scale for scatter plot data. The `domain()` method passes information to the scale about the raw data values for the plot. The `range()` method gives it information about the actual space on the web page for the visualization.
|
||||
L'esempio qui sotto imposta la scala dell'asse x per i dati del grafico a dispersione. Il metodo `domain()` passa le informazioni alla scala sui valori dei dati grezzi per il grafico. Il metodo `range()` fornisce informazioni sullo spazio effettivo nella pagina web per la visualizzazione.
|
||||
|
||||
In the example, the domain goes from 0 to the maximum in the set. It uses the `max()` method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (`w`), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas.
|
||||
Nell'esempio, il dominio va da 0 al massimo nel set di dati. Usa il metodo `max()` con una funzione di callback basata sui valori x negli array. L'intervallo utilizza la larghezza della tela SVG (`w`), ma include anche un po' di padding. Questo mette dello spazio tra i punti della del grafico a dispersione e il bordo della tela SVG.
|
||||
|
||||
```js
|
||||
const dataset = [
|
||||
@ -38,29 +38,29 @@ const xScale = d3.scaleLinear()
|
||||
.range([padding, w - padding]);
|
||||
```
|
||||
|
||||
The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG canvas). Including the padding in the `range()` method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500).
|
||||
Il padding inizialmente può confondere. Immagine l'asse X come una linea orizzontale che va da 0 a 500 (il valore di larghezza della tela SVG). Includendo il padding nel metodo `range()` costringiamo il grafico a partire da 30 lungo quella linea (invece che da 0), e terminare a 470 (invece che a 500).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the `yScale` variable to create a linear y-axis scale. The domain should start at zero and go to the maximum `y` value in the set. The range should use the SVG height (`h`) and include padding.
|
||||
Usa la variabile `yScale` per creare una scala lineare per l'asse y. Il dominio dovrebbe iniziare da zero e andare al valore massimo di `y` nel set. L'intervallo dovrebbe usare l'altezza SVG (`h`) e includere il padding.
|
||||
|
||||
**Note:** Remember to keep the plot right-side-up. When you set the range for the y coordinates, the higher value (height minus padding) is the first argument, and the lower value is the second argument.
|
||||
**Nota:** Ricordati di mantenere il grafico nel verso giusto. Quando si imposta l'intervallo per le coordinate y, il valore più alto (altezza meno padding) è il primo argomento, e il valore più basso è il secondo argomento.
|
||||
|
||||
# --hints--
|
||||
|
||||
The text in the `h2` should be `30`.
|
||||
Il testo di `h2` dovrebbe essere `30`.
|
||||
|
||||
```js
|
||||
assert(output == 30 && $('h2').text() == '30');
|
||||
```
|
||||
|
||||
The `domain()` of yScale should be equivalent to `[0, 411]`.
|
||||
Il `domain()` di yScale dovrebbe essere equivalente a `[0, 411]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]));
|
||||
```
|
||||
|
||||
The `range()` of yScale should be equivalent to `[470, 30]`.
|
||||
Il `range()` di yScale dovrebbe essere equivalente a `[470, 30]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc5
|
||||
title: Work with Dynamic Data in D3
|
||||
title: Lavorare con i dati dinamici in D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301498
|
||||
dashedName: work-with-dynamic-data-in-d3
|
||||
@ -8,75 +8,75 @@ dashedName: work-with-dynamic-data-in-d3
|
||||
|
||||
# --description--
|
||||
|
||||
The last two challenges cover the basics of displaying data dynamically with D3 using the `data()` and `enter()` methods. These methods take a data set and, together with the `append()` method, create a new DOM element for each entry in the data set.
|
||||
Le ultime due sfide riguardano le basi della visualizzazione dinamica dei dati con D3 tramite l'utilizzo dei metodi `data()` e `enter()`. Questi metodi prendono un set di dati e, insieme al metodo `append()`, creano un nuovo elemento DOM per ogni voce nel set di dati.
|
||||
|
||||
In the previous challenge, you created a new `h2` element for each item in the `dataset` array, but they all contained the same text, `New Title`. This is because you have not made use of the data that is bound to each of the `h2` elements.
|
||||
Nella sfida precedente, hai creato un nuovo elemento `h2` per ogni elemento nell'array `dataset`, ma tutti contenevano lo stesso testo, `New Title`. Questo perché non hai fatto uso dei dati che sono legati a ciascuno degli elementi `h2`.
|
||||
|
||||
The D3 `text()` method can take a string or a callback function as an argument:
|
||||
Il metodo D3 `text()` può prendere una stringa o una funzione di callback come argomento:
|
||||
|
||||
```js
|
||||
selection.text((d) => d)
|
||||
```
|
||||
|
||||
In the example above, the parameter `d` refers to a single entry in the dataset that a selection is bound to.
|
||||
Nell'esempio precedente, il parametro `d` si riferisce a una singola voce nel set di dati a cui è associata una selezione.
|
||||
|
||||
Using the current example as context, the first `h2` element is bound to 12, the second `h2` element is bound to 31, the third `h2` element is bound to 22, and so on.
|
||||
Utilizzando l'esempio attuale come contesto, il primo elemento `h2` è legato a 12, il secondo elemento `h2` è legato a 31, il terzo elemento `h2` è legato a 22, e così via.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the `text()` method so that each `h2` element displays the corresponding value from the `dataset` array with a single space and the string `USD`. For example, the first heading should be `12 USD`.
|
||||
Modifica il metodo `text()` in modo che ogni elemento `h2` mostri il valore corrispondente dall'array `dataset` con uno spazio e la stringa `USD`. Ad esempio, la prima intestazione dovrebbe essere `12 USD`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `h2` should have the text `12 USD`.
|
||||
Il primo `h2` dovrebbe avere il testo `12 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(0).text() == '12 USD');
|
||||
```
|
||||
|
||||
The second `h2` should have the text `31 USD`.
|
||||
Il secondo `h2` dovrebbe avere il testo `31 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(1).text() == '31 USD');
|
||||
```
|
||||
|
||||
The third `h2` should have the text `22 USD`.
|
||||
Il terzo `h2` dovrebbe avere il testo `22 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(2).text() == '22 USD');
|
||||
```
|
||||
|
||||
The fourth `h2` should have the text `17 USD`.
|
||||
Il quarto `h2` dovrebbe avere il testo `17 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(3).text() == '17 USD');
|
||||
```
|
||||
|
||||
The fifth `h2` should have the text `25 USD`.
|
||||
Il quinto `h2` dovrebbe avere il testo `25 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(4).text() == '25 USD');
|
||||
```
|
||||
|
||||
The sixth `h2` should have the text `18 USD`.
|
||||
Il sesto `h2` dovrebbe avere il testo `18 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(5).text() == '18 USD');
|
||||
```
|
||||
|
||||
The seventh `h2` should have the text `29 USD`.
|
||||
Il settimo `h2` dovrebbe avere il testo `29 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(6).text() == '29 USD');
|
||||
```
|
||||
|
||||
The eighth `h2` should have the text `14 USD`.
|
||||
L'ottavo `h2` dovrebbe avere il testo `14 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(7).text() == '14 USD');
|
||||
```
|
||||
|
||||
The ninth `h2` should have the text `9 USD`.
|
||||
Il nono `h2` dovrebbe avere il testo `9 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(8).text() == '9 USD');
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
---
|
||||
id: 5a553ca864b52e1d8bceea14
|
||||
title: Certificato Visualizzazione Dati
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: bd7168d8c242eddfaeb5bd13
|
||||
title: Visualizza i dati con un grafico a barre
|
||||
-
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualizza i dati con un grafico a dispersione
|
||||
-
|
||||
id: bd7188d8c242eddfaeb5bd13
|
||||
title: Visualizza i dati con una mappa di calore
|
||||
-
|
||||
id: 587d7fa6367417b2b2512bbf
|
||||
title: Visualizza i dati con una mappa a colori Coropletica
|
||||
-
|
||||
id: 587d7fa6367417b2b2512bc0
|
||||
title: Visualizza i dati con un diagramma ad albero
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abb
|
||||
title: Create a Horizontal Line Using the hr Element
|
||||
title: Criar uma linha horizontal usando o elemento hr
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bR8t7'
|
||||
forumTopicId: 301049
|
||||
@ -9,23 +9,23 @@ dashedName: create-a-horizontal-line-using-the-hr-element
|
||||
|
||||
# --description--
|
||||
|
||||
You can use the `hr` tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.
|
||||
Você pode usar a tag `hr` para adicionar uma linha horizontal do tamanho da largura do elemento em que ele está contido. Esse elemento pode ser usado para definir uma mudança no tópico ou para separar visualmente grupos de conteúdo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add an `hr` tag underneath the `h4` which contains the card title.
|
||||
Adicione a tag `hr` abaixo do elemento `h4` que contém o título do cartão.
|
||||
|
||||
**Note:** In HTML, `hr` is a self-closing tag, and therefore doesn't need a separate closing tag.
|
||||
**Observação:** no HTML, a tag `hr` fecha em si mesma e, portanto, não precisa de uma tag de fechamento separada.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should add an `hr` tag to the markup.
|
||||
O seu código deve ter uma tag `hr`.
|
||||
|
||||
```js
|
||||
assert($('hr').length == 1);
|
||||
```
|
||||
|
||||
The `hr` tag should come between the title and the paragraph.
|
||||
A tag `hr` deve ficar entre o título e o parágrafo.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab3
|
||||
title: Create Visual Balance Using the text-align Property
|
||||
title: Criar equilíbrio visual usando a propriedade text-align
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3b4EAp'
|
||||
forumTopicId: 301053
|
||||
@ -9,31 +9,31 @@ dashedName: create-visual-balance-using-the-text-align-property
|
||||
|
||||
# --description--
|
||||
|
||||
This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles.
|
||||
Esta seção do currículo se concentra no Design Visual Aplicado. O primeiro grupo de desafios baseia-se no layout de cartão fornecido para mostrar uma série de princípios básicos.
|
||||
|
||||
Text is often a large part of web content. CSS has several options for how to align it with the `text-align` property.
|
||||
O texto costuma ser uma grande parte do conteúdo na web. O CSS possui várias opções de como alinhá-lo com a propriedade `text-align`.
|
||||
|
||||
`text-align: justify;` causes all lines of text except the last line to meet the left and right edges of the line box.
|
||||
`text-align: justify;` faz com que todas as linhas de texto, exceto a última linha, encostem nas bordas esquerda e direita da caixa em que o texto está.
|
||||
|
||||
`text-align: center;` centers the text
|
||||
`text-align: center;` centraliza o texto
|
||||
|
||||
`text-align: right;` right-aligns the text
|
||||
`text-align: right;` alinha o texto à direita
|
||||
|
||||
And `text-align: left;` (the default) left-aligns the text.
|
||||
E `text-align: left;` (o padrão) alinha o texto à esquerda.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Align the `h4` tag's text, which says "Google", to the center. Then justify the paragraph tag which contains information about how Google was founded.
|
||||
Alinhe o texto da tag `h4`, que diz "Google", ao centro. Em seguida, justifique (justify) a tag de parágrafo que contém informações sobre como o Google foi fundado.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the text-align property on the `h4` tag to set it to `center`.
|
||||
Você deve usar a propriedade text-align com o valor de `center` na tag `h4`.
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-align') == 'center');
|
||||
```
|
||||
|
||||
Your code should use the text-align property on the `p` tag to set it to `justify`.
|
||||
Você deve usar a propriedade text-align com o valor de `justify` na tag `p`.
|
||||
|
||||
```js
|
||||
assert($('p').css('text-align') == 'justify');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512abf
|
||||
title: Decrease the Opacity of an Element
|
||||
title: Diminuir a opacidade de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7aKqu4'
|
||||
forumTopicId: 301055
|
||||
@ -9,19 +9,19 @@ dashedName: decrease-the-opacity-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
The `opacity` property in CSS is used to adjust the opacity, or conversely, the transparency for an item.
|
||||
A propriedade `opacity` do CSS é usada para ajustar a opacidade ou, inversamente, a transparência de um item.
|
||||
|
||||
<blockquote>A value of 1 is opaque, which isn't transparent at all.<br>A value of 0.5 is half see-through.<br>A value of 0 is completely transparent.</blockquote>
|
||||
<blockquote>O valor 1 é opaco, o que não é transparente. <br> O valor 0.5 é meio transparente. <br> O valor 0 é totalmente transparente.</blockquote>
|
||||
|
||||
The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text.
|
||||
O valor fornecido se aplicará a todo o elemento, seja uma imagem com alguma transparência ou as cores do primeiro plano e do plano de fundo em um bloco de texto.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Set the `opacity` of the anchor tags to 0.7 using `links` class to select them.
|
||||
Usando a classe `links`, defina a propriedade `opacity` com o valor de 0.7.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should set the `opacity` property to 0.7 on the anchor tags by selecting the class of `links`.
|
||||
A propriedade `opacity` deve ter o valor de 0.7 na classe `links`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user