mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-07 15:03:20 -04:00
chore(i18n,learn): processed translations (#47657)
This commit is contained in:
camperbot
@@ -7,7 +7,7 @@ dashedName: step-9
|
||||
|
||||
# --description--
|
||||
|
||||
Dai all'elemento background buildings delle proprietà `width` e `height` del `100%` per renderlo della stessa dimensione del suo genitore, l'elemento `body`.
|
||||
Dai all'elemento `.background-buildings` delle proprietà `width` e `height` del `100%` in modo da renderlo della stessa larghezza e altezza del suo genitore, il `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-14
|
||||
|
||||
# --description--
|
||||
|
||||
Ora hai qualcosa che assomiglia a un edificio. Sei pronto per creare la tua prima variabile. Le dichiarazioni di variabili iniziano con due trattini (`-`) e hanno un nome e un valore come questo: `--nome-variabile: valore;`. Nella classe `.bb1`, crea una variabile chiamata `--building-color1` e dalle il valore `#999`.
|
||||
Ora hai qualcosa che assomiglia a un edificio. Sei pronto per creare la tua prima variabile. Le dichiarazioni di variabili iniziano con due trattini (`-`) e hanno un nome e un valore come questo: `--nome-variabile: valore;`. Nella regola per la classe `bb1`, crea una variabile chiamata `--building-color1` e dalle il valore `#999`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ dashedName: step-15
|
||||
|
||||
Per usare una variabile, inserisci il suo nome tra le parentesi con `var` di fronte: `var(--nome-variabile)`. Qualunque sia il valore che hai dato alla variabile verrà applicato a qualsiasi proprietà su cui la utilizzi.
|
||||
|
||||
Aggiungi la variabile `--building-color-1` che hai creato nello step precedente come valore della proprietà `background-color` della classe `.bb1a`.
|
||||
Aggiungi la variabile `--building-color1` che hai creato nello step precedente come valore della proprietà `background-color` della classe `.bb1a`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti impostare la proprietà `background-color` per l'elemento `bb1a`.
|
||||
Dovresti impostare la proprietà `background-color` per l'elemento `.bb1a`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
|
||||
|
||||
@@ -11,7 +11,7 @@ Imposta `background-color` per le classi `.bb1b`, `.bb1c` e `.bb1d` con la stess
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti impostare la proprietà `background-color` per l'elemento `bb1b`.
|
||||
Dovresti impostare la proprietà `background-color` per l'elemento `.bb1b`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
|
||||
@@ -23,7 +23,7 @@ Dovresti usare `var(--building-color1)` per impostare la proprietà `background-
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)');
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `background-color` per l'elemento `bb1c`.
|
||||
Dovresti impostare la proprietà `background-color` per l'elemento `.bb1c`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
|
||||
@@ -35,7 +35,7 @@ Dovresti usare `var(--building-color1)` per impostare la proprietà `background-
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)');
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `background-color` per l'elemento `bb1d`.
|
||||
Dovresti impostare la proprietà `background-color` per l'elemento `.bb1d`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-18
|
||||
|
||||
# --description--
|
||||
|
||||
Il primo edificio ora ha un bell'aspetto. Annida tre nuovi elementi `div` nell'elemento `background-buildings` e assegna loro le classi `bb2`, `bb3` e `bb4` in quest'ordine. Saranno altri tre edifici dello sfondo.
|
||||
Il primo edificio ora ha un bell'aspetto. Annida tre nuovi elementi `div` nell'elemento `.background-buildings` e assegna loro le classi `bb2`, `bb3` e `bb4` in quest'ordine. Saranno altri tre edifici dello sfondo.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-21
|
||||
|
||||
# --description--
|
||||
|
||||
Gli edifici sono troppo distanziati. Comprimili aggiungendo due elementi `div` vuoti in cima all'elemento `background-buildings`, due alla fine e uno tra `.bb3` e `.bb4`. Verranno aggiunti come elementi uniformemente distanziati, spostando efficacemente gli edifici più vicino al centro.
|
||||
Gli edifici sono troppo distanziati. Comprimili aggiungendo due elementi `div` vuoti in cima all'elemento `.background-buildings`, due alla fine e uno tra `.bb3` e `.bb4`. Verranno aggiunti come elementi uniformemente distanziati, spostando efficacemente gli edifici più vicino al centro.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-28
|
||||
|
||||
# --description--
|
||||
|
||||
Gli edifici di sfondo stanno iniziando ad avere un bell'aspetto. Crea un nuovo `div` sotto l'elemento `background-buildings` e dagli la classe `foreground-buildings`. Questo sarà un altro contenitore per degli edifici.
|
||||
Gli edifici di sfondo stanno iniziando ad avere un bell'aspetto. Crea un nuovo `div` sotto l'elemento `.background-buildings` e dagli la classe `foreground-buildings`. Questo sarà un altro contenitore per degli edifici.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-29
|
||||
|
||||
# --description--
|
||||
|
||||
Vuoi che il contenitore di foreground buildings sia posizionato direttamente sopra all'elemento background buildings. Imposta `width` e `height` al `100%`, `position` su `absolute` e `top` a `0`. In questo modo sarà della stessa dimensione del body e inizierà nell'angolo in alto a sinistra.
|
||||
Vuoi che il contenitore di `.foreground-buildings` sia posizionato direttamente sopra all'elemento `.background-buildings`. Imposta `width` e `height` al `100%`, `position` su `absolute` e `top` a `0`. In questo modo sarà della stessa dimensione del body e inizierà nell'angolo in alto a sinistra.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-32
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi a `foreground-buildings` le stesse proprietà e valori `display`, `align-items` e `justify-content` che hai utilizzato su `background-buildings`. Ancora una volta, userai Flexbox per distanziare uniformemente gli edifici sullo sfondo del loro contenitore.
|
||||
Aggiungi a `.foreground-buildings` le stesse proprietà e valori `display`, `align-items` e `justify-content` che hai utilizzato su `.background-buildings`. Ancora una volta, userai Flexbox per distanziare uniformemente gli edifici sullo sfondo del loro contenitore.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ Dovresti rimuovere la proprietà `top` da `.foreground-buildings`.
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
|
||||
```
|
||||
|
||||
Dovresti aggiungere la proprietà `position` con il valore `absolute` a `.background-buildings, foreground-buildings`.
|
||||
Dovresti aggiungere la proprietà `position` con il valore `absolute` a `.background-buildings, .foreground-buildings`.
|
||||
|
||||
```js
|
||||
function eitherOr() {
|
||||
@@ -39,7 +39,7 @@ function eitherOr() {
|
||||
assert.equal(eitherOr()?.position, 'absolute');
|
||||
```
|
||||
|
||||
Dovresti aggiungere la proprietà `top` con il valore `0` a `.background-buildings, foreground-buildings`.
|
||||
Dovresti aggiungere la proprietà `top` con il valore `0` a `.background-buildings, .foreground-buildings`.
|
||||
|
||||
```js
|
||||
function eitherOr() {
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-71
|
||||
|
||||
# --description--
|
||||
|
||||
Le finestre sono accatastate una sopra l'altra a sinistra della sezione, dietro l'edificio viola. Sotto `.building-wrap`, aggiungi una nuova classe chiamata `.window-wrap` e aggiungi a essa queste proprietà:
|
||||
Le finestre sono accatastate una sopra l'altra a sinistra della sezione, dietro l'edificio viola. Sotto `.building-wrap`, aggiungi una nuova classe chiamata `window-wrap` e aggiungi a essa queste proprietà:
|
||||
|
||||
```css
|
||||
display: flex;
|
||||
|
||||
@@ -19,10 +19,10 @@ Assicurati che la casella di spunta sia ancora presente.
|
||||
assert($('input[type="checkbox"]')[0]);
|
||||
```
|
||||
|
||||
La casella di spunta dovrebbe ancora avere un attributo `id` con il valore `loving`. Potresti aver rimosso l'attributo o cambiato il suo valore.
|
||||
La casella di spunta dovrebbe ancora avere un attributo `id` con il valore `loving`. Valore atteso `--fcc-expected--`, valore trovato `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]')[0].id === 'loving');
|
||||
assert.equal($('input[type="checkbox"]')[0].id, 'loving');
|
||||
```
|
||||
|
||||
Il testo `Loving` non dovrebbe essere più posizionato direttamente a destra della tua casella di spunta. Dovrebbe essere contenuto in un elemento `label`. Assicurati che ci sia uno spazio tra i due elementi.
|
||||
@@ -59,11 +59,11 @@ const labelElem = $('input[type="checkbox"]')[0].nextElementSibling;
|
||||
assert(labelElem.hasAttribute('for'));
|
||||
```
|
||||
|
||||
Il nuovo elemento `label` dovrebbe avere un attributo `for` con il valore `loving`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette.
|
||||
Il nuovo elemento `label` dovrebbe avere un attributo `for` con il valore `loving`. Valore atteso `--fcc-expected--`, valore trovato `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
const labelElem = $('input[type="checkbox"]')[0].nextElementSibling;
|
||||
assert(labelElem.getAttribute('for').match(/^loving$/));
|
||||
assert.equal(labelElem.getAttribute('for'), 'loving');
|
||||
```
|
||||
|
||||
Il testo `Loving` dovrebbe essere annidato all'interno del nuovo elemento `label`. Hai omesso il valore o hai un refuso.
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 62a1166ed9a56d439c0770e7
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Crea tre elementi `span` all'interno dell'elemento `#stats`. Assegna a ognuno di loro la classe `stat`. Poi dai al primo il testo `XP: 0`, al secondo il testo `Health: 100` e al testo il testo `Gold: 50`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere tre elementi `span` all'interno dell'elemento `#stats`.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll('#stats > span');
|
||||
assert.equal(spans?.length, 3);
|
||||
```
|
||||
|
||||
Dovresti dare ai tre nuovi elementi `span` la classe `stat`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('#stats > .stat')?.length, 3);
|
||||
```
|
||||
|
||||
Il primo elemento `.stat` dovrebbe avere il testo `XP: 0`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#stats > .stat')?.[0]?.innerText === 'XP: 0');
|
||||
```
|
||||
|
||||
Il secondo elemento `.stat` dovrebbe avere il testo `Health: 100`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#stats > .stat')?.[1]?.innerText === 'Health: 100');
|
||||
```
|
||||
|
||||
Il terzo elemento `.stat` dovrebbe avere il testo `Gold: 50`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#stats > .stat')?.[2]?.innerText === 'Gold: 50');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
|
||||
</div>
|
||||
<div id="controls"></div>
|
||||
<div id="monsterStats"></div>
|
||||
<div id="text"></div>
|
||||
</div>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,167 @@
|
||||
---
|
||||
id: 62a23c1d505bfa13747c8a9b
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Racchiudi i numeri `0`, `100` e `50` in elementi `span` e racchiudi i nuovi elementi `span` in elementi `strong`. Poi assegna ai nuovi elementi `span` degli `id` con il valore `xpText`, `healthText` e `goldText`, rispettivamente.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `strong` nel primo elemento `.stat`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[0];
|
||||
const strong = stat?.querySelector('strong');
|
||||
assert.exists(strong);
|
||||
```
|
||||
|
||||
Il primo nuovo elemento `strong` dovrebbe avere un elemento `span`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[0];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.exists(span);
|
||||
```
|
||||
|
||||
Il primo elemento `span` annidato dovrebbe avere un `id` con il valore `xpText`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[0];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.equal(span?.id, 'xpText');
|
||||
```
|
||||
|
||||
Il primo elemento `span` dovrebbe circondare il testo `0`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[0];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.equal(span.innerText, '0');
|
||||
```
|
||||
|
||||
Il testo del primo elemento `.stat` dovrebbe essere ancora `XP: 0`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[0];
|
||||
assert.equal(stat.innerText, 'XP: 0');
|
||||
```
|
||||
|
||||
Dovresti aggiungere un elemento `strong` nel secondo elemento `.stat`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[1];
|
||||
const strong = stat?.querySelector('strong');
|
||||
assert.exists(strong);
|
||||
```
|
||||
|
||||
Il secondo nuovo elemento `strong` dovrebbe avere un elemento `span`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[1];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.exists(span);
|
||||
```
|
||||
|
||||
Il secondo elemento `span` annidato dovrebbe avere un `id` con il valore `healthText`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[1];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.equal(span?.id, 'healthText');
|
||||
```
|
||||
|
||||
Il secondo elemento `span` dovrebbe circondare il testo `100`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[1];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.equal(span.innerText, '100');
|
||||
```
|
||||
|
||||
Il testo del secondo elemento `.stat` dovrebbe essere ancora `Health: 100`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[1];
|
||||
assert.equal(stat.innerText, 'Health: 100');
|
||||
```
|
||||
|
||||
Dovresti aggiungere un elemento `strong` nel terzo elemento `.stat`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[2];
|
||||
const strong = stat?.querySelector('strong');
|
||||
assert.exists(strong);
|
||||
```
|
||||
|
||||
Il terzo nuovo elemento `strong` dovrebbe avere un elemento `span`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[2];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.exists(span);
|
||||
```
|
||||
|
||||
Il terzo elemento `span` annidato dovrebbe avere un `id` con il valore `goldText`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[2];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.equal(span?.id, 'goldText');
|
||||
```
|
||||
|
||||
Il terzo elemento `span` dovrebbe circondare il testo `50`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[2];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.equal(span.innerText, '50');
|
||||
```
|
||||
|
||||
Il testo del terzo elemento `.stat` dovrebbe essere ancora `Gold: 50`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[2];
|
||||
assert.equal(stat.innerText, 'Gold: 50');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
--fcc-editable-region--
|
||||
<span class="stat">XP: 0</span>
|
||||
<span class="stat">Health: 100</span>
|
||||
<span class="stat">Gold: 50</span>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="controls"></div>
|
||||
<div id="monsterStats"></div>
|
||||
<div id="text"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 62a23cb9bc467a147516b500
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per l'elemento `#controls`, crea tre elementi `button`. Il primo dovrebbe avere un `id` impostato su `button1` e il testo `Go to store`. Il secondo dovrebbe avere un `id` impostato su `button2` e il testo `Go to cave`. Il testo dovrebbe avere un `id` impostato su `button3` e il testo `Fight dragon`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere tre elementi `button` all'elemento `#controls`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
assert.exists(buttons);
|
||||
assert.equal(buttons.length, 3);
|
||||
```
|
||||
|
||||
Il primo pulsante dovrebbe avere un `id` impostato su `button1`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
const button1 = buttons[0];
|
||||
assert.equal(button1.id, 'button1');
|
||||
```
|
||||
|
||||
Il primo pulsante dovrebbe avere il testo `Go to store`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
const button1 = buttons[0];
|
||||
assert.equal(button1.innerText, 'Go to store');
|
||||
```
|
||||
|
||||
Il secondo pulsante dovrebbe avere un `id` impostato su `button2`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
const button2 = buttons[1];
|
||||
assert.equal(button2.id, 'button2');
|
||||
```
|
||||
|
||||
Il secondo pulsante dovrebbe avere il testo `Go to cave`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
const button2 = buttons[1];
|
||||
assert.equal(button2.innerText, 'Go to cave');
|
||||
```
|
||||
|
||||
Il terzo pulsante dovrebbe avere un `id` impostato su `button3`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
const button3 = buttons[2];
|
||||
assert.equal(button3.id, 'button3');
|
||||
```
|
||||
|
||||
Il terzo pulsante dovrebbe avere il testo `Fight dragon`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
const button3 = buttons[2];
|
||||
assert.equal(button3.innerText, 'Fight dragon');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="controls">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="monsterStats"></div>
|
||||
<div id="text"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 62a23d1c5f1c93161f3582ae
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In modo simile all'elemento `#stats`, l'elemento `#monsterStats` ha bisogno di due elementi `span`. Assegna loro la classe `stat` e dai al primo elemento il testo `Monster Name:` e al secondo il testo `Health:`. In ognuno di essi, dopo il testo aggiungi un elemento `strong` con annidato un elemento `span` vuoto.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `monsterStats` dovrebbe avere due elementi `span`.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
assert.equal(spans.length, 2);
|
||||
```
|
||||
|
||||
I nuovi elementi `span` dovrebbero avere entrambi un attributo `class` con il valore `stat`.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
assert.equal(spans[0].className, 'stat');
|
||||
assert.equal(spans[1].className, 'stat');
|
||||
```
|
||||
|
||||
Il primo elemento `span` dovrebbe avere il testo `Monster Name:`. Assicurati che la spaziatura sia corretta.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
assert.equal(spans[0].innerText, 'Monster Name: ');
|
||||
```
|
||||
|
||||
Il secondo elemento `span` dovrebbe avere il testo `Health:`. Assicurati che la spaziatura sia corretta.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
assert.equal(spans[1].textContent, 'Health: ');
|
||||
```
|
||||
|
||||
Il primo elemento `span` dovrebbe avere un elemento `strong` con annidato un elemento `span` vuoto.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
const strong = spans[0]?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.exists(strong);
|
||||
assert.exists(span);
|
||||
```
|
||||
|
||||
Il secondo elemento `span` dovrebbe avere un elemento `strong` con annidato un elemento `span` vuoto.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
const strong = spans[1]?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.exists(strong);
|
||||
assert.exists(span);
|
||||
```
|
||||
|
||||
Gli elementi `strong` e `span` dovrebbero trovarsi dopo il testo.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
assert.match(spans[0].innerHTML, /Monster Name: <strong>/);
|
||||
assert.match(spans[1].innerHTML, /Health: <strong>/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="monsterStats">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="text"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 62a24068d60b671847d1d4e2
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora abbiamo bisogno di uno styling rapido. Inizia dando al `body` un `background-color` impostato su `darkblue`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `body`.
|
||||
|
||||
```js
|
||||
const body = new __helpers.CSSHelp(document).getStyle('body');
|
||||
assert.exists(body);
|
||||
```
|
||||
|
||||
Il selettore `body` dovrebbe avere una proprietà `background-color` con il valore `darkblue`.
|
||||
|
||||
```js
|
||||
const background = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
|
||||
assert.equal(background, 'darkblue');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 62a2409897ec621942234cf6
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dai all'elemento `#text` un `background-color` con il valore `black`, un `color` con il valore `white` e `10px` di padding su tutti i lati.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#text`.
|
||||
|
||||
```js
|
||||
const text = new __helpers.CSSHelp(document).getStyle('#text');
|
||||
assert.exists(text);
|
||||
```
|
||||
|
||||
L'elemento `#text` dovrebbe avere una proprietà `background-color` con il valore `black`.
|
||||
|
||||
```js
|
||||
const background = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('background-color');
|
||||
assert.equal(background, 'black');
|
||||
```
|
||||
|
||||
L'elemento `#text` dovrebbe avere una proprietà `color` con il valore `white`.
|
||||
|
||||
```js
|
||||
const color = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('color');
|
||||
assert.equal(color, 'white');
|
||||
```
|
||||
|
||||
L'elemento `#text` dovrebbe avere `10px` di padding su tutti i lati.
|
||||
|
||||
```js
|
||||
const padding = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('padding');
|
||||
assert.equal(padding, '10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 62a240c67f3dbb1a1e6d95ee
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Assegna a `#game` una larghezza massima di `500px` e un'altezza massima di `400px`. Imposta `background-color` su `lightgray` e `color` su `white`. Infine, usa i margini per centrarlo e dagli `10px` di padding su tutti e quattro i lati.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#game`.
|
||||
|
||||
```js
|
||||
const game = new __helpers.CSSHelp(document).getStyle('#game');
|
||||
assert.exists(game);
|
||||
```
|
||||
|
||||
Il selettore `#game` dovrebbe avere una proprietà `max-width` di `500px`.
|
||||
|
||||
```js
|
||||
const maxWidth = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-width');
|
||||
assert.equal(maxWidth, '500px');
|
||||
```
|
||||
|
||||
Il selettore `#game` dovrebbe avere una proprietà `max-height` di `400px`.
|
||||
|
||||
```js
|
||||
const maxHeight = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-height');
|
||||
assert.equal(maxHeight, '400px');
|
||||
```
|
||||
|
||||
Il selettore `#game` dovrebbe avere un `background-color` con il valore `lightgray`.
|
||||
|
||||
```js
|
||||
const background = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('background-color');
|
||||
assert.equal(background, 'lightgray');
|
||||
```
|
||||
|
||||
Il selettore `#game` dovrebbe avere una proprietà `color` con il valore `white`.
|
||||
|
||||
```js
|
||||
const color = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('color');
|
||||
assert.equal(color, 'white');
|
||||
```
|
||||
|
||||
Il selettore `#game` dovrebbe avere una proprietà `margin` impostata su `0 auto`.
|
||||
|
||||
```js
|
||||
const margin = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('margin');
|
||||
assert.equal(margin, '0px auto');
|
||||
```
|
||||
|
||||
Il selettore `#game` dovrebbe avere `10px` di padding su tutti i lati.
|
||||
|
||||
```js
|
||||
const padding = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('padding');
|
||||
assert.equal(padding, '10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 62a24128d5e8af1b47ad1aab
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Assegna agli elementi `#controls` e `#stats` un `border` con il valore `1px solid black`, imposta il colore del testo su `black` e il padding su `5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#controls, #stats`.
|
||||
|
||||
```js
|
||||
const selector = new __helpers.CSSHelp(document).getStyle('#controls, #stats');
|
||||
assert.exists(selector);
|
||||
```
|
||||
|
||||
Il selettore `#controls, #stats` dovrebbe avere una proprietà `border` con il valore `1px solid black`.
|
||||
|
||||
```js
|
||||
const border = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('border');
|
||||
assert.equal(border, '1px solid black');
|
||||
```
|
||||
|
||||
Il selettore `#controls, #stats` dovrebbe avere una proprietà `color` con il valore `black`.
|
||||
|
||||
```js
|
||||
const color = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('color');
|
||||
assert.equal(color, 'black');
|
||||
```
|
||||
|
||||
Il selettore `#controls, #stats` dovrebbe avere `5px` di padding.
|
||||
|
||||
```js
|
||||
const padding = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('padding');
|
||||
assert.equal(padding, '5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 62a24190868ca51c0b6e83c7
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per ora, nascondi l'elemento `#monsterStats`. Non cambiare nessuno degli altri stili.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#monsterStats`.
|
||||
|
||||
```js
|
||||
const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats');
|
||||
assert.exists(monsterStats);
|
||||
```
|
||||
|
||||
Il selettore `#monsterStats` dovrebbe avere una proprietà `display` con il valore `none`.
|
||||
|
||||
```js
|
||||
const display = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('display');
|
||||
assert.equal(display, 'none');
|
||||
```
|
||||
|
||||
Il selettore `#monsterStats` dovrebbe avere una proprietà `border` con il valore `1px solid black`.
|
||||
|
||||
```js
|
||||
const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border');
|
||||
assert.equal(border, '1px solid black');
|
||||
```
|
||||
|
||||
Il selettore `#monsterStats` dovrebbe avere `5px` di padding.
|
||||
|
||||
```js
|
||||
const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding');
|
||||
assert.equal(padding, '5px');
|
||||
```
|
||||
|
||||
Il selettore `#monsterStats` dovrebbe avere una proprietà `color` con il valore `white`.
|
||||
|
||||
```js
|
||||
const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color');
|
||||
assert.equal(color, 'white');
|
||||
```
|
||||
|
||||
Il selettore `#monsterStats` dovrebbe avere una proprietà `background-color` con il valore `red`.
|
||||
|
||||
```js
|
||||
const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color');
|
||||
assert.equal(background, 'red');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#monsterStats {
|
||||
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 62a241df03c1f61ce936f5d9
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Infine, dai agli elementi `.stat` un `padding-right` di `10px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `.stat`.
|
||||
|
||||
```js
|
||||
const stat = new __helpers.CSSHelp(document).getStyle('.stat');
|
||||
assert.exists(stat);
|
||||
```
|
||||
|
||||
Il selettore `.stat` dovrebbe avere una proprietà `padding-right` di `10px`.
|
||||
|
||||
```js
|
||||
const paddingRight = new __helpers.CSSHelp(document).getStyle('.stat')?.getPropertyValue('padding-right');
|
||||
assert.equal(paddingRight, '10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 62a255dae245b52317da824a
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Uno degli strumenti più potenti è la tua console per sviluppatori. A seconda del browser, potrebbe aprirsi premendo `F12` o `Ctrl+Shift+I`. Puoi anche cliccare sul pulsante "Console" sopra la finestra di anteprima per vedere la nostra console integrata. La console per sviluppatori include gli errori generati dal tuo codice, ma puoi anche usarla per vedere i valori delle variabili nel codice, che è molto utile per il debugging.
|
||||
|
||||
Aggiungi la riga `console.log("Hello World");` tra i tag `script`, poi clicca sul pulsante "Console" per aprire la console, in cui dovresti vedere il testo `Hello World`.
|
||||
|
||||
Nota come la riga termina con un punto e virgola. È un pratica comune in JavaScript terminare le righe di codice con un punto e virgola.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere la riga `console.log("Hello World");` nel codice. Non dimenticare il punto e virgola.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\("Hello World"\);/);
|
||||
```
|
||||
|
||||
La riga `console.log("Hello World");` dovrebbe trovarsi tra i tag `script`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<script>\s*console\.log\("Hello World"\);\s*<\/script>/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
--fcc-editable-region--
|
||||
<script>
|
||||
|
||||
</script>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 62a39f5a5790eb27c1e5d4bf
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La tua visuale adesso è passata al nuovo file `script.js`. Ricorda che puoi usare le schede in alto per passare da un file all'altro.
|
||||
|
||||
Aggiungi la riga `console.log("Hello World");` in questo file e guarda come appare sullo schermo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere la riga `console.log("Hello World");` nel tuo codice.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\("Hello World"\);/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 62a3a0a3c0a4b32915d26a6e
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rimuovi la riga `console.log("Hello World");` per iniziare a scrivere il codice del progetto.
|
||||
|
||||
In JavaScript, una <dfn>variabile</dfn> viene usata per conservare un valore. Per usare una variabile, la devi prima <dfn>dichiarare</dfn>. Ad esempio, per dichiarare una variabile chiamata `camperbot`, dovrai scrivere:
|
||||
|
||||
```js
|
||||
var camperbot;
|
||||
```
|
||||
|
||||
La parola chiave `var` dice a JavaScript che stai dichiarando una variabile. Dichiara una variabile chiamata `xp`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti avere la riga `console.log("Hello World");` nel tuo codice.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /console\.log\("Hello World"\);/);
|
||||
```
|
||||
|
||||
Dovresti usare la parola chiave `var` per dichiarare la variabile.
|
||||
|
||||
```js
|
||||
assert.match(code, /var/);
|
||||
```
|
||||
|
||||
Dovresti dichiarare una variabile chiamata `xp`.
|
||||
|
||||
```js
|
||||
assert.match(code, /xp/);
|
||||
```
|
||||
|
||||
Non dovresti assegnare un valore alla variabile.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /var xp =/);
|
||||
```
|
||||
|
||||
Non dimenticare il punto e virgola alla fine della riga.
|
||||
|
||||
```js
|
||||
assert.match(code, /var xp;/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
console.log("Hello World");
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,112 @@
|
||||
---
|
||||
id: 62a3a488b24fb32b91155d56
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Alle variabili può essere <dfn>assegnato</dfn> un valore. Se lo fai quando le dichiari, si parla di <dfn>inizializzazione</dfn>. Ad esempio:
|
||||
|
||||
```js
|
||||
var camperbot = "Bot";
|
||||
```
|
||||
|
||||
Questo codice inizializza la variabile `camperbot` con il valore `Bot`. Inizializza la variabile `xp` con il valore `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`xp` dovrebbe avere il valore `0`.
|
||||
|
||||
```js
|
||||
assert.equal(xp, 0);
|
||||
```
|
||||
|
||||
Dovresti inizializzare la variabile `xp` a `0`. Non dimenticare il punto e virgola alla fine della riga.
|
||||
|
||||
```js
|
||||
assert.match(code, /var\s+xp\s*=\s*0\s*;/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
var xp;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 62a3a75d8466a12e009eff76
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inizializza un'altra variabile chiamata `health` con il valore `100` e un'altra variabile chiamata `gold` con il valore `50`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare `var` per dichiarare una variabile chiamata `health`.
|
||||
|
||||
```js
|
||||
assert.match(code, /var health/);
|
||||
```
|
||||
|
||||
Dovresti inizializzare una variabile chiamata `health` con il valore `100`.
|
||||
|
||||
```js
|
||||
assert.match(code, /var health\s?=\s?100/);
|
||||
```
|
||||
|
||||
Dovresti usare `var` per dichiarare una variabile chiamata `gold`.
|
||||
|
||||
```js
|
||||
assert.match(code, /var gold/);
|
||||
```
|
||||
|
||||
Dovresti inizializzare una variabile chiamata `gold` con il valore `50`.
|
||||
|
||||
```js
|
||||
assert.match(code, /var gold\s?=\s?50/);
|
||||
```
|
||||
|
||||
`health` dovrebbe avere il valore `100`.
|
||||
|
||||
```js
|
||||
assert.equal(health, 100);
|
||||
```
|
||||
|
||||
`gold` dovrebbe avere il valore `50`.
|
||||
|
||||
```js
|
||||
assert.equal(gold, 50);
|
||||
```
|
||||
|
||||
`xp` dovrebbe avere ancora il valore `0`.
|
||||
|
||||
```js
|
||||
assert.equal(xp, 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
var xp = 0;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 62a3a7e4f1060e2fc5ffb34b
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Crea un'altra variabile chiamata `currentWeapon` e impostala a 0.
|
||||
|
||||
Quando il nome di una variabile contiene più parole, la convenzione in JavaScript è di usare ciò che è chiamato <dfn>camelCase</dfn>. La prima parola è tutta minuscola e la prima lettera di ogni parola successiva è maiuscola.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare `var` per dichiarare una variabile chiamata `currentWeapon`.
|
||||
|
||||
```js
|
||||
assert.match(code, /var currentweapon/i);
|
||||
```
|
||||
|
||||
Dovresti usare il camelCase per il nome della variabile.
|
||||
|
||||
```js
|
||||
assert.match(code, /currentWeapon/);
|
||||
```
|
||||
|
||||
La variabile `currentWeapon` dovrebbe essere impostata a `0`.
|
||||
|
||||
```js
|
||||
assert.equal(currentWeapon, 0);
|
||||
```
|
||||
|
||||
Dovresti inizializzare la variabile a `0`.
|
||||
|
||||
```js
|
||||
assert.match(code, /var currentWeapon\s?=\s?0/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
var xp = 0;
|
||||
var health = 100;
|
||||
var gold = 50;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 62a3b365f1cdeb33efc2502e
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Hai dichiarato le variabili con la parola chiave `var`. Tuttavia, nel moderno JavaScript è una buona pratica usare invece la parola chiave `let`. Ciò corregge diversi comportamenti insoliti con `var` che possono rendere difficoltoso il debugging.
|
||||
|
||||
Cambia tutte le parole chiave `var` in `let`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti avere alcuna parola chiave `var` nel codice.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /var/);
|
||||
```
|
||||
|
||||
Dovresti usare la parola chiave `let` per dichiarare la variabile `xp`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let xp/);
|
||||
```
|
||||
|
||||
Dovresti usare la parola chiave `let` per dichiarare la variabile `health`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let health/);
|
||||
```
|
||||
|
||||
Dovresti usare la parola chiave `let` per dichiarare la variabile `gold`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let gold/);
|
||||
```
|
||||
|
||||
Dovresti usare la parola chiave `let` per dichiarare la variabile `currentWeapon`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let currentWeapon/);
|
||||
```
|
||||
|
||||
Non dovresti cambiare il valore delle variabili.
|
||||
|
||||
```js
|
||||
assert.equal(xp, 0);
|
||||
assert.equal(health, 100);
|
||||
assert.equal(gold, 50);
|
||||
assert.equal(currentWeapon, 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
var xp = 0;
|
||||
var health = 100;
|
||||
var gold = 50;
|
||||
var currentWeapon = 0;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 62a3b3eab50e193608c19fc6
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Usando la parola chiave `let`, dichiara una variabile chiamata `fighting` ma non inizializzarla con un valore. Ricordati di terminare la riga con un punto e virgola.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare `let` per dichiarare una variabile chiamata `fighting`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let fighting/);
|
||||
```
|
||||
|
||||
La variabile `fighting` non dovrebbe avere un valore.
|
||||
|
||||
```js
|
||||
assert.isUndefined(fighting);
|
||||
```
|
||||
|
||||
Non dovresti assegnare un valore alla variabile `fighting`. Non dimenticare il punto e virgola alla fine della riga.
|
||||
|
||||
```js
|
||||
assert.match(code, /let fighting;/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 62a3b41c9494f937560640ab
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dichiara altre due variabili chiamate `monsterHealth` e `inventory`, ma non inizializzarle.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare la parola chiave `let` per dichiarare la variabile `monsterHealth`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let monsterHealth/i);
|
||||
```
|
||||
|
||||
Dovresti usare il camelCase per il nome della variabile `monsterHealth`.
|
||||
|
||||
```js
|
||||
assert.match(code, /monsterHealth/);
|
||||
```
|
||||
|
||||
`monsterHealth` non dovrebbe avere un valore.
|
||||
|
||||
```js
|
||||
assert.isUndefined(monsterHealth);
|
||||
```
|
||||
|
||||
Non dovresti assegnare un valore alla variabile `monsterHealth`. Ricorda il punto e virgola.
|
||||
|
||||
```js
|
||||
assert.match(code, /let monsterHealth;/);
|
||||
```
|
||||
|
||||
Dovresti usare la parola chiave `let` per dichiarare la variabile `inventory`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let inventory/i);
|
||||
```
|
||||
|
||||
`inventory` non dovrebbe avere un valore.
|
||||
|
||||
```js
|
||||
assert.isUndefined(inventory);
|
||||
```
|
||||
|
||||
Non dovresti assegnare un valore alla variabile `inventory`. Ricorda il punto e virgola.
|
||||
|
||||
```js
|
||||
assert.match(code, /let inventory;/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 62a3b49686792938718b90d3
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
I valori delle variabili che hai assegnato finora sono tutti dei numeri. JavaScript ha diversi tipi di dati. Il prossimo che userai sarà la <dfn>stringa</dfn>. Le stringhe vengono usate per conservare cose come parole o testo. Le stringhe sono racchiuse da virgolette doppie, singole o backtick. Ecco un esempio di dichiarazione di una variabile con una stringa:
|
||||
|
||||
```js
|
||||
let developer = "Naomi";
|
||||
```
|
||||
|
||||
Assegna la variabile `inventory` in modo che il suo valore sia `stick`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti impostare `inventory` con la stringa `stick`.
|
||||
|
||||
```js
|
||||
assert.equal(inventory, "stick");
|
||||
```
|
||||
|
||||
Dovresti inizializzare la variabile `inventory` con la stringa `stick`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s+inventory\s*=\s*('|"|`)stick\1/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 62a3b506dbaead396f58a701
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'inventario del giocatore nel tuo gioco potrà contenere più oggetti. Dovrai usare un tipo di dato adatto per questo scopo. Un <dfn>array</dfn> può essere usato per contenere valori multipli. Ad esempio:
|
||||
|
||||
```js
|
||||
let order = ["first", "second", "third"];
|
||||
```
|
||||
|
||||
Questo è un array che contiene tre valori. Nota che i valori sono separati da una virgola. Cambia la variabile `inventory` in modo che sia un array con le stringhe `stick`, `dagger` e `sword`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La variabile `inventory` dovrebbe essere un array.
|
||||
|
||||
```js
|
||||
assert.isArray(inventory);
|
||||
```
|
||||
|
||||
La variabile `inventory` dovrebbe contenere tre valori.
|
||||
|
||||
```js
|
||||
assert.lengthOf(inventory, 3);
|
||||
```
|
||||
|
||||
La variabile `inventory` dovrebbe includere la stringa `stick`.
|
||||
|
||||
```js
|
||||
assert.include(inventory, "stick");
|
||||
```
|
||||
|
||||
La variabile `inventory` dovrebbe includere la stringa `dagger`.
|
||||
|
||||
```js
|
||||
assert.include(inventory, "dagger");
|
||||
```
|
||||
|
||||
La variabile `inventory` dovrebbe includere la stringa `sword`.
|
||||
|
||||
```js
|
||||
assert.include(inventory, "sword");
|
||||
```
|
||||
|
||||
La variabile `inventory` dovrebbe avere i valori nell'ordine corretto.
|
||||
|
||||
```js
|
||||
assert.deepEqual(inventory, ["stick", "dagger", "sword"]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = "stick";
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 62a3b5843544ce3a77459c27
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per ora, vuoi che il giocatore inizi solo con `stick`. Cambia l'array `inventory` in modo che abbia soltanto il valore `stick`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La variabile `inventory` dovrebbe essere ancora un array.
|
||||
|
||||
```js
|
||||
assert.isArray(inventory);
|
||||
```
|
||||
|
||||
La variabile `inventory` dovrebbe contenere solo un valore.
|
||||
|
||||
```js
|
||||
assert.lengthOf(inventory, 1);
|
||||
```
|
||||
|
||||
La variabile `inventory` dovrebbe includere la stringa `stick`.
|
||||
|
||||
```js
|
||||
assert.include(inventory, "stick");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick", "dagger", "sword"];
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 62a3b79d520a7f3d0e25afd6
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
JavaScript interagisce con l'HTML usando il <dfn>Document Object Model</dfn>, o DOM. Il DOM è un albero di oggetti che rappresenta l'HTML. Puoi accedere all'HTML usando la variabile `document`, che rappresenta l'intero documento HTML.
|
||||
|
||||
Un modo per trovare elementi specifici nel tuo HTML è usare il metodo `querySelector()`. Il metodo `querySelector()` prende un selettore CSS come argomento e restituisce il primo elemento che corrisponde al selettore. Ad esempio, per trovare l'elemento `<h1>` nel tuo HTML, dovresti scrivere:
|
||||
|
||||
```js
|
||||
let h1 = document.querySelector("h1");
|
||||
```
|
||||
|
||||
Nota che `h1` è una stringa che corrisponde al selettore CSS che useresti. Crea una variabile `button1` e usa `querySelector()` per assegnarla all'elemento con l'`id` con il valore `button1`. Ricorda che i selettori CSS di `id` hanno il prefisso `#`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare la parola chiave `let` per dichiarare la variabile `button1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let button1/);
|
||||
```
|
||||
|
||||
Dovresti usare `document.querySelector()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.querySelector/);
|
||||
```
|
||||
|
||||
Dovresti usare un selettore`#button1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /querySelector\(('|")#button1\1\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 62b46e3a8d4be31be5af793d
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ci siamo imbattuti in un piccolo problema. Stai cercando di fare una richiesta per un elemento button, ma il tag `script` si trova nell'`head` del documento HTML. Questo vuol dire che il codice viene eseguito prima che il browser abbia terminato di leggere l'HTML e `document.querySelector()` non vedrà il button - perché il browser non l'ha ancora processato.
|
||||
|
||||
Per rimediare, sposta l'elemento `script` fuori dall'elemento `head` e posizionalo alla fine dell'elemento `body` (appena prima del tag di chiusura `</body>`.)
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `script` non dovrebbe essere all'interno dell'elemento `head`.
|
||||
|
||||
```js
|
||||
const script = document.querySelector('script[data-src$="script.js"]');
|
||||
assert.notEqual(script.parentElement.tagName, "HEAD");
|
||||
```
|
||||
|
||||
L'elemento `script` dovrebbe trovarsi alla fine dell'elemento `body`.
|
||||
|
||||
```js
|
||||
const script = document.querySelector('script[data-src$="script.js"]');
|
||||
assert.equal(script.previousElementSibling.tagName, "DIV");
|
||||
assert.isNull(script.nextElementSibling);
|
||||
assert.equal(script.parentElement.tagName, "BODY");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
let button1 = document.querySelector("#button1");
|
||||
```
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 62fc1ee0c5a89717d4785729
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Assegna all'elemento `#monsterStats` gli stessi `border` e `padding` dell'elemento `#stats`. Imposta il suo colore su `white` e il suo sfondo su `red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#monsterStats`.
|
||||
|
||||
```js
|
||||
const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats');
|
||||
assert.exists(monsterStats);
|
||||
```
|
||||
|
||||
Il selettore `#monsterStats` dovrebbe avere una proprietà `border` con il valore `1px solid black`.
|
||||
|
||||
```js
|
||||
const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border');
|
||||
assert.equal(border, '1px solid black');
|
||||
```
|
||||
|
||||
Il selettore `#monsterStats` dovrebbe avere `5px` di padding.
|
||||
|
||||
```js
|
||||
const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding');
|
||||
assert.equal(padding, '5px');
|
||||
```
|
||||
|
||||
Il selettore `#monsterStats` dovrebbe avere una proprietà `color` con il valore `white`.
|
||||
|
||||
```js
|
||||
const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color');
|
||||
assert.equal(color, 'white');
|
||||
```
|
||||
|
||||
Il selettore `#monsterStats` dovrebbe avere una proprietà `background-color` con il valore `red`.
|
||||
|
||||
```js
|
||||
const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color');
|
||||
assert.equal(background, 'red');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
Reference in New Issue
Block a user