feat: add 'back/front end' in curriculum (#42596)
* chore: rename APIs and Microservices to include "Backend" (#42515) * fix typo * fix typo * undo change * Corrected grammar mistake Corrected a grammar mistake by removing a comma. * change APIs and Microservices cert title * update title * Change APIs and Microservices certi title * Update translations.json * update title * feat(curriculum): rename apis and microservices cert * rename folder structure * rename certificate * rename learn Markdown * apis-and-microservices -> back-end-development-and-apis * update backend meta * update i18n langs and cypress test Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: add development to front-end libraries (#42512) * fix: added-the-word-Development-to-front-end-libraries * fix/added-the-word-Development-to-front-end-libraries * fix/added-word-development-to-front-end-libraries-in-other-related-files * fix/added-the-word-Development-to-front-end-and-all-related-files * fix/removed-typos-from-last-commit-in-index.md * fix/reverted-changes-that-i-made-to-dependecies * fix/removed xvfg * fix/reverted changes that i made to package.json * remove unwanted changes * front-end-development-libraries changes * rename backend certSlug and README * update i18n folder names and keys * test: add legacy path redirect tests This uses serve.json from the client-config repo, since we currently use that in production * fix: create public dir before moving serve.json * fix: add missing script * refactor: collect redirect tests * test: convert to cy.location for stricter tests * rename certificate folder to 00-certificates * change crowdin config to recognise new certificates location * allow translations to be used Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add forwards slashes to path redirects * fix cypress path tests again * plese cypress * fix: test different challenge Okay so I literally have no idea why this one particular challenge fails in Cypress Firefox ONLY. Tom and I paired and spun a full build instance and confirmed in Firefox the page loads and redirects as expected. Changing to another bootstrap challenge passes Cypress firefox locally. Absolutely boggled by this. AAAAAAAAAAAAAAA * fix: separate the test Okay apparently the test does not work unless we separate it into a different `it` statement. >:( >:( >:( >:( Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com> Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
Shaun Hamilton
GitHub
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908849
|
||||
title: Aggiungere elementi in un contenitore well
|
||||
challengeType: 0
|
||||
forumTopicId: 16636
|
||||
dashedName: add-elements-within-your-bootstrap-wells
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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`.
|
||||
|
||||
Annida tre elementi `button` all'interno di ciascuno dei tuoi elementi `div` di classe `well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tre elementi `button` dovrebbero essere annidati all'interno di ciascuno dei tuoi elementi `div` di classe `well`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div.well:eq(0)').children('button').length === 3 &&
|
||||
$('div.well:eq(1)').children('button').length === 3
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti avere un totale di 6 elementi `button`.
|
||||
|
||||
```js
|
||||
assert($('button') && $('button').length > 5);
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `button` dovrebbero avere tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,178 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08845
|
||||
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'
|
||||
raw: true
|
||||
dashedName: add-font-awesome-icons-to-all-of-our-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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--
|
||||
|
||||
Usa Font Awesome per aggiungere un'icona `info-circle` al tuo pulsante info e un'icona `trash` al tuo pulsante di eliminazione.
|
||||
|
||||
**Nota:** L'elemento `span` è un'alternativa accettabile all'elemento `i` per le istruzioni sottostanti.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un pulsante `<i class="fas fa-info-circle"></i>` all'interno dell'elemento `info`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.btn-info > i').is('.fas.fa-info-circle') ||
|
||||
$('.btn-info > span').is('.fas.fa-info-circle')
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti aggiungere un `<i class="fas fa-trash"></i>` all'interno del tuo bottone `delete`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.btn-danger > i').is('.fas.fa-trash') ||
|
||||
$('.btn-danger > span').is('.fas.fa-trash')
|
||||
);
|
||||
```
|
||||
|
||||
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(
|
||||
code.match(/<\/i>|<\/span/g) &&
|
||||
code.match(/<\/i|<\/span>/g).length > 2 &&
|
||||
($('.btn-primary > i').is('.fas.fa-thumbs-up') ||
|
||||
$('.btn-primary > span').is('.fas.fa-thumbs-up'))
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fas fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fas fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,195 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08845
|
||||
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'
|
||||
raw: true
|
||||
dashedName: add-font-awesome-icons-to-our-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
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 questo caso, lo abbiamo già aggiunto per te a questa pagina dietro le quinte.
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
Nota che anche l'elemento `span` è accettabile per l'uso con le icone.
|
||||
|
||||
# --instructions--
|
||||
|
||||
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--
|
||||
|
||||
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'));
|
||||
```
|
||||
|
||||
L'icona `fa-thumbs-up` dovrebbe essere posizionata all'interno del pulsante Like.
|
||||
|
||||
```js
|
||||
assert(
|
||||
($('i.fa-thumbs-up').parent().text().match(/Like/gi) &&
|
||||
$('.btn-primary > i').is('.fas.fa-thumbs-up')) ||
|
||||
($('span.fa-thumbs-up').parent().text().match(/Like/gi) &&
|
||||
$('.btn-primary > span').is('.fas.fa-thumbs-up'))
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `i` dovrebbe essere annidato all'interno dell'elemento `button`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('button').children('i').length > 0 ||
|
||||
$('button').children('span').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento icon dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/i>|<\/span>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908853
|
||||
title: Aggiungere attributi id agli elementi di Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16639
|
||||
dashedName: add-id-attributes-to-bootstrap-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ricorda che oltre agli attributi di classe, puoi dare a ciascuno dei tuoi elementi un attributo `id`.
|
||||
|
||||
Ogni id deve essere unico per uno specifico elemento e dev'essere usato una sola volta per pagina.
|
||||
|
||||
Diamo un id unico a ciascuno dei nostri elementi `div` di classe `well`.
|
||||
|
||||
Ricorda che puoi dare ad un elemento un id come questo:
|
||||
|
||||
```html
|
||||
<div class="well" id="center-well">
|
||||
```
|
||||
|
||||
Dai all'elemento well sulla sinistra l'id di `left-well`. Dai all'elemento well sulla destra l'id di `right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo `well` di sinistra dovrebbe avere l'id di `left-well`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.col-xs-6').children('#left-well') &&
|
||||
$('.col-xs-6').children('#left-well').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo `well` di destra dovrebbe avere l'id di `right-well`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.col-xs-6').children('#right-well') &&
|
||||
$('.col-xs-6').children('#right-well').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908850
|
||||
title: Applicare lo stile del pulsante Bootstrap di default
|
||||
challengeType: 0
|
||||
forumTopicId: 16657
|
||||
dashedName: apply-the-default-bootstrap-button-style
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap ha un'altra classe di bottoni chiamata `btn-default`.
|
||||
|
||||
Applica le classi `btn` e `btn-default` a ciascuno dei tuoi elementi `button`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti applicare la classe `btn` a ciascuno dei tuoi elementi `button`.
|
||||
|
||||
```js
|
||||
assert($('.btn').length > 5);
|
||||
```
|
||||
|
||||
Dovresti applicare la classe `btn-default` a ciascuno dei tuoi elementi `button`.
|
||||
|
||||
```js
|
||||
assert($('.btn-default').length > 5);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,175 @@
|
||||
---
|
||||
id: bad87fee1348cd8acef08813
|
||||
title: Stilizzare azioni facoltative con btn-info
|
||||
challengeType: 0
|
||||
forumTopicId: 16770
|
||||
dashedName: call-out-optional-actions-with-btn-info
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
Nota che questi pulsanti hanno ancora bisogno delle classi `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un nuovo elemento `button` con il testo `Info`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('info', 'gi').test($('button').text()));
|
||||
```
|
||||
|
||||
Entrambi i pulsanti di Bootstrap dovrebbero avere le classi `btn` e `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button.btn-block.btn').length > 1);
|
||||
```
|
||||
|
||||
Il tuo nuovo pulsante dovrebbe avere la classe `btn-info`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-info'));
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `button` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,157 @@
|
||||
---
|
||||
id: bad87fee1348bd8acde08812
|
||||
title: Centrare il testo con Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16771
|
||||
dashedName: center-text-with-bootstrap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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`.
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h2` dovrebbe essere centrato applicando la classe `text-center`
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('text-center'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h2` dovrebbe appartenere ancora alla classe `red-text`
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,185 @@
|
||||
---
|
||||
id: bad87fee1348cd8acef08812
|
||||
title: Creare un pulsante Bootstrap di tipo blocco
|
||||
challengeType: 0
|
||||
forumTopicId: 16810
|
||||
dashedName: create-a-block-element-bootstrap-button
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
Questo pulsante sarà ampio solo quanto la parola `Submit`.
|
||||
|
||||
<button class='btn btn-default'>Submit</button>
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
Questo pulsante prenderà il 100% della larghezza disponibile.
|
||||
|
||||
<button class='btn btn-default btn-block'>Submit</button>
|
||||
|
||||
Nota che questi bottoni hanno ancora bisogno della classe `btn`.
|
||||
|
||||
Aggiungi la classe `btn-block` di Bootstrap al tuo pulsante.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo pulsante dovrebbe avere ancora le classi `btn` e `btn-default`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
|
||||
```
|
||||
|
||||
Il tuo pulsante dovrebbe avere la classe `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-block'));
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `button` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<button class="btn btn-default">Like</button>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<button class="btn btn-block btn-default">Like</button>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: bad87fee1348cd8acdf08812
|
||||
title: Creare un bottone con Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16811
|
||||
dashedName: create-a-bootstrap-button
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap ha i suoi stili per gli elementi `button`, e questo li fa apparire molto più belli di quelli dell'HTML semplice.
|
||||
|
||||
Crea un nuovo elemento `button` sotto alla foto grande dei gattini. Dagli le classi `btn` e `btn-default`, e il testo di `Like`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un nuovo elemento `button` con il testo `Like`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
new RegExp('like', 'gi').test($('button').text()) &&
|
||||
$('img.img-responsive + button.btn').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo nuovo pulsante dovrebbe avere due classi: `btn` e `btn-default`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `button` dovrebbero avere tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
|
||||
<!-- ADD Bootstrap Styled Button -->
|
||||
<button class="btn btn-default">Like</button>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908846
|
||||
title: Creare un titolo con Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16812
|
||||
dashedName: create-a-bootstrap-headline
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora costruiamo qualcosa da zero per fare pratica con le nostre abilità HTML, CSS e Bootstrap.
|
||||
|
||||
Costruiremo un "terreno di gioco" che presto useremo con le nostre sfide jQuery.
|
||||
|
||||
Per iniziare, crea un elemento `h3`, con il testo `jQuery Playground`.
|
||||
|
||||
Colora il tuo elemento `h3` con la classe Bootstrap `text-primary` e centralo con la classe `text-center` Bootstrap.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `h3` alla tua pagina.
|
||||
|
||||
```js
|
||||
assert($('h3') && $('h3').length > 0);
|
||||
```
|
||||
|
||||
Il tuo elemento `h3` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h3>/g) &&
|
||||
code.match(/<h3/g) &&
|
||||
code.match(/<\/h3>/g).length === code.match(/<h3/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h3` dovrebbe essere colorato applicando la classe `text-primary`
|
||||
|
||||
```js
|
||||
assert($('h3').hasClass('text-primary'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h3` dovrebbe essere centrato applicando la classe `text-center`
|
||||
|
||||
```js
|
||||
assert($('h3').hasClass('text-center'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h3` dovrebbe avere il testo `jQuery Playground`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
```
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: bad87fee1348bd9bec908846
|
||||
title: Creare una riga di Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16813
|
||||
dashedName: create-a-bootstrap-row
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora creeremo una riga (row) di Bootstrap per i nostri elementi in linea.
|
||||
|
||||
Crea un elemento `div` sotto il tag `h3`, con una classe `row`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `div` sotto il tuo elemento `h3`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').length > 1 &&
|
||||
$('div.row h3.text-primary').length == 0 &&
|
||||
$('div.row + h3.text-primary').length == 0 &&
|
||||
$('h3.text-primary + div.row').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `div` dovrebbe avere la classe `row`
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('row'));
|
||||
```
|
||||
|
||||
Il tuo `row div` dovrebbe essere annidato all'interno del `container-fluid div`
|
||||
|
||||
```js
|
||||
assert($('div.container-fluid div.row').length > 0);
|
||||
```
|
||||
|
||||
Il tuo elemento `div` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row"></div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908852
|
||||
title: Creare una classe da usare con i selettori jQuery
|
||||
challengeType: 0
|
||||
forumTopicId: 16815
|
||||
dashedName: create-a-class-to-target-with-jquery-selectors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
Assegna a ciascuno dei tuoi elementi `button` la classe `target`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti applicare la classe `target` a ciascuno dei tuoi elementi `button`.
|
||||
|
||||
```js
|
||||
assert($('.target').length > 5);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
<button class="btn btn-default"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="target btn btn-default"></button>
|
||||
<button class="target btn btn-default"></button>
|
||||
<button class="target btn btn-default"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well">
|
||||
<button class="target btn btn-default"></button>
|
||||
<button class="target btn btn-default"></button>
|
||||
<button class="target btn btn-default"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,177 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08845
|
||||
title: Creare un'intestazione personalizzata
|
||||
challengeType: 0
|
||||
forumTopicId: 16816
|
||||
dashedName: create-a-custom-heading
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Creeremo una semplice intestazione per la nostra Cat Photo App mettendo il titolo e l'immagine del gatto nella stessa riga.
|
||||
|
||||
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`.
|
||||
|
||||
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.
|
||||
|
||||
Hai notato come l'immagine ha ora la giusta dimensione per adattarsi al testo?
|
||||
|
||||
# --hints--
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
Il tuo elemento `img` più in alto dovrebbe essere annidato all'interno di un `div` di classe `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div.col-xs-4:has(img)').length > 0 &&
|
||||
$('div.col-xs-4:has(div)').length === 0
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h2` dovrebbe essere annidato all'interno di un `div` di classe `col-xs-8`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div.col-xs-8:has(h2)').length > 0 &&
|
||||
$('div.col-xs-8:has(div)').length === 0
|
||||
);
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `div` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908848
|
||||
title: Creare degli elementi incassati con Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 16825
|
||||
dashedName: create-bootstrap-wells
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap ha una classe chiamata `well` che può creare un effetto di profondità per le tue colonne.
|
||||
|
||||
Nidifica un elemento `div` con la classe `well` dentro a ognuno dei tuoi elementi `div` di classe `col-xs-6`.
|
||||
|
||||
# --hints--
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `div` dovrebbero avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well"></div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,188 @@
|
||||
---
|
||||
id: bad87fee1347bd9aedf08845
|
||||
title: Sostituire il CSS personalizzato con quello di Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 17565
|
||||
dashedName: ditch-custom-css-for-bootstrap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
Non preoccuparti - ci sarà un sacco di tempo per personalizzare il nostro CSS successivamente.
|
||||
|
||||
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`.
|
||||
|
||||
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.
|
||||
|
||||
Infine, rimuovi la classe `smaller-image` dal tuo primo elemento `img` e sostituiscila con la classe `img-responsive`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h2` non dovrebbe più avere la classe `red-text`.
|
||||
|
||||
```js
|
||||
assert(!$('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h2` dovrebbe ora avere la classe `text-primary`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('text-primary'));
|
||||
```
|
||||
|
||||
I tuoi elementi di paragrafo non dovrebbero più usare il carattere `Monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!$('p')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
La classe `smaller-image` dovrebbe essere rimossa dalla tua immagine in alto.
|
||||
|
||||
```js
|
||||
assert(!$('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Dovresti aggiungere la classe `img-responsive` alla tua immagine più in alto.
|
||||
|
||||
```js
|
||||
assert($('.img-responsive').length > 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908855
|
||||
title: Dare ad ogni elemento un id unico
|
||||
challengeType: 0
|
||||
forumTopicId: 18191
|
||||
dashedName: give-each-element-a-unique-id
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vorremo anche essere in grado di utilizzare jQuery per selezionare ogni bottone usando il suo id univoco.
|
||||
|
||||
Dai a ciascuno dei tuoi bottoni un id unico, iniziando con `target1` e terminando con `target6`.
|
||||
|
||||
Assicurati che gli elementi da `target1` a `target3` siano in `#left-well`, e quelli da `target4` a `target6` siano in `#right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Un elemento `button` dovrebbe avere l'id `target1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#left-well').children('#target1') &&
|
||||
$('#left-well').children('#target1').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Un elemento `button` dovrebbe avere l'id `target2`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#left-well').children('#target2') &&
|
||||
$('#left-well').children('#target2').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Un elemento `button` dovrebbe avere l'id `target3`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#left-well').children('#target3') &&
|
||||
$('#left-well').children('#target3').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Un elemento `button` dovrebbe avere l'id `target4`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#right-well').children('#target4') &&
|
||||
$('#right-well').children('#target4').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Un elemento `button` dovrebbe avere l'id `target5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#right-well').children('#target5') &&
|
||||
$('#right-well').children('#target5').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Un elemento `button` dovrebbe avere l'id `target6`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#right-well').children('#target6') &&
|
||||
$('#right-well').children('#target6').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1"></button>
|
||||
<button class="btn btn-default target" id="target2"></button>
|
||||
<button class="btn btn-default target" id="target3"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4"></button>
|
||||
<button class="btn btn-default target" id="target5"></button>
|
||||
<button class="btn btn-default target" id="target6"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,53 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908746
|
||||
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
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora assicuriamoci che tutti i contenuti sulla tua pagina siano responsivi sui dispositivi mobili.
|
||||
|
||||
Nidifichiamo l'elemento `h3` all'interno di un elemento `div` di classe `container-fluid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `div` dovrebbe avere la classe `container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('container-fluid'));
|
||||
```
|
||||
|
||||
Ognuno dei tuoi elementi `div` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h3` dovrebbe essere annidato all'interno di un elemento `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('h3').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908856
|
||||
title: Etichettare i bottoni di Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18222
|
||||
dashedName: label-bootstrap-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Proprio come abbiamo etichettato i nostri well, vogliamo etichettare i nostri pulsanti.
|
||||
|
||||
Dai a ciascuno dei tuoi elementi `button` un testo che corrisponda al suo selettore id.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `button` con l'id `target1` dovrebbe avere il testo `#target1`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target1', 'gi').test($('#target1').text()));
|
||||
```
|
||||
|
||||
Il tuo elemento `button` con l'id `target2` dovrebbe avere il testo `#target2`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target2', 'gi').test($('#target2').text()));
|
||||
```
|
||||
|
||||
Il tuo elemento `button` con l'id `target3` dovrebbe avere il testo `#target3`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target3', 'gi').test($('#target3').text()));
|
||||
```
|
||||
|
||||
Il tuo elemento `button` con l'id `target4` dovrebbe avere il testo `#target4`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target4', 'gi').test($('#target4').text()));
|
||||
```
|
||||
|
||||
Il tuo elemento `button` con l'id `target5` dovrebbe avere il testo `#target5`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target5', 'gi').test($('#target5').text()));
|
||||
```
|
||||
|
||||
Il tuo elemento `button` con l'id `target6` dovrebbe avere il testo `#target6`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#target6', 'gi').test($('#target6').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1"></button>
|
||||
<button class="btn btn-default target" id="target2"></button>
|
||||
<button class="btn btn-default target" id="target3"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4"></button>
|
||||
<button class="btn btn-default target" id="target5"></button>
|
||||
<button class="btn btn-default target" id="target6"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,101 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908854
|
||||
title: Etichettare gli elementi incassati
|
||||
challengeType: 0
|
||||
forumTopicId: 18223
|
||||
dashedName: label-bootstrap-wells
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per motivi di chiarezza, etichettiamo entrambi i nostri well con i loro id.
|
||||
|
||||
Sopra il well di sinistra, all'interno del `div` di classe `col-xs-6`, aggiungi un elemento `h4` con il testo `#left-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--
|
||||
|
||||
Dovresti aggiungere un elemento `h4` a ciascuno dei tuoi elementi `<div class="col-xs-6">`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.col-xs-6').children('h4') && $('.col-xs-6').children('h4').length > 1
|
||||
);
|
||||
```
|
||||
|
||||
Un elemento `h4` dovrebbe avere il testo `#left-well`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#left-well', 'gi').test($('h4').text()));
|
||||
```
|
||||
|
||||
Un elemento `h4` dovrebbe avere il testo `#right-well`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#right-well', 'gi').test($('h4').text()));
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `h4` dovrebbero avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h4>/g) &&
|
||||
code.match(/<h4/g) &&
|
||||
code.match(/<\/h4>/g).length === code.match(/<h4/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,215 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908845
|
||||
title: Allineare responsivamente gli elementi dei moduli con Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18225
|
||||
required:
|
||||
-
|
||||
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
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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-*`.
|
||||
|
||||
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`.
|
||||
|
||||
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--
|
||||
|
||||
Il pulsante di invio del modulo e l'input di testo dovrebbero essere annidati in un div di classe `row`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div.row:has(input[type="text"])').length > 0 &&
|
||||
$('div.row:has(button[type="submit"])').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `div` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="cat photo URL" required>
|
||||
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-7">
|
||||
<input type="text" class="form-control" placeholder="cat photo URL" required>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08812
|
||||
title: Rendi le immagini responsive sui dispositivi mobili
|
||||
challengeType: 0
|
||||
forumTopicId: 18232
|
||||
dashedName: make-images-mobile-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Innanzitutto, aggiungi una nuova immagine sotto quella esistente. Imposta l'attributo `src` su `https://bit.ly/fcc-running-cats`.
|
||||
|
||||
Sarebbe bello se questa immagine potesse essere larga esattamente come lo schermo del nostro telefono.
|
||||
|
||||
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--
|
||||
|
||||
Dovresti avere un totale di due immagini.
|
||||
|
||||
```js
|
||||
assert($('img').length === 2);
|
||||
```
|
||||
|
||||
La tua nuova immagine dovrebbe essere sotto la vecchia e avere la classe `img-responsive`.
|
||||
|
||||
```js
|
||||
assert($('img:eq(1)').hasClass('img-responsive'));
|
||||
```
|
||||
|
||||
La tua nuova immagine non dovrebbe avere la classe `smaller-image`.
|
||||
|
||||
```js
|
||||
assert(!$('img:eq(1)').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
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');
|
||||
```
|
||||
|
||||
Il tuo nuovo elemento `img` dovrebbe avere una parentesi angolare di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<img/g) &&
|
||||
code.match(/<img[^<]*>/g).length === 2 &&
|
||||
code.match(/<img/g).length === 2
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive">
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,192 @@
|
||||
---
|
||||
id: bad87fee1348bd9aeda08845
|
||||
title: Stilizzare responsivamente le caselle di spunta
|
||||
challengeType: 0
|
||||
forumTopicId: 18269
|
||||
required:
|
||||
-
|
||||
link: >-
|
||||
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
|
||||
raw: true
|
||||
dashedName: responsively-style-checkboxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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--
|
||||
|
||||
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--
|
||||
|
||||
Tutte le caselle di spunta dovrebbero essere annidate in un `div` di classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(input[type="checkbox"])').length > 0);
|
||||
```
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `div` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedb08845
|
||||
title: Stilizzare responsivamente i pulsanti di opzione
|
||||
challengeType: 0
|
||||
forumTopicId: 18270
|
||||
required:
|
||||
-
|
||||
link: >-
|
||||
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
|
||||
raw: true
|
||||
dashedName: responsively-style-radio-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
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">`.
|
||||
|
||||
**Nota:** Come promemoria, i pulsanti di opzione sono elementi `input` di tipo `radio`.
|
||||
|
||||
# --hints--
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `div` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908847
|
||||
title: Dividere la riga di Bootrtrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18306
|
||||
dashedName: split-your-bootstrap-row
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora che abbiamo una riga di Bootstrap, dividiamola in due colonne per alloggiare i nostri elementi.
|
||||
|
||||
Crea due elementi `div` all'interno della tua riga, entrambi di classe `col-xs-6`.
|
||||
|
||||
# --hints--
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `div` dovrebbero avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6"></div>
|
||||
<div class="col-xs-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,202 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed908845
|
||||
title: Stilizzare gli input di testo come controlli del modulo
|
||||
challengeType: 0
|
||||
forumTopicId: 18312
|
||||
required:
|
||||
-
|
||||
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
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
Tutti gli elementi testuali `<input>`, `<textarea>`, e `<select>` di classe `.form-control` hanno una larghezza del 100%.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il bottone di invio nel tuo modulo dovrebbe avere le classi `btn btn-primary`.
|
||||
|
||||
```js
|
||||
assert($('button[type="submit"]').hasClass('btn btn-primary'));
|
||||
```
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
L'`input` di testo nel tuo modulo dovrebbe avere la classe `form-control`.
|
||||
|
||||
```js
|
||||
assert($('input[type="text"]').hasClass('form-control'));
|
||||
```
|
||||
|
||||
Ognuno dei tuoi elementi `i` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="cat photo URL" required>
|
||||
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,167 @@
|
||||
---
|
||||
id: bad87fee1348cd8acef08811
|
||||
title: Assaggia l'arcobaleno dei colori dei bottoni di Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18323
|
||||
dashedName: taste-the-bootstrap-button-color-rainbow
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La classe `btn-primary` è il colore che userai principalmente nella tua app. È utile per evidenziare le azioni che vuoi che il tuo utente intraprenda.
|
||||
|
||||
Sostituisci la classe `btn-default` di Bootstrap con `btn-primary` nel tuo pulsante.
|
||||
|
||||
Nota che questo pulsante avrà ancora bisogno delle classi `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo pulsante dovrebbe avere la classe `btn-primary`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-primary'));
|
||||
```
|
||||
|
||||
Il tuo pulsante dovrebbe avere ancora le classi `btn` e `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-block') && $('button').hasClass('btn'));
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `button` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<button class="btn btn-default btn-block">Like</button>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<button class="btn btn-primary btn-block">Like</button>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,185 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08845
|
||||
title: Usare un intervallo per selezionare gli elementi in linea
|
||||
challengeType: 0
|
||||
forumTopicId: 18370
|
||||
dashedName: use-a-span-to-target-inline-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
È 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);'>bottone normale</button>
|
||||
|
||||
<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>bottone btn-block</button>
|
||||
|
||||
Questo mostra la differenza tra un elemento "inline" e un elemento "block".
|
||||
|
||||
Utilizzando l'elemento inline `span`, puoi inserire diversi elementi sulla stessa linea, e anche stilizzare diverse parti della stessa linea in modo diverso.
|
||||
|
||||
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.
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `span` dovrebbe essere all'interno dell'elemento `p`.
|
||||
|
||||
```js
|
||||
assert($('p span') && $('p span').length > 0);
|
||||
```
|
||||
|
||||
Il tuo elemento `span` dovrebbe avere solo il testo `love`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p span') &&
|
||||
$('p span').text().match(/love/i) &&
|
||||
!$('p span')
|
||||
.text()
|
||||
.match(/Things cats/i)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `span` dovrebbe essere di classe `text-danger`.
|
||||
|
||||
```js
|
||||
assert($('span').hasClass('text-danger'));
|
||||
```
|
||||
|
||||
Il tuo elemento `span` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/span>/g) &&
|
||||
code.match(/<span/g) &&
|
||||
code.match(/<\/span>/g).length === code.match(/<span/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love</span>:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,98 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908857
|
||||
title: Usare i commenti per chiarire il codice
|
||||
challengeType: 0
|
||||
forumTopicId: 18347
|
||||
dashedName: use-comments-to-clarify-code
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando inizieremo a usare jQuery, modificheremo gli elementi HTML senza doverli cambiare effettivamente usando l'HTML.
|
||||
|
||||
Facciamo in modo che tutti sappiano che non dovrebbero modificare niente di questo codice in modo diretto.
|
||||
|
||||
Ricorda che puoi iniziare un commento con `<!--` e terminarlo con `-->`
|
||||
|
||||
Aggiungi un commento nella parte superiore del tuo HTML che dica `Code below this line should not be changed`
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti iniziare un commento con `<!--` nella parte superiore del tuo HTML.
|
||||
|
||||
```js
|
||||
assert(code.match(/^\s*<!--/));
|
||||
```
|
||||
|
||||
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));
|
||||
```
|
||||
|
||||
Dovresti chiudere il tuo commento con `-->`.
|
||||
|
||||
```js
|
||||
assert(code.match(/-->.*\n+.+/g));
|
||||
```
|
||||
|
||||
Dovresti avere lo stesso numero di aperture e chiusure di commenti.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--/g).length === code.match(/-->/g).length);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!-- Code below this line should not be changed -->
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,170 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08712
|
||||
title: Usare il design responsivo con i contenitori fluidi di Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18362
|
||||
dashedName: use-responsive-design-with-bootstrap-fluid-containers
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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 capirà quanto è largo lo schermo e risponderà ridimensionando i tuoi elementi HTML - da qui il nome <dfn>design responsivo</dfn>.
|
||||
|
||||
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.
|
||||
|
||||
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 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.
|
||||
|
||||
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--
|
||||
|
||||
Il tuo elemento `div` dovrebbe avere la classe `container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('container-fluid'));
|
||||
```
|
||||
|
||||
Il tuo elemento `div` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,196 @@
|
||||
---
|
||||
id: bad88fee1348ce8acef08815
|
||||
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
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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 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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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">`.
|
||||
|
||||
La classe `row` viene applicata a un `div`, e i bottoni stessi possono essere annidati al suo interno.
|
||||
|
||||
# --hints--
|
||||
|
||||
I tuoi bottoni dovrebbero essere tutti annidati all'interno dello stesso elemento `div` di classe `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(button)').length > 0);
|
||||
```
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
Ognuno dei tuoi elementi `button` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Ognuno dei tuoi elementi `div` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<div/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: bad87fee1348ce8acef08814
|
||||
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
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
Crea un bottone con il testo `Delete` e dagli una classe `btn-danger`.
|
||||
|
||||
Nota che questi pulsanti hanno ancora bisogno delle classi `btn` e `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un nuovo elemento `button` con il testo `Delete`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('Delete', 'gi').test($('button').text()));
|
||||
```
|
||||
|
||||
Tutti i bottoni di Bootstrap dovrebbero avere le classi `btn` e `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button.btn-block.btn').length > 2);
|
||||
```
|
||||
|
||||
Il tuo nuovo bottone dovrebbe avere la classe `btn-danger`.
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('btn-danger'));
|
||||
```
|
||||
|
||||
Tutti i tuoi elementi `button` dovrebbero avere dei tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
Reference in New Issue
Block a user