chore(i18n,curriculum): update translations (#42629)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908849
|
||||
title: Add Elements within Your Bootstrap Wells
|
||||
title: Aggiungere elementi in un contenitore well
|
||||
challengeType: 0
|
||||
forumTopicId: 16636
|
||||
dashedName: add-elements-within-your-bootstrap-wells
|
||||
@ -8,13 +8,13 @@ dashedName: add-elements-within-your-bootstrap-wells
|
||||
|
||||
# --description--
|
||||
|
||||
Now we're several `div` elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our `button` elements.
|
||||
Ora siamo a diversi elementi `div` di profondità su ogni colonna della nostra riga. Questa è la profondità a cui dovremo andare. Ora possiamo aggiungere i nostri elementi `button`.
|
||||
|
||||
Nest three `button` elements within each of your `div` elements having the class name `well`.
|
||||
Annida tre elementi `button` all'interno di ciascuno dei tuoi elementi `div` di classe `well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Three `button` elements should be nested within each of your `div` elements with class `well`.
|
||||
Tre elementi `button` dovrebbero essere annidati all'interno di ciascuno dei tuoi elementi `div` di classe `well`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -23,13 +23,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should have a total of 6 `button` elements.
|
||||
Dovresti avere un totale di 6 elementi `button`.
|
||||
|
||||
```js
|
||||
assert($('button') && $('button').length > 5);
|
||||
```
|
||||
|
||||
All of your `button` elements should have closing tags.
|
||||
Tutti i tuoi elementi `button` dovrebbero avere tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,27 +1,28 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08845
|
||||
title: Add Font Awesome Icons to all of our Buttons
|
||||
title: Aggiungere le icone di Font Awesome a tutti i bottoni
|
||||
challengeType: 0
|
||||
forumTopicId: 16637
|
||||
required:
|
||||
- link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
|
||||
-
|
||||
link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
|
||||
raw: true
|
||||
dashedName: add-font-awesome-icons-to-all-of-our-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Font Awesome is a convenient library of icons. These icons can be web fonts or vector graphics. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.
|
||||
Font Awesome è una comoda libreria di icone. Queste icone possono essere font web o grafica vettoriale. Queste icone sono trattate proprio come i caratteri. Puoi specificare la loro dimensione usando i pixel, e assumeranno la dimensione del carattere degli elementi HTML genitori.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use Font Awesome to add an `info-circle` icon to your info button and a `trash` icon to your delete button.
|
||||
Usa Font Awesome per aggiungere un'icona `info-circle` al tuo pulsante info e un'icona `trash` al tuo pulsante di eliminazione.
|
||||
|
||||
**Note:** The `span` element is an acceptable alternative to the `i` element for the directions below.
|
||||
**Nota:** L'elemento `span` è un'alternativa accettabile all'elemento `i` per le istruzioni sottostanti.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `<i class="fas fa-info-circle"></i>` within your `info` button element.
|
||||
Dovresti aggiungere un pulsante `<i class="fas fa-info-circle"></i>` all'interno dell'elemento `info`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -30,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should add a `<i class="fas fa-trash"></i>` within your `delete` button element.
|
||||
Dovresti aggiungere un `<i class="fas fa-trash"></i>` all'interno del tuo bottone `delete`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Each of your `i` elements should have a closing tag and `<i class="fas fa-thumbs-up"></i>` is in your `like` button element.
|
||||
Ognuno dei tuoi elementi `i` dovrebbe avere un tag di chiusura e `<i class="fas fa-thumbs-up"></i>` dovrebbe essere presente nel tuo bottone `like`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,47 +1,48 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08845
|
||||
title: Add Font Awesome Icons to our Buttons
|
||||
title: Aggiungere le icone Font Awesome ai bottoni
|
||||
challengeType: 0
|
||||
forumTopicId: 16638
|
||||
required:
|
||||
- link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
|
||||
-
|
||||
link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
|
||||
raw: true
|
||||
dashedName: add-font-awesome-icons-to-our-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Font Awesome is a convenient library of icons. These icons can be webfonts or vector graphics. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.
|
||||
Font Awesome è una comoda libreria di icone. Queste icone possono essere font web o grafica vettoriale. Queste icone sono trattate proprio come i caratteri. Puoi specificare la loro dimensione usando i pixel, e assumeranno la dimensione del carattere degli elementi HTML genitori.
|
||||
|
||||
You can include Font Awesome in any app by adding the following code to the top of your HTML:
|
||||
Puoi includere Font Awesome in qualsiasi app aggiungendo il seguente codice alla parte superiore del tuo HTML:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
```
|
||||
|
||||
In this case, we've already added it for you to this page behind the scenes.
|
||||
In questo caso, lo abbiamo già aggiunto per te a questa pagina dietro le quinte.
|
||||
|
||||
The `i` element was originally used to make other elements italic, but is now commonly used for icons. You can add the Font Awesome classes to the `i` element to turn it into an icon, for example:
|
||||
L'elemento `i` era originariamente utilizzato per rendere corsivi altri elementi, ma ora è comunemente usato per le icone. Puoi aggiungere le classi Font Awesome all'elemento `i` per trasformarlo in un'icona, ad esempio:
|
||||
|
||||
```html
|
||||
<i class="fas fa-info-circle"></i>
|
||||
```
|
||||
|
||||
Note that the `span` element is also acceptable for use with icons.
|
||||
Nota che anche l'elemento `span` è accettabile per l'uso con le icone.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use Font Awesome to add a `thumbs-up` icon to your like button by giving it an `i` element with the classes `fas` and `fa-thumbs-up`. Make sure to keep the text `Like` next to the icon.
|
||||
Usa Font Awesome per aggiungere un'icona `thumbs-up` al tuo pulsante like inserendo un elemento `i` con le classi `fas` e `fa-thumbs-up`. Assicurati di mantenere il testo `Like` accanto all'icona.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `i` element with the classes `fas` and `fa-thumbs-up`.
|
||||
Dovresti aggiungere un elemento `i` con le classi `fas` e `fa-thumbs-up`.
|
||||
|
||||
```js
|
||||
assert($('i').is('.fas.fa-thumbs-up') || $('span').is('.fas.fa-thumbs-up'));
|
||||
```
|
||||
|
||||
Your `fa-thumbs-up` icon should be located within the Like button.
|
||||
L'icona `fa-thumbs-up` dovrebbe essere posizionata all'interno del pulsante Like.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -52,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `i` element should be nested within your `button` element.
|
||||
Il tuo elemento `i` dovrebbe essere annidato all'interno dell'elemento `button`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -61,7 +62,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your icon element should have a closing tag.
|
||||
Il tuo elemento icon dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/i>|<\/span>/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908853
|
||||
title: Add id Attributes to Bootstrap Elements
|
||||
title: Aggiungere attributi id agli elementi di Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16639
|
||||
dashedName: add-id-attributes-to-bootstrap-elements
|
||||
@ -8,23 +8,23 @@ dashedName: add-id-attributes-to-bootstrap-elements
|
||||
|
||||
# --description--
|
||||
|
||||
Recall that in addition to class attributes, you can give each of your elements an `id` attribute.
|
||||
Ricorda che oltre agli attributi di classe, puoi dare a ciascuno dei tuoi elementi un attributo `id`.
|
||||
|
||||
Each id must be unique to a specific element and used only once per page.
|
||||
Ogni id deve essere unico per uno specifico elemento e dev'essere usato una sola volta per pagina.
|
||||
|
||||
Let's give a unique id to each of our `div` elements of class `well`.
|
||||
Diamo un id unico a ciascuno dei nostri elementi `div` di classe `well`.
|
||||
|
||||
Remember that you can give an element an id like this:
|
||||
Ricorda che puoi dare ad un elemento un id come questo:
|
||||
|
||||
```html
|
||||
<div class="well" id="center-well">
|
||||
```
|
||||
|
||||
Give the well on the left the id of `left-well`. Give the well on the right the id of `right-well`.
|
||||
Dai all'elemento well sulla sinistra l'id di `left-well`. Dai all'elemento well sulla destra l'id di `right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your left `well` should have the id of `left-well`.
|
||||
Il tuo `well` di sinistra dovrebbe avere l'id di `left-well`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your right `well` should have the id of `right-well`.
|
||||
Il tuo `well` di destra dovrebbe avere l'id di `right-well`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908850
|
||||
title: Apply the Default Bootstrap Button Style
|
||||
title: Applicare lo stile del pulsante Bootstrap di default
|
||||
challengeType: 0
|
||||
forumTopicId: 16657
|
||||
dashedName: apply-the-default-bootstrap-button-style
|
||||
@ -8,19 +8,19 @@ dashedName: apply-the-default-bootstrap-button-style
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap has another button class called `btn-default`.
|
||||
Bootstrap ha un'altra classe di bottoni chiamata `btn-default`.
|
||||
|
||||
Apply both the `btn` and `btn-default` classes to each of your `button` elements.
|
||||
Applica le classi `btn` e `btn-default` a ciascuno dei tuoi elementi `button`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should apply the `btn` class to each of your `button` elements.
|
||||
Dovresti applicare la classe `btn` a ciascuno dei tuoi elementi `button`.
|
||||
|
||||
```js
|
||||
assert($('.btn').length > 5);
|
||||
```
|
||||
|
||||
You should apply the `btn-default` class to each of your `button` elements.
|
||||
Dovresti applicare la classe `btn-default` a ciascuno dei tuoi elementi `button`.
|
||||
|
||||
```js
|
||||
assert($('.btn-default').length > 5);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348cd8acef08813
|
||||
title: Call out Optional Actions with btn-info
|
||||
title: Stilizzare azioni facoltative con btn-info
|
||||
challengeType: 0
|
||||
forumTopicId: 16770
|
||||
dashedName: call-out-optional-actions-with-btn-info
|
||||
@ -8,33 +8,33 @@ dashedName: call-out-optional-actions-with-btn-info
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap comes with several pre-defined colors for buttons. The `btn-info` class is used to call attention to optional actions that the user can take.
|
||||
Bootstrap è dotato di diversi colori predefiniti per i pulsanti. La classe `btn-info` viene utilizzata per richiamare l'attenzione sulle azioni facoltative che l'utente può intraprendere.
|
||||
|
||||
Create a new block-level Bootstrap button below your `Like` button with the text `Info`, and add Bootstrap's `btn-info` and `btn-block` classes to it.
|
||||
Crea un nuovo pulsante Bootstrap a livello di blocco sotto il tuo pulsante `Like` con il testo `Info`, e aggiungi le classi `btn-info` e `btn-block` di Bootstrap.
|
||||
|
||||
Note that these buttons still need the `btn` and `btn-block` classes.
|
||||
Nota che questi pulsanti hanno ancora bisogno delle classi `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `button` element with the text `Info`.
|
||||
Dovresti creare un nuovo elemento `button` con il testo `Info`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('info', 'gi').test($('button').text()));
|
||||
```
|
||||
|
||||
Both of your Bootstrap buttons should have the `btn` and `btn-block` classes.
|
||||
Entrambi i pulsanti di Bootstrap dovrebbero avere le classi `btn` e `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button.btn-block.btn').length > 1);
|
||||
```
|
||||
|
||||
Your new button should have the class `btn-info`.
|
||||
Il tuo nuovo pulsante dovrebbe avere la classe `btn-info`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-info'));
|
||||
```
|
||||
|
||||
All of your `button` elements should have closing tags.
|
||||
Tutti i tuoi elementi `button` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd8acde08812
|
||||
title: Center Text with Bootstrap
|
||||
title: Centrare il testo con Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16771
|
||||
dashedName: center-text-with-bootstrap
|
||||
@ -8,9 +8,9 @@ dashedName: center-text-with-bootstrap
|
||||
|
||||
# --description--
|
||||
|
||||
Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class `text-center` to our `h2` element.
|
||||
Ora che stiamo usando Bootstrap, possiamo centrare il nostro elemento di intestazione per farlo apparire meglio. Tutto quello che dobbiamo fare è aggiungere la classe `text-center` al nostro elemento `h2`.
|
||||
|
||||
Remember that you can add several classes to the same element by separating each of them with a space, like this:
|
||||
Ricorda che puoi aggiungere più classi allo stesso elemento separando ciascuna di esse con uno spazio, in questo modo:
|
||||
|
||||
```html
|
||||
<h2 class="red-text text-center">your text</h2>
|
||||
@ -18,13 +18,13 @@ Remember that you can add several classes to the same element by separating each
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should be centered by applying the class `text-center`
|
||||
Il tuo elemento `h2` dovrebbe essere centrato applicando la classe `text-center`
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('text-center'));
|
||||
```
|
||||
|
||||
Your `h2` element should still have the class `red-text`
|
||||
Il tuo elemento `h2` dovrebbe appartenere ancora alla classe `red-text`
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348cd8acef08812
|
||||
title: Create a Block Element Bootstrap Button
|
||||
title: Creare un pulsante Bootstrap di tipo blocco
|
||||
challengeType: 0
|
||||
forumTopicId: 16810
|
||||
dashedName: create-a-block-element-bootstrap-button
|
||||
@ -8,45 +8,45 @@ dashedName: create-a-block-element-bootstrap-button
|
||||
|
||||
# --description--
|
||||
|
||||
Normally, your `button` elements with the `btn` and `btn-default` classes are only as wide as the text that they contain. For example:
|
||||
Normalmente, i tuoi elementi `button` con le classi `btn` e `btn-default` sono larghi solo quanto il testo che contengono. Per esempio:
|
||||
|
||||
```html
|
||||
<button class="btn btn-default">Submit</button>
|
||||
```
|
||||
|
||||
This button would only be as wide as the word `Submit`.
|
||||
Questo pulsante sarà ampio solo quanto la parola `Submit`.
|
||||
|
||||
<button class='btn btn-default'>Submit</button>
|
||||
|
||||
By making them block elements with the additional class of `btn-block`, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a "new line" below the block.
|
||||
Rendendolo elemento di blocco con la classe aggiuntiva `btn-block`, il tuo pulsante si estenderà per riempire l'intero spazio orizzontale della tua pagina e tutti gli elementi che seguiranno scorreranno su una "nuova linea" sotto il blocco.
|
||||
|
||||
```html
|
||||
<button class="btn btn-default btn-block">Submit</button>
|
||||
```
|
||||
|
||||
This button would take up 100% of the available width.
|
||||
Questo pulsante prenderà il 100% della larghezza disponibile.
|
||||
|
||||
<button class='btn btn-default btn-block'>Submit</button>
|
||||
|
||||
Note that these buttons still need the `btn` class.
|
||||
Nota che questi bottoni hanno ancora bisogno della classe `btn`.
|
||||
|
||||
Add Bootstrap's `btn-block` class to your Bootstrap button.
|
||||
Aggiungi la classe `btn-block` di Bootstrap al tuo pulsante.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your button should still have the `btn` and `btn-default` classes.
|
||||
Il tuo pulsante dovrebbe avere ancora le classi `btn` e `btn-default`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
|
||||
```
|
||||
|
||||
Your button should have the class `btn-block`.
|
||||
Il tuo pulsante dovrebbe avere la classe `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-block'));
|
||||
```
|
||||
|
||||
All of your `button` elements should have closing tags.
|
||||
Tutti i tuoi elementi `button` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348cd8acdf08812
|
||||
title: Create a Bootstrap Button
|
||||
title: Creare un bottone con Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16811
|
||||
dashedName: create-a-bootstrap-button
|
||||
@ -8,13 +8,13 @@ dashedName: create-a-bootstrap-button
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap has its own styles for `button` elements, which look much better than the plain HTML ones.
|
||||
Bootstrap ha i suoi stili per gli elementi `button`, e questo li fa apparire molto più belli di quelli dell'HTML semplice.
|
||||
|
||||
Create a new `button` element below your large kitten photo. Give it the `btn` and `btn-default` classes, as well as the text of `Like`.
|
||||
Crea un nuovo elemento `button` sotto alla foto grande dei gattini. Dagli le classi `btn` e `btn-default`, e il testo di `Like`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `button` element with the text `Like`.
|
||||
Dovresti creare un nuovo elemento `button` con il testo `Like`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -23,13 +23,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your new button should have two classes: `btn` and `btn-default`.
|
||||
Il tuo nuovo pulsante dovrebbe avere due classi: `btn` e `btn-default`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
|
||||
```
|
||||
|
||||
All of your `button` elements should have closing tags.
|
||||
Tutti i tuoi elementi `button` dovrebbero avere tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908846
|
||||
title: Create a Bootstrap Headline
|
||||
title: Creare un titolo con Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16812
|
||||
dashedName: create-a-bootstrap-headline
|
||||
@ -8,23 +8,23 @@ dashedName: create-a-bootstrap-headline
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills.
|
||||
Ora costruiamo qualcosa da zero per fare pratica con le nostre abilità HTML, CSS e Bootstrap.
|
||||
|
||||
We'll build a jQuery playground, which we'll soon put to use in our jQuery challenges.
|
||||
Costruiremo un "terreno di gioco" che presto useremo con le nostre sfide jQuery.
|
||||
|
||||
To start with, create an `h3` element, with the text `jQuery Playground`.
|
||||
Per iniziare, crea un elemento `h3`, con il testo `jQuery Playground`.
|
||||
|
||||
Color your `h3` element with the `text-primary` Bootstrap class, and center it with the `text-center` Bootstrap class.
|
||||
Colora il tuo elemento `h3` con la classe Bootstrap `text-primary` e centralo con la classe `text-center` Bootstrap.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `h3` element to your page.
|
||||
Dovresti aggiungere un elemento `h3` alla tua pagina.
|
||||
|
||||
```js
|
||||
assert($('h3') && $('h3').length > 0);
|
||||
```
|
||||
|
||||
Your `h3` element should have a closing tag.
|
||||
Il tuo elemento `h3` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,19 +34,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `h3` element should be colored by applying the class `text-primary`
|
||||
Il tuo elemento `h3` dovrebbe essere colorato applicando la classe `text-primary`
|
||||
|
||||
```js
|
||||
assert($('h3').hasClass('text-primary'));
|
||||
```
|
||||
|
||||
Your `h3` element should be centered by applying the class `text-center`
|
||||
Il tuo elemento `h3` dovrebbe essere centrato applicando la classe `text-center`
|
||||
|
||||
```js
|
||||
assert($('h3').hasClass('text-center'));
|
||||
```
|
||||
|
||||
Your `h3` element should have the text `jQuery Playground`.
|
||||
Il tuo elemento `h3` dovrebbe avere il testo `jQuery Playground`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text()));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9bec908846
|
||||
title: Create a Bootstrap Row
|
||||
title: Creare una riga di Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16813
|
||||
dashedName: create-a-bootstrap-row
|
||||
@ -8,13 +8,13 @@ dashedName: create-a-bootstrap-row
|
||||
|
||||
# --description--
|
||||
|
||||
Now we'll create a Bootstrap row for our inline elements.
|
||||
Ora creeremo una riga (row) di Bootstrap per i nostri elementi in linea.
|
||||
|
||||
Create a `div` element below the `h3` tag, with a class of `row`.
|
||||
Crea un elemento `div` sotto il tag `h3`, con una classe `row`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `div` element below your `h3` element.
|
||||
Dovresti aggiungere un elemento `div` sotto il tuo elemento `h3`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -25,19 +25,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `div` element should have the class `row`
|
||||
Il tuo elemento `div` dovrebbe avere la classe `row`
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('row'));
|
||||
```
|
||||
|
||||
Your `row div` should be nested inside the `container-fluid div`
|
||||
Il tuo `row div` dovrebbe essere annidato all'interno del `container-fluid div`
|
||||
|
||||
```js
|
||||
assert($('div.container-fluid div.row').length > 0);
|
||||
```
|
||||
|
||||
Your `div` element should have a closing tag.
|
||||
Il tuo elemento `div` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908852
|
||||
title: Create a Class to Target with jQuery Selectors
|
||||
title: Creare una classe da usare con i selettori jQuery
|
||||
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--
|
||||
|
||||
Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery.
|
||||
Non tutte le classi devono avere un corrispondente CSS. A volte creeremo delle classi solo allo scopo di selezionare questi elementi più facilmente utilizzando jQuery.
|
||||
|
||||
Give each of your `button` elements the class `target`.
|
||||
Assegna a ciascuno dei tuoi elementi `button` la classe `target`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should apply the `target` class to each of your `button` elements.
|
||||
Dovresti applicare la classe `target` a ciascuno dei tuoi elementi `button`.
|
||||
|
||||
```js
|
||||
assert($('.target').length > 5);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08845
|
||||
title: Create a Custom Heading
|
||||
title: Creare un'intestazione personalizzata
|
||||
challengeType: 0
|
||||
forumTopicId: 16816
|
||||
dashedName: create-a-custom-heading
|
||||
@ -8,23 +8,23 @@ dashedName: create-a-custom-heading
|
||||
|
||||
# --description--
|
||||
|
||||
We will make a simple heading for our Cat Photo App by putting the title and relaxing cat image in the same row.
|
||||
Creeremo una semplice intestazione per la nostra Cat Photo App mettendo il titolo e l'immagine del gatto nella stessa riga.
|
||||
|
||||
Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a `div` element.
|
||||
Ricorda, Bootstrap utilizza un sistema di griglia responsivo, che rende facile mettere gli elementi in righe e specificare la larghezza relativa di ogni elemento. La maggior parte delle classi di Bootstrap può essere applicata a un elemento `div`.
|
||||
|
||||
Nest your first image and your `h2` element within a single `<div class="row">` element. Nest your `h2` element within a `<div class="col-xs-8">` and your image in a `<div class="col-xs-4">` so that they are on the same line.
|
||||
Annida la prima immagine e l'elemento `h2` nello stesso elemento `<div class="row">`. Annida l'elemento `h2` in un `<div class="col-xs-8">` e la tua immagine in un `<div class="col-xs-4">` in modo che stiano nella stessa linea.
|
||||
|
||||
Notice how the image is now just the right size to fit along the text?
|
||||
Hai notato come l'immagine ha ora la giusta dimensione per adattarsi al testo?
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element and topmost `img` element should both be nested together within a `div` element with the class `row`.
|
||||
Il tuo elemento `h2` e l'elemento `img` più in alto dovrebbero essere entrambi annidati all'interno di un elemento `div` di classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0);
|
||||
```
|
||||
|
||||
Your topmost `img` element should be nested within a `div` with the class `col-xs-4`.
|
||||
Il tuo elemento `img` più in alto dovrebbe essere annidato all'interno di un `div` di classe `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `h2` element should be nested within a `div` with the class `col-xs-8`.
|
||||
Il tuo elemento `h2` dovrebbe essere annidato all'interno di un `div` di classe `col-xs-8`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
All of your `div` elements should have closing tags.
|
||||
Tutti i tuoi elementi `div` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908848
|
||||
title: Create Bootstrap Wells
|
||||
title: Creare degli elementi incassati con Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16825
|
||||
dashedName: create-bootstrap-wells
|
||||
@ -8,25 +8,25 @@ dashedName: create-bootstrap-wells
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap has a class called `well` that can create a visual sense of depth for your columns.
|
||||
Bootstrap ha una classe chiamata `well` che può creare un effetto di profondità per le tue colonne.
|
||||
|
||||
Nest one `div` element with the class `well` within each of your `col-xs-6` `div` elements.
|
||||
Nidifica un elemento `div` con la classe `well` dentro a ognuno dei tuoi elementi `div` di classe `col-xs-6`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `div` element with the class `well` inside each of your `div` elements with the class `col-xs-6`
|
||||
Dovresti aggiungere un elemento `div` di classe `well` all'interno di ciascuno dei tuoi elementi `div` di classe `col-xs-6`
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-6').not(':has(>div.well)').length < 1);
|
||||
```
|
||||
|
||||
Both of your `div` elements with the class `col-xs-6` should be nested within your `div` element with the class `row`.
|
||||
Entrambi i tuoi elementi `div` di classe `col-xs-6` dovrebbero essere annidati nel tuo elemento `div` di classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row > div.col-xs-6').length > 1);
|
||||
```
|
||||
|
||||
All your `div` elements should have closing tags.
|
||||
Tutti i tuoi elementi `div` dovrebbero avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1347bd9aedf08845
|
||||
title: Ditch Custom CSS for Bootstrap
|
||||
title: Sostituire il CSS personalizzato con quello di Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 17565
|
||||
dashedName: ditch-custom-css-for-bootstrap
|
||||
@ -8,31 +8,31 @@ dashedName: ditch-custom-css-for-bootstrap
|
||||
|
||||
# --description--
|
||||
|
||||
We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.
|
||||
Possiamo ripulire il nostro codice e rendere la nostra Cat Photo App guardare più convenzionale utilizzando gli stili incorporati di Bootstrap invece degli stili personalizzati che abbiamo creato in precedenza.
|
||||
|
||||
Don't worry - there will be plenty of time to customize our CSS later.
|
||||
Non preoccuparti - ci sarà un sacco di tempo per personalizzare il nostro CSS successivamente.
|
||||
|
||||
Delete the `.red-text`, `p`, and `.smaller-image` CSS declarations from your `style` element so that the only declarations left in your `style` element are `h2` and `thick-green-border`.
|
||||
Elimina le dichiarazioni CSS `.red-text`, `p`, e `.smaller-image` dal tuo elemento `style` in modo che le uniche dichiarazioni rimanenti in `style` siano `h2` e `thick-green-border`.
|
||||
|
||||
Then delete the `p` element that contains a dead link. Then remove the `red-text` class from your `h2` element and replace it with the `text-primary` Bootstrap class.
|
||||
Quindi elimina l'elemento `p` che contiene un link a vuoto. Quindi rimuovi la classe `red-text` dal tuo elemento `h2` e sostituiscila con la classe `text-primary` di Bootstrap.
|
||||
|
||||
Finally, remove the `smaller-image` class from your first `img` element and replace it with the `img-responsive` class.
|
||||
Infine, rimuovi la classe `smaller-image` dal tuo primo elemento `img` e sostituiscila con la classe `img-responsive`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should no longer have the class `red-text`.
|
||||
Il tuo elemento `h2` non dovrebbe più avere la classe `red-text`.
|
||||
|
||||
```js
|
||||
assert(!$('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Your `h2` element should now have the class `text-primary`.
|
||||
Il tuo elemento `h2` dovrebbe ora avere la classe `text-primary`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('text-primary'));
|
||||
```
|
||||
|
||||
Your paragraph elements should no longer use the font `Monospace`.
|
||||
I tuoi elementi di paragrafo non dovrebbero più usare il carattere `Monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,13 +42,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `smaller-image` class should be removed from your top image.
|
||||
La classe `smaller-image` dovrebbe essere rimossa dalla tua immagine in alto.
|
||||
|
||||
```js
|
||||
assert(!$('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
You should add the `img-responsive` class to your top image.
|
||||
Dovresti aggiungere la classe `img-responsive` alla tua immagine più in alto.
|
||||
|
||||
```js
|
||||
assert($('.img-responsive').length > 1);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908855
|
||||
title: Give Each Element a Unique id
|
||||
title: Dare ad ogni elemento un id unico
|
||||
challengeType: 0
|
||||
forumTopicId: 18191
|
||||
dashedName: give-each-element-a-unique-id
|
||||
@ -8,15 +8,15 @@ dashedName: give-each-element-a-unique-id
|
||||
|
||||
# --description--
|
||||
|
||||
We will also want to be able to use jQuery to target each button by its unique id.
|
||||
Vorremo anche essere in grado di utilizzare jQuery per selezionare ogni bottone usando il suo id univoco.
|
||||
|
||||
Give each of your buttons a unique id, starting with `target1` and ending with `target6`.
|
||||
Dai a ciascuno dei tuoi bottoni un id unico, iniziando con `target1` e terminando con `target6`.
|
||||
|
||||
Make sure that `target1` to `target3` are in `#left-well`, and `target4` to `target6` are in `#right-well`.
|
||||
Assicurati che gli elementi da `target1` a `target3` siano in `#left-well`, e quelli da `target4` a `target6` siano in `#right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
One `button` element should have the id `target1`.
|
||||
Un elemento `button` dovrebbe avere l'id `target1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -25,7 +25,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
One `button` element should have the id `target2`.
|
||||
Un elemento `button` dovrebbe avere l'id `target2`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,7 +34,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
One `button` element should have the id `target3`.
|
||||
Un elemento `button` dovrebbe avere l'id `target3`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
One `button` element should have the id `target4`.
|
||||
Un elemento `button` dovrebbe avere l'id `target4`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -52,7 +52,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
One `button` element should have the id `target5`.
|
||||
Un elemento `button` dovrebbe avere l'id `target5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -61,7 +61,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
One `button` element should have the id `target6`.
|
||||
Un elemento `button` dovrebbe avere l'id `target6`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908746
|
||||
title: House our page within a Bootstrap container-fluid div
|
||||
title: Accomodare la pagina all'interno di un div container-fluid di 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--
|
||||
|
||||
Now let's make sure all the content on your page is mobile-responsive.
|
||||
Ora assicuriamoci che tutti i contenuti sulla tua pagina siano responsivi sui dispositivi mobili.
|
||||
|
||||
Let's nest your `h3` element within a `div` element with the class `container-fluid`.
|
||||
Nidifichiamo l'elemento `h3` all'interno di un elemento `div` di classe `container-fluid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element should have the class `container-fluid`.
|
||||
Il tuo elemento `div` dovrebbe avere la classe `container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('container-fluid'));
|
||||
```
|
||||
|
||||
Each of your `div` elements should have closing tags.
|
||||
Ognuno dei tuoi elementi `div` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -30,7 +30,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `h3` element should be nested inside a `div` element.
|
||||
Il tuo elemento `h3` dovrebbe essere annidato all'interno di un elemento `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('h3').length > 0);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908856
|
||||
title: Label Bootstrap Buttons
|
||||
title: Etichettare i bottoni di Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18222
|
||||
dashedName: label-bootstrap-buttons
|
||||
@ -8,43 +8,43 @@ dashedName: label-bootstrap-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Just like we labeled our wells, we want to label our buttons.
|
||||
Proprio come abbiamo etichettato i nostri well, vogliamo etichettare i nostri pulsanti.
|
||||
|
||||
Give each of your `button` elements text that corresponds to its id selector.
|
||||
Dai a ciascuno dei tuoi elementi `button` un testo che corrisponda al suo selettore id.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `button` element with the id `target1` should have the text `#target1`.
|
||||
Il tuo elemento `button` con l'id `target1` dovrebbe avere il testo `#target1`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target1', 'gi').test($('#target1').text()));
|
||||
```
|
||||
|
||||
Your `button` element with the id `target2` should have the text `#target2`.
|
||||
Il tuo elemento `button` con l'id `target2` dovrebbe avere il testo `#target2`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target2', 'gi').test($('#target2').text()));
|
||||
```
|
||||
|
||||
Your `button` element with the id `target3` should have the text `#target3`.
|
||||
Il tuo elemento `button` con l'id `target3` dovrebbe avere il testo `#target3`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target3', 'gi').test($('#target3').text()));
|
||||
```
|
||||
|
||||
Your `button` element with the id `target4` should have the text `#target4`.
|
||||
Il tuo elemento `button` con l'id `target4` dovrebbe avere il testo `#target4`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target4', 'gi').test($('#target4').text()));
|
||||
```
|
||||
|
||||
Your `button` element with the id `target5` should have the text `#target5`.
|
||||
Il tuo elemento `button` con l'id `target5` dovrebbe avere il testo `#target5`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target5', 'gi').test($('#target5').text()));
|
||||
```
|
||||
|
||||
Your `button` element with the id `target6` should have the text `#target6`.
|
||||
Il tuo elemento `button` con l'id `target6` dovrebbe avere il testo `#target6`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target6', 'gi').test($('#target6').text()));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908854
|
||||
title: Label Bootstrap Wells
|
||||
title: Etichettare gli elementi incassati
|
||||
challengeType: 0
|
||||
forumTopicId: 18223
|
||||
dashedName: label-bootstrap-wells
|
||||
@ -8,15 +8,15 @@ dashedName: label-bootstrap-wells
|
||||
|
||||
# --description--
|
||||
|
||||
For the sake of clarity, let's label both of our wells with their ids.
|
||||
Per motivi di chiarezza, etichettiamo entrambi i nostri well con i loro id.
|
||||
|
||||
Above your left-well, inside its `col-xs-6` `div` element, add a `h4` element with the text `#left-well`.
|
||||
Sopra il well di sinistra, all'interno del `div` di classe `col-xs-6`, aggiungi un elemento `h4` con il testo `#left-well`.
|
||||
|
||||
Above your right-well, inside its `col-xs-6` `div` element, add a `h4` element with the text `#right-well`.
|
||||
Sopra il well di destra, all'interno del suo elemento `div` di classe `col-xs-6`, aggiungi un elemento `h4` con il testo `#right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `h4` element to each of your `<div class="col-xs-6">` elements.
|
||||
Dovresti aggiungere un elemento `h4` a ciascuno dei tuoi elementi `<div class="col-xs-6">`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -24,19 +24,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
One `h4` element should have the text `#left-well`.
|
||||
Un elemento `h4` dovrebbe avere il testo `#left-well`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#left-well', 'gi').test($('h4').text()));
|
||||
```
|
||||
|
||||
One `h4` element should have the text `#right-well`.
|
||||
Un elemento `h4` dovrebbe avere il testo `#right-well`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#right-well', 'gi').test($('h4').text()));
|
||||
```
|
||||
|
||||
All of your `h4` elements should have closing tags.
|
||||
Tutti i tuoi elementi `h4` dovrebbero avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908845
|
||||
title: Line up Form Elements Responsively with Bootstrap
|
||||
title: Allineare responsivamente gli elementi dei moduli con Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18225
|
||||
required:
|
||||
- link: >-
|
||||
-
|
||||
link: >-
|
||||
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
|
||||
raw: true
|
||||
dashedName: line-up-form-elements-responsively-with-bootstrap
|
||||
@ -12,15 +13,15 @@ dashedName: line-up-form-elements-responsively-with-bootstrap
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's get your form `input` and your submission `button` on the same line. We'll do this the same way we have previously: by using a `div` element with the class `row`, and other `div` elements within it using the `col-xs-*` class.
|
||||
Ora mettiamo il tuo `input` e il `button` di invio del form sulla stessa linea. Lo faremo come in precedenza: usando un elemento `div` di classe `row`, e altri elementi `div` al suo interno usando la classe `col-xs-*`.
|
||||
|
||||
Nest both your form's text `input` and submit `button` within a `div` with the class `row`. Nest your form's text `input` within a div with the class of `col-xs-7`. Nest your form's submit `button` in a `div` with the class `col-xs-5`.
|
||||
Annida sia il l'`input` di testo che il `button` di invio all'interno di un `div` di classe `row`. Annida il tuo `input` di testo all'interno di un div di classe `col-xs-7`. Annida il tuo `button` di invio in un `div` di classe `col-xs-5`.
|
||||
|
||||
This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!
|
||||
Questa è l'ultima sfida che faremo per la nostra Cat Photo App per ora. Ci auguriamo che ti sia piaciuto imparare a usare Font Awesome, Bootstrap e il design responsivo!
|
||||
|
||||
# --hints--
|
||||
|
||||
Your form submission button and text input should be nested in a div with class `row`.
|
||||
Il pulsante di invio del modulo e l'input di testo dovrebbero essere annidati in un div di classe `row`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,19 +30,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your form text input should be nested in a div with the class `col-xs-7`.
|
||||
Il tuo input di testo del modulo dovrebbe essere annidato in un div di classe `col-xs-7`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-7:has(input[type="text"])').length > 0);
|
||||
```
|
||||
|
||||
Your form submission button should be nested in a div with the class `col-xs-5`.
|
||||
Il pulsante di invio del modulo dovrebbe essere annidato in un div di classe `col-xs-5`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-5:has(button[type="submit"])').length > 0);
|
||||
```
|
||||
|
||||
All of your `div` elements should have closing tags.
|
||||
Tutti i tuoi elementi `div` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08812
|
||||
title: Make Images Mobile Responsive
|
||||
title: Rendi le immagini responsive sui dispositivi mobili
|
||||
challengeType: 0
|
||||
forumTopicId: 18232
|
||||
dashedName: make-images-mobile-responsive
|
||||
@ -8,39 +8,39 @@ dashedName: make-images-mobile-responsive
|
||||
|
||||
# --description--
|
||||
|
||||
First, add a new image below the existing one. Set its `src` attribute to `https://bit.ly/fcc-running-cats`.
|
||||
Innanzitutto, aggiungi una nuova immagine sotto quella esistente. Imposta l'attributo `src` su `https://bit.ly/fcc-running-cats`.
|
||||
|
||||
It would be great if this image could be exactly the width of our phone's screen.
|
||||
Sarebbe bello se questa immagine potesse essere larga esattamente come lo schermo del nostro telefono.
|
||||
|
||||
Fortunately, with Bootstrap, all we need to do is add the `img-responsive` class to your image. Do this, and the image should perfectly fit the width of your page.
|
||||
Fortunatamente, con Bootstrap, tutto quello che dobbiamo fare è aggiungere la classe `img-responsive` alla tua immagine. Fai questo, e l'immagine dovrebbe adattarsi perfettamente alla larghezza della pagina.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a total of two images.
|
||||
Dovresti avere un totale di due immagini.
|
||||
|
||||
```js
|
||||
assert($('img').length === 2);
|
||||
```
|
||||
|
||||
Your new image should be below your old one and have the class `img-responsive`.
|
||||
La tua nuova immagine dovrebbe essere sotto la vecchia e avere la classe `img-responsive`.
|
||||
|
||||
```js
|
||||
assert($('img:eq(1)').hasClass('img-responsive'));
|
||||
```
|
||||
|
||||
Your new image should not have the class `smaller-image`.
|
||||
La tua nuova immagine non dovrebbe avere la classe `smaller-image`.
|
||||
|
||||
```js
|
||||
assert(!$('img:eq(1)').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Your new image should have a `src` of `https://bit.ly/fcc-running-cats`.
|
||||
La tua nuova immagine dovrebbe avere un `src` di `https://bit.ly/fcc-running-cats`.
|
||||
|
||||
```js
|
||||
assert($('img:eq(1)').attr('src') === 'https://bit.ly/fcc-running-cats');
|
||||
```
|
||||
|
||||
Your new `img` element should have a closing angle bracket.
|
||||
Il tuo nuovo elemento `img` dovrebbe avere una parentesi angolare di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
---
|
||||
id: bad87fee1348bd9aeda08845
|
||||
title: Responsively Style Checkboxes
|
||||
title: Stilizzare responsivamente le caselle di spunta
|
||||
challengeType: 0
|
||||
forumTopicId: 18269
|
||||
required:
|
||||
- link: >-
|
||||
-
|
||||
link: >-
|
||||
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
|
||||
raw: true
|
||||
dashedName: responsively-style-checkboxes
|
||||
@ -12,27 +13,27 @@ dashedName: responsively-style-checkboxes
|
||||
|
||||
# --description--
|
||||
|
||||
Since Bootstrap's `col-xs-*` classes are applicable to all `form` elements, you can use them on your checkboxes too! This way, the checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.
|
||||
Dal momento che le classi `col-xs-*` di Bootstrap sono applicabili a tutti gli elementi dei `form`, puoi usarle anche nelle tue caselle di spunta! In questo modo, le caselle di spunta saranno distribuite uniformemente su tutta la pagina, indipendentemente dalla risoluzione dello schermo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nest all three of your checkboxes in a `<div class="row">` element. Then nest each of them in a `<div class="col-xs-4">` element.
|
||||
Annida tutte e tre le caselle di spunta in un elemento `<div class="row">`. Poi annida ciascuna di esse in un elemento `<div class="col-xs-4">`.
|
||||
|
||||
# --hints--
|
||||
|
||||
All of your checkboxes should be nested inside one `div` with the class `row`.
|
||||
Tutte le caselle di spunta dovrebbero essere annidate in un `div` di classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(input[type="checkbox"])').length > 0);
|
||||
```
|
||||
|
||||
Each of your checkboxes should be nested inside its own `div` with the class `col-xs-4`.
|
||||
Ognuna delle tue caselle di spunta dovrebbe essere annidata all'interno del suo `div` di classe `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2);
|
||||
```
|
||||
|
||||
All of your `div` elements should have closing tags.
|
||||
Tutti i tuoi elementi `div` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedb08845
|
||||
title: Responsively Style Radio Buttons
|
||||
title: Stilizzare responsivamente i pulsanti di opzione
|
||||
challengeType: 0
|
||||
forumTopicId: 18270
|
||||
required:
|
||||
- link: >-
|
||||
-
|
||||
link: >-
|
||||
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
|
||||
raw: true
|
||||
dashedName: responsively-style-radio-buttons
|
||||
@ -12,27 +13,27 @@ dashedName: responsively-style-radio-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
You can use Bootstrap's `col-xs-*` classes on `form` elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is.
|
||||
Puoi usare le classi `col-xs-*` di Bootstrap anche sugli elementi dei `form`! In questo modo, i nostri pulsanti di opzione saranno distribuiti uniformemente nella pagina, indipendentemente dalla risoluzione dello schermo.
|
||||
|
||||
Nest both your radio buttons within a `<div class="row">` element. Then nest each of them within a `<div class="col-xs-6">` element.
|
||||
Annida entrambi i pulsanti di opzione all'interno di un elemento `<div class="row">`. Poi annida ciascuno di essi all'interno di un elemento `<div class="col-xs-6">`.
|
||||
|
||||
**Note:** As a reminder, radio buttons are `input` elements of type `radio`.
|
||||
**Nota:** Come promemoria, i pulsanti di opzione sono elementi `input` di tipo `radio`.
|
||||
|
||||
# --hints--
|
||||
|
||||
All of your radio buttons should be nested inside one `div` with the class `row`.
|
||||
Tutti i pulsanti di opzione dovrebbero essere annidati all'interno di un `div` di classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(input[type="radio"])').length > 0);
|
||||
```
|
||||
|
||||
Each of your radio buttons should be nested inside its own `div` with the class `col-xs-6`.
|
||||
Ciascuno dei tuoi pulsanti di opzione dovrebbe essere annidato all'interno del suo `div` di classe `col-xs-6`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-6:has(input[type="radio"])').length > 1);
|
||||
```
|
||||
|
||||
All of your `div` elements should have closing tags.
|
||||
Tutti i tuoi elementi `div` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908847
|
||||
title: Split Your Bootstrap Row
|
||||
title: Dividere la riga di Bootrtrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18306
|
||||
dashedName: split-your-bootstrap-row
|
||||
@ -8,19 +8,19 @@ dashedName: split-your-bootstrap-row
|
||||
|
||||
# --description--
|
||||
|
||||
Now that we have a Bootstrap Row, let's split it into two columns to house our elements.
|
||||
Ora che abbiamo una riga di Bootstrap, dividiamola in due colonne per alloggiare i nostri elementi.
|
||||
|
||||
Create two `div` elements within your row, both with the class `col-xs-6`.
|
||||
Crea due elementi `div` all'interno della tua riga, entrambi di classe `col-xs-6`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Two `div class="col-xs-6"` elements should be nested within your `div class="row"` element.
|
||||
Due elementi `div class="col-xs-6"` dovrebbero essere annidati all'interno dell'elemento `div class="row"`.
|
||||
|
||||
```js
|
||||
assert($('div.row > div.col-xs-6').length > 1);
|
||||
```
|
||||
|
||||
All your `div` elements should have closing tags.
|
||||
Tutti i tuoi elementi `div` dovrebbero avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed908845
|
||||
title: Style Text Inputs as Form Controls
|
||||
title: Stilizzare gli input di testo come controlli del modulo
|
||||
challengeType: 0
|
||||
forumTopicId: 18312
|
||||
required:
|
||||
- link: >-
|
||||
-
|
||||
link: >-
|
||||
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
|
||||
raw: true
|
||||
dashedName: style-text-inputs-as-form-controls
|
||||
@ -12,33 +13,33 @@ dashedName: style-text-inputs-as-form-controls
|
||||
|
||||
# --description--
|
||||
|
||||
You can add the `fa-paper-plane` Font Awesome icon by adding `<i class="fa fa-paper-plane"></i>` within your submit `button` element.
|
||||
Puoi inserire l'icona `fa-paper-plane` di Font Awesome aggiungendo `<i class="fa fa-paper-plane"></i>` all'interno del tuo `button` di invio.
|
||||
|
||||
Give your form's text input field a class of `form-control`. Give your form's submit button the classes `btn btn-primary`. Also give this button the Font Awesome icon of `fa-paper-plane`.
|
||||
Dai al campo di input testo del tuo modulo una classe `form-control`. Dai al pulsante di invio del tuo modulo le classi `btn btn-primary`. Dai a questo bottone anche l'icona `fa-paper-plane` di Font Awesome.
|
||||
|
||||
All textual `<input>`, `<textarea>`, and `<select>` elements with the class `.form-control` have a width of 100%.
|
||||
Tutti gli elementi testuali `<input>`, `<textarea>`, e `<select>` di classe `.form-control` hanno una larghezza del 100%.
|
||||
|
||||
# --hints--
|
||||
|
||||
The submit button in your form should have the classes `btn btn-primary`.
|
||||
Il bottone di invio nel tuo modulo dovrebbe avere le classi `btn btn-primary`.
|
||||
|
||||
```js
|
||||
assert($('button[type="submit"]').hasClass('btn btn-primary'));
|
||||
```
|
||||
|
||||
You should add a `<i class="fa fa-paper-plane"></i>` within your submit `button` element.
|
||||
Dovresti aggiungere un elemento `<i class="fa fa-paper-plane"></i>` all'interno del tuo `button` di invio.
|
||||
|
||||
```js
|
||||
assert($('button[type="submit"]:has(i.fa.fa-paper-plane)').length > 0);
|
||||
```
|
||||
|
||||
The text `input` in your form should have the class `form-control`.
|
||||
L'`input` di testo nel tuo modulo dovrebbe avere la classe `form-control`.
|
||||
|
||||
```js
|
||||
assert($('input[type="text"]').hasClass('form-control'));
|
||||
```
|
||||
|
||||
Each of your `i` elements should have a closing tag.
|
||||
Ognuno dei tuoi elementi `i` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348cd8acef08811
|
||||
title: Taste the Bootstrap Button Color Rainbow
|
||||
title: Assaggia l'arcobaleno dei colori dei bottoni di Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18323
|
||||
dashedName: taste-the-bootstrap-button-color-rainbow
|
||||
@ -8,27 +8,27 @@ dashedName: taste-the-bootstrap-button-color-rainbow
|
||||
|
||||
# --description--
|
||||
|
||||
The `btn-primary` class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.
|
||||
La classe `btn-primary` è il colore che userai principalmente nella tua app. È utile per evidenziare le azioni che vuoi che il tuo utente intraprenda.
|
||||
|
||||
Replace Bootstrap's `btn-default` class with `btn-primary` in your button.
|
||||
Sostituisci la classe `btn-default` di Bootstrap con `btn-primary` nel tuo pulsante.
|
||||
|
||||
Note that this button will still need the `btn` and `btn-block` classes.
|
||||
Nota che questo pulsante avrà ancora bisogno delle classi `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your button should have the class `btn-primary`.
|
||||
Il tuo pulsante dovrebbe avere la classe `btn-primary`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-primary'));
|
||||
```
|
||||
|
||||
Your button should still have the `btn` and `btn-block` classes.
|
||||
Il tuo pulsante dovrebbe avere ancora le classi `btn` e `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-block') && $('button').hasClass('btn'));
|
||||
```
|
||||
|
||||
All your `button` elements should have closing tags.
|
||||
Tutti i tuoi elementi `button` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08845
|
||||
title: Use a span to Target Inline Elements
|
||||
title: Usare un intervallo per selezionare gli elementi in linea
|
||||
challengeType: 0
|
||||
forumTopicId: 18370
|
||||
dashedName: use-a-span-to-target-inline-elements
|
||||
@ -8,19 +8,19 @@ dashedName: use-a-span-to-target-inline-elements
|
||||
|
||||
# --description--
|
||||
|
||||
You can use spans to create inline elements. Remember when we used the `btn-block` class to make the button fill the entire row?
|
||||
È possibile utilizzare gli intervalli (span) per creare degli elementi in linea. Ricordi quando abbiamo usato la classe `btn-block` per fare in modo che il bottone riempisse l'intera riga?
|
||||
|
||||
<button class='btn' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>normal button</button>
|
||||
<button class='btn' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>bottone normale</button>
|
||||
|
||||
<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>btn-block button</button>
|
||||
<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>bottone btn-block</button>
|
||||
|
||||
That illustrates the difference between an "inline" element and a "block" element.
|
||||
Questo mostra la differenza tra un elemento "inline" e un elemento "block".
|
||||
|
||||
By using the inline `span` element, you can put several elements on the same line, and even style different parts of the same line differently.
|
||||
Utilizzando l'elemento inline `span`, puoi inserire diversi elementi sulla stessa linea, e anche stilizzare diverse parti della stessa linea in modo diverso.
|
||||
|
||||
Using a `span` element, nest the word `love` inside the `p` element that currently has the text `Things cats love`. Then give the `span` the class `text-danger` to make the text red.
|
||||
Usando un elemento `span`, annida la parola `love` all'interno dell'elemento `p` che al momento ha il testo `Things cats love`. Quindi dai allo `span` la classe `text-danger` per rendere il testo rosso.
|
||||
|
||||
Here's how you would do this for the `p` element that has the text `Top 3 things cats hate`:
|
||||
Ecco come faresti questo per l'elemento `p` che ha il testo `Top 3 things cats hate`:
|
||||
|
||||
```html
|
||||
<p>Top 3 things cats <span class="text-danger">hate:</span></p>
|
||||
@ -28,13 +28,13 @@ Here's how you would do this for the `p` element that has the text `Top 3 things
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `span` element should be inside your `p` element.
|
||||
Il tuo elemento `span` dovrebbe essere all'interno dell'elemento `p`.
|
||||
|
||||
```js
|
||||
assert($('p span') && $('p span').length > 0);
|
||||
```
|
||||
|
||||
Your `span` element should have just the text `love`.
|
||||
Il tuo elemento `span` dovrebbe avere solo il testo `love`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -46,13 +46,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `span` element should have class `text-danger`.
|
||||
Il tuo elemento `span` dovrebbe essere di classe `text-danger`.
|
||||
|
||||
```js
|
||||
assert($('span').hasClass('text-danger'));
|
||||
```
|
||||
|
||||
Your `span` element should have a closing tag.
|
||||
Il tuo elemento `span` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908857
|
||||
title: Use Comments to Clarify Code
|
||||
title: Usare i commenti per chiarire il codice
|
||||
challengeType: 0
|
||||
forumTopicId: 18347
|
||||
dashedName: use-comments-to-clarify-code
|
||||
@ -8,35 +8,35 @@ dashedName: use-comments-to-clarify-code
|
||||
|
||||
# --description--
|
||||
|
||||
When we start using jQuery, we will modify HTML elements without needing to actually change them in HTML.
|
||||
Quando inizieremo a usare jQuery, modificheremo gli elementi HTML senza doverli cambiare effettivamente usando l'HTML.
|
||||
|
||||
Let's make sure that everyone knows they shouldn't actually modify any of this code directly.
|
||||
Facciamo in modo che tutti sappiano che non dovrebbero modificare niente di questo codice in modo diretto.
|
||||
|
||||
Remember that you can start a comment with `<!--` and end a comment with `-->`
|
||||
Ricorda che puoi iniziare un commento con `<!--` e terminarlo con `-->`
|
||||
|
||||
Add a comment at the top of your HTML that says `Code below this line should not be changed`
|
||||
Aggiungi un commento nella parte superiore del tuo HTML che dica `Code below this line should not be changed`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should start a comment with `<!--` at the top of your HTML.
|
||||
Dovresti iniziare un commento con `<!--` nella parte superiore del tuo HTML.
|
||||
|
||||
```js
|
||||
assert(code.match(/^\s*<!--/));
|
||||
```
|
||||
|
||||
Your comment should have the text `Code below this line should not be changed`.
|
||||
Il tuo commento dovrebbe avere il testo `Code below this line should not be changed`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
|
||||
```
|
||||
|
||||
You should close your comment with `-->`.
|
||||
Dovresti chiudere il tuo commento con `-->`.
|
||||
|
||||
```js
|
||||
assert(code.match(/-->.*\n+.+/g));
|
||||
```
|
||||
|
||||
You should have the same number of comment openers and closers.
|
||||
Dovresti avere lo stesso numero di aperture e chiusure di commenti.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--/g).length === code.match(/-->/g).length);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08712
|
||||
title: Use Responsive Design with Bootstrap Fluid Containers
|
||||
title: Usare il design responsivo con i contenitori fluidi di Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18362
|
||||
dashedName: use-responsive-design-with-bootstrap-fluid-containers
|
||||
@ -8,31 +8,31 @@ dashedName: use-responsive-design-with-bootstrap-fluid-containers
|
||||
|
||||
# --description--
|
||||
|
||||
In the HTML5 and CSS section of freeCodeCamp we built a Cat Photo App. Now let's go back to it. This time, we'll style it using the popular Bootstrap responsive CSS framework.
|
||||
Nella sezione HTML5 e CSS di freeCodeCamp abbiamo costruito una Cat Photo App. Ora torniamo ad essa. Questa volta, la stilizzeremo usando il popolare framework CSS responsivo Bootstrap.
|
||||
|
||||
Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <dfn>responsive design</dfn>.
|
||||
Bootstrap capirà quanto è largo lo schermo e risponderà ridimensionando i tuoi elementi HTML - da qui il nome <dfn>design responsivo</dfn>.
|
||||
|
||||
With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.
|
||||
Con un design responsivo, non c'è bisogno di progettare una versione mobile del tuo sito web. Si vedrà bene su dispositivi con schermi di qualsiasi larghezza.
|
||||
|
||||
You can add Bootstrap to any app by adding the following code to the top of your HTML:
|
||||
Puoi aggiungere Bootstrap a qualsiasi app inserendo il seguente codice nella parte superiore del tuo 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"/>
|
||||
```
|
||||
|
||||
In this case, we've already added it for you to this page behind the scenes. Note that using either `>` or `/>` to close the `link` tag is acceptable.
|
||||
In questo caso, lo abbiamo già aggiunto per te a questa pagina dietro le quinte. Nota che che usare `>` o `/>` per chiudere il tag `link` è accettabile.
|
||||
|
||||
To get started, we should nest all of our HTML (except the `link` tag and the `style` element) in a `div` element with the class `container-fluid`.
|
||||
Per iniziare, dovremmo annidare tutto il nostro HTML (tranne il tag `link` e l'elemento `style`) in un elemento `div` di classe `container-fluid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` element should have the class `container-fluid`.
|
||||
Il tuo elemento `div` dovrebbe avere la classe `container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('container-fluid'));
|
||||
```
|
||||
|
||||
Your `div` element should have a closing tag.
|
||||
Il tuo elemento `div` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
All HTML elements after the closing `style` tag should be nested in `.container-fluid`.
|
||||
Tutti gli elementi HTML dopo il tag `style` di chiusura dovrebbero essere annidati in un `.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 the Bootstrap Grid to Put Elements Side By Side
|
||||
title: Usare la griglia di Bootstrap per affiancare gli elementi
|
||||
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 uses a responsive 12-column grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a `div` element.
|
||||
Bootstrap utilizza una griglia responsiva a 12 colonne, che rende facile mettere gli elementi dentro a delle righe specificando la larghezza relativa di ognuno. La maggior parte delle classi di Bootstrap può essere applicata a un elemento `div`.
|
||||
|
||||
Bootstrap has different column width attributes that it uses depending on how wide the user's screen is. For example, phones have narrow screens, and laptops have wider screens.
|
||||
Bootstrap ha diversi attributi di larghezza della colonna che usa a seconda dell'ampiezza dello schermo dell'utente. Ad esempio, i telefoni hanno schermi stretti, e i computer portatili hanno schermi più ampi.
|
||||
|
||||
Take for example Bootstrap's `col-md-*` class. Here, `md` means medium, and `*` is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.
|
||||
Prendiamo ad esempio la classe `col-md-*` di Bootstrap. Qui, `md` significa medio, e `*` è un numero che specifica su quante colonne dovrebbe estendersi l'elemento. In questo caso, viene specificata la larghezza della colonna di un elemento su uno schermo di medie dimensioni, come un computer portatile.
|
||||
|
||||
In the Cat Photo App that we're building, we'll use `col-xs-*`, where `xs` means extra small (like an extra-small mobile phone screen), and `*` is the number of columns specifying how many columns wide the element should be.
|
||||
Nella Cat Photo App che stiamo costruendo, useremo `col-xs-*`, dove `xs` significa extra piccolo (come uno schermo del telefono cellulare extra-piccolo), e `*` è il numero di colonne che specifica su quante colonne dovrebbe estendersi l'elemento.
|
||||
|
||||
Put the `Like`, `Info` and `Delete` buttons side-by-side by nesting all three of them within one `<div class="row">` element, then each of them within a `<div class="col-xs-4">` element.
|
||||
Affianca i bottoni `Like`, `Info` e `Delete` annidandoli tutti e tre in un elemento `<div class="row">`, poi ognuno di essi all'interno di un elemento `<div class="col-xs-4">`.
|
||||
|
||||
The `row` class is applied to a `div`, and the buttons themselves can be nested within it.
|
||||
La classe `row` viene applicata a un `div`, e i bottoni stessi possono essere annidati al suo interno.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your buttons should all be nested within the same `div` element with the class `row`.
|
||||
I tuoi bottoni dovrebbero essere tutti annidati all'interno dello stesso elemento `div` di classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(button)').length > 0);
|
||||
```
|
||||
|
||||
Each of your Bootstrap buttons should be nested within its own `div` element with the class `col-xs-4`.
|
||||
Ognuno dei tuoi bottoni Bootstrap dovrebbe essere annidato all'interno del suo elemento `div` di classe `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-4:has(button)').length > 2);
|
||||
```
|
||||
|
||||
Each of your `button` elements should have a closing tag.
|
||||
Ognuno dei tuoi elementi `button` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -44,7 +44,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Each of your `div` elements should have a closing tag.
|
||||
Ognuno dei tuoi elementi `div` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -170,7 +170,7 @@ assert(
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348ce8acef08814
|
||||
title: Warn Your Users of a Dangerous Action with btn-danger
|
||||
title: Avvisare gli utenti di un'azione pericolosa con btn-danger
|
||||
challengeType: 0
|
||||
forumTopicId: 18375
|
||||
dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger
|
||||
@ -8,33 +8,33 @@ dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap comes with several pre-defined colors for buttons. The `btn-danger` class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.
|
||||
Bootstrap è dotato di diversi colori predefiniti per i pulsanti. La classe `btn-danger` è il colore che userai per notificare agli utenti che il bottone esegue un'azione distruttiva, come la cancellazione della foto di un gatto.
|
||||
|
||||
Create a button with the text `Delete` and give it the class `btn-danger`.
|
||||
Crea un bottone con il testo `Delete` e dagli una classe `btn-danger`.
|
||||
|
||||
Note that these buttons still need the `btn` and `btn-block` classes.
|
||||
Nota che questi pulsanti hanno ancora bisogno delle classi `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `button` element with the text `Delete`.
|
||||
Dovresti creare un nuovo elemento `button` con il testo `Delete`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('Delete', 'gi').test($('button').text()));
|
||||
```
|
||||
|
||||
All of your Bootstrap buttons should have the `btn` and `btn-block` classes.
|
||||
Tutti i bottoni di Bootstrap dovrebbero avere le classi `btn` e `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button.btn-block.btn').length > 2);
|
||||
```
|
||||
|
||||
Your new button should have the class `btn-danger`.
|
||||
Il tuo nuovo bottone dovrebbe avere la classe `btn-danger`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-danger'));
|
||||
```
|
||||
|
||||
All of your `button` elements should have closing tags.
|
||||
Tutti i tuoi elementi `button` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 564944c91be2204b269d51e3
|
||||
title: Change Text Inside an Element Using jQuery
|
||||
title: Cambiare il testo di un elemento usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 16773
|
||||
dashedName: change-text-inside-an-element-using-jquery
|
||||
@ -8,27 +8,27 @@ dashedName: change-text-inside-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
Using jQuery, you can change the text between the start and end tags of an element. You can even change HTML markup.
|
||||
Utilizzando jQuery, è possibile modificare il testo tra i tag di inizio e fine di un elemento. Puoi anche cambiare il markup HTML.
|
||||
|
||||
jQuery has a function called `.html()` that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.
|
||||
jQuery ha una funzione chiamata `.html()` che consente di aggiungere tag HTML e testo all'interno di un elemento. Qualsiasi contenuto esistente in precedenza all'interno dell'elemento verrà completamente sostituito con il contenuto fornito utilizzando questa funzione.
|
||||
|
||||
Here's how you would rewrite and emphasize the text of our heading:
|
||||
Ecco come riscrivere e sottolineare il testo della nostra intestazione:
|
||||
|
||||
```js
|
||||
$("h3").html("<em>jQuery Playground</em>");
|
||||
```
|
||||
|
||||
jQuery also has a similar function called `.text()` that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.
|
||||
jQuery ha anche una funzione simile chiamata `.text()` che modifica solo il testo senza aggiungere tag. In altre parole, questa funzione non valuterà alcun tag HTML che le sarà passato, ma lo tratterà invece come il testo con cui desideri sostituire il contenuto esistente.
|
||||
|
||||
Change the button with id `target4` by emphasizing its text.
|
||||
Cambia il pulsante con id `target4` enfatizzando il suo testo.
|
||||
|
||||
[View our news article for <em>](https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/#em-element) to learn the difference between `<i>` and `<em>` and their uses.
|
||||
[Vedi il nostro articolo delle news su <em>](https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/#em-element) per comprendere la differenza tra `<i>` e `<em>` e quando usarli.
|
||||
|
||||
Note that while the `<i>` tag has traditionally been used to emphasize text, it has since been adopted for use as a tag for icons. The `<em>` tag is now widely accepted as the tag for emphasis. Either will work for this challenge.
|
||||
Nota che il tag `<i>` era tradizionalmente utilizzato per mettere in corsivo il testo, ma oggi è usato come tag per le icone. Il tag `<em>` è ora ampiamente accettato come tag per l'enfasi. Entrambi funzioneranno per questa sfida.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should emphasize the text in your `target4` button by adding HTML tags.
|
||||
Dovresti enfatizzare il testo nel tuo pulsante `target4` aggiungendo dei tag HTML.
|
||||
|
||||
```js
|
||||
assert.isTrue(
|
||||
@ -36,25 +36,25 @@ assert.isTrue(
|
||||
);
|
||||
```
|
||||
|
||||
The text should otherwise remain unchanged.
|
||||
Il testo dovrebbe rimanere invariato.
|
||||
|
||||
```js
|
||||
assert($('#target4') && $('#target4').text().trim() === '#target4');
|
||||
```
|
||||
|
||||
You should not alter any other text.
|
||||
Non dovresti modificare nessun altro testo.
|
||||
|
||||
```js
|
||||
assert.isFalse(/<em>|<i>/gi.test($('h3').html()));
|
||||
```
|
||||
|
||||
You should be using `.html()` and not `.text()`.
|
||||
Dovresti usare `.html()` e non `.text()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.html\(/g));
|
||||
```
|
||||
|
||||
You should select `button id="target4"` with jQuery.
|
||||
Dovresti selezionare `button id="target4"` con jQuery.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\(\s*?(\"|\')#target4(\"|\')\s*?\)\.html\(/));
|
||||
|
||||
@ -1,40 +1,41 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed908826
|
||||
title: Change the CSS of an Element Using jQuery
|
||||
title: Cambiare il CSS di un elemento usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 16776
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: change-the-css-of-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
We can also change the CSS of an HTML element directly with jQuery.
|
||||
Possiamo anche cambiare direttamente il CSS di un elemento HTML con jQuery.
|
||||
|
||||
jQuery has a function called `.css()` that allows you to change the CSS of an element.
|
||||
jQuery ha una funzione chiamata `.css()` che consente di cambiare il CSS di un elemento.
|
||||
|
||||
Here's how we would change its color to blue:
|
||||
Ecco come potremmo cambiare il suo colore in blu:
|
||||
|
||||
```js
|
||||
$("#target1").css("color", "blue");
|
||||
```
|
||||
|
||||
This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.
|
||||
Questo è leggermente diverso da una normale dichiarazione CSS, perché la proprietà CSS e il suo valore sono tra virgolette e separati da una virgola invece che dai due punti.
|
||||
|
||||
Delete your jQuery selectors, leaving an empty `document ready function`.
|
||||
Elimina i tuoi selettori jQuery, lasciando una `document ready function` vuota.
|
||||
|
||||
Select `target1` and change its color to red.
|
||||
Seleziona `target1` e cambia il suo colore in rosso.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `target1` element should have red text.
|
||||
Il tuo elemento `target1` dovrebbe avere un testo rosso.
|
||||
|
||||
```js
|
||||
assert($('#target1').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Dovresti usare solo jQuery per aggiungere queste classi all'elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed508826
|
||||
title: Clone an Element Using jQuery
|
||||
title: Clonare un elemento usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 16780
|
||||
dashedName: clone-an-element-using-jquery
|
||||
@ -8,35 +8,35 @@ dashedName: clone-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
In addition to moving elements, you can also copy them from one place to another.
|
||||
Oltre a spostare gli elementi, è anche possibile copiarli da una posizione all'altra.
|
||||
|
||||
jQuery has a function called `clone()` that makes a copy of an element.
|
||||
jQuery ha una funzione chiamata `clone()` che fa la copia di un elemento.
|
||||
|
||||
For example, if we wanted to copy `target2` from our `left-well` to our `right-well`, we would use:
|
||||
Ad esempio, se volessimo copiare `target2` dal nostro `left-well` al nostro `right-well` potremmo utilizzare:
|
||||
|
||||
```js
|
||||
$("#target2").clone().appendTo("#right-well");
|
||||
```
|
||||
|
||||
Did you notice this involves sticking two jQuery functions together? This is called <dfn>function chaining</dfn> and it's a convenient way to get things done with jQuery.
|
||||
Hai notato che abbiamo attaccato insieme due funzioni jQuery? Questo si chiama <dfn>concatenazione di funzioni</dfn> ed è un modo conveniente per fare le cose con jQuery.
|
||||
|
||||
Clone your `target5` element and append it to your `left-well`.
|
||||
Clona il tuo elemento `target5` e aggiungilo al tuo `left-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `target5` element should be inside your `right-well`.
|
||||
Il tuo elemento `target5` dovrebbe essere all'interno del `right-well`.
|
||||
|
||||
```js
|
||||
assert($('#right-well').children('#target5').length > 0);
|
||||
```
|
||||
|
||||
A copy of your `target5` element should also be inside your `left-well`.
|
||||
Una copia del tuo elemento `target5` dovrebbe essere all'interno del `left-well`.
|
||||
|
||||
```js
|
||||
assert($('#left-well').children('#target5').length > 0);
|
||||
```
|
||||
|
||||
You should only use jQuery to move these elements.
|
||||
Dovresti usare solo jQuery per spostare questi elementi.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
|
||||
@ -1,46 +1,47 @@
|
||||
---
|
||||
id: bad87fee1348bd9aeda08726
|
||||
title: Delete Your jQuery Functions
|
||||
title: Eliminare le funzioni jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 17561
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: delete-your-jquery-functions
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
These animations were cool at first, but now they're getting kind of distracting.
|
||||
Queste animazioni erano interessanti in un primo momento, ma ora stanno diventando una distrazione.
|
||||
|
||||
Delete all three of these jQuery functions from your `document ready function`, but leave your `document ready function` itself intact.
|
||||
Elimina tutte e tre queste funzioni jQuery dalla tua `document ready function`, ma lascia intatta la `document ready function` stessa.
|
||||
|
||||
# --hints--
|
||||
|
||||
All three of your jQuery functions should be deleted from your `document ready function`.
|
||||
Tutte e tre le funzioni jQuery dovrebbero essere eliminate dalla `document ready function`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\{\s*\}\);/g));
|
||||
```
|
||||
|
||||
You should leave your `script` element intact.
|
||||
Dovresti lasciare intatto l'elemento `script`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<script>/g));
|
||||
```
|
||||
|
||||
You should leave your `$(document).ready(function() {` at the beginning of your `script` element.
|
||||
Dovresti lasciare l'elemento `$(document).ready(function() {` all'inizio del tuo `script`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\(document\)\.ready\(function\(\)\s?\{/g));
|
||||
```
|
||||
|
||||
You should leave the `document.ready` function's closing `})` intact.
|
||||
Dovresti lasciare intatte le parentesi `})` della funzione `document.ready`.
|
||||
|
||||
```js
|
||||
assert(code.match(/.*\s*\}\);/g));
|
||||
```
|
||||
|
||||
You should leave your `script` element closing tag intact.
|
||||
Dovresti lasciare intatto il tag di chiusura dell'elemento `script`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed808826
|
||||
title: Disable an Element Using jQuery
|
||||
title: Disabilitare un elemento usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 17563
|
||||
dashedName: disable-an-element-using-jquery
|
||||
@ -8,23 +8,23 @@ dashedName: disable-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.
|
||||
Con jQuery è anche possibile modificare le proprietà non-CSS degli elementi HTML. Ad esempio, è possibile disabilitare i bottoni.
|
||||
|
||||
When you disable a button, it will become grayed-out and can no longer be clicked.
|
||||
Se disattivi un bottone, esso diventerà grigio e non potrà più essere cliccato.
|
||||
|
||||
jQuery has a function called `.prop()` that allows you to adjust the properties of elements.
|
||||
jQuery ha una funzione chiamata `.prop()` che consente di regolare le proprietà degli elementi.
|
||||
|
||||
Here's how you would disable all buttons:
|
||||
Ecco come disattivare tutti i bottoni:
|
||||
|
||||
```js
|
||||
$("button").prop("disabled", true);
|
||||
```
|
||||
|
||||
Disable only the `target1` button.
|
||||
Disabilita solo il bottone `target1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `target1` button should be disabled.
|
||||
Il bottone `target1` dovrebbe essere disabilitato.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,13 +34,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
No other buttons should be disabled.
|
||||
Nessun altro bottone dovrebbe essere disabilitato.
|
||||
|
||||
```js
|
||||
assert($('#target2') && !$('#target2').prop('disabled'));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Dovresti usare solo jQuery per aggiungere queste classi all'elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/disabled[^<]*>/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9acdd08826
|
||||
title: Learn How Script Tags and Document Ready Work
|
||||
title: Funzionamento dei tag Script e di Document Ready
|
||||
challengeType: 6
|
||||
forumTopicId: 18224
|
||||
dashedName: learn-how-script-tags-and-document-ready-work
|
||||
@ -8,23 +8,23 @@ dashedName: learn-how-script-tags-and-document-ready-work
|
||||
|
||||
# --description--
|
||||
|
||||
Now we're ready to learn jQuery, the most popular JavaScript tool of all time.
|
||||
Ora siamo pronti ad apprendere jQuery, lo strumento JavaScript più popolare di tutti i tempi.
|
||||
|
||||
Before we can start using jQuery, we need to add some things to our HTML.
|
||||
Prima di iniziare a usare jQuery, abbiamo bisogno di aggiungere alcune cose al nostro HTML.
|
||||
|
||||
First, add a `script` element at the top of your page. Be sure to close it on the following line.
|
||||
Innanzitutto, aggiungi un elemento `script` nella parte superiore della pagina. Assicurati di chiuderlo sulla linea seguente.
|
||||
|
||||
Your browser will run any JavaScript inside a `script` element, including jQuery.
|
||||
Il tuo browser eseguirà qualsiasi codice JavaScript all'interno di un elemento `script`, incluso jQuery.
|
||||
|
||||
Inside your `script` element, add this code: `$(document).ready(function() {` to your `script`. Then close it on the following line (still inside your `script` element) with: `});`
|
||||
All'interno del tuo elemento `script` aggiungi questo codice: `$(document).ready(function() {`. Quindi chiudilo sulla riga seguente (ancora all'interno del tuo elemento `script`) con: `});`
|
||||
|
||||
We'll learn more about `functions` later. The important thing to know is that code you put inside this `function` will run as soon as your browser has loaded your page.
|
||||
Impareremo di più sulle `functions` (funzioni) successivamente. La cosa importante da sapere è che il codice che hai inserito all'interno di questa `function` verrà eseguito non appena il tuo browser avrà caricato la pagina.
|
||||
|
||||
This is important because without your `document ready function`, your code may run before your HTML is rendered, which would cause bugs.
|
||||
Questo è importante perché senza la `document ready function`, il tuo codice potrebbe essere eseguito prima che il l'HTML venga presentato, causando dei bug.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `script` element making sure it is valid and has a closing tag.
|
||||
Dovresti creare un elemento `script` assicurandoti che sia valido e abbia un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,7 +39,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should add `$(document).ready(function() {` to the beginning of your `script` element.
|
||||
Dovresti aggiungere `$(document).ready(function() {` all'inizio del tuo elemento `script`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -49,7 +49,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should close your `$(document).ready(function() {` function with `});`
|
||||
Dovresti chiudere la tua funzione `$(document).ready(function() {` con `});`
|
||||
|
||||
```js
|
||||
assert(code.match(/\n*?\s*?\}\s*?\);/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed708826
|
||||
title: Remove an Element Using jQuery
|
||||
title: Rimuovere un elemento usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18262
|
||||
dashedName: remove-an-element-using-jquery
|
||||
@ -8,15 +8,15 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's remove an HTML element from your page using jQuery.
|
||||
Ora rimuoviamo un elemento HTML dalla pagina usando jQuery.
|
||||
|
||||
jQuery has a function called `.remove()` that will remove an HTML element entirely
|
||||
jQuery ha una funzione chiamata `.remove()` per farlo
|
||||
|
||||
Remove the `#target4` element from the page by using the `.remove()` function.
|
||||
Rimuovi l'elemento `#target4` dalla pagina utilizzando la funzione `.remove()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use jQuery to remove your `target4` element from your page.
|
||||
Dovresti usare jQuery per rimuovere l'elemento `target4` dalla tua pagina.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -24,7 +24,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should only use jQuery to remove this element.
|
||||
Dovresti usare solo jQuery per rimuovere questo elemento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,40 +1,41 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed918626
|
||||
title: Remove Classes from an Element with jQuery
|
||||
title: Rimuovere classi da un elemento con jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18264
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: remove-classes-from-an-element-with-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the same way you can add classes to an element with jQuery's `addClass()` function, you can remove them with jQuery's `removeClass()` function.
|
||||
Proprio come puoi aggiungere classi a un elemento con la funzione `addClass()` di jQuery, puoi rimuoverle con la funzione `removeClass()`.
|
||||
|
||||
Here's how you would do this for a specific button:
|
||||
Ecco come potresti farlo per un pulsante specifico:
|
||||
|
||||
```js
|
||||
$("#target2").removeClass("btn-default");
|
||||
```
|
||||
|
||||
Let's remove the `btn-default` class from all of our `button` elements.
|
||||
Rimuoviamo la classe `btn-default` da tutti i nostri elementi `button`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `btn-default` class should be removed from all of your `button` elements.
|
||||
La classe `btn-default` dovrebbe essere rimossa da tutti i tuoi elementi `button`.
|
||||
|
||||
```js
|
||||
assert($('.btn-default').length === 0);
|
||||
```
|
||||
|
||||
You should only use jQuery to remove this class from the element.
|
||||
Dovresti usare solo jQuery per rimuovere questa classe dall'elemento.
|
||||
|
||||
```js
|
||||
assert(code.match(/btn btn-default/g));
|
||||
```
|
||||
|
||||
You should only remove the `btn-default` class.
|
||||
Dovresti rimuovere solo la classe `btn-default`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,32 +1,33 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed108826
|
||||
title: Target a Specific Child of an Element Using jQuery
|
||||
title: Individuare il figlio specifico di un elemento usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18315
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-a-specific-child-of-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You've seen why id attributes are so convenient for targeting with jQuery selectors. But you won't always have such neat ids to work with.
|
||||
Hai già visto che gli attributi id sono molto convenienti per selezionare degli elementi con jQuery. Ma non avrai sempre degli id puliti con cui lavorare.
|
||||
|
||||
Fortunately, jQuery has some other tricks for targeting the right elements.
|
||||
Fortunatamente, jQuery ha degli altri trucchi per la selezione degli elementi desiderati.
|
||||
|
||||
jQuery uses CSS Selectors to target elements. The `target:nth-child(n)` CSS selector allows you to select all the nth elements with the target class or element type.
|
||||
jQuery utilizza i selettori CSS per identificare gli elementi. Il selettore CSS `target:nth-child(n)` consente di selezionare tutti gli ennesimi elementi di una certa classe o tipo.
|
||||
|
||||
Here's how you would give the third element in each well the bounce class:
|
||||
Ecco come potresti dare al terzo elemento in ogni well la classe bounce:
|
||||
|
||||
```js
|
||||
$(".target:nth-child(3)").addClass("animated bounce");
|
||||
```
|
||||
|
||||
Make the second child in each of your well elements bounce. You must select the elements' children with the `target` class.
|
||||
Fai rimbalzare il secondo figlio in ciascuno dei tuoi elementi well. Devi selezionare i figli degli elementi con la classe `target`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The second element in your `target` elements should bounce.
|
||||
Il secondo elemento negli elementi `target` dovrebbe rimbalzare.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,19 +36,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Only two elements should bounce.
|
||||
Solo due elementi dovrebbero rimbalzare.
|
||||
|
||||
```js
|
||||
assert($('.animated.bounce').length === 2);
|
||||
```
|
||||
|
||||
You should use the `:nth-child()` selector to modify these elements.
|
||||
Dovresti usare il selettore `:nth-child()` per modificare questi elementi.
|
||||
|
||||
```js
|
||||
assert(code.match(/\:nth-child\(/g));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Dovresti usare solo jQuery per aggiungere queste classi all'elemento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,26 +1,27 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08826
|
||||
title: Target Elements by Class Using jQuery
|
||||
title: Individuare elementi per classe usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18316
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-elements-by-class-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You see how we made all of your `button` elements bounce? We selected them with `$("button")`, then we added some CSS classes to them with `.addClass("animated bounce");`.
|
||||
Vedi come abbiamo fatto rimbalzare tutti gli elementi del tuo `button`? Li abbiamo selezionati con `$("button")`, poi abbiamo aggiunto alcune classi CSS con `.addClass("animated bounce");`.
|
||||
|
||||
You just used jQuery's `.addClass()` function, which allows you to add classes to elements.
|
||||
Hai appena usato la funzione `.addClass()` di jQuery, che ti permette di aggiungere classi agli elementi.
|
||||
|
||||
First, let's target your `div` elements with the class `well` by using the `$(".well")` selector.
|
||||
Innanzitutto, individuiamo bene gli elementi `div` con la classe `well` utilizzando il selettore `$(".well")`.
|
||||
|
||||
Note that, just like with CSS declarations, you type a `.` before the class's name.
|
||||
Nota che, proprio come con le dichiarazioni CSS, devi digitare un `.` prima del nome della classe.
|
||||
|
||||
Then use jQuery's `.addClass()` function to add the classes `animated` and `shake`.
|
||||
Quindi usa la funzione `.addClass()` di jQuery per aggiungere le classi `animated` e `shake`.
|
||||
|
||||
For example, you could make all the elements with the class `text-primary` shake by adding the following to your `document ready function`:
|
||||
Ad esempio, potresti scuotere tutti gli elementi di classe `text-primary` aggiungendo quanto segue alla tua `document ready function`:
|
||||
|
||||
```js
|
||||
$(".text-primary").addClass("animated shake");
|
||||
@ -28,13 +29,13 @@ $(".text-primary").addClass("animated shake");
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the jQuery `addClass()` function to give the classes `animated` and `shake` to all your elements with the class `well`.
|
||||
Dovresti usare la funzione jQuery `addClass()` per dare le classi `animated` e `shake` a tutti i tuoi elementi di classe `well`.
|
||||
|
||||
```js
|
||||
assert($('.well').hasClass('animated') && $('.well').hasClass('shake'));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Dovresti usare solo jQuery per aggiungere queste classi all'elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class\.\*animated/g));
|
||||
|
||||
@ -1,24 +1,25 @@
|
||||
---
|
||||
id: bad87fee1348bd9aeda08826
|
||||
title: Target Elements by id Using jQuery
|
||||
title: Identificare elementi per id usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18317
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-elements-by-id-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can also target elements by their id attributes.
|
||||
Puoi anche selezionare gli elementi in base ai loro attributi id.
|
||||
|
||||
First target your `button` element with the id `target3` by using the `$("#target3")` selector.
|
||||
Prima identifica il tuo `button` con l'id `target3` utilizzando il selettore `$("#target3")`.
|
||||
|
||||
Note that, just like with CSS declarations, you type a `#` before the id's name.
|
||||
Nota che, proprio come con le dichiarazioni CSS, digiti un `#` prima dell'id.
|
||||
|
||||
Then use jQuery's `.addClass()` function to add the classes `animated` and `fadeOut`.
|
||||
Quindi usa la funzione `.addClass()` di jQuery per aggiungere le classi `animated` e `fadeOut`.
|
||||
|
||||
Here's how you'd make the `button` element with the id `target6` fade out:
|
||||
Ecco come far dissolvere l'elemento `button` con l'id `target6`:
|
||||
|
||||
```js
|
||||
$("#target6").addClass("animated fadeOut");
|
||||
@ -26,13 +27,13 @@ $("#target6").addClass("animated fadeOut");
|
||||
|
||||
# --hints--
|
||||
|
||||
You should select the `button` element with the `id` of `target3` and use the jQuery `addClass()` function to give it the class of `animated`.
|
||||
Dovresti selezionare l'elemento `button` con l'`id` di `target3` e usare la funzione jQuery `addClass()` per dargli la classe `animated`.
|
||||
|
||||
```js
|
||||
assert($('#target3').hasClass('animated'));
|
||||
```
|
||||
|
||||
You should target the element with the id `target3` and use the jQuery `addClass()` function to give it the class `fadeOut`.
|
||||
Dovresti selezionare l'elemento con l'id `target3` e usare la funzione jQuery `addClass()` per dargli la classe `fadeOut`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -41,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Dovresti usare solo jQuery per aggiungere queste classi all'elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
|
||||
@ -1,30 +1,31 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed008826
|
||||
title: Target Even Elements Using jQuery
|
||||
title: Identificare gli elementi pari usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18318
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-even-elements-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can also target elements based on their positions using `:odd` or `:even` selectors.
|
||||
Puoi anche selezionare gli elementi in base alle loro posizioni utilizzando i selettori `:odd` (dispari) o `:even` (pari).
|
||||
|
||||
Note that jQuery is zero-indexed which means the first element in a selection has a position of 0. This can be a little confusing as, counter-intuitively, `:odd` selects the second element (position 1), fourth element (position 3), and so on.
|
||||
Nota che jQuery è indicizzato a zero, il che significa che il primo elemento di una selezione ha una posizione di 0. Questo può confondere un po' perché, contro-intuitivamente, `:odd` seleziona il secondo elemento (posizione 1), il quarto elemento (posizione 3), e così via.
|
||||
|
||||
Here's how you would target all the odd elements with class `target` and give them classes:
|
||||
Ecco come fare riferimento a tutti gli elementi dispari di classe `target` e assegnare loro delle classi:
|
||||
|
||||
```js
|
||||
$(".target:odd").addClass("animated shake");
|
||||
```
|
||||
|
||||
Try selecting all the even `target` elements and giving them the classes of `animated` and `shake`. Remember that **even** refers to the position of elements with a zero-based system in mind.
|
||||
Prova a selezionare tutti gli elementi `target` e a dare loro le classi di `animated` e `shake`. Ricorda che **even** si riferisce alla posizione degli elementi con un sistema a base zero.
|
||||
|
||||
# --hints--
|
||||
|
||||
All of the `target` elements that jQuery considers to be even should shake.
|
||||
Tutti gli elementi `target` che jQuery considera essere pari dovrebbero scuotersi.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -32,13 +33,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should use the `:even` selector to modify these elements.
|
||||
Dovresti usare il selettore `:even` per modificare questi elementi.
|
||||
|
||||
```js
|
||||
assert(code.match(/\:even/g));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Dovresti usare solo jQuery per aggiungere queste classi all'elemento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,44 +1,45 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedc08826
|
||||
title: Target HTML Elements with Selectors Using jQuery
|
||||
title: Identificare gli elementi HTML con i selettori usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18319
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-html-elements-with-selectors-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now we have a `document ready function`.
|
||||
Ora abbiamo una `document ready function`.
|
||||
|
||||
Now let's write our first jQuery statement. All jQuery functions start with a `$`, usually referred to as a dollar sign operator, or as bling.
|
||||
Ora scriviamo la nostra prima istruzione jQuery. Tutte le funzioni di jQuery iniziano con un `$`, di solito indicato come operatore di segno del dollaro, o "bling".
|
||||
|
||||
jQuery often selects an HTML element with a <dfn>selector</dfn>, then does something to that element.
|
||||
jQuery identifica spesso un elemento HTML con un <dfn>selettore</dfn>, quindi fa qualcosa a quell'elemento.
|
||||
|
||||
For example, let's make all of your `button` elements bounce. Just add this code inside your document ready function:
|
||||
Ad esempio, facciamo rimbalzare tutti gli elementi `button`. Basta aggiungere questo codice all'interno della document ready function:
|
||||
|
||||
```js
|
||||
$("button").addClass("animated bounce");
|
||||
```
|
||||
|
||||
Note that we've already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css `bounce` class to your `button` elements.
|
||||
Nota che abbiamo già incluso sia la libreria jQuery che la libreria Animate.css in background in modo che tu possa usarle nell'editor. Quindi stai usando jQuery per applicare la classe Animate.css `bounce` ai tuoi elementi `button`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the jQuery `addClass()` function to give the classes `animated` and `bounce` to your `button` elements.
|
||||
Dovresti usare la funzione jQuery `addClass()` per dare alle classi `animated` e `bounce` ai tuoi elementi `button`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('animated') && $('button').hasClass('bounce'));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Dovresti usare solo jQuery per aggiungere queste classi all'elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
Your jQuery code should be within the `$(document).ready();` function.
|
||||
Il tuo codice jQuery dovrebbe essere all'interno della funzione `$(document).ready();`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed208826
|
||||
title: Target the Children of an Element Using jQuery
|
||||
title: Identificare i figli di un elemento usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18320
|
||||
dashedName: target-the-children-of-an-element-using-jquery
|
||||
@ -8,11 +8,11 @@ dashedName: target-the-children-of-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
When HTML elements are placed one level below another they are called <dfn>children</dfn> of that element. For example, the button elements in this challenge with the text `#target1`, `#target2`, and `#target3` are all children of the `<div class="well" id="left-well">` element.
|
||||
Quando gli elementi HTML sono posizionati un livello sotto un altro, vengono chiamati <dfn>figli</dfn> di quell'elemento. Ad esempio, gli elementi button in questa sfida con il testo `#target1`, `#target2`, e `#target3` sono tutti figli dell'elemento `<div class="well" id="left-well">`.
|
||||
|
||||
jQuery has a function called `children()` that allows you to access the children of whichever element you've selected.
|
||||
jQuery ha una funzione chiamata `children()` che consente di accedere ai figli di qualsiasi elemento selezionato.
|
||||
|
||||
Here's an example of how you would use the `children()` function to give the children of your `left-well` element the color `blue`:
|
||||
Ecco un esempio di come usare la funzione `children()` per dare ai figli del tuo elemento `left-well` il colore `blue`:
|
||||
|
||||
```js
|
||||
$("#left-well").children().css("color", "blue")
|
||||
@ -20,23 +20,23 @@ $("#left-well").children().css("color", "blue")
|
||||
|
||||
# --instructions--
|
||||
|
||||
Give all the children of your `right-well` element the color orange.
|
||||
Dai a tutti i figli del tuo elemento `right-well` il colore arancione.
|
||||
|
||||
# --hints--
|
||||
|
||||
All children of `#right-well` should have orange text.
|
||||
Tutti i figli di `#right-well` dovrebbero avere un testo arancione.
|
||||
|
||||
```js
|
||||
assert($('#right-well').children().css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
You should use the `children()` function to modify these elements.
|
||||
Dovresti usare la funzione `children()` per modificare questi elementi.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.children\(\)\.css/g));
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Dovresti usare solo jQuery per aggiungere queste classi all'elemento.
|
||||
|
||||
```js
|
||||
assert(code.match(/<div class="well" id="right-well">/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed308826
|
||||
title: Target the Parent of an Element Using jQuery
|
||||
title: Identificare il genitore di un elemento usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18321
|
||||
dashedName: target-the-parent-of-an-element-using-jquery
|
||||
@ -8,23 +8,23 @@ dashedName: target-the-parent-of-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
Every HTML element has a `parent` element from which it `inherits` properties.
|
||||
Ogni elemento HTML ha un elemento `parent` (genitore) dal quale eredita (`inherits`) delle proprietà.
|
||||
|
||||
For example, your `jQuery Playground` `h3` element has the parent element of `<div class="container-fluid">`, which itself has the parent `body`.
|
||||
Ad esempio, il tuo elemento `jQuery Playground` di tipo `h3` ha l'elemento genitore di `<div class="container-fluid">`, che a sua volta ha il genitore `body`.
|
||||
|
||||
jQuery has a function called `parent()` that allows you to access the parent of whichever element you've selected.
|
||||
jQuery ha una funzione chiamata `parent()` che consente di accedere al genitore di qualsiasi elemento selezionato.
|
||||
|
||||
Here's an example of how you would use the `parent()` function if you wanted to give the parent element of the `left-well` element a background color of blue:
|
||||
Ecco un esempio di come utilizzare la funzione `parent()` per dare al genitore dell'elemento `left-well` un colore di sfondo di blu:
|
||||
|
||||
```js
|
||||
$("#left-well").parent().css("background-color", "blue")
|
||||
```
|
||||
|
||||
Give the parent of the `#target1` element a background-color of red.
|
||||
Dai al genitore dell'elemento `#target1` un colore di sfondo rosso.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `left-well` element should have a red background.
|
||||
Il tuo elemento `left-well` dovrebbe avere uno sfondo rosso.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,13 +35,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should use the `.parent()` function to modify this element.
|
||||
Dovresti usare la funzione `.parent()` per modificare questo elemento.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g));
|
||||
```
|
||||
|
||||
The `.parent()` method should be called on the `#target1` element.
|
||||
Il metodo `.parent()` dovrebbe essere chiamato sull'elemento `#target1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -49,7 +49,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Dovresti usare solo jQuery per aggiungere queste classi all'elemento.
|
||||
|
||||
```js
|
||||
assert(code.match(/<div class="well" id="left-well">/g));
|
||||
|
||||
@ -1,50 +1,51 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed908626
|
||||
title: Target the Same Element with Multiple jQuery Selectors
|
||||
title: Identificare lo stesso elemento con diversi selettori jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18322
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-the-same-element-with-multiple-jquery-selectors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you know three ways of targeting elements: by type: `$("button")`, by class: `$(".btn")`, and by id `$("#target1")`.
|
||||
Ora conosci tre modi per identificare gli elementi: per tipo: `$("button")`, per classe: `$(".btn")`, e per id `$("#target1")`.
|
||||
|
||||
Although it is possible to add multiple classes in a single `.addClass()` call, let's add them to the same element in *three separate ways*.
|
||||
Anche se è possibile aggiungere più classi in una singola chiamata di `.addClass()`, aggiungiamole allo stesso elemento in *tre modi diversi*.
|
||||
|
||||
Using `.addClass()`, add only one class at a time to the same element, three different ways:
|
||||
Usando `.addClass()`, aggiungi una sola classe alla volta allo stesso elemento, in tre modi diversi:
|
||||
|
||||
Add the `animated` class to all elements with type `button`.
|
||||
Aggiungi la classe `animated` a tutti gli elementi di tipo `button`.
|
||||
|
||||
Add the `shake` class to all the buttons with class `.btn`.
|
||||
Aggiungi la classe `shake` a tutti i pulsanti di classe `.btn`.
|
||||
|
||||
Add the `btn-primary` class to the button with id `#target1`.
|
||||
Aggiungi la classe `btn-primary` al pulsante con id `#target1`.
|
||||
|
||||
**Note:** You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes `shake`, `animated`, and `btn-primary` to `#target1`.
|
||||
**Nota:** Dovresti identificare un elemento e aggiungere una sola classe alla volta. Complessivamente, i tuoi tre selettori individuali finiranno per aggiungere le tre classi `shake`, `animated`e `btn-primary` a `#target1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `$("button")` selector.
|
||||
Il tuo codice dovrebbe utilizzare il selettore `$("button")`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?button\s*?(?:'|")/gi));
|
||||
```
|
||||
|
||||
Your code should use the `$(".btn")` selector.
|
||||
Il tuo codice dovrebbe utilizzare il selettore `$(".btn")`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?\.btn\s*?(?:'|")/gi));
|
||||
```
|
||||
|
||||
Your code should use the `$("#target1")` selector.
|
||||
Il tuo codice dovrebbe utilizzare il selettore `$("#target1")`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")/gi));
|
||||
```
|
||||
|
||||
You should only add one class with each of your three selectors.
|
||||
Dovresti aggiungere una sola classe con ognuno dei tre selettori.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -53,7 +54,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `#target1` element should have the classes `animated`‚ `shake` and `btn-primary`.
|
||||
Il tuo elemento `#target1` dovrebbe avere le classi `animated`‚ `shake` e `btn-primary`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -63,7 +64,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should only use jQuery to add these classes to the element.
|
||||
Dovresti usare solo jQuery per aggiungere queste classi all'elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed608826
|
||||
title: Use appendTo to Move Elements with jQuery
|
||||
title: Usare appendTo per spostare gli elementi con jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18340
|
||||
dashedName: use-appendto-to-move-elements-with-jquery
|
||||
@ -8,33 +8,33 @@ dashedName: use-appendto-to-move-elements-with-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's try moving elements from one `div` to another.
|
||||
Ora proviamo a spostare gli elementi da un `div` ad un altro.
|
||||
|
||||
jQuery has a function called `appendTo()` that allows you to select HTML elements and append them to another element.
|
||||
jQuery ha una funzione chiamata `appendTo()` che consente di selezionare elementi HTML e aggiungerli ad un altro elemento.
|
||||
|
||||
For example, if we wanted to move `target4` from our right well to our left well, we would use:
|
||||
Per esempio, se volessimo spostare `target4` dal nostro well di destra a quello di sinistra, potremmo usare:
|
||||
|
||||
```js
|
||||
$("#target4").appendTo("#left-well");
|
||||
```
|
||||
|
||||
Move your `target2` element from your `left-well` to your `right-well`.
|
||||
Sposta il tuo elemento `target2` dal `left-well` al `right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `target2` element should not be inside your `left-well`.
|
||||
Il tuo elemento `target2` non dovrebbe essere all'interno del `left-well`.
|
||||
|
||||
```js
|
||||
assert($('#left-well').children('#target2').length === 0);
|
||||
```
|
||||
|
||||
Your `target2` element should be inside your `right-well`.
|
||||
Il tuo elemento `target2` dovrebbe essere all'interno del `right-well`.
|
||||
|
||||
```js
|
||||
assert($('#right-well').children('#target2').length > 0);
|
||||
```
|
||||
|
||||
You should only use jQuery to move these elements.
|
||||
Dovresti usare solo jQuery per spostare questi elementi.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
|
||||
@ -1,26 +1,27 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecb08826
|
||||
title: Use jQuery to Modify the Entire Page
|
||||
title: Usare jQuery per modificare l'intera pagina
|
||||
challengeType: 6
|
||||
forumTopicId: 18361
|
||||
required:
|
||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: use-jquery-to-modify-the-entire-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
We're done playing with our jQuery playground. Let's tear it down!
|
||||
Abbiamo finito di giocare con il nostro parco giochi jQuery. Demoliamolo!
|
||||
|
||||
jQuery can target the `body` element as well.
|
||||
jQuery può anche selezionare l'elemento `body`.
|
||||
|
||||
Here's how we would make the entire body fade out: `$("body").addClass("animated fadeOut");`
|
||||
Ecco come far svanire tutto il corpo: `$("body").addClass("animated fadeOut");`
|
||||
|
||||
But let's do something more dramatic. Add the classes `animated` and `hinge` to your `body` element.
|
||||
Ma facciamo qualcosa di più drammatico. Aggiungi le classi `animated` e `hinge` al tuo elemento `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the classes `animated` and `hinge` to your `body` element.
|
||||
Dovresti aggiungere le classi `animated` e `hinge` al tuo elemento `body`.
|
||||
|
||||
```js
|
||||
assert($('body').hasClass('animated') && $('body').hasClass('hinge'));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403616e
|
||||
title: Access Props Using this.props
|
||||
title: Accedere alle proprietà utilizzando this.props
|
||||
challengeType: 6
|
||||
forumTopicId: 301375
|
||||
dashedName: access-props-using-this-props
|
||||
@ -8,17 +8,17 @@ dashedName: access-props-using-this-props
|
||||
|
||||
# --description--
|
||||
|
||||
The last several challenges covered the basic ways to pass props to child components. But what if the child component that you're passing a prop to is an ES6 class component, rather than a stateless functional component? The ES6 class component uses a slightly different convention to access props.
|
||||
Le ultime sfide hanno mostrato i modi fondamentali per passare le proprietà ai componenti figli. Ma cosa succede se il componente figlio a cui stai passando una prop è un componente di classe ES6, piuttosto che un componente funzionale senza stato? Il componente di classe ES6 utilizza una convenzione leggermente diversa per accedere alle proprietà.
|
||||
|
||||
Anytime you refer to a class component within itself, you use the `this` keyword. To access props within a class component, you preface the code that you use to access it with `this`. For example, if an ES6 class component has a prop called `data`, you write `{this.props.data}` in JSX.
|
||||
Ogni volta che fai riferimento a un componente di classe all'interno di sé stesso, usi la parola chiave `this`. Per accedere alle proprietà all'interno di un componente di classe, premetti `this` al codice che usi per accedervi. Ad esempio, se un componente di classe ES6 ha una prop chiamata `data`, scriverai `{this.props.data}` in JSX.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Render an instance of the `ReturnTempPassword` component in the parent component `ResetPassword`. Here, give `ReturnTempPassword` a prop of `tempPassword` and assign it a value of a string that is at least 8 characters long. Within the child, `ReturnTempPassword`, access the `tempPassword` prop within the `strong` tags to make sure the user sees the temporary password.
|
||||
Mostra un'istanza del componente `ReturnTempPassword` nel componente padre `ResetPassword`. Qui, dai a `ReturnTempPassword` una prop di `tempPassword` e assegnale un valore stringa di almeno 8 caratteri. All'interno del figlio, `ReturnTempPassword`, accedi alla prop `tempPassword` all'interno dei tag `strong` per assicurarti che l'utente veda la password temporanea.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `ResetPassword` component should return a single `div` element.
|
||||
Il componente `ResetPassword` dovrebbe restituire un singolo elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth child of `ResetPassword` should be the `ReturnTempPassword` component.
|
||||
Il quarto figlio di `ResetPassword` dovrebbe essere il componente `ReturnTempPassword`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `ReturnTempPassword` component should have a prop called `tempPassword`.
|
||||
Il componente `ReturnTempPassword` dovrebbe avere una prop chiamata `tempPassword`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `tempPassword` prop of `ReturnTempPassword` should be equal to a string of at least 8 characters.
|
||||
L'elemento `tempPassword` di `ReturnTempPassword` dovrebbe essere uguale a una stringa di almeno 8 caratteri.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -66,7 +66,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `ReturnTempPassword` component should display the password you create as the `tempPassword` prop within `strong` tags.
|
||||
Il componente `ReturnTempPassword` dovrebbe visualizzare la password che crei come prop `tempPassword` all'interno dei tag `strong`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24bbe0dba28a8d3cbd4c5e
|
||||
title: Add Comments in JSX
|
||||
title: Aggiungere commenti in JSX
|
||||
challengeType: 6
|
||||
forumTopicId: 301376
|
||||
dashedName: add-comments-in-jsx
|
||||
@ -8,35 +8,35 @@ dashedName: add-comments-in-jsx
|
||||
|
||||
# --description--
|
||||
|
||||
JSX is a syntax that gets compiled into valid JavaScript. Sometimes, for readability, you might need to add comments to your code. Like most programming languages, JSX has its own way to do this.
|
||||
JSX è una sintassi che viene compilata in JavaScript valido. A volte, per la leggibilità, potresti aver bisogno di aggiungere commenti al tuo codice. Come la maggior parte dei linguaggi di programmazione, JSX ha il proprio modo di farlo.
|
||||
|
||||
To put comments inside JSX, you use the syntax `{/* */}` to wrap around the comment text.
|
||||
Per inserire i commenti all'interno di JSX, si utilizza la sintassi `{/* */}` per racchiudere il testo del commento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has a JSX element similar to what you created in the last challenge. Add a comment somewhere within the provided `div` element, without modifying the existing `h1` or `p` elements.
|
||||
L'editor di codice contiene un elemento JSX simile a quello creato nell'ultima sfida. Aggiungi un commento da qualche parte all'interno dell'elemento `div` fornito, senza modificare gli elementi `h1` o `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The constant `JSX` should return a `div` element.
|
||||
La costante `JSX` dovrebbe restituire un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(JSX.type === 'div');
|
||||
```
|
||||
|
||||
The `div` should contain an `h1` tag as the first element.
|
||||
Il `div` dovrebbe contenere un tag `h1` come primo elemento.
|
||||
|
||||
```js
|
||||
assert(JSX.props.children[0].type === 'h1');
|
||||
```
|
||||
|
||||
The `div` should contain a `p` tag as the second element.
|
||||
Il `div` dovrebbe contenere un tag `p` come secondo elemento.
|
||||
|
||||
```js
|
||||
assert(JSX.props.children[1].type === 'p');
|
||||
```
|
||||
|
||||
The existing `h1` and `p` elements should not be modified.
|
||||
Gli elementi `h1` e `p` esistenti non dovrebbero essere modificati.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `JSX` should use valid comment syntax.
|
||||
Il `JSX` dovrebbe usare la sintassi valida per i commenti.
|
||||
|
||||
```js
|
||||
assert(/<div>[\s\S]*{\s*\/\*[\s\S]*\*\/\s*}[\s\S]*<\/div>/.test(code));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403617e
|
||||
title: Add Event Listeners
|
||||
title: Aggiungere listener di eventi
|
||||
challengeType: 6
|
||||
forumTopicId: 301377
|
||||
dashedName: add-event-listeners
|
||||
@ -8,19 +8,19 @@ dashedName: add-event-listeners
|
||||
|
||||
# --description--
|
||||
|
||||
The `componentDidMount()` method is also the best place to attach any event listeners you need to add for specific functionality. React provides a synthetic event system which wraps the native event system present in browsers. This means that the synthetic event system behaves exactly the same regardless of the user's browser - even if the native events may behave differently between different browsers.
|
||||
Il metodo `componentDidMount()` è anche il posto migliore per allegare i listener di eventi di cui hai bisogno per aggiungere funzionalità specifiche. React fornisce un sistema di eventi sintetico che avvolge il sistema nativo di eventi presente nei browser. Questo significa che il sistema di eventi sintetico si comporta esattamente allo stesso modo indipendentemente dal browser dell'utente - anche se gli eventi nativi possono comportarsi in modo diverso tra i diversi browser.
|
||||
|
||||
You've already been using some of these synthetic event handlers such as `onClick()`. React's synthetic event system is great to use for most interactions you'll manage on DOM elements. However, if you want to attach an event handler to the document or window objects, you have to do this directly.
|
||||
Hai già utilizzato alcuni di questi gestori di eventi sintetici come `onClick()`. Il sistema di eventi sintetici di React è ottimo da utilizzare per la maggior parte delle interazioni che gestirai su elementi del DOM. Tuttavia, se desideri collegare un gestore di eventi agli oggetti document o window, è necessario farlo direttamente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Attach an event listener in the `componentDidMount()` method for `keydown` events and have these events trigger the callback `handleKeyPress()`. You can use `document.addEventListener()` which takes the event (in quotes) as the first argument and the callback as the second argument.
|
||||
Collega un listener (ascoltatore) di eventi nel metodo `componentDidMount()` per gli eventi `keydown` e fai sì che questi eventi attivino la callback `handleKeyPress()`. È possibile utilizzare `document.addEventListener()` che riceve l'evento (tra virgolette) come primo argomento e la callback come secondo argomento.
|
||||
|
||||
Then, in `componentWillUnmount()`, remove this same event listener. You can pass the same arguments to `document.removeEventListener()`. It's good practice to use this lifecycle method to do any clean up on React components before they are unmounted and destroyed. Removing event listeners is an example of one such clean up action.
|
||||
Poi, in `componentWillUnmount()`, rimuovi questo stesso listener di eventi. Puoi passare gli stessi argomenti a `document.removeEventListener()`. È buona pratica utilizzare questo metodo del ciclo di vita per fare qualsiasi pulizia di componenti React prima che siano smontati e distrutti. Rimuovere i listener di eventi è un esempio di questa azione di pulizia.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should render a `div` element which wraps an `h1` tag.
|
||||
`MyComponent` dovrebbe mostrare un elemento `div` che contiene un tag `h1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -31,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
A `keydown` listener should be attached to the document in `componentDidMount`.
|
||||
Un listener `keydown` dovrebbe essere collegato al documento in `componentDidMount`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `keydown` listener should be removed from the document in `componentWillUnmount`.
|
||||
Il listener `keydown` dovrebbe essere rimosso dal documento in `componentWillUnmount`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -63,7 +63,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Once the component has mounted, pressing `enter` should update its state and the rendered `h1` tag.
|
||||
Una volta che il componente è montato, premendo `enter` si dovrebbe aggiornare il suo stato e il tag `h1` visualizzato.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036182
|
||||
title: Add Inline Styles in React
|
||||
title: Aggiungere stili in linea in React
|
||||
challengeType: 6
|
||||
forumTopicId: 301378
|
||||
dashedName: add-inline-styles-in-react
|
||||
@ -8,41 +8,41 @@ dashedName: add-inline-styles-in-react
|
||||
|
||||
# --description--
|
||||
|
||||
You may have noticed in the last challenge that there were several other syntax differences from HTML inline styles in addition to the `style` attribute set to a JavaScript object. First, the names of certain CSS style properties use camel case. For example, the last challenge set the size of the font with `fontSize` instead of `font-size`. Hyphenated words like `font-size` are invalid syntax for JavaScript object properties, so React uses camel case. As a rule, any hyphenated style properties are written using camel case in JSX.
|
||||
Nell'ultima sfida potresti aver notato che ci sono state diverse altre differenze di sintassi dagli stili HTML inline in aggiunta all'attributo `style` impostato su un oggetto JavaScript. In primo luogo, i nomi di alcune proprietà di stile CSS usano il camel case. Ad esempio, l'ultima sfida imposta la dimensione del carattere con `fontSize` invece di `font-size`. Le parole tratteggiate come `font-size` sono una sintassi non valida per le proprietà dell'oggetto JavaScript, quindi React usa il camel case. Di regola, tutte le proprietà di stile tratteggiate sono scritte utilizzando il camel case in JSX.
|
||||
|
||||
All property value length units (like `height`, `width`, and `fontSize`) are assumed to be in `px` unless otherwise specified. If you want to use `em`, for example, you wrap the value and the units in quotes, like `{fontSize: "4em"}`. Other than the length values that default to `px`, all other property values should be wrapped in quotes.
|
||||
Si assume che tutti i valori di lunghezza delle proprietà (come `height`, `width`, e `fontSize`) siano in `px` se non diversamente specificato. Se si desidera utilizzare `em`, ad esempio, dovrai inserire il valore e l'unità di misura tra virgolette, come ad esempio `{fontSize: "4em"}`. Oltre ai valori di lunghezza che hanno un'unità predefinita in `px`, tutti gli altri valori delle proprietà dovrebbero essere inseriti tra virgolette.
|
||||
|
||||
# --instructions--
|
||||
|
||||
If you have a large set of styles, you can assign a style `object` to a constant to keep your code organized. Declare your styles constant as a global variable at the top of the file. Initialize `styles` constant and assign an `object` with three style properties and their values to it. Give the `div` a color of `purple`, a font-size of `40`, and a border of `2px solid purple`. Then set the `style` attribute equal to the `styles` constant.
|
||||
Se hai molti stili, puoi assegnare un `object` style a una costante per mantenere il codice ordinato. Dichiara la tua costante di stile come variabile globale nella parte superiore del file. Inizializza la costante `styles` e assegna un `object` con tre proprietà di stile e i relativi valori ad essa. Dai al `div` un colore `purple`, un font-size di `40`, e un bordo di `2px solid purple`. Quindi imposta l'attributo `style` sulla costante `styles`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `styles` variable should be an `object` with three properties.
|
||||
La variabile `styles` dovrebbe essere un `object` con tre proprietà.
|
||||
|
||||
```js
|
||||
assert(Object.keys(styles).length === 3);
|
||||
```
|
||||
|
||||
The `styles` variable should have a `color` property set to a value of `purple`.
|
||||
La variabile `styles` dovrebbe avere una proprietà `color` impostata su un valore `purple`.
|
||||
|
||||
```js
|
||||
assert(styles.color === 'purple');
|
||||
```
|
||||
|
||||
The `styles` variable should have a `fontSize` property set to a value of `40`.
|
||||
La variabile `styles` dovrebbe avere una proprietà `fontSize` impostata su un valore di `40`.
|
||||
|
||||
```js
|
||||
assert(styles.fontSize === 40);
|
||||
```
|
||||
|
||||
The `styles` variable should have a `border` property set to a value of `2px solid purple`.
|
||||
La variabile `styles` dovrebbe avere una proprietà `border` impostata su un valore di `2px solid purple`.
|
||||
|
||||
```js
|
||||
assert(styles.border === '2px solid purple');
|
||||
```
|
||||
|
||||
The component should render a `div` element.
|
||||
Il componente dovrebbe presentare un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `div` element should have its styles defined by the `styles` object.
|
||||
L'elemento `div` dovrebbe avere i suoi stili definiti dall'oggetto `styles`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036174
|
||||
title: Bind 'this' to a Class Method
|
||||
title: Associare 'this' a un metodo di classe
|
||||
challengeType: 6
|
||||
forumTopicId: 301379
|
||||
dashedName: bind-this-to-a-class-method
|
||||
@ -8,23 +8,23 @@ dashedName: bind-this-to-a-class-method
|
||||
|
||||
# --description--
|
||||
|
||||
In addition to setting and updating `state`, you can also define methods for your component class. A class method typically needs to use the `this` keyword so it can access properties on the class (such as `state` and `props`) inside the scope of the method. There are a few ways to allow your class methods to access `this`.
|
||||
Oltre a impostare e aggiornare lo `state`, puoi anche definire i metodi per la tua classe componente. Un metodo di classe in genere deve usare la parola chiave `this` in modo da poter accedere alle proprietà della classe (come `state` e `props`) all'interno dell'ambito del metodo. Ci sono alcuni modi per consentire ai tuoi metodi di classe di accedere a `this`.
|
||||
|
||||
One common way is to explicitly bind `this` in the constructor so `this` becomes bound to the class methods when the component is initialized. You may have noticed the last challenge used `this.handleClick = this.handleClick.bind(this)` for its `handleClick` method in the constructor. Then, when you call a function like `this.setState()` within your class method, `this` refers to the class and will not be `undefined`.
|
||||
Un modo comune è quello di associare esplicitamente `this` nel costruttore così `this` viene associato ai metodi della classe quando il componente è inizializzato. Potresti aver notato che l'ultima sfida usava `this.handleClick = this.handleClick.bind(this)` per il suo metodo `handleClick` nel costruttore. Quindi, quando chiamerai una funzione come `this.setState()` all'interno del metodo di classe, `this` si riferirà alla classe e non sarà `undefined`.
|
||||
|
||||
**Note:** The `this` keyword is one of the most confusing aspects of JavaScript but it plays an important role in React. Although its behavior here is totally normal, these lessons aren't the place for an in-depth review of `this` so please refer to other lessons if the above is confusing!
|
||||
**Nota:** La parola chiave `this` è uno degli aspetti di JavaScript che confondono di più, ma svolge un ruolo importante in React. Anche se il suo comportamento qui è del tutto normale, queste lezioni non sono il luogo per un esame approfondito di `this` quindi ti consigliamo di fare riferimento ad altre lezioni se quanto visto sopra non ti è chiaro.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has a component with a `state` that keeps track of the text. It also has a method which allows you to set the text to `You clicked!`. However, the method doesn't work because it's using the `this` keyword that is undefined. Fix it by explicitly binding `this` to the `handleClick()` method in the component's constructor.
|
||||
L'editor di codice ha un componente con uno `state` che tiene traccia del testo. Ha anche un metodo che ti permette di impostare il testo su `You clicked!`. Tuttavia, il metodo non funziona perché usa la parola chiave `this` che è indefinita (undefined). Correggi il problema associando esplicitamente `this` al metodo `handleClick()` nel costruttore del componente.
|
||||
|
||||
Next, add a click handler to the `button` element in the render method. It should trigger the `handleClick()` method when the button receives a click event. Remember that the method you pass to the `onClick` handler needs curly braces because it should be interpreted directly as JavaScript.
|
||||
Successivamente, aggiungi un gestore di click all'elemento `button` nel metodo render. Esso dovrebbe attivare il metodo `handleClick()` quando il bottone riceve un evento click. Ricorda che il metodo che passi al gestore `onClick` necessita di parentesi graffe perché dovrebbe essere interpretato direttamente come JavaScript.
|
||||
|
||||
Once you complete the above steps you should be able to click the button and see `You clicked!`.
|
||||
Una volta completati i passaggi di cui sopra, dovresti essere in grado di fare clic sul bottone e vedere `You clicked!`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should return a `div` element which wraps two elements, a button and an `h1` element, in that order.
|
||||
`MyComponent` dovrebbe restituire un elemento `div` che avvolge due elementi: nell'ordine un bottone e un `h1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `MyComponent` should initialize with the key value pair `{ text: "Hello" }`.
|
||||
Lo stato di `MyComponent` dovrebbe essere inizializzato con la coppia chiave/valore `{ text: "Hello" }`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Clicking the `button` element should run the `handleClick` method and set the state `text` to `You clicked!`.
|
||||
Cliccando sull'elemento `button` dovrebbe essere eseguito il metodo `handleClick` e dovrebbe essere impostare lo stato `text` a `You clicked!`.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036189
|
||||
title: Change Inline CSS Conditionally Based on Component State
|
||||
title: Cambiare CSS inline condizionalmente in base allo stato dei componenti
|
||||
challengeType: 6
|
||||
forumTopicId: 301380
|
||||
dashedName: change-inline-css-conditionally-based-on-component-state
|
||||
@ -8,17 +8,17 @@ dashedName: change-inline-css-conditionally-based-on-component-state
|
||||
|
||||
# --description--
|
||||
|
||||
At this point, you've seen several applications of conditional rendering and the use of inline styles. Here's one more example that combines both of these topics. You can also render CSS conditionally based on the state of a React component. To do this, you check for a condition, and if that condition is met, you modify the styles object that's assigned to the JSX elements in the render method.
|
||||
A questo punto, hai visto diverse applicazioni del rendering condizionale e l'uso degli stili in linea. Ecco un altro esempio che combina entrambi questi argomenti. Puoi anche fare un render condizionale del CSS in base allo stato di un componente React. Per fare questo si valutare una condizione, e se tale condizione è soddisfatta si modifica l'oggetto styles assegnato agli elementi JSX nel metodo di render.
|
||||
|
||||
This paradigm is important to understand because it is a dramatic shift from the more traditional approach of applying styles by modifying DOM elements directly (which is very common with jQuery, for example). In that approach, you must keep track of when elements change and also handle the actual manipulation directly. It can become difficult to keep track of changes, potentially making your UI unpredictable. When you set a style object based on a condition, you describe how the UI should look as a function of the application's state. There is a clear flow of information that only moves in one direction. This is the preferred method when writing applications with React.
|
||||
Questo è un paradigma importante da capire, perché è un grande cambiamento rispetto all'approccio più tradizionale di applicare gli stili modificando direttamente gli elementi del DOM (cosa molto comune con jQuery, per esempio). In quell'approccio, è necessario tenere traccia di quando gli elementi cambiano e anche gestire direttamente la manipolazione effettiva. Può diventare difficile tenere traccia dei cambiamenti, rendendo potenzialmente imprevedibile la tua interfaccia utente. Quando imposti un oggetto di stile in base a una condizione, descrivi l'aspetto dell'interfaccia utente come una funzione dello stato dell'applicazione. Vi è un chiaro flusso di informazioni che si muove in una sola direzione. Questo è il metodo preferito quando si scrivono applicazioni con React.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has a simple controlled input component with a styled border. You want to style this border red if the user types more than 15 characters of text in the input box. Add a condition to check for this and, if the condition is valid, set the input border style to `3px solid red`. You can try it out by entering text in the input.
|
||||
L'editor di codice contiene un semplice componente di input controllato con un bordo stilizzato. Vogliamo rendere questo bordo rosso se l'utente digita più di 15 caratteri di testo nella casella di input. Aggiungi una condizione per controllare questo e, se la condizione è valida, imposta lo stile del bordo della casella di input a `3px solid red`. Puoi provarlo inserendo il testo nell'input.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `GateKeeper` component should render a `div` element.
|
||||
Il componente `GateKeeper` dovrebbe presentare un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `GateKeeper` component should be initialized with a state key `input` set to an empty string.
|
||||
Il componente `GateKeeper` dovrebbe essere inizializzato con una chiave di stato `input` impostata su una stringa vuota.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `GateKeeper` component should render an `h3` tag and an `input` tag.
|
||||
Il componente `GateKeeper` dovrebbe presentare un tag `h3` e un tag `input`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -54,7 +54,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `input` tag should initially have a style of `1px solid black` for the `border` property.
|
||||
Il tag `input` inizialmente dovrebbe avere uno stile di `1px solid black` per la proprietà `border`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -67,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `input` tag should be styled with a border of `3px solid red` if the input value in state is longer than 15 characters.
|
||||
Il tag `input` dovrebbe essere stilizzato con un bordo di `3px solid red` se il valore di input nello stato è più lungo di 15 caratteri.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036166
|
||||
title: Compose React Components
|
||||
title: Creare componenti React
|
||||
challengeType: 6
|
||||
forumTopicId: 301381
|
||||
dashedName: compose-react-components
|
||||
@ -8,17 +8,17 @@ dashedName: compose-react-components
|
||||
|
||||
# --description--
|
||||
|
||||
As the challenges continue to use more complex compositions with React components and JSX, there is one important point to note. Rendering ES6 style class components within other components is no different than rendering the simple components you used in the last few challenges. You can render JSX elements, stateless functional components, and ES6 class components within other components.
|
||||
Dato che le sfide continuano a utilizzare composizioni più complesse di componenti React e JSX, c'è un punto importante da osservare. Il rendering di componenti di classe stile ES6 all'interno di altri componenti non è diverso dal render dei componenti semplici che hai usato nelle ultime sfide. All'interno di altri componenti puoi fare il render di elementi JSX, componenti funzionali senza stato, e componenti di classe ES6.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the code editor, the `TypesOfFood` component is already rendering a component called `Vegetables`. Also, there is the `Fruits` component from the last challenge.
|
||||
Nell'editor di codice, il componente `TypesOfFood` sta già mostrando un componente chiamato `Vegetables`. Inoltre, c'è il componente `Fruits` preso dall'ultima sfida.
|
||||
|
||||
Nest two components inside of `Fruits` — first `NonCitrus`, and then `Citrus`. Both of these components are provided for you behind the scenes. Next, nest the `Fruits` class component into the `TypesOfFood` component, below the `h1` header and above `Vegetables`. The result should be a series of nested components, which uses two different component types.
|
||||
Annida due componenti all'interno di `Fruits` — prima `NonCitrus`, e poi `Citrus`. Entrambi questi componenti ti sono forniti dietro le quinte. Successivamente, annida il componente di classe `Fruits` nel componente `TypesOfFood`, sotto l'intestazione `h1` e sopra `Vegetables`. Il risultato dovrebbe essere una serie di componenti annidati, che utilizza due tipi di componenti diversi.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `TypesOfFood` component should return a single `div` element.
|
||||
Il componente `TypesOfFood` dovrebbe restituire un singolo elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `TypesOfFood` component should return the `Fruits` component.
|
||||
Il componente `TypesOfFood` dovrebbe restituire il componente `Fruits`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Fruits` component should return the `NonCitrus` component and the `Citrus` component.
|
||||
Il componente `Fruits` dovrebbe restituire il componente `NonCitrus` e il componente `Citrus`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -55,7 +55,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `TypesOfFood` component should return the `Vegetables` component below the `Fruits` component.
|
||||
Il componente `TypesOfFood` dovrebbe restituire il componente `Vegetables` sotto il componente `Fruits`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24bbe0dba28a8d3cbd4c5d
|
||||
title: Create a Complex JSX Element
|
||||
title: Creare un elemento JSX complesso
|
||||
challengeType: 6
|
||||
forumTopicId: 301382
|
||||
dashedName: create-a-complex-jsx-element
|
||||
@ -8,17 +8,17 @@ dashedName: create-a-complex-jsx-element
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge was a simple example of JSX, but JSX can represent more complex HTML as well.
|
||||
L'ultima sfida è stata un semplice esempio di JSX, ma JSX può rappresentare anche HTML più complesso.
|
||||
|
||||
One important thing to know about nested JSX is that it must return a single element.
|
||||
Una cosa importante da sapere sul JSX annidato è che deve restituire un singolo elemento.
|
||||
|
||||
This one parent element would wrap all of the other levels of nested elements.
|
||||
Questo elemento genitore avvolgerà tutti gli altri livelli di elementi annidati.
|
||||
|
||||
For instance, several JSX elements written as siblings with no parent wrapper element will not transpile.
|
||||
Per esempio, diversi elementi JSX scritti come fratelli senza un elemento genitore che li contenga, non saranno transcodificati.
|
||||
|
||||
Here's an example:
|
||||
Ecco un esempio:
|
||||
|
||||
**Valid JSX:**
|
||||
**JSX valido:**
|
||||
|
||||
```jsx
|
||||
<div>
|
||||
@ -28,7 +28,7 @@ Here's an example:
|
||||
</div>
|
||||
```
|
||||
|
||||
**Invalid JSX:**
|
||||
**JSX non valido:**
|
||||
|
||||
```jsx
|
||||
<p>Paragraph One</p>
|
||||
@ -38,39 +38,39 @@ Here's an example:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Define a new constant `JSX` that renders a `div` which contains the following elements in order:
|
||||
Definisci una nuova costante `JSX` che esegua il render di un `div` che contenga i seguenti elementi in ordine:
|
||||
|
||||
An `h1`, a `p`, and an unordered list that contains three `li` items. You can include any text you want within each element.
|
||||
Un `h1`, un `p`e una lista non ordinata che contiene tre elementi `li`. Puoi includere qualsiasi testo desideri all'interno di ogni elemento.
|
||||
|
||||
**Note:** When rendering multiple elements like this, you can wrap them all in parentheses, but it's not strictly required. Also notice this challenge uses a `div` tag to wrap all the child elements within a single parent element. If you remove the `div`, the JSX will no longer transpile. Keep this in mind, since it will also apply when you return JSX elements in React components.
|
||||
**Nota:** Quando si visualizzano più elementi come questo, è possibile avvolgerli tutti in parentesi, ma non è strettamente necessario. Nota anche che questa sfida utilizza un tag `div` per avvolgere tutti gli elementi figli all'interno di un singolo elemento genitore. Se rimuovi il `div`, il JSX non sarà più transcodificato. Tienilo a mente, perché questo si applicherà anche quando restituirai elementi JSX in componenti React.
|
||||
|
||||
# --hints--
|
||||
|
||||
The constant `JSX` should return a `div` element.
|
||||
La costante `JSX` dovrebbe restituire un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(JSX.type === 'div');
|
||||
```
|
||||
|
||||
The `div` should contain an `h1` tag as the first element.
|
||||
Il `div` dovrebbe contenere un tag `h1` come primo elemento.
|
||||
|
||||
```js
|
||||
assert(JSX.props.children[0].type === 'h1');
|
||||
```
|
||||
|
||||
The `div` should contain a `p` tag as the second element.
|
||||
Il `div` dovrebbe contenere un tag `p` come secondo elemento.
|
||||
|
||||
```js
|
||||
assert(JSX.props.children[1].type === 'p');
|
||||
```
|
||||
|
||||
The `div` should contain a `ul` tag as the third element.
|
||||
Il `div` dovrebbe contenere un tag `ul` come terzo elemento.
|
||||
|
||||
```js
|
||||
assert(JSX.props.children[2].type === 'ul');
|
||||
```
|
||||
|
||||
The `ul` should contain three `li` elements.
|
||||
L'elemento `ul` dovrebbe contenere tre elementi `li`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036164
|
||||
title: Create a Component with Composition
|
||||
title: Creare un componente con una composizione
|
||||
challengeType: 6
|
||||
forumTopicId: 301383
|
||||
dashedName: create-a-component-with-composition
|
||||
@ -8,9 +8,9 @@ dashedName: create-a-component-with-composition
|
||||
|
||||
# --description--
|
||||
|
||||
Now we will look at how we can compose multiple React components together. Imagine you are building an app and have created three components: a `Navbar`, `Dashboard`, and `Footer`.
|
||||
Ora esamineremo come possiamo mettere insieme più componenti React. Immagina di costruire un'app e di aver creato tre componenti: una `Navbar`, una `Dashboard` e un `Footer`.
|
||||
|
||||
To compose these components together, you could create an `App` *parent* component which renders each of these three components as *children*. To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX. For example, in the `render` method you could write:
|
||||
Per mettere insieme questi componenti, è possibile creare un componente `App` *genitore* che fa il render di ciascuno di questi tre componenti come *figli*. Per fare il render di un componente come figlio in un componente React, devi includere il nome del componente scritto come tag HTML personalizzato nel file JSX. Ad esempio, nel metodo `render` puoi scrivere:
|
||||
|
||||
```jsx
|
||||
return (
|
||||
@ -22,17 +22,17 @@ return (
|
||||
)
|
||||
```
|
||||
|
||||
When React encounters a custom HTML tag that references another component (a component name wrapped in `< />` like in this example), it renders the markup for that component in the location of the tag. This should illustrate the parent/child relationship between the `App` component and the `Navbar`, `Dashboard`, and `Footer`.
|
||||
Quando React incontra un tag HTML personalizzato che fa riferimento ad un altro componente (un nome componente inserito in `< />` come in questo esempio), visualizza il markup per quel componente nella posizione del tag. Questo dovrebbe illustrare la relazione genitore/figlio tra il componente `App` e la `Navbar`, la `Dashboard`, e il `Footer`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the code editor, there is a simple functional component called `ChildComponent` and a class component called `ParentComponent`. Compose the two together by rendering the `ChildComponent` within the `ParentComponent`. Make sure to close the `ChildComponent` tag with a forward slash.
|
||||
Nell'editor di codice, c'è un semplice componente funzionale chiamato `ChildComponent` e un componente di classe chiamato `ParentComponent`. Componi i due insieme facendo il render del `ChildComponent` all'interno del `ParentComponent`. Assicurati di chiudere il tag `ChildComponent` con una barra in avanti (/).
|
||||
|
||||
**Note:** `ChildComponent` is defined with an ES6 arrow function because this is a very common practice when using React. However, know that this is just a function. If you aren't familiar with the arrow function syntax, please refer to the JavaScript section.
|
||||
**Nota:** `ChildComponent` è definito con una funzione freccia ES6 perché questa è una pratica molto comune quando si utilizza React. Tuttavia, sappi che questa è solo una funzione. Se non hai familiarità con la sintassi delle funzioni freccia, fai riferimento alla sezione JavaScript.
|
||||
|
||||
# --hints--
|
||||
|
||||
The React component should return a single `div` element.
|
||||
Il componente React dovrebbe restituire un singolo elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The component should return two nested elements.
|
||||
Il componente dovrebbe restituire due elementi annidati.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -54,7 +54,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The component should return the `ChildComponent` as its second child.
|
||||
Il componente dovrebbe restituire il componente `ChildComponent` come secondo figlio.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036179
|
||||
title: Create a Controlled Form
|
||||
title: Creare un modulo controllato
|
||||
challengeType: 6
|
||||
forumTopicId: 301384
|
||||
dashedName: create-a-controlled-form
|
||||
@ -8,21 +8,21 @@ dashedName: create-a-controlled-form
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge showed that React can control the internal state for certain elements like `input` and `textarea`, which makes them controlled components. This applies to other form elements as well, including the regular HTML `form` element.
|
||||
L'ultima sfida ha mostrato che React può controllare lo stato interno di alcuni elementi come `input` e `textarea`, il che li rende componenti controllati. Questo vale anche per altri elementi dei moduli, tra cui il normale elemento HTML `form`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `MyForm` component is set up with an empty `form` with a submit handler. The submit handler will be called when the form is submitted.
|
||||
Il componente `MyForm` è impostato con un `form` vuoto con un gestore di invio. Il gestore di invio verrà chiamato al momento dell'invio del modulo.
|
||||
|
||||
We've added a button which submits the form. You can see it has the `type` set to `submit` indicating it is the button controlling the form. Add the `input` element in the `form` and set its `value` and `onChange()` attributes like the last challenge. You should then complete the `handleSubmit` method so that it sets the component state property `submit` to the current input value in the local `state`.
|
||||
Abbiamo aggiunto un bottone che invia il modulo. Puoi vedere che il `type` è impostato su `submit` indicando che è il bottone che controlla il modulo. Aggiungi l'elemento `input` nel `form` e imposta i suoi attributi `value` e `onChange()` come nell'ultima sfida. Dovresti quindi completare il metodo `handleSubmit` in modo che imposti la proprietà di stato del componente `submit` al valore corrente dell'input nello `state` locale.
|
||||
|
||||
**Note:** You also must call `event.preventDefault()` in the submit handler, to prevent the default form submit behavior which will refresh the web page.
|
||||
**Nota:** Devi anche chiamare `event.preventDefault()` nel gestore di invio, per evitare il comportamento predefinito di invio del modulo che ricaricherà la pagina web. Per comodità, il comportamento predefinito è stato disabilitato qui per evitare che gli aggiornamenti reimpostino il codice della sfida.
|
||||
|
||||
Finally, create an `h1` tag after the `form` which renders the `submit` value from the component's `state`. You can then type in the form and click the button (or press enter), and you should see your input rendered to the page.
|
||||
Infine, crea un tag `h1` dopo il `form` che mostri il valore `submit` dallo `state` del componente. Puoi quindi digitare nel modulo e fare clic sul bottone (o premere invio), e dovresti vedere il tuo input presentato nella pagina.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyForm` should return a `div` element which contains a `form` and an `h1` tag. The form should include an `input` and a `button`.
|
||||
`MyForm` dovrebbe restituire un elemento `div` che contiene un `form` e un tag `h1`. Il modulo dovrebbe includere un `input` e un `button`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -38,7 +38,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `MyForm` should initialize with `input` and `submit` properties, both set to empty strings.
|
||||
Lo stato di `MyForm` dovrebbe essere inizializzato con le proprietà `input` e `submit`, entrambe impostate su stringhe vuote.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Typing in the `input` element should update the `input` property of the component's state.
|
||||
Scrivendo dentro all'elemento `input` si dovrebbe aggiornare la proprietà `input` dello stato del componente.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@ -75,7 +75,7 @@ Typing in the `input` element should update the `input` property of the componen
|
||||
})();
|
||||
```
|
||||
|
||||
Submitting the form should run `handleSubmit` which should set the `submit` property in state equal to the current input.
|
||||
L'invio del modulo dovrebbe eseguire `handleSubmit` che dovrebbe impostare la proprietà `submit` nello stato in modo che sia uguale all'input corrente.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@ -98,7 +98,26 @@ Submitting the form should run `handleSubmit` which should set the `submit` prop
|
||||
})();
|
||||
```
|
||||
|
||||
The `h1` header should render the value of the `submit` field from the component's state.
|
||||
`handleSubmit` dovrebbe chiamare `event.preventDefault`
|
||||
|
||||
```js
|
||||
const handleSubmit = MyForm.prototype.handleSubmit.toString();
|
||||
const allMatches = handleSubmit.match(/\bevent\.preventDefault\(\s*?\)/g) ?? [];
|
||||
const blockCommented = handleSubmit.match(
|
||||
/\/\*.*?\bevent\.preventDefault\(\s*?\).*?\*\//gs
|
||||
);
|
||||
const lineCommented = handleSubmit.match(
|
||||
/\/\/.*?\bevent\.preventDefault\(\s*?\)/g
|
||||
);
|
||||
const commentedMatches = [...(blockCommented ?? []), ...(lineCommented ?? [])];
|
||||
|
||||
assert(
|
||||
// At least one event.preventDefault() call exists and is not commented out
|
||||
allMatches.length > commentedMatches.length
|
||||
);
|
||||
```
|
||||
|
||||
L'intestazione `h1` dovrebbe fare il render del valore del campo `submit` prendendolo dallo stato del componente.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@ -149,7 +168,7 @@ class MyForm extends React.Component {
|
||||
}
|
||||
handleSubmit(event) {
|
||||
// Change code below this line
|
||||
|
||||
|
||||
// Change code above this line
|
||||
}
|
||||
render() {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036178
|
||||
title: Create a Controlled Input
|
||||
title: Creare un input controllato
|
||||
challengeType: 6
|
||||
forumTopicId: 301385
|
||||
dashedName: create-a-controlled-input
|
||||
@ -8,23 +8,23 @@ dashedName: create-a-controlled-input
|
||||
|
||||
# --description--
|
||||
|
||||
Your application may have more complex interactions between `state` and the rendered UI. For example, form control elements for text input, such as `input` and `textarea`, maintain their own state in the DOM as the user types. With React, you can move this mutable state into a React component's `state`. The user's input becomes part of the application `state`, so React controls the value of that input field. Typically, if you have React components with input fields the user can type into, it will be a controlled input form.
|
||||
La tua applicazione potrebbe avere interazioni più complesse tra lo `state` e l'interfaccia utente presentata. Ad esempio, i controlli dei moduli per l'input di testo, come `input` e `textarea`, mangengono il proprio stato nel DOM mentre l'utente digita. Con React, puoi spostare questo stato mutabile nello `state` di un componente React. L'input dell'utente diventa parte dello `state` dell'applicazione, quindi React controlla il valore di quel campo di input. In genere, se hai componenti React con campi di input in cui l'utente può digitare, avrai un modulo con input controllato.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has the skeleton of a component called `ControlledInput` to create a controlled `input` element. The component's `state` is already initialized with an `input` property that holds an empty string. This value represents the text a user types into the `input` field.
|
||||
L'editor di codice ha lo scheletro di un componente chiamato `ControlledInput` per creare un elemento `input` controllato. Lo `state` del componente è già inizializzato con una proprietà `input` che contiene una stringa vuota. Questo valore rappresenta il testo che un utente digita nel campo `input`.
|
||||
|
||||
First, create a method called `handleChange()` that has a parameter called `event`. When the method is called, it receives an `event` object that contains a string of text from the `input` element. You can access this string with `event.target.value` inside the method. Update the `input` property of the component's `state` with this new string.
|
||||
Innanzitutto, crea un metodo chiamato `handleChange()` che abbia un parametro denominato `event`. Quando il metodo viene chiamato, riceve un oggetto `event` che contiene una stringa di testo presa dall'elemento `input`. Puoi accedere a questa stringa con `event.target.value` all'interno del metodo. Aggiorna la proprietà `input` dello `state` del componente con questa nuova stringa.
|
||||
|
||||
In the `render` method, create the `input` element above the `h4` tag. Add a `value` attribute which is equal to the `input` property of the component's `state`. Then add an `onChange()` event handler set to the `handleChange()` method.
|
||||
Nel metodo `render`, crea l'elemento `input` sopra il tag `h4`. Aggiungi un attributo `value` uguale alla proprietà `input` dello `state` del componente. Quindi aggiungi un gestore di evento `onChange()` impostato al metodo `handleChange()`.
|
||||
|
||||
When you type in the input box, that text is processed by the `handleChange()` method, set as the `input` property in the local `state`, and rendered as the value in the `input` box on the page. The component `state` is the single source of truth regarding the input data.
|
||||
Quando scrivi nella casella di input, quel testo viene elaborato dal metodo `handleChange()`, impostato come proprietà `input` nello `state` locale, e presentato come valore nella casella di `input` della pagina. Il componente `state` è la singola fonte autorevole per quanto riguarda i dati di input.
|
||||
|
||||
Last but not least, don't forget to add the necessary bindings in the constructor.
|
||||
Ultimo ma non meno importante, non dimenticate di aggiungere i binding necessari nel costruttore.
|
||||
|
||||
# --hints--
|
||||
|
||||
`ControlledInput` should return a `div` element which contains an `input` and a `p` tag.
|
||||
`ControlledInput` dovrebbe restituire un elemento `div` che contiene un `input` e un tag `p`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,7 +39,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `ControlledInput` should initialize with an `input` property set to an empty string.
|
||||
Lo stato di `ControlledInput` dovrebbe essere inizializzato con una proprietà `input` impostata su una stringa vuota.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@ -48,7 +48,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
Typing in the input element should update the state and the value of the input, and the `p` element should render this state as you type.
|
||||
La digitazione nell'elemento di input dovrebbe aggiornare lo stato e il valore dell'input, e l'elemento `p` dovrebbe mostrare questo stato mentre scrivi.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036163
|
||||
title: Create a React Component
|
||||
title: Creare un componente React
|
||||
challengeType: 6
|
||||
forumTopicId: 301386
|
||||
dashedName: create-a-react-component
|
||||
@ -8,7 +8,7 @@ dashedName: create-a-react-component
|
||||
|
||||
# --description--
|
||||
|
||||
The other way to define a React component is with the ES6 `class` syntax. In the following example, `Kitten` extends `React.Component`:
|
||||
L'altro modo per definire un componente React è con la sintassi ES6 `class`. Nell'esempio seguente, `Kitten` estende `React.Component`:
|
||||
|
||||
```jsx
|
||||
class Kitten extends React.Component {
|
||||
@ -24,21 +24,21 @@ class Kitten extends React.Component {
|
||||
}
|
||||
```
|
||||
|
||||
This creates an ES6 class `Kitten` which extends the `React.Component` class. So the `Kitten` class now has access to many useful React features, such as local state and lifecycle hooks. Don't worry if you aren't familiar with these terms yet, they will be covered in greater detail in later challenges. Also notice the `Kitten` class has a `constructor` defined within it that calls `super()`. It uses `super()` to call the constructor of the parent class, in this case `React.Component`. The constructor is a special method used during the initialization of objects that are created with the `class` keyword. It is best practice to call a component's `constructor` with `super`, and pass `props` to both. This makes sure the component is initialized properly. For now, know that it is standard for this code to be included. Soon you will see other uses for the constructor as well as `props`.
|
||||
Questo crea una classe ES6 `Kitten` che estende la classe `React.Component`. Così la classe `Kitten` ora ha accesso a molte funzionalità React utili, come lo stato locale e gli agganci del ciclo di vita. Non preoccuparti se non hai ancora familiarità con questi termini, saranno coperti in maggior dettaglio nelle sfide successive. Nota anche che la classe `Kitten` ha un `constructor` definito al suo interno che chiama `super()`. Esso usa `super()` per chiamare il costruttore della classe padre, in questo caso `React.Component`. Il costruttore è un metodo speciale usato durante l'inizializzazione degli oggetti creati con la parola chiave `class`. È buona pratica chiamare il `constructor` di un componente con `super` e passare le `props` ad entrambi. Questo assicura che il componente sia inizializzato correttamente. Per adesso, sappi che è uno standard includere questo codice. Presto vedrai altri usi per il costruttore e le `props`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
`MyComponent` is defined in the code editor using class syntax. Finish writing the `render` method so it returns a `div` element that contains an `h1` with the text `Hello React!`.
|
||||
`MyComponent` è definito nell'editor di codice usando la sintassi di classe. Termina la scrittura del metodo `render` in modo che restituisca un elemento `div` che contiene un `h1` con il testo `Hello React!`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The React component should return a `div` element.
|
||||
Il componente React dovrebbe restituire un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');
|
||||
```
|
||||
|
||||
The returned `div` should render an `h1` header within it.
|
||||
Il `div` restituito dovrebbe fare il render di un header `h1` al suo interno.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `h1` header should contain the string `Hello React!`.
|
||||
L'intestazione `h1` dovrebbe contenere la stringa `Hello React!`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbc367417b2b2512bb1
|
||||
title: Create a Simple JSX Element
|
||||
title: Creare un semplice elemento JSX
|
||||
challengeType: 6
|
||||
forumTopicId: 301390
|
||||
dashedName: create-a-simple-jsx-element
|
||||
@ -8,29 +8,29 @@ dashedName: create-a-simple-jsx-element
|
||||
|
||||
# --description--
|
||||
|
||||
React is an Open Source view library created and maintained by Facebook. It's a great tool to render the User Interface (UI) of modern web applications.
|
||||
React è una libreria di visualizzazione Open Source creata e mantenuta da Facebook. È un ottimo strumento per presentare l'interfaccia utente (UI) delle moderne applicazioni web.
|
||||
|
||||
React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript. This has several benefits. It lets you use the full programmatic power of JavaScript within HTML, and helps to keep your code readable. For the most part, JSX is similar to the HTML that you have already learned, however there are a few key differences that will be covered throughout these challenges.
|
||||
React utilizza un'estensione della sintassi di JavaScript chiamata JSX che consente di scrivere HTML direttamente all'interno di JavaScript. Questo ha diversi vantaggi. Ti permette di utilizzare la potenza programmatica completa di JavaScript all'interno di HTML, e aiuta a mantenere il codice leggibile. Per la maggior parte, JSX è simile all'HTML che hai già imparato, tuttavia vi sono alcune differenze fondamentali che saranno affrontate nel corso di queste sfide.
|
||||
|
||||
For instance, because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX. To do this, you simply include the code you want to be treated as JavaScript within curly braces: `{ 'this is treated as JavaScript code' }`. Keep this in mind, since it's used in several future challenges.
|
||||
Ad esempio, poiché JSX è un'estensione sintattica di JavaScript, è possibile scrivere JavaScript direttamente all'interno di JSX. Per fare questo, è sufficiente includere il codice che si desidera trattare come JavaScript all'interno di parentesi graffe: `{ 'questo è trattato come codice JavaScript' }`. Tienilo a mente, dato che sarà utilizzato in diverse sfide future.
|
||||
|
||||
However, because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. The transpiler Babel is a popular tool for this process. For your convenience, it's already added behind the scenes for these challenges. If you happen to write syntactically invalid JSX, you will see the first test in these challenges fail.
|
||||
Tuttavia, poiché JSX non è JavaScript valido, il codice JSX deve essere compilato in JavaScript. Il transpiler Babel è uno strumento popolare per questo processo. Per tua convenienza, è già aggiunto dietro le quinte per queste sfide. Se ti capita di scrivere JSX sintatticamente non valido, vedrai il primo test in queste sfide fallire.
|
||||
|
||||
It's worth noting that under the hood the challenges are calling `ReactDOM.render(JSX, document.getElementById('root'))`. This function call is what places your JSX into React's own lightweight representation of the DOM. React then uses snapshots of its own DOM to optimize updating only specific parts of the actual DOM.
|
||||
Vale la pena notare che sotto il cofano le sfide chiamano `ReactDOM.render(JSX, document.getElementById('root'))`. Questa chiamata di funzione è ciò che posiziona il tuo JSX nella rappresentazione leggera del DOM propria di React. React usa delle istantanee del proprio DOM per ottimizzare l'aggiornamento di parti specifiche del DOM.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The current code uses JSX to assign a `div` element to the constant `JSX`. Replace the `div` with an `h1` element and add the text `Hello JSX!` inside it.
|
||||
Il codice corrente utilizza JSX per assegnare un elemento `div` alla costante `JSX`. Sostituisci il `div` con un elemento `h1` e aggiungi il testo `Hello JSX!` al suo interno.
|
||||
|
||||
# --hints--
|
||||
|
||||
The constant `JSX` should return an `h1` element.
|
||||
La costante `JSX` dovrebbe restituire un elemento `h1`.
|
||||
|
||||
```js
|
||||
assert(JSX.type === 'h1');
|
||||
```
|
||||
|
||||
The `h1` tag should include the text `Hello JSX!`
|
||||
Il tag `h1` dovrebbe includere il testo `Hello JSX!`
|
||||
|
||||
```js
|
||||
assert(Enzyme.shallow(JSX).contains('Hello JSX!'));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036170
|
||||
title: Create a Stateful Component
|
||||
title: Creare un componente con state
|
||||
challengeType: 6
|
||||
forumTopicId: 301391
|
||||
dashedName: create-a-stateful-component
|
||||
@ -8,9 +8,9 @@ dashedName: create-a-stateful-component
|
||||
|
||||
# --description--
|
||||
|
||||
One of the most important topics in React is `state`. State consists of any data your application needs to know about, that can change over time. You want your apps to respond to state changes and present an updated UI when necessary. React offers a nice solution for the state management of modern web applications.
|
||||
Uno degli argomenti più importanti in React è lo stato (`state`). Lo stato è costituito da tutti i dati che la tua applicazione ha bisogno di conoscere, che possono cambiare nel tempo. Vuoi che le tue app rispondano alle modifiche di stato e presentino un'interfaccia utente aggiornata quando necessario. React offre una bella soluzione per la gestione dello stato di applicazioni web moderne.
|
||||
|
||||
You create state in a React component by declaring a `state` property on the component class in its `constructor`. This initializes the component with `state` when it is created. The `state` property must be set to a JavaScript `object`. Declaring it looks like this:
|
||||
Puoi creare lo stato in un componente React dichiarando una proprietà `state` nel `constructor` della classe del componente. Questo inizializza il componente con lo `state` quando viene creato. La proprietà `state` deve essere impostata su un `object` JavaScript. La dichiarazione appare così:
|
||||
|
||||
```jsx
|
||||
this.state = {
|
||||
@ -18,15 +18,15 @@ this.state = {
|
||||
}
|
||||
```
|
||||
|
||||
You have access to the `state` object throughout the life of your component. You can update it, render it in your UI, and pass it as props to child components. The `state` object can be as complex or as simple as you need it to be. Note that you must create a class component by extending `React.Component` in order to create `state` like this.
|
||||
Hai accesso all'oggetto `state` per tutta la vita del tuo componente. Puoi aggiornarlo, farne il rendering (cioè visualizzarlo) nella tua interfaccia utente e passarlo come proprietà ai componenti figli. L'oggetto `state` può essere semplice o complesso in base alle tue necessità. Nota che devi creare un componente di classe estendendo `React.Component` per creare uno `state` di questo tipo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There is a component in the code editor that is trying to render a `name` property from its `state`. However, there is no `state` defined. Initialize the component with `state` in the `constructor` and assign your name to a property of `name`.
|
||||
C'è un componente nell'editor di codice che sta cercando di fare il render di una proprietà `name` dal suo `state`. Tuttavia non c'è uno `state` definito. Inizializza il componente con `state` nel `constructor` e assegna il tuo nome a una proprietà `name`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`StatefulComponent` should exist and render.
|
||||
`StatefulComponent` dovrebbe esistere ed effettuare il render.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,7 +39,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`StatefulComponent` should render a `div` and an `h1` element.
|
||||
`StatefulComponent` dovrebbe fare il render di un `div` e di un elemento `h1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -55,7 +55,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `StatefulComponent` should be initialized with a property `name` set to a string.
|
||||
Lo stato di `StatefulComponent` dovrebbe essere inizializzato con una proprietà `name` impostata su una stringa.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -71,7 +71,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The property `name` in the state of `StatefulComponent` should render in the `h1` element.
|
||||
La proprietà `name` nello stato di `StatefulComponent` dovrebbe presentare l'elemento `h1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036162
|
||||
title: Create a Stateless Functional Component
|
||||
title: Creare un componente funzionale senza stato
|
||||
challengeType: 6
|
||||
forumTopicId: 301392
|
||||
dashedName: create-a-stateless-functional-component
|
||||
@ -8,11 +8,11 @@ dashedName: create-a-stateless-functional-component
|
||||
|
||||
# --description--
|
||||
|
||||
Components are the core of React. Everything in React is a component and here you will learn how to create one.
|
||||
I componenti sono il nucleo di React. Tutto in React è un componente e qui imparerai a crearne uno.
|
||||
|
||||
There are two ways to create a React component. The first way is to use a JavaScript function. Defining a component in this way creates a *stateless functional component*. The concept of state in an application will be covered in later challenges. For now, think of a stateless component as one that can receive data and render it, but does not manage or track changes to that data. (We'll cover the second way to create a React component in the next challenge.)
|
||||
Ci sono due modi per creare un componente React. Il primo modo è quello di utilizzare una funzione JavaScript. Definendo un componente in questo modo si crea un *componente funzionale senza stato*. Il concetto di stato in un'applicazione sarà affrontato nelle sfide successive. Per ora, pensa a un componente senza stato (stateless) come a uno che può ricevere i dati e farne il rendering, ma non gestisce o tiene traccia delle modifiche a tali dati. (Copriremo il secondo modo per creare un componente React nella prossima sfida.)
|
||||
|
||||
To create a component with a function, you simply write a JavaScript function that returns either JSX or `null`. One important thing to note is that React requires your function name to begin with a capital letter. Here's an example of a stateless functional component that assigns an HTML class in JSX:
|
||||
Per creare un componente con una funzione, basta scrivere una funzione JavaScript che restituisce JSX o `null`. Una cosa importante da notare è che React richiede che il nome della funzione inizi con una lettera maiuscola. Ecco un esempio di componente funzionale senza stato che assegna una classe HTML in JSX:
|
||||
|
||||
```jsx
|
||||
const DemoComponent = function() {
|
||||
@ -22,19 +22,19 @@ const DemoComponent = function() {
|
||||
};
|
||||
```
|
||||
|
||||
After being transpiled, the `<div>` will have a CSS class of `customClass`.
|
||||
Dopo essere stato transcodificato, il `<div>` avrà una classe CSS di `customClass`.
|
||||
|
||||
Because a JSX component represents HTML, you could put several components together to create a more complex HTML page. This is one of the key advantages of the component architecture React provides. It allows you to compose your UI from many separate, isolated components. This makes it easier to build and maintain complex user interfaces.
|
||||
Poiché un componente JSX rappresenta dell'HTML, è possibile mettere insieme diversi componenti per creare una pagina HTML più complessa. Questo è uno dei vantaggi principali dell'architettura a componente fornita da React. Ti permette di comporre la tua interfaccia utente partendo da molti componenti separati e isolati. Questo rende più facile costruire e mantenere interfacce utente complesse.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has a function called `MyComponent`. Complete this function so it returns a single `div` element which contains some string of text.
|
||||
L'editor di codice ha una funzione chiamata `MyComponent`. Completa questa funzione in modo che restituisca un singolo elemento `div` che contiene una stringa di testo.
|
||||
|
||||
**Note:** The text is considered a child of the `div` element, so you will not be able to use a self-closing tag.
|
||||
**Nota:** Il testo è considerato un figlio dell'elemento `div`, quindi non sarai in grado di utilizzare un tag autoconcludente.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should return JSX.
|
||||
`MyComponent` dovrebbe restituire JSX.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` should return a `div` element.
|
||||
`MyComponent` dovrebbe restituire un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,7 +56,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `div` element should contain a string of text.
|
||||
L'elemento `div` dovrebbe contenere una stringa di testo.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036160
|
||||
title: Define an HTML Class in JSX
|
||||
title: Definire una classe HTML in JSX
|
||||
challengeType: 6
|
||||
forumTopicId: 301393
|
||||
dashedName: define-an-html-class-in-jsx
|
||||
@ -8,27 +8,27 @@ dashedName: define-an-html-class-in-jsx
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you're getting comfortable writing JSX, you may be wondering how it differs from HTML.
|
||||
Ora che sei a tuo agio con la scrittura in JSX, potresti chiederti come questo differisca dall'HTML.
|
||||
|
||||
So far, it may seem that HTML and JSX are exactly the same.
|
||||
Finora, può sembrare che HTML e JSX siano esattamente la stessa cosa.
|
||||
|
||||
One key difference in JSX is that you can no longer use the word `class` to define HTML classes. This is because `class` is a reserved word in JavaScript. Instead, JSX uses `className`.
|
||||
Una differenza chiave in JSX è che non puoi più usare la parola `class` per definire le classi HTML. Questo perché `class` è una parola riservata in JavaScript. JSX utilizza invece `className`.
|
||||
|
||||
In fact, the naming convention for all HTML attributes and event references in JSX become camelCase. For example, a click event in JSX is `onClick`, instead of `onclick`. Likewise, `onchange` becomes `onChange`. While this is a subtle difference, it is an important one to keep in mind moving forward.
|
||||
Infatti, la convenzione di denominazione per tutti gli attributi HTML e riferimenti a eventi in JSX diventa camelCase. Ad esempio, un evento di click in JSX è `onClick`, invece di `onclick`. Allo stesso modo, `onchange` diventa `onChange`. Anche se questa è una differenza sottile, è importante tenerla a mente andando avanti.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Apply a class of `myDiv` to the `div` provided in the JSX code.
|
||||
Applica una classe `myDiv` al `div` fornito nel codice JSX.
|
||||
|
||||
# --hints--
|
||||
|
||||
The constant `JSX` should return a `div` element.
|
||||
La costante `JSX` dovrebbe restituire un elemento `div`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(JSX.type, 'div');
|
||||
```
|
||||
|
||||
The `div` should have a class of `myDiv`.
|
||||
Il `div` dovrebbe essere di classe `myDiv`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(JSX.props.className, 'myDiv');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: Apply a Style Until a Condition is Met with @while
|
||||
title: Applicare uno stile finché una condizione è soddisfatta con @while
|
||||
challengeType: 0
|
||||
forumTopicId: 301454
|
||||
dashedName: apply-a-style-until-a-condition-is-met-with-while
|
||||
@ -8,9 +8,9 @@ dashedName: apply-a-style-until-a-condition-is-met-with-while
|
||||
|
||||
# --description--
|
||||
|
||||
The `@while` directive is an option with similar functionality to the JavaScript `while` loop. It creates CSS rules until a condition is met.
|
||||
La direttiva `@while` è un'opzione con funzionalità simili al ciclo `while` di JavaScript. Essa crea delle regole CSS finché una condizione è soddisfatta.
|
||||
|
||||
The `@for` challenge gave an example to create a simple grid system. This can also work with `@while`.
|
||||
La sfida `@for` ha mostrato un esempio che creava un semplice sistema di griglia. Questo si può fare anche con `@while`.
|
||||
|
||||
```scss
|
||||
$x: 1;
|
||||
@ -20,59 +20,59 @@ $x: 1;
|
||||
}
|
||||
```
|
||||
|
||||
First, define a variable `$x` and set it to 1. Next, use the `@while` directive to create the grid system *while* `$x` is less than 13. After setting the CSS rule for `width`, `$x` is incremented by 1 to avoid an infinite loop.
|
||||
Innanzitutto, definisci una variabile `$x` e impostala a 1. Successivamente, utilizzare la direttiva `@while` per creare il sistema di griglia finché (*while*) `$x` è minore di 13. Dopo aver impostato la regola CSS per `width`, `$x` viene incrementata di 1 per evitare un ciclo infinito.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use `@while` to create a series of classes with different `font-sizes`.
|
||||
Usa `@while` per creare una serie di classi con diversi `font-sizes` (dimensioni dei caratteri).
|
||||
|
||||
There should be 5 different classes from `text-1` to `text-5`. Then set `font-size` to `15px` multiplied by the current index number. Make sure to avoid an infinite loop!
|
||||
Ci dovrebbero essere 5 classi diverse da `text-1` a `text-5`. Quindi imposta `font-size` a `15px` moltiplicato per il numero index corrente. Assicurati di evitare un ciclo infinito!
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@while` directive.
|
||||
Il tuo codice dovrebbe utilizzare la direttiva `@while`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@while /g));
|
||||
```
|
||||
|
||||
Your code should use an index variable which starts at an index of 1.
|
||||
Il tuo codice dovrebbe usare una variabile index che inizia da un indice di 1.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$.*:\s*?1;/gi));
|
||||
```
|
||||
|
||||
Your code should increment the counter variable.
|
||||
Il tuo codice dovrebbe incrementare la variabile del contatore.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi));
|
||||
```
|
||||
|
||||
Your `.text-1` class should have a `font-size` of `15px`.
|
||||
La tua classe `.text-1` dovrebbe avere un `font-size` di `15px`.
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
Your `.text-2` class should have a `font-size` of `30px`.
|
||||
La tua classe `.text-2` dovrebbe avere un `font-size` di `30px`.
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
Your `.text-3` class should have a `font-size` of `45px`.
|
||||
La tua classe `.text-3` dovrebbe avere un `font-size` di `45px`.
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
Your `.text-4` class should have a `font-size` of `60px`.
|
||||
La tua classe `.text-4` dovrebbe avere un `font-size` di `60px`.
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
Your `.text-5` class should have a `font-size` of `75px`.
|
||||
La tua classe `.text-5` dovrebbe avere un `font-size` di `75px`.
|
||||
|
||||
```js
|
||||
assert($('.text-5').css('font-size') == '75px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Create Reusable CSS with Mixins
|
||||
title: Creare CSS riutilizzabile con i mixin
|
||||
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.
|
||||
In Sass, un <dfn>mixin</dfn> è un gruppo di dichiarazioni CSS che possono essere riutilizzate in tutto il foglio di stile.
|
||||
|
||||
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`:
|
||||
Ci vuole tempo prima che le nuove funzionalità di CSS siano completamente adottate e utilizzabili in tutti i browser. Poiché le funzionalità vengono inizialmente aggiunte ai singoli browser, le regole CSS che le utilizzano potrebbero avere bisogno di prefissi del fornitore. Considera `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:
|
||||
Ci sarebbe molto da digitare per riscrivere questa regola per tutti gli elementi che hanno una `box-shadow`, o per modificare ogni valore per testare effetti differenti. I mixin sono come funzioni per il CSS. Ecco come scriverne uno:
|
||||
|
||||
```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 definizione inizia con `@mixin` seguito da un nome personalizzato. I parametri ( `$x`, `$y`, `$blur`e `$c` nell'esempio sopra) sono opzionali. Ora ogni volta che è necessaria una regola `box-shadow`, invece di dover digitare tutti i prefissi dei venditori dovremo solo scrivere una singola linea che chiama il mixin. Un mixin è chiamato con la direttiva `@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`.
|
||||
Scrivi un mixin per `border-radius` e dagli un parametro `$radius`. Dovrebbe usare tutti i prefissi del fornitore dell'esempio. Quindi usa il mixin `border-radius` per dare all'elemento `#awesome` un raggio di curvatura di `15px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should declare a mixin named `border-radius` which has a parameter named `$radius`.
|
||||
Il tuo codice dovrebbe dichiarare un mixin chiamato `border-radius` che ha un parametro denominato `$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.
|
||||
Il tuo codice dovrebbe includere il prefisso del fornitore `-webkit-border-radius` che utilizza il parametro `$radius`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -60,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should include the `-moz-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
Il tuo codice dovrebbe includere il prefisso del fornitore `-moz-border-radius` che utilizza il parametro `$radius`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -68,13 +68,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should include the `-ms-border-radius` vendor prefix that uses the `$radius` parameter.
|
||||
Il tuo codice dovrebbe includere il prefisso del fornitore `-ms-border-radius` che utilizza il parametro `$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.
|
||||
Il tuo codice dovrebbe includere la regola generale `border-radius` che utilizza il parametro `$radius`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -83,7 +83,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should call the `border-radius mixin` using the `@include` keyword, setting it to `15px`.
|
||||
Il tuo codice dovrebbe chiamare il `border-radius mixin` usando la parola chiave `@include`, con un raggio di `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: Estendere un gruppo di stili CSS ad un altro 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 ha una caratteristica chiamata `extend` che rende facile prendere in prestito le regole CSS da un elemento e partire da esse in un altro.
|
||||
|
||||
For example, the below block of CSS rules style a `.panel` class. It has a `background-color`, `height` and `border`.
|
||||
Per esempio, il seguente blocco di regole CSS stilizza una classe `.panel`. Esso specifica un `background-color`, un'`height` e un `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:
|
||||
Supponi ora di volere un altro pannello chiamato `.big-panel`. Ha le stesse proprietà di base di `.panel`, ma ha anche bisogno di `width` e `font-size`. È possibile copiare e incollare le regole CSS iniziali da `.panel`, ma il codice diventa ripetitivo mano a mano che si aggiungono altri tipi di pannelli. La direttiva `extend` è un modo semplice per riutilizzare le regole scritte per un elemento, aggiungendone alcune per un altro:
|
||||
|
||||
```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.
|
||||
Il `.big-panel` avrà le stesse proprietà di `.panel` in aggiunta ai nuovi stili.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Make a class `.info-important` that extends `.info` and also has a `background-color` set to magenta.
|
||||
Crea una classe `.info-important` che estende `.info` e ha anche un `background-color` impostato su magenta.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `info-important` class should have a `background-color` set to `magenta`.
|
||||
La tua classe `info-important` dovrebbe avere un `background-color` impostato su `magenta`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `info-important` class should use `@extend` to inherit the styling from the `info` class.
|
||||
La tua classe `info-important` dovrebbe usare `@extend` per ereditare gli stili dalla classe `info`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Nest CSS with Sass
|
||||
title: Nidifica il 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 permette di annidare le regole CSS, e questo è utile per organizzare un foglio di stile.
|
||||
|
||||
Normally, each element is targeted on a different line to style it, like so:
|
||||
Normalmente, ogni elemento è l'oggetto di una linea diversa che lo stilizza, in questo modo:
|
||||
|
||||
```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:
|
||||
Per un grande progetto però, il file CSS avrà molte linee e regole. Questo è dove la nidificazione può aiutare a organizzare il codice inserendo le regole di stile figlie all'interno dei rispettivi elementi genitori:
|
||||
|
||||
```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.
|
||||
Utilizzare la tecnica di nidificazione mostrata sopra per riorganizzare le regole CSS per entrambi i figli dell'elemento `.blog-post`. Ai fini dei test, l'elemento `h1` dovrebbe venire prima dell'elemento `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should re-organize the CSS rules so the `h1` and `p` are nested in the `.blog-post` parent element.
|
||||
Il tuo codice dovrebbe riorganizzare le regole CSS in modo che gli `h1` e i `p` siano annidati nell'elemento padre `.blog-post`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: Split Your Styles into Smaller Chunks with Partials
|
||||
title: Dividi i tuoi stili in pezzi più piccoli con i partial
|
||||
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.
|
||||
I <dfn>Partials</dfn> in Sass sono file separati che contengono segmenti di codice CSS. Questi vengono importati e utilizzati in altri file Sass. Questo è un ottimo modo per raggruppare codice simile in un modulo per tenerlo organizzato.
|
||||
|
||||
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.
|
||||
I nomi dei partial iniziano con il carattere underscore (`_`), che dice a Sass che si tratta di un piccolo segmento di CSS e di non convertirlo in un file CSS. Inoltre, i file Sass terminano con l'estensione del file `.scss`. Per inserire il codice del partial in un altro file Sass, utilizza la direttiva `@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:
|
||||
Ad esempio, se tutti i mixin vengono salvati in un partial denominato "\_mixins.scss", e sono necessari nel file "main.scss", ecco come usarli nel file principale:
|
||||
|
||||
```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.
|
||||
Nota che l'underscore e l'estensione del file non sono necessari nell'istruzione `import` - Sass capisce che si tratta di un partial. Una volta che un partial viene importato in un file, tutte le variabili, i mixin e altro codice sono disponibili per l'uso.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write an `@import` statement to import a partial named `_variables.scss` into the main.scss file.
|
||||
Scrivi una dichiarazione `@import` per importare un partial di nome `_variables.scss` nel file main.scss.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@import` directive, and should not include the underscore in the file name.
|
||||
Il tuo codice dovrebbe utilizzare la direttiva `@import`, e non dovrebbe includere l'underscore nel nome del file.
|
||||
|
||||
```js
|
||||
assert(code.match(/@import\s+?('|")variables\1/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Store Data with Sass Variables
|
||||
title: Memorizzare dati con le variabili 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 caratteristica di Sass che è diversa da CSS è che utilizza le variabili. Esse sono dichiarate e impostate per memorizzare i dati, come in JavaScript.
|
||||
|
||||
In JavaScript, variables are defined using the `let` and `const` keywords. In Sass, variables start with a `$` followed by the variable name.
|
||||
In JavaScript, le variabili sono definite utilizzando le parole chiave `let` e `const`. In Sass, le variabili iniziano con un `$` seguito dal nome della variabile.
|
||||
|
||||
Here are a couple examples:
|
||||
Ecco alcuni esempi:
|
||||
|
||||
```scss
|
||||
$main-fonts: Arial, sans-serif;
|
||||
$headings-color: green;
|
||||
```
|
||||
|
||||
And to use the variables:
|
||||
E per usare le variabili:
|
||||
|
||||
```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 esempio in cui le variabili sono utili è quando un certo numero di elementi deve avere lo stesso colore. Se quel colore viene cambiato, l'unico punto da modificare nel codice è il valore della variabile.
|
||||
|
||||
# --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 variabile `$text-color` e impostala su `red`. Quindi cambiare il valore della proprietà `color` per il `.blog-post` e per `h2` impostandoli alla variabile `$text-color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a Sass variable declared for `$text-color` with a value of `red`.
|
||||
Il tuo codice dovrebbe avere una variabile Sass dichiarata per `$text-color` con un valore di `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.
|
||||
Il tuo codice dovrebbe utilizzare la variabile `$text-color` per cambiare il `color` per gli elementi `.blog-post` e `h2`.
|
||||
|
||||
```js
|
||||
assert(code.match(/color\s*:\s*\$text-color\s*;?/g));
|
||||
```
|
||||
|
||||
Your `.blog-post` element should have a `color` of red.
|
||||
Il tuo elemento `.blog-post` dovrebbe avere un `color` rosso.
|
||||
|
||||
```js
|
||||
assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Your `h2` elements should have a `color` of red.
|
||||
I tuoi elementi `h2` dovrebbero avere un `color` rosso.
|
||||
|
||||
```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: Usare @each per iterare sugli elementi in 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.
|
||||
L'ultima sfida ha mostrato come la direttiva `@for` utilizzi un valore iniziale e finale per ripetere un ciclo per un determinato numero di volte. Sass offre anche la direttiva `@each` che ripete il ciclo per ogni elemento in una lista o mappa. Ad ogni iterazione, la variabile viene assegnata al valore corrente preso dalla lista o dalla mappa.
|
||||
|
||||
```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:
|
||||
Una mappa ha una sintassi leggermente diversa. Ecco un esempio:
|
||||
|
||||
```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:
|
||||
Nota che la variabile `$key` è necessaria per fare riferimento alle chiavi nella mappa. Altrimenti, il CSS compilato avrebbe `color1`, `color2`... al suo interno. Entrambi gli esempi del codice qui sopra sono convertiti nel seguente 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.
|
||||
Scrivi una direttiva `@each` che itera attraverso una lista: `blue, black, red` e assegna ogni variabile a una classe `.color-bg`, dove la parte `color` cambia per ogni elemento. Ogni classe dovrebbe impostare il `background-color` al rispettivo colore.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@each` directive.
|
||||
Il tuo codice dovrebbe utilizzare la direttiva `@each`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@each /g));
|
||||
```
|
||||
|
||||
Your `.blue-bg` class should have a `background-color` of blue.
|
||||
La tua classe `.blue-bg` dovrebbe avere un `background-color` blu.
|
||||
|
||||
```js
|
||||
assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
Your `.black-bg` class should have a `background-color` of black.
|
||||
La classe `.black-bg` dovrebbe avere un `background-color` nero.
|
||||
|
||||
```js
|
||||
assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Your `.red-bg` class should have a `background-color` of red.
|
||||
La classe `.red-bg` dovrebbe avere un `background-color` rosso.
|
||||
|
||||
```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: Usare @for per creare un ciclo in 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 direttiva `@for` aggiunge stili in un ciclo, in modo molto simile a un ciclo `for` di 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` è usato in due modi: "start through end" o "start to end". La differenza principale è che "start **to** end" *esclude* il numero finale dal conteggio, mentre "start **through** end" *include* il numero finale nel conteggio.
|
||||
|
||||
Here's a start **through** end example:
|
||||
Ecco un esempio di start **through** end:
|
||||
|
||||
```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}` è la sintassi che combina una variabile (`i`) con il testo per formare una stringa. Quando il file Sass viene convertito in CSS, appare così:
|
||||
|
||||
```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.
|
||||
Questo è un modo potente per creare un layout griglia. Ora hai dodici opzioni per le larghezze delle colonne disponibili come classi CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Write a `@for` directive that takes a variable `$j` that goes from 1 **to** 6.
|
||||
Scrivi una direttiva `@for` che usa una variabile `$j` che va da 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.
|
||||
Dovrebbe creare 5 classi chiamate da `.text-1` a `.text-5` dove ognuna ha una `font-size` impostata a 15px moltiplicata per l'indice.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `@for` directive.
|
||||
Il tuo codice dovrebbe utilizzare la direttiva `@for`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@for /g));
|
||||
```
|
||||
|
||||
Your `.text-1` class should have a `font-size` of 15px.
|
||||
La tua classe `.text-1` dovrebbe avere un `font-size` di 15px.
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
Your `.text-2` class should have a `font-size` of 30px.
|
||||
La tua classe `.text-2` dovrebbe avere un `font-size` di 30px.
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
Your `.text-3` class should have a `font-size` of 45px.
|
||||
La tua classe `.text-3` dovrebbe avere un `font-size` di 45px.
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
Your `.text-4` class should have a `font-size` of 60px.
|
||||
La tua classe `.text-4` dovrebbe avere un `font-size` di 60px.
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
Your `.text-5` class should have a `font-size` of 75px.
|
||||
La tua classe `.text-5` dovrebbe avere un `font-size` di 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: Usare @if e @else per aggiungere logica ai tuoi stili
|
||||
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 direttiva `@if` in Sass è utile per valutare un caso specifico - funziona come l'istruzione `if` in 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:
|
||||
E proprio come in JavaScript, `@else if` e `@else` valutano ulteriori condizioni:
|
||||
|
||||
```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 chiamato `border-stroke` che prende un parametro `$val`. Il mixin dovrebbe controllare le seguenti condizioni usando `@if`, `@else if`e `@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`.
|
||||
Se `$val` non è `light`, `medium`, o `heavy`, il bordo dovrebbe essere impostato a `none`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should declare a mixin named `border-stroke` which has a parameter named `$val`.
|
||||
Il tuo codice dovrebbe dichiarare un mixin chiamato `border-stroke` che ha un parametro chiamato `$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`.
|
||||
Il tuo mixin dovrebbe avere un'istruzione `@if` per controllare se `$val` è `light`, e per impostare il `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`.
|
||||
Il tuo mixin dovrebbe avere un'istruzione `@else if` per controllare se `$val` è `medium`, e per impostare il `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`.
|
||||
Il tuo mixin dovrebbe avere un'istruzione `@else if` per controllare se `$val` è `heavy`, e per impostare il `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`.
|
||||
Il mixin dovrebbe avere un'istruzione `@else` per impostare il `border` a `none`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
---
|
||||
id: 561acd10cb82ac38a17513bc
|
||||
title: Certificato Librerie di sviluppo Front End
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: Costruisci una Macchina per le citazioni casuali
|
||||
-
|
||||
id: bd7157d8c242eddfaeb5bd13
|
||||
title: Costruisci un visualizzatore di anteprima per il Markdown
|
||||
-
|
||||
id: 587d7dbc367417b2b2512bae
|
||||
title: Costruisci una batteria
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd17
|
||||
title: Costruisci una calcolatrice JavaScript
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd0f
|
||||
title: Costruisci un Orologio 25 + 5
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 5f1a4ef5d5d6b5ab580fc6ae
|
||||
title: Database Corpi Celesti
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.celestial-bodies-database
|
||||
dashedName: celestial-bodies-database
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 602da04c22201c65d2a019f4
|
||||
title: Final Boss
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.final-boss
|
||||
dashedName: final-boss
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 602da0de22201c65d2a019f6
|
||||
title: Impara Bash avanzato costruendo
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-advanced-bash-by-building
|
||||
dashedName: learn-advanced-bash-by-building
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,17 @@
|
||||
---
|
||||
id: 5f5b969a05380d2179fe6e18
|
||||
title: Impara Bash e SQL costruendo uno shop di noleggio biciclette
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-bash-and-sql-by-building-a-bike-rental-shop
|
||||
dashedName: learn-bash-and-sql-by-building-a-bike-rental-shop
|
||||
---
|
||||
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 5ea8adfab628f68d805bfc5e
|
||||
title: Impara Bash costruendo un codice Boilerplate
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/freeCodeCamp/.learn-bash-by-building-a-boilerplate
|
||||
dashedName: learn-bash-by-building-a-boilerplate
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 5f5904ac738bc2fa9efecf5a
|
||||
title: Impara lo Scripting Bash costruendo cinque programmi
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-bash-scripting-by-building-five-programs
|
||||
dashedName: learn-bash-scripting-by-building-five-programs
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 5fa323cdaf6a73463d590659
|
||||
title: Impara Git costruendo un oggetto di riferimento SQL
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-git-by-building-an-sql-reference-object
|
||||
dashedName: learn-git-by-building-an-sql-reference-object
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 602da04222201c65d2a019f3
|
||||
title: Impara GitHub costruendo una lista di citazioni motivazionali
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-github-by-building-a-list-of-inspirational-quotes
|
||||
dashedName: learn-github-by-building-a-list-of-inspirational-quotes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 5f32db63eb37f7e17323f459
|
||||
title: Impara Nano costruendo un castello
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-nano-by-building-a-castle
|
||||
dashedName: learn-nano-by-building-a-castle
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 5f2c289f164c29556da632fd
|
||||
title: Impara i database relazionali costruendo un database Mario
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-relational-databases-by-building-a-mario-database
|
||||
dashedName: learn-relational-databases-by-building-a-mario-database
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 602da0c222201c65d2a019f5
|
||||
title: Impara SQL costruendo un database degli studenti
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-sql-by-building-a-student-database
|
||||
dashedName: learn-sql-by-building-a-student-database
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 602d9ff222201c65d2a019f2
|
||||
title: Database della Tavola Periodica
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.periodic-table-database
|
||||
dashedName: periodic-table-database
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 5f87ac112ae598023a42df1a
|
||||
title: Pianificatore Appuntamento Salone
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.salon-appointment-scheduler
|
||||
dashedName: salon-appointment-scheduler
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
id: 5f9771307d4d22b9d2b75a94
|
||||
title: Database Coppa Del Mondo
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.world-cup-database
|
||||
dashedName: world-cup-database
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
# --instructions--
|
||||
|
||||
# --hints--
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af1
|
||||
title: Add Flex Superpowers to the Tweet Embed
|
||||
title: Usar os superpoderes do CSS Flexbox no Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM'
|
||||
forumTopicId: 301100
|
||||
@ -9,59 +9,59 @@ dashedName: add-flex-superpowers-to-the-tweet-embed
|
||||
|
||||
# --description--
|
||||
|
||||
To the right is the tweet embed that will be used as a practical example. Some of the elements would look better with a different layout. The last challenge demonstrated `display: flex`. Here you'll add it to several components in the tweet embed to start adjusting their positioning.
|
||||
À direita está um tweet que será utilizado como exemplo prático. Alguns dos elementos ficariam melhores com um layout diferente. O último desafio apresentou a propriedade `display: flex`. Neste desafio, você vai adicioná-lo a vários componentes do tweet para começar a ajustar a posição deles.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `display: flex` to all of the following items - note that the selectors are already set up in the CSS:
|
||||
Adicione a propriedade `display: flex` a todos os itens a seguir - note que os seletores já estão definidos no CSS:
|
||||
|
||||
`header`, the header's `.profile-name`, the header's `.follow-btn`, the header's `h3` and `h4`, the `footer`, and the footer's `.stats`.
|
||||
`header`, `.profile-name`, `.follow-btn`, `h3`, `h4`, `footer` e `.stats`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
|
||||
O elemento de classe `.follow-btn` deve aparecer renderizado na página. Lembre-se de desativar quaisquer extensões do tipo bloqueadores de anúncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
Your `header` should have a `display` property set to `flex`.
|
||||
O elemento `header` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('header').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Your `footer` should have a `display` property set to `flex`.
|
||||
O elemento `footer` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('footer').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Your `h3` should have a `display` property set to `flex`.
|
||||
O elemento `h3` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('h3').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Your `h4` should have a `display` property set to `flex`.
|
||||
O elemento `h4` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('h4').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Your `.profile-name` should have a `display` property set to `flex`.
|
||||
O elemento de classe `.profile-name` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Your `.follow-btn` should have a `display` property set to `flex`.
|
||||
O elemento de classe `.follow-btn` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Your `.stats` should have a `display` property set to `flex`.
|
||||
O elemento de classe `.stats` deve ter a propriedade `display` definida com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('.stats').css('display') == 'flex');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af8
|
||||
title: Align Elements Using the align-items Property
|
||||
title: Alinhar elementos usando a propriedade align-items
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c8aggtk'
|
||||
forumTopicId: 301101
|
||||
@ -9,26 +9,26 @@ dashedName: align-elements-using-the-align-items-property
|
||||
|
||||
# --description--
|
||||
|
||||
The `align-items` property is similar to `justify-content`. Recall that the `justify-content` property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line.
|
||||
A propriedade `align-items` é similar à `justify-content`. Lembre que a propriedade `justify-content` alinhou os flex items ao longo do eixo principal. Para linhas, o eixo principal é uma linha horizontal e para colunas é uma linha vertical.
|
||||
|
||||
Flex containers also have a **cross axis** which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.
|
||||
Flex containers também têm um **eixo transversal** que é o oposto do eixo principal. Para linhas, o eixo transversal é vertical, e para colunas, o eixo transversal é horizontal.
|
||||
|
||||
CSS offers the `align-items` property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.
|
||||
O CSS oferece a propriedade `align-items` para alinhar os flex items ao longo do eixo transversal. Para linhas, ela indica ao CSS como empurrar os itens para cima ou para baixo dentro do container. E para uma coluna, como empurrar todos os itens para a esquerda ou direita dentro do container.
|
||||
|
||||
The different values available for `align-items` include:
|
||||
Os valores disponíveis para `align-items` são:
|
||||
|
||||
<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.</li><li><code>center</code>: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).</li><li><code>stretch</code>: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom. This is the default value if no <code>align-items</code> value is specified.</li><li><code>baseline</code>: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.</li></ul>
|
||||
<ul><li><code>flex-start</code>: alinha os itens no início do container. Para linhas, os flex items são posicionados no topo do container. Para colunas, os flex items são posicionados à esquerda do container.</li><li><code>flex-end</code>: alinha os itens no final do container. Para linhas, todos os flex items são posicionados na parte inferior do container. Para colunas, os flex items são posicionados à direita do container.</li><li><code>center</code>: alinha os itens ao centro. Para linhas, os flex items são posicionados verticalmente (com espaços iguais acima e abaixo dos itens). Para colunas, os flex items são posicionados horizontalmente (com espaços iguais à esquerda e à direita dos itens).</li><li><code>stretch</code>: estica os itens para preencher o container. Por exemplo, itens posicionados em linhas são esticados para preencher o contêiner de cima a baixo. Este é o valor padrão se nenhum valor for especificado para a propriedade <code>align-items</code>.</li><li><code>baseline</code>: o posicionamento é realizado com base no texto dentro de cada flex item. A linha de base (baseline) é um conceito de textos. Pense nela como se fosse a linha em que as letras ficam apoiadas.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
An example helps show this property in action. Add the CSS property `align-items` to the `#box-container` element, and give it a value of `center`.
|
||||
Alguns exemplos vão te ajudar a entender os valores dessa propriedade em ação. Adicione a propriedade CSS `align-items` ao elemento `#box-container` e dê a ela o valor de `center`.
|
||||
|
||||
**Bonus**
|
||||
Try the other options for the `align-items` property in the code editor to see their differences. But note that a value of `center` is the only one that will pass this challenge.
|
||||
**Bônus**
|
||||
Use os demais valores da propriedade `align-items` no editor de código para ver as diferenças. Mas observe que o valor `center` será o único que vai fazer você passar neste desafio.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-container` element should have an `align-items` property set to a value of `center`.
|
||||
O elemento de id `#box-container` deve ter a propriedade `align-items` definida com o valor de `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('align-items') == 'center');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af6
|
||||
title: Align Elements Using the justify-content Property
|
||||
title: Alinhar elementos usando a propriedade justify-content
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm'
|
||||
forumTopicId: 301102
|
||||
@ -9,26 +9,26 @@ dashedName: align-elements-using-the-justify-content-property
|
||||
|
||||
# --description--
|
||||
|
||||
Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the `justify-content` property has several options to do this. But first, there is some important terminology to understand before reviewing those options.
|
||||
Às vezes, os flex items dentro de um flex container não preenchem todo o espaço no disponível no contêiner. É comum querer dizer ao CSS como alinhar e espaçar os flex items de uma certa maneira. Felizmente, a propriedade `justify-content` tem várias opções para fazer isso. Antes, no entanto, há uma terminologia importante para entender antes de aprender essas opções.
|
||||
|
||||
[Here is a useful image showing a row to illustrate the concepts below.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)
|
||||
[Aqui está uma imagem mostrando uma linha para ilustrar os conceitos abaixo.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)
|
||||
|
||||
Recall that setting a flex container as a row places the flex items side-by-side from left-to-right. A flex container set as a column places the flex items in a vertical stack from top-to-bottom. For each, the direction the flex items are arranged is called the **main axis**. For a row, this is a horizontal line that cuts through each item. And for a column, the main axis is a vertical line through the items.
|
||||
Lembre-se de que definir um flex container como uma linha coloca os flex items lado a lado da esquerda para a direita. Já um flex container como uma coluna coloca os flex items em uma pilha vertical de cima para baixo. Seja qual for a direção do flex container, a direção em que os flex items são posicionados é chamada de **eixo principal**. Para uma linha, o eixo principal é uma linha horizontal que passa através de cada item. E para uma coluna, o eixo principal é uma linha vertical que passa através de cada item.
|
||||
|
||||
There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is `justify-content: center;`, which aligns all the flex items to the center inside the flex container. Other options include:
|
||||
Existem várias opções para espaçar os flex items ao longo da linha que for o eixo principal. Uma dos mais usadas é `justify-content: center;`, que alinha todos os flex items ao centro dentro do flex container. As demais opções são:
|
||||
|
||||
<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no <code>justify-content</code> is specified.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.</li><li><code>space-between</code>: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items.</li><li><code>space-around</code>: similar to <code>space-between</code> but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container.</li><li><code>space-evenly</code>: Distributes space evenly between the flex items with a full space at either end of the flex container</li></ul>
|
||||
<ul><li><code>flex-start</code>: alinha os itens no início do contêiner. Para linhas, os flex items são empurrados para a esquerda do flex container. Para colunas, os flex items são empurrados para o topo do flex container. Este é o alinhamento padrão se nenhum valor for especificado para <code>justify-content</code>.</li><li><code>flex-end</code>: alinha itens no final do contêiner. Para linhas, os flex items são empurrados para a direita do flex container. Para colunas, os flex items são empurrados para a parte inferior do flex container.</li><li><code>space-between</code>: alinha os itens ao centro do eixo principal, com um espaçamento entre os itens. O primeiro item e o último são empurrados até a borda do flex container. Por exemplo, quando a direção do flex container for em linha, o primeiro item fica do lado esquerdo do contêiner e o último item fica no lado direito do contêiner. Então, o espaço restante é distribuído igualmente para os demais itens.</li><li><code>space-around</code>: similar ao <code>space-between</code> mas os primeiros e últimos itens não ficam grudados nas bordas do flex container, o espaço é distribuído em torno de todos os itens com metade do espaço em cada extremidade do flex container.</li><li><code>space-evenly</code>: distribui o espaço igualmente entre os flex items com um espaço completo em cada extremidade do flex container</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
An example helps show this property in action. Add the CSS property `justify-content` to the `#box-container` element, and give it a value of `center`.
|
||||
Alguns exemplos vão ajudar você a entender os valores dessa propriedade em ação. Adicione a propriedade CSS `justify-content` ao elemento `#box-container` e dê a ela o valor de `center`.
|
||||
|
||||
**Bonus**
|
||||
Try the other options for the `justify-content` property in the code editor to see their differences. But note that a value of `center` is the only one that will pass this challenge.
|
||||
**Bônus**
|
||||
Use os demais valores da propriedade `justify-content` no editor de código para ver as diferenças. Mas observe que o valor `center` será o único que vai fazer você passar neste desafio.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-container` element should have a `justify-content` property set to a value of `center`.
|
||||
O elemento `#box-container` deve ter a propriedade `justify-content` com o valor de `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('justify-content') == 'center');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af5
|
||||
title: Apply the flex-direction Property to Create a Column in the Tweet Embed
|
||||
title: Usar a propriedade flex-direction para criar uma coluna no Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cnzdVC9'
|
||||
forumTopicId: 301103
|
||||
@ -9,21 +9,21 @@ dashedName: apply-the-flex-direction-property-to-create-a-column-in-the-tweet-em
|
||||
|
||||
# --description--
|
||||
|
||||
The tweet embed `header` and `footer` used the `flex-direction` property earlier with a row value. Similarly, the items inside the `.profile-name` element would work well stacked as a column.
|
||||
Anteriormente, os elementos `header` e `footer` do tweet usaram a propriedade `flex-direction` para posicionar os flex items horizontalmente. Da mesma forma, os itens dentro do elemento de classe `.profile-name` funcionariam bem empilhados como uma coluna.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex-direction` to the header's `.profile-name` element and set the value to `column`.
|
||||
Adicione a propriedade `flex-direction` com o valor de `column` no elemento de classe `.profile-name`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
|
||||
O elemento de classe `.follow-btn` deve ser renderizado na página. Lembre-se de desativar as extensões que bloqueiam anúncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
The `.profile-name` element should have a `flex-direction` property set to `column`.
|
||||
O elemento de classe `.profile-name` deve possuir a propriedade `flex-direction` com o valor de `column`.
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('flex-direction') == 'column');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af3
|
||||
title: Apply the flex-direction Property to Create Rows in the Tweet Embed
|
||||
title: Usar a propriedade flex-direction para criar linhas no Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq'
|
||||
forumTopicId: 301104
|
||||
@ -9,27 +9,27 @@ dashedName: apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed
|
||||
|
||||
# --description--
|
||||
|
||||
The `header` and `footer` in the tweet embed example have child items that could be arranged as rows using the `flex-direction` property. This tells CSS to align the children horizontally.
|
||||
Os elementos `header` e `footer` no exemplo do tweet possuem itens filhos que podem ser posicionados em linhas usando a propriedade `flex-direction`. Você vai usar essa propriedade para dizer ao CSS para alinhar os flex items horizontalmente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex-direction` to both the `header` and `footer` and set the value to `row`.
|
||||
Adicione a propriedade `flex-direction` com o valor de `row` em ambos os elementos `header` e `footer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
|
||||
O elemento de classe `.follow-btn` deve ser renderizado na página. Lembre-se de desativar as extensões que bloqueiam anúncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
The `header` should have a `flex-direction` property set to `row`.
|
||||
O elemento `header` deve possuir a propriedade `flex-direction` com o valor de `row`.
|
||||
|
||||
```js
|
||||
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
The `footer` should have a `flex-direction` property set to `row`.
|
||||
O elemento `footer` deve possuir a propriedade `flex-direction` com o valor de `row`.
|
||||
|
||||
```js
|
||||
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af0
|
||||
title: 'Use display: flex to Position Two Boxes'
|
||||
title: 'Usar display: flex para posicionar duas caixas'
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7'
|
||||
forumTopicId: 301105
|
||||
@ -9,17 +9,17 @@ dashedName: use-display-flex-to-position-two-boxes
|
||||
|
||||
# --description--
|
||||
|
||||
This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.
|
||||
Esta seção utiliza estilos de desafio alternados para mostrar como usar o CSS para posicionar elementos de maneira flexível. Primeiro, o desafio explicará a teoria. Em seguida, aplicaremos o conceito aprendido em um desafio prático usando um tweet simples.
|
||||
|
||||
Placing the CSS property `display: flex;` on an element allows you to use other flex properties to build a responsive page.
|
||||
Colocando a propriedade `display: flex;` em um elemento permite que você use outras propriedades flex para construir uma página responsiva.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `display` to `#box-container` and set its value to `flex`.
|
||||
Adicione a propriedade CSS `display` ao `#box-container` e dê a ele o valor `flex`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container` should have the `display` property set to a value of `flex`.
|
||||
`#box-container` deve ter a propriedade `display` com o valor de `flex`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('display') == 'flex');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af9
|
||||
title: Use the align-items Property in the Tweet Embed
|
||||
title: Usar a propriedade align-items no Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PNfq'
|
||||
forumTopicId: 301106
|
||||
@ -9,21 +9,21 @@ dashedName: use-the-align-items-property-in-the-tweet-embed
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge introduced the `align-items` property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.
|
||||
O último desafio apresentou a propriedade `align-items` oferecendo um exemplo. Esta propriedade pode ser aplicada a alguns elementos do tweet para alinhar os flex items dentro deles.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `align-items` to the header's `.follow-btn` element. Set the value to `center`.
|
||||
Adicione a propriedade CSS `align-items` ao elemento `.follow-btn` que se encontra dentro do header. Defina o valor dessa propriedade para `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
|
||||
O elemento de classe `.follow-btn` deve ser renderizado na página. Lembre-se de desativar as extensões que bloqueiam anúncios.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
The `.follow-btn` element should have the `align-items` property set to a value of `center`.
|
||||
O elemento de classe `.follow-btn` deve ter a propriedade `align-items` definida com o valor de `center`.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('align-items') == 'center');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b00
|
||||
title: Use the align-self Property
|
||||
title: Usar a propriedade align-self
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvzfv'
|
||||
forumTopicId: 301107
|
||||
@ -9,23 +9,23 @@ dashedName: use-the-align-self-property
|
||||
|
||||
# --description--
|
||||
|
||||
The final property for flex items is `align-self`. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties `float`, `clear`, and `vertical-align` do not work on flex items.
|
||||
A última propriedade relacionada aos flex items é `align-self`. Esta propriedade permite que você ajuste o alinhamento de cada item individualmente, ao invés de configurar todos de uma vez. Isso acaba sendo útil, uma vez que outras técnicas comuns de ajuste utilizando as propriedades CSS `float`, `clear` e `vertical-align` não funcionam em flex items.
|
||||
|
||||
`align-self` accepts the same values as `align-items` and will override any value set by the `align-items` property.
|
||||
`align-self` aceita os mesmos valores que `align-items`, com a diferença que vai substituir qualquer valor anteriormente definido pela propriedade `align-items`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `align-self` to both `#box-1` and `#box-2`. Give `#box-1` a value of `center` and give `#box-2` a value of `flex-end`.
|
||||
Adicione a propriedade CSS `align-self` aos elementos com id de `#box-1` e `#box-2`. Dê para `#box-1` o valor de `center` e para `#box-2` o valor de `flex-end`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-1` element should have the `align-self` property set to a value of `center`.
|
||||
O elemento de id `#box-1` deve ter a propriedade `align-self` com o valor de `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('align-self') == 'center');
|
||||
```
|
||||
|
||||
The `#box-2` element should have the `align-self` property set to a value of `flex-end`.
|
||||
O elemento de id `#box-2` deve ter a propriedade `align-self` com o valor de `flex-end`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('align-self') == 'flex-end');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afd
|
||||
title: Use the flex-basis Property to Set the Initial Size of an Item
|
||||
title: Usar a propriedade flex-basis para definir o tamanho inicial de um flex item
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c3d9nCa'
|
||||
forumTopicId: 301108
|
||||
@ -9,35 +9,35 @@ dashedName: use-the-flex-basis-property-to-set-the-initial-size-of-an-item
|
||||
|
||||
# --description--
|
||||
|
||||
The `flex-basis` property specifies the initial size of the item before CSS makes adjustments with `flex-shrink` or `flex-grow`.
|
||||
A propriedade `flex-basis` especifica o tamanho inicial do item antes do CSS fazer ajustes com `flex-shrink` ou `flex-grow`.
|
||||
|
||||
The units used by the `flex-basis` property are the same as other size properties (`px`, `em`, `%`, etc.). The value `auto` sizes items based on the content.
|
||||
As unidades utilizadas pela propriedade `flex-basis` são as mesmas que outras propriedades de tamanho (`px`, `em`, `%`, etc.). O valor `auto` dimensiona os flex items baseado no conteúdo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Set the initial size of the boxes using `flex-basis`. Add the CSS property `flex-basis` to both `#box-1` and `#box-2`. Give `#box-1` a value of `10em` and `#box-2` a value of `20em`.
|
||||
Defina o tamanho inicial das caixas usando `flex-basis`. Adicione a propriedade CSS `flex-basis` aos elementos de id `#box-1` e `#box-2`. Dê para `#box-1` o valor de `10em` e `#box-2` o valor de `20em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-1` element should have the `flex-basis` property.
|
||||
O elemento de id `#box-1` deve ter a propriedade `flex-basis`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
The `#box-1` element should have a `flex-basis` value of `10em`.
|
||||
O elemento de id `#box-1` deve ter a propriedade `flex-basis` com o valor de `10em`.
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
|
||||
```
|
||||
|
||||
The `#box-2` element should have the `flex-basis` property.
|
||||
O elemento de id `#box-2` deve ter a propriedade `flex-basis`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
The `#box-2` element should have a `flex-basis` value of `20em`.
|
||||
O elemento de id `#box-2` deve ter a propriedade `flex-basis` com o valor de `20em`.
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af4
|
||||
title: Use the flex-direction Property to Make a Column
|
||||
title: Usar a propriedade flex-direction para criar uma coluna
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4'
|
||||
forumTopicId: 301109
|
||||
@ -9,15 +9,15 @@ dashedName: use-the-flex-direction-property-to-make-a-column
|
||||
|
||||
# --description--
|
||||
|
||||
The last two challenges used the `flex-direction` property set to `row`. This property can also create a column by vertically stacking the children of a flex container.
|
||||
Os últimos dois desafios usaram a propriedade `flex-direction` com o valor de `row`. Esta propriedade também pode criar uma coluna ao empilhar verticalmente os elementos filhos de um flex container.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex-direction` to the `#box-container` element, and give it a value of `column`.
|
||||
Adicione a propriedade CSS `flex-direction` ao elemento de id `#box-container` e dê a ela o valor de `column`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-container` element should have a `flex-direction` property set to `column`.
|
||||
O elemento de id `#box-container` deve ter a propriedade `flex-direction` com o valor de `column`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'column');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af2
|
||||
title: Use the flex-direction Property to Make a Row
|
||||
title: Usar a propriedade flex-direction para criar uma linha
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
|
||||
forumTopicId: 301110
|
||||
@ -9,19 +9,19 @@ dashedName: use-the-flex-direction-property-to-make-a-row
|
||||
|
||||
# --description--
|
||||
|
||||
Adding `display: flex` to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the `flex-direction` property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.
|
||||
Ao adicionar `display: flex` a um elemento, você o transforma em um flex container. Isso faz com que seja possível alinhar todos os filhos desse elemento em linhas ou colunas. Para fazer isso, você deve usar a propriedade `flex-direction` no item pai e definir o valor desta usando row ou column. Criar uma row (linha) vai alinhar os itens filhos horizontalmente. Criar uma column (coluna) vai alinhar os itens filhos verticalmente.
|
||||
|
||||
Other options for `flex-direction` are `row-reverse` and `column-reverse`.
|
||||
Outras opções para `flex-direction` são `row-reverse` e `column-reverse`.
|
||||
|
||||
**Note:** The default value for the `flex-direction` property is `row`.
|
||||
**Observação:** o valor padrão da propriedade `flex-direction` é `row`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the CSS property `flex-direction` to the `#box-container` element, and give it a value of `row-reverse`.
|
||||
Adicione a propriedade CSS `flex-direction` ao elemento de id `#box-container` e dê a ela o valor de `row-reverse`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `#box-container` element should have a `flex-direction` property set to `row-reverse`.
|
||||
O elemento de id `#box-container` deve ter a propriedade `flex-direction` com o valor de `row-reverse`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'row-reverse');
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user