mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
chore(i18n,learn): processed translations (#47869)
This commit is contained in:
camperbot
+3
-3
@@ -38,7 +38,7 @@ print(certificates_earned)
|
||||
|
||||
## --answers--
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
@@ -48,7 +48,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
Beau 6
|
||||
@@ -58,7 +58,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@ dashedName: problem-148-exploring-pascals-triangle
|
||||
|
||||
可以輕易證明，帕斯卡三角形前七行中，沒有一個數字可以被 7 整除。
|
||||
|
||||
```
|
||||
```markup
|
||||
1
|
||||
1 1
|
||||
1 2 1
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: step-47
|
||||
|
||||
你可能已經熟悉從 0 到 9 的十進制或以 10 爲底的值。 十六進制或以 16 爲底的值，從 0 到 9，然後是 A - F：
|
||||
|
||||
```
|
||||
```js
|
||||
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
|
||||
```
|
||||
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ dashedName: step-32
|
||||
|
||||
例如，一個針對在 500px 到 1000px 之間顯示寬度的媒體查詢：
|
||||
|
||||
```
|
||||
```css
|
||||
@media (min-width: 500px) and (max-width: 1000px){
|
||||
|
||||
}
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ dashedName: step-64
|
||||
|
||||
爲 `p` 元素提供以下文本：
|
||||
|
||||
```
|
||||
```markup
|
||||
* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
|
||||
```
|
||||
|
||||
|
||||
+3
-3
@@ -38,7 +38,7 @@ print(certificates_earned)
|
||||
|
||||
## --answers--
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
@@ -48,7 +48,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
Beau 6
|
||||
@@ -58,7 +58,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@ dashedName: problem-148-exploring-pascals-triangle
|
||||
|
||||
可以轻易证明，帕斯卡三角形前七行中，没有一个数字可以被 7 整除。
|
||||
|
||||
```
|
||||
```markup
|
||||
1
|
||||
1 1
|
||||
1 2 1
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: step-47
|
||||
|
||||
你可能已经熟悉从 0 到 9 的十进制或以 10 为底的值。 十六进制或以 16 为底的值，从 0 到 9，然后是 A - F：
|
||||
|
||||
```
|
||||
```js
|
||||
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
|
||||
```
|
||||
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ dashedName: step-32
|
||||
|
||||
例如，一个针对在 500px 到 1000px 之间显示宽度的媒体查询：
|
||||
|
||||
```
|
||||
```css
|
||||
@media (min-width: 500px) and (max-width: 1000px){
|
||||
|
||||
}
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ dashedName: step-64
|
||||
|
||||
为 `p` 元素提供以下文本：
|
||||
|
||||
```
|
||||
```markup
|
||||
* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
|
||||
```
|
||||
|
||||
|
||||
+3
-3
@@ -38,7 +38,7 @@ print(certificates_earned)
|
||||
|
||||
## --answers--
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
@@ -48,7 +48,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
Beau 6
|
||||
@@ -58,7 +58,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@ Durante el día se forma una cadena trinaria (Trinary string) para cada niño qu
|
||||
|
||||
Aunque hay 83 cadenas trinarias posibles durante 4 días, exactamente 43 cadenas llevarían a un premio:
|
||||
|
||||
```
|
||||
```markup
|
||||
OOOO OOOA OOOL OOAO OOAA OOAL OOLO OOLA OAOO OAOA
|
||||
OAOL OAAO OAAL OALO OALA OLOO OLOA OLAO OLAA AOOO
|
||||
AOOA AOOL AOAO AOAA AOAL AOLO AOLA AAOO AAOA AAOL
|
||||
|
||||
+9
-1
@@ -8,7 +8,7 @@ dashedName: falsy-bouncer
|
||||
|
||||
# --description--
|
||||
|
||||
Rimuovi tutti i valori falsy da un array.
|
||||
Rimuovi tutti i valori falsy da un array. Restituisci un nuovo array; non mutare l'array originario.
|
||||
|
||||
I valori falsy in JavaScript sono `false`, `null`, `0`, `""`, `undefined` e `NaN`.
|
||||
|
||||
@@ -40,6 +40,14 @@ assert.deepEqual(bouncer([false, null, 0, NaN, undefined, '']), []);
|
||||
assert.deepEqual(bouncer([null, NaN, 1, 2, undefined]), [1, 2]);
|
||||
```
|
||||
|
||||
Non dovresti mutare `arr`.
|
||||
|
||||
```js
|
||||
const arr = ['a', false, 0, 'Naomi'];
|
||||
bouncer(arr);
|
||||
assert.deepEqual(arr, ['a', false, 0, 'Naomi'])
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
+10
-10
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b40
|
||||
title: Confrontare gli ambiti di applicazione delle parole chiave var e let
|
||||
title: Confrontare la visibilità delle parole chiave var e let
|
||||
challengeType: 1
|
||||
forumTopicId: 301195
|
||||
dashedName: compare-scopes-of-the-var-and-let-keywords
|
||||
@@ -12,7 +12,7 @@ Se non hai familiarità con `let`, vedi questa <a href="/learn/javascript-algori
|
||||
|
||||
Quando si dichiara una variabile con la parola chiave `var`, essa viene dichiarata globalmente, o localmente se dichiarata all'interno di una funzione.
|
||||
|
||||
La parola chiave `let` si comporta allo stesso modo, ma con alcune funzioni extra. Quando si dichiara una variabile con la parola chiave `let` all'interno di un blocco, di una dichiarazione o di un'espressione, il suo ambito di applicazione è limitato a tale blocco, dichiarazione o espressione.
|
||||
La parola chiave `let` si comporta allo stesso modo, ma con alcune funzioni extra. Quando si dichiara una variabile con la parola chiave `let` all'interno di un blocco, di una dichiarazione o di un'espressione, la sua visibilità è limitata a tale blocco, dichiarazione o espressione.
|
||||
|
||||
Per esempio:
|
||||
|
||||
@@ -27,7 +27,7 @@ console.log(i);
|
||||
|
||||
Qui la console mostrerà i valori `[0, 1, 2]` e `3`.
|
||||
|
||||
Con la parola chiave `var`, `i` viene dichiarata globalmente. Quindi, quando `i++` viene eseguito, aggiorna la variabile globale. Questo codice è simile al seguente:
|
||||
Con la parola chiave `var`, `i` viene dichiarata globalmente. Quindi, l'esecuzione di `i++` aggiorna la variabile globale. Questo codice è simile al seguente:
|
||||
|
||||
```js
|
||||
var numArray = [];
|
||||
@@ -41,7 +41,7 @@ console.log(i);
|
||||
|
||||
Qui la console mostrerà i valori `[0, 1, 2]` e `3`.
|
||||
|
||||
Questo comportamento causerà problemi se dovessi creare una funzione e memorizzarla per un uso successivo all'interno di un ciclo `for` che utilizza la variabile `i`. Questo perché la funzione memorizzata si riferirà sempre al valore della variabile globale `i` aggiornata.
|
||||
Questo comportamento causerà problemi se dovessi creare una funzione e memorizzarla per un uso successivo all'interno di un loop `for` che utilizza la variabile `i`. Questo perché la funzione memorizzata si riferirà sempre al valore della variabile globale `i` aggiornata.
|
||||
|
||||
```js
|
||||
var printNumTwo;
|
||||
@@ -57,7 +57,7 @@ console.log(printNumTwo());
|
||||
|
||||
Qui la console mostrerà il valore `3`.
|
||||
|
||||
Come puoi vedere, `printNumTwo()` stampa 3 e non 2. Questo perché il valore assegnato a `i` è stato aggiornato e `printNumTwo()` restituisce la variabile globale `i` e non il valore `i` che aveva quando la funzione è stata creata nel ciclo. La parola chiave `let` non segue questo comportamento:
|
||||
Come puoi vedere, `printNumTwo()` stampa 3 e non 2. Questo perché il valore assegnato a `i` è stato aggiornato e `printNumTwo()` restituisce la variabile globale `i` e non il valore `i` che aveva quando la funzione è stata creata nel loop. La parola chiave `let` non segue questo comportamento:
|
||||
|
||||
```js
|
||||
let printNumTwo;
|
||||
@@ -72,15 +72,15 @@ console.log(printNumTwo());
|
||||
console.log(i);
|
||||
```
|
||||
|
||||
Qui la console mostrerà il valore `2` e un l'errore `i is not defined` (i non è definita).
|
||||
Qui la console mostrerà il valore `2` e l'errore `i is not defined` (i non è definita).
|
||||
|
||||
`i` non è definita perché non è stata dichiarata nell'ambito globale. È dichiarata solo all'interno della condizione del ciclo `for`. `printNumTwo()` ha restituito il valore corretto perché tre variabili `i` differenti con valori univoci (0, 1, e 2) sono state create dalla parola chiave `let` all'interno della dichiarazione del ciclo.
|
||||
`i` non è definita perché non è dichiarata globalmente. È dichiarata solo all'interno dell'istruzione del loop `for`. `printNumTwo()` ha restituito il valore corretto perché tre variabili `i` differenti con valori univoci (0, 1, e 2) sono state create con la parola chiave `let` all'interno del'istruzione del loop.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Correggi il codice in modo che la variabile `i` dichiarata nella condizione dell'`if` sia una variabile separata dalla `i` dichiarata nella prima riga della funzione. Assicurati di non usare la parola chiave `var` in nessun punto del tuo codice.
|
||||
Correggi il codice in modo che la variabile `i` dichiarata nell'istruzione `if` sia una variabile separata dalla `i` dichiarata nella prima riga della funzione. Assicurati di non usare la parola chiave `var` in nessun punto del tuo codice.
|
||||
|
||||
Questo esercizio è progettato per illustrare la differenza tra il modo in cui le parole chiave `var` e `let` assegnano l'ambito alla variabile dichiarata. Quando si programma una funzione simile a quella utilizzata in questo esercizio, è spesso meglio usare nomi di variabili diversi per evitare confusione.
|
||||
Questo esercizio è progettato per illustrare la differenza tra il modo in cui le parole chiave `var` e `let` assegnano la visibilità alla variabile dichiarata. Quando si programma una funzione simile a quella utilizzata in questo esercizio, è spesso meglio usare nomi di variabili diversi per evitare confusione.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -90,7 +90,7 @@ Questo esercizio è progettato per illustrare la differenza tra il modo in cui l
|
||||
assert(!code.match(/var/g));
|
||||
```
|
||||
|
||||
La variabile `i` dichiarata nella condizione dell'`if` dovrebbe essere uguale alla stringa `block scope`.
|
||||
La variabile `i` dichiarata nell'istruzione `if` dovrebbe essere uguale alla stringa `block scope`.
|
||||
|
||||
```js
|
||||
assert(code.match(/(i\s*=\s*).*\s*.*\s*.*\1('|")block\s*scope\2/g));
|
||||
|
||||
+1
-1
@@ -12,7 +12,7 @@ Se non hai familiarità con `const`, controlla <a href="/learn/javascript-algori
|
||||
|
||||
La dichiarazione `const` ha molti casi di utilizzo nel JavaScript moderno.
|
||||
|
||||
Alcuni sviluppatori preferiscono assegnare tutte le loro variabili usando `const` come impostazione predefinita, a meno che non sappiano che dovranno riassegnare il valore. Solo in quel caso usano `let`.
|
||||
Alcuni sviluppatori preferiscono assegnare tutte le loro variabili usando `const` come impostazione predefinita, a meno che non sappiano di doverne riassegnare il valore. Solo in quel caso usano `let`.
|
||||
|
||||
Tuttavia, è importante capire che gli oggetti (inclusi gli array e le funzioni) assegnati a una variabile utilizzando `const` sono ancora mutabili. L'utilizzo della dichiarazione `const` impedisce solo la riassegnazione dell'identificatore della variabile.
|
||||
|
||||
|
||||
+2
-2
@@ -23,11 +23,11 @@ obj.newProp = "Test";
|
||||
console.log(obj);
|
||||
```
|
||||
|
||||
Gli assegnamenti `obj.review` e `obj.newProp` provocheranno errori, perché il nostro editor viene eseguito in modalità rigorosa per impostazione predefinita, e la console visualizzerà il valore `{ name: "FreeCodeCamp", review: "Awesome" }`.
|
||||
Gli assegnamenti `obj.review` e `obj.newProp` provocheranno errori, perché il nostro editor viene eseguito in modalità rigorosa per impostazione predefinita e la console mostrerà il valore `{ name: "FreeCodeCamp", review: "Awesome" }`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In questa utilizzerai `Object.freeze` per impedire di cambiare le costanti matematiche. È necessario congelare l'oggetto `MATH_CONSTANTS` in modo che nessuno sia in grado di modificare il valore di `PI`, aggiungere o eliminare proprietà.
|
||||
In questa sfida utilizzerai `Object.freeze` per impedire di cambiare le costanti matematiche. È necessario congelare l'oggetto `MATH_CONSTANTS` in modo che nessuno sia in grado di modificare il valore di `PI`, aggiungere o eliminare proprietà.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
+1
-1
@@ -19,7 +19,7 @@ const myFunc = function() {
|
||||
}
|
||||
```
|
||||
|
||||
ES6 ci fornisce lo zucchero sintattico di non dover scrivere funzioni anonime in questo modo. Invece, puoi usare la **sintassi delle funzioni freccia**:
|
||||
ES6 ci fornisce lo zucchero sintattico così da non dover scrivere funzioni anonime in questo modo. Invece, puoi usare la **sintassi delle funzioni freccia**:
|
||||
|
||||
```js
|
||||
const myFunc = () => {
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@ dashedName: use-destructuring-assignment-to-assign-variables-from-arrays
|
||||
|
||||
ES6 rende la destrutturazione degli array facile come quella degli oggetti.
|
||||
|
||||
Una differenza fondamentale tra l'operatore di propagazione e la destrutturazione dell'array è che l'operatore di diffusione spacchetta tutti i contenuti di un'array in una lista separata da virgole. Di conseguenza, non è possibile selezionare o scegliere quali elementi si desidera assegnare a delle variabili.
|
||||
Una differenza fondamentale tra l'operatore spread e la destrutturazione dell'array è che l'operatore spread spacchetta tutti i contenuti di un array in una lista separata da virgole. Di conseguenza, non è possibile selezionare o scegliere quali elementi si desidera assegnare a delle variabili.
|
||||
|
||||
La destrutturazione di un array ci permette di fare esattamente questo:
|
||||
|
||||
|
||||
+6
-6
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b48
|
||||
title: Usare l'operatore di propagazione per analizzare gli array in-place
|
||||
title: Usare l'operatore spread per analizzare gli array in loco
|
||||
challengeType: 1
|
||||
forumTopicId: 301222
|
||||
dashedName: use-the-spread-operator-to-evaluate-arrays-in-place
|
||||
@@ -8,7 +8,7 @@ dashedName: use-the-spread-operator-to-evaluate-arrays-in-place
|
||||
|
||||
# --description--
|
||||
|
||||
ES6 introduce l'<dfn>operatore di propagazione</dfn>, che ci permette di espandere array ed altre espressioni in posizioni dove sono attesi più parametri o elementi.
|
||||
ES6 introduce l'<dfn>operatore spread</dfn>, che ci permette di espandere array e altre espressioni in posizioni dove sono attesi più parametri o elementi.
|
||||
|
||||
Il codice ES5 qui sotto utilizza `apply()` per calcolare il valore massimo in un array:
|
||||
|
||||
@@ -19,7 +19,7 @@ var maximus = Math.max.apply(null, arr);
|
||||
|
||||
`maximus` avrà un valore di `89`.
|
||||
|
||||
Abbiamo dovuto utilizzare `Math.max.apply(null, arr)` perché `Math.max(arr)` restituisce `NaN`. `Math.max()` si aspetta argomenti separati da virgole, ma non un array. L'operatore di propagazione rende questa sintassi molto migliore da leggere e mantenere.
|
||||
Abbiamo dovuto utilizzare `Math.max.apply(null, arr)` perché `Math.max(arr)` restituisce `NaN`. `Math.max()` si aspetta argomenti separati da virgole, ma non un array. L'operatore spread rende questa sintassi migliore da leggere e manutenere.
|
||||
|
||||
```js
|
||||
const arr = [6, 89, 3, 45];
|
||||
@@ -28,7 +28,7 @@ const maximus = Math.max(...arr);
|
||||
|
||||
`maximus` avrà un valore di `89`.
|
||||
|
||||
`...arr` restituisce un array spacchettato. In altre parole, *propaga* l'array. Tuttavia, l'operatore di propagazione funziona solo sul posto, come argomento di una funzione o in un array letterale (definito usando le parentesi quadre). Il seguente codice non funzionerà:
|
||||
`...arr` restituisce un array spacchettato. In altre parole, *espande* l'array. Tuttavia, l'operatore spread funziona solo in loco, come argomento di una funzione o in un array letterale (definito usando le parentesi quadre). Il seguente codice non funzionerà:
|
||||
|
||||
```js
|
||||
const spreaded = ...arr;
|
||||
@@ -36,7 +36,7 @@ const spreaded = ...arr;
|
||||
|
||||
# --instructions--
|
||||
|
||||
Copia tutti i contenuti di `arr1` in un altro array `arr2` usando l'operatore di propagazione.
|
||||
Copia tutti i contenuti di `arr1` in un altro array `arr2` usando l'operatore spread.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -46,7 +46,7 @@ Copia tutti i contenuti di `arr1` in un altro array `arr2` usando l'operatore di
|
||||
assert(arr2.every((v, i) => v === arr1[i]) && arr2.length);
|
||||
```
|
||||
|
||||
L'operatore di propagazione `...` dovrebbe essere usato per duplicare `arr1`.
|
||||
L'operatore spread `...` dovrebbe essere usato per duplicare `arr1`.
|
||||
|
||||
```js
|
||||
assert(code.match(/Array\(\s*\.\.\.arr1\s*\)|\[\s*\.\.\.arr1\s*\]/));
|
||||
|
||||
+1
-1
@@ -8,7 +8,7 @@ dashedName: write-arrow-functions-with-parameters
|
||||
|
||||
# --description--
|
||||
|
||||
Proprio come con una normale funzione, è possibile passare gli argomenti ad una funzione freccia.
|
||||
Proprio come con una normale funzione, è possibile passare degli argomenti a una funzione freccia.
|
||||
|
||||
```js
|
||||
const doubler = (item) => item * 2;
|
||||
|
||||
+5
-5
@@ -10,20 +10,20 @@ dashedName: add-elements-to-the-end-of-an-array-using-concat-instead-of-push
|
||||
|
||||
La programmazione funzionale riguarda la creazione e l'utilizzo di funzioni non mutanti.
|
||||
|
||||
L'ultima sfida ha introdotto il metodo `concat` come modo per combinare degli array in uno nuovo senza mutare gli array originali. Confronta `concat` con il metodo `push`. `push` aggiunge un elemento alla fine dello stesso array sul quale viene richiamato, mutando quello stesso array. Ecco un esempio:
|
||||
L'ultima sfida ha introdotto il metodo `concat` come modo per unire degli array in un nuovo array senza mutare gli array originali. Confronta `concat` con il metodo `push`. `push` aggiunge degli elementi alla fine dello stesso array sul quale viene chiamato, mutando quello stesso array. Ecco un esempio:
|
||||
|
||||
```js
|
||||
const arr = [1, 2, 3];
|
||||
arr.push([4, 5, 6]);
|
||||
arr.push(4, 5, 6);
|
||||
```
|
||||
|
||||
`arr` avrà un valore modificato di `[1, 2, 3, [4, 5, 6]]`, che non è in linea con la programmazione funzionale.
|
||||
`arr` avrà un valore modificato di `[1, 2, 3, 4, 5, 6]`, che non è in linea con la programmazione funzionale.
|
||||
|
||||
`concat` offre un modo per aggiungere nuovi elementi alla fine di un array senza effetti collaterali di mutazione dello stesso.
|
||||
`concat` offre un modo per unire nuovi elementi alla fine di un array senza effetti collaterali di mutazione.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia la funzione `nonMutatingPush` in modo da utilizzare `concat` invece di `push` per aggiungere `newItem` alla fine di `original`. La funzione dovrebbe restituire un array.
|
||||
Cambia la funzione `nonMutatingPush` in modo che utilizzi `concat` per aggiungere `newItem` alla fine di `original` senza mutare gli array `original` o `newItem`. La funzione dovrebbe restituire un array.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
+1
-1
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-bar-chart
|
||||
|
||||
# --description--
|
||||
|
||||
**Obiettivo:** crea un'app funzionalmente simile a questa: <a href="https://codepen.io/freeCodeCamp/full/GrZVaM" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/GrZVaM</a>.
|
||||
**Obiettivo:** crea un'app funzionalmente simile a questa: <a href="https://bar-chart.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://bar-chart.freecodecamp.rocks</a>.
|
||||
|
||||
Soddisfa le user story qui sotto e supera tutti i test. Utilizza le librerie o le API di cui hai bisogno. Usa il tuo stile personale.
|
||||
|
||||
|
||||
+1
-1
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-choropleth-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Obiettivo:** crea un'app funzionalmente simile a questa: <a href="https://codepen.io/freeCodeCamp/full/EZKqza" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/EZKqza</a>.
|
||||
**Obiettivo:** crea un'app funzionalmente simile a questa: <a href="https://choropleth-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://choropleth-map.freecodecamp.rocks</a>.
|
||||
|
||||
Soddisfa le user story qui sotto e supera tutti i test. Utilizza le librerie o le API di cui hai bisogno. Usa il tuo stile personale.
|
||||
|
||||
|
||||
+1
-1
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-heat-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Obiettivo:** crea un'app funzionalmente simile a questa: <a href="https://codepen.io/freeCodeCamp/full/JEXgeY" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/JEXgeY</a>.
|
||||
**Obiettivo:** crea un'app funzionalmente simile a questa: <a href="https://heat-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://heat-map.freecodecamp.rocks</a>.
|
||||
|
||||
Soddisfa le user story qui sotto e supera tutti i test. Utilizza le librerie o le API di cui hai bisogno. Usa il tuo stile personale.
|
||||
|
||||
|
||||
+1
-1
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-scatterplot-graph
|
||||
|
||||
# --description--
|
||||
|
||||
**Obiettivo:** crea un'app funzionalmente simile a questa: <a href="https://codepen.io/freeCodeCamp/full/bgpXyK" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/bgpXyK</a>.
|
||||
**Obiettivo:** crea un'app funzionalmente simile a questa: <a href="https://scatterplot-graph.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://scatterplot-graph.freecodecamp.rocks</a>.
|
||||
|
||||
Soddisfa le user story qui sotto e supera tutti i test. Utilizza le librerie o le API di cui hai bisogno. Usa il tuo stile personale.
|
||||
|
||||
|
||||
+1
-1
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-treemap-diagram
|
||||
|
||||
# --description--
|
||||
|
||||
**Obiettivo:** crea un'app funzionalmente simile a questa: <a href="https://codepen.io/freeCodeCamp/full/KaNGNR" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/KaNGNR</a>.
|
||||
**Obiettivo:** crea un'app funzionalmente simile a questa: <a href="https://treemap-diagram.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://treemap-diagram.freecodecamp.rocks</a>.
|
||||
|
||||
Soddisfa le user story qui sotto e supera tutti i test. Utilizza le librerie o le API di cui hai bisogno. Usa il tuo stile personale.
|
||||
|
||||
|
||||
+1
-1
@@ -8,7 +8,7 @@ dashedName: assert-deep-equality-with--deepequal-and--notdeepequal
|
||||
|
||||
# --description--
|
||||
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, o clonato da <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
|
||||
Come promemoria, questo progetto verrà costruito a partira dalla seguente bozza su <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a> o clonato da <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
|
||||
|
||||
`deepEqual()` afferma che due oggetti sono uguali in maniera profonda.
|
||||
|
||||
|
||||
+3
-3
@@ -38,7 +38,7 @@ print(certificates_earned)
|
||||
|
||||
## --answers--
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
@@ -48,7 +48,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
Beau 6
|
||||
@@ -58,7 +58,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@ dashedName: problem-148-exploring-pascals-triangle
|
||||
|
||||
Possiamo facilmente verificare che nessuna delle voci nelle prime sette righe del triangolo di Pascal è divisibile per 7:
|
||||
|
||||
```
|
||||
```markup
|
||||
1
|
||||
1 1
|
||||
1 2 1
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@ Durante un periodo di n-giorni viene formata una stringa ternaria per ogni bambi
|
||||
|
||||
Anche se ci sono ottantuno stringhe ternarie che possono essere formate per un periodo di 4 giorni, esattamente quarantatre stringhe porterebbero a un premio:
|
||||
|
||||
```
|
||||
```markup
|
||||
OOOO OOOA OOOL OOAO OOAA OOAL OOLO OOLA OAOO OAOA
|
||||
OAOL OAAO OAAL OALO OALA OLOO OLOA OLAO OLAA AOOO
|
||||
AOOA AOOL AOAO AOAA AOAL AOLO AOLA AAOO AAOA AAOL
|
||||
|
||||
+4
-4
@@ -40,25 +40,25 @@ assert(typeof diophantineEquation(7) === 'number');
|
||||
|
||||
`diophantineEquation(7)` dovrebbe restituire `5`.
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(7), 5);
|
||||
```
|
||||
|
||||
`diophantineEquation(100)` dovrebbe restituire `61`.
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(100), 61);
|
||||
```
|
||||
|
||||
`diophantineEquation(409)` dovrebbe restituire `409`.
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(409), 409);
|
||||
```
|
||||
|
||||
`diophantineEquation(500)` dovrebbe restituire `421`.
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(500), 421);
|
||||
```
|
||||
|
||||
|
||||
@@ -51,7 +51,7 @@ assert(isValidSolution_(solve24(testCases_[0])));
|
||||
assert(isValidSolution_(solve24(testCases_[1])));
|
||||
```
|
||||
|
||||
`solve24("6789")` dovrebbe restituire `(6*8)/(9-7)`. `(8*6)/(9-7)` o una stringa valida simile
|
||||
`solve24("6789")` dovrebbe restituire `(6*8)/(9-7)`, `(8*6)/(9-7)` o una stringa simile valida
|
||||
|
||||
```js
|
||||
assert(isValidSolution_(solve24(testCases_[2])));
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: step-47
|
||||
|
||||
Dovresti già avere familiarità con i valori decimali, o in base 10, che vanno da 0 a 9. I valori esadecimali, o in base 16, vanno da 0 a 9, e da A a F:
|
||||
|
||||
```
|
||||
```js
|
||||
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
|
||||
```
|
||||
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@ dashedName: step-20
|
||||
|
||||
# --description--
|
||||
|
||||
Lo pseudo-elemento `::after` crea un elemento che è l'ultimo figlio dell'elemento selezionato. Possiamo utilizzarlo per aggiungere un elemento vuoto dopo l'ultima immagine. Se gli diamo la stessa `width` delle immagini, farà sì che l'ultima immagine si trovi a sinistra in un layout a due colonne. Ora è centrato perché abbiamo impostato `justify-content: center` sul contenitore flex.
|
||||
Lo pseudo-elemento `::after` crea un elemento che è l'ultimo figlio dell'elemento selezionato. Puoi utilizzarlo per aggiungere un elemento vuoto dopo l'ultima immagine. Se gli dai la stessa `width` delle immagini, l'ultima immagine si troverà a sinistra in un layout a due colonne. Ora è centrato perché hai impostato `justify-content: center` sul contenitore flex.
|
||||
|
||||
Esempio:
|
||||
|
||||
|
||||
+3
-3
@@ -9,7 +9,7 @@ dashedName: step-11
|
||||
|
||||
Il testo di un link deve essere posizionato tra i tag di apertura e chiusura di un elemento di ancoraggio (`a`). Ad esempio, `<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>` è un link con il testo `click here to go to freeCodeCamp.org`.
|
||||
|
||||
Aggiungi il testo di ancoraggio `cat photos` all'elemento di ancoraggio. Sarà il testo del link.
|
||||
Aggiungi il testo di ancoraggio `link to cat pictures` all'elemento di ancoraggio. Sarà il testo del link.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -25,12 +25,12 @@ L'elemento di ancoraggio (`a`) dovrebbe avere un tag di chiusura. I tag di chius
|
||||
assert(code.match(/<\/a\>/));
|
||||
```
|
||||
|
||||
Il testo dell'elemento di ancoraggio (`a`) dovrebbe essere `cat photos`. Assicurati di inserire il testo del link tra i tag di apertura e di chiusura dell'elemento di ancoraggio (`a`).
|
||||
Il testo dell'elemento di ancoraggio (`a`) dovrebbe essere `link to cat pictures`. Assicurati di inserire il testo del link tra i tag di apertura e di chiusura dell'elemento di ancoraggio (`a`).
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
|
||||
'cat photos'
|
||||
'link to cat pictures'
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
+5
-4
@@ -7,9 +7,10 @@ dashedName: step-12
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso puoi vedere le parole `cat photos` sottolineate vicino all'immagine nella preview. Questo è il tuo link, prova a cliccarlo.
|
||||
Nello step precedente hai trasformato le parole `link to cat pictures` in un link inserendole tra un tag di apertura e un tag di chiusura di ancoraggio (`a`). Puoi fare lo stesso con le parole in un elemento, come un elemento `p`.
|
||||
|
||||
Nel testo dell'elemento `p`, trasforma le parole `cat photos` in un link a `https://freecatphotoapp.com` posizionando queste parole tra un tag di apertura e un tag di chiusura di ancoraggio (`a`).
|
||||
|
||||
Nel testo dell'elemento `p`, trasforma le parole `cat photos` in un link a `https://freecatphotoapp.com` annidando queste parole in un nuovo elemento di ancoraggio.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -19,7 +20,7 @@ Dovresti annidare un nuovo elemento di ancoraggio (`a`) dentro l'elemento `p`.
|
||||
assert($('p > a').length);
|
||||
```
|
||||
|
||||
Il valore dell'attributo `href` del link dovrebbe essere `https://freecatphotoapp.com`. Hai omesso il valore di href o hai un refuso.
|
||||
Il valore dell'attributo `href` del link dovrebbe essere `https://freecatphotoapp.com`. Hai omesso il valore di `href` o hai un refuso.
|
||||
|
||||
```js
|
||||
const nestedAnchor = $('p > a')[0];
|
||||
@@ -60,7 +61,7 @@ assert(pText.match(/click here to view more cat photos\.?$/));
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
--fcc-editable-region--
|
||||
<p>Click here to view more cat photos.</p>
|
||||
<a href="https://freecatphotoapp.com">cat photos</a>
|
||||
<a href="https://freecatphotoapp.com">link to cat pictures</a>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
</main>
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ Gli operatori logici possono essere usati per costruire media query più comples
|
||||
|
||||
Ad esempio, ecco una media query che fa riferimento a una larghezza del display tra 500px e 1000px:
|
||||
|
||||
```
|
||||
```css
|
||||
@media (min-width: 500px) and (max-width: 1000px){
|
||||
|
||||
}
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ Aggiungi un divider medio dopo l'elemento `.daily-value`. Sotto il nuovo divider
|
||||
|
||||
Dai all'elemento `p` il seguente testo:
|
||||
|
||||
```
|
||||
```markup
|
||||
* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
|
||||
```
|
||||
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: step-7
|
||||
|
||||
Dai all'elemento `#text` il seguente testo:
|
||||
|
||||
```
|
||||
```markup
|
||||
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.
|
||||
```
|
||||
|
||||
+194
@@ -0,0 +1,194 @@
|
||||
---
|
||||
id: 62a7c071219da921758a35bb
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nella funzione `goTown`, aggiorna le proprietà `innerText` dei pulsanti in `Go to store`, `Go to cave` e `Fight dragon`. Aggiorna le proprietà `onclick` rispettivamente in `goStore`, `goCave` e `fightDragon`. Infine, aggiorna il testo della proprietà `innerText` in `You are in the town square. You see a sign that says Store.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti impostare la proprietà `button1.innerText` su `Go to store` nella funzione `goTown`.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /button1\.innerText\s*=\s*('|")Go to store\1/);
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `button2.innerText` su `Go to cave` nella funzione `goTown`.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /button2\.innerText\s*=\s*('|")Go to cave\1/);
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `button3.innerText` su `Fight dragon` nella funzione `goTown`.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /button3\.innerText\s*=\s*('|")Fight dragon\1/);
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `button1.onclick` su `goStore` nella funzione `goTown`.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /button1\.onclick\s*=\s*goStore/);
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `button2.onclick` su `goCave` nella funzione `goTown`.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /button2\.onclick\s*=\s*goCave/);
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `button3.onclick` su `fightDragon` nella funzione `goTown`.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /button3\.onclick\s*=\s*fightDragon/);
|
||||
```
|
||||
|
||||
Dovresti impostare la proprietà `text.innerText` su `You are in the town square. You see a sign that says Store.` nella funzione `goTown`.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /text\.innerText\s*=\s*('|")You are in the town square. You see a sign that says Store\.\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>
|
||||
</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>
|
||||
<script src="./script.js"></script>
|
||||
</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"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterName = document.querySelector("#monsterName");
|
||||
const monsterHealthText =document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function goTown() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
+164
@@ -0,0 +1,164 @@
|
||||
---
|
||||
id: 62a7c23e6b511f22ed71197a
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Devi racchiudere il testo `Store` tra virgolette doppie. Dato che la stringa è già racchiusa tra virgolette doppie, dovrai usare un carattere di escape per le virgolette intorno a `Store`. Puoi usare la barra rovesciata `\`. Ecco un esempio:
|
||||
|
||||
```js
|
||||
const escapedString = "Naomi likes to play \"Zelda\" sometimes.";
|
||||
```
|
||||
|
||||
Racchiudi il testo `Store` tra virgolette doppie nella riga `text.innerText`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti racchiudere il testo `Store` tra virgolette doppie.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"."/);
|
||||
```
|
||||
|
||||
# --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>
|
||||
<script src="./script.js"></script>
|
||||
</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"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterName = document.querySelector("#monsterName");
|
||||
const monsterHealthText =document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says Store.";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
+180
@@ -0,0 +1,180 @@
|
||||
---
|
||||
id: 62a7cc99577fbf25ee7a7d76
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Hai una ripetizione nelle funzioni `goTown` e `goStore`. Avere una ripetizione nel codice è segno che ti serve un'altra funzione. Le funzioni possono prendere parametri, che sono valori che vengono dati alla funzione ogni volta che viene eseguita. Ecco una funzione che prende un parametro chiamato `param`:
|
||||
|
||||
```js
|
||||
function myFunction(param) {
|
||||
console.log(param);
|
||||
}
|
||||
```
|
||||
|
||||
Crea una funzione vuota `update` che prende un parametro chiamato `location`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare la parola chiave `function` per dichiarare `update`.
|
||||
|
||||
```js
|
||||
assert.match(code, /function\s+update/);
|
||||
```
|
||||
|
||||
La funzione `update` dovrebbe prendere un parametro chiamato `location`.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /update\(location\)/);
|
||||
```
|
||||
|
||||
La funzione `update` dovrebbe essere vuota.
|
||||
|
||||
```js
|
||||
assert.equal(update.toString(), function update(location) {});
|
||||
```
|
||||
|
||||
# --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>
|
||||
<script src="./script.js"></script>
|
||||
</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"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterName = document.querySelector("#monsterName");
|
||||
const monsterHealthText =document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
+176
@@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 62a8a929e4260d08093756d2
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Crea una variabile chiamata `locations` e impostala come un array vuoto.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare `const` per dichiarare `locations`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const locations/);
|
||||
```
|
||||
|
||||
`locations` dovrebbe essere un array.
|
||||
|
||||
|
||||
```js
|
||||
assert.isArray(locations);
|
||||
```
|
||||
|
||||
`locations` dovrebbe essere vuoto.
|
||||
|
||||
```js
|
||||
assert.equal(locations.length, 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>
|
||||
</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>
|
||||
<script src="./script.js"></script>
|
||||
</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"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterName = document.querySelector("#monsterName");
|
||||
const monsterHealthText =document.querySelector("#monsterHealth");
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
+171
@@ -0,0 +1,171 @@
|
||||
---
|
||||
id: 62a8a9d876b2580943ba9351
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In precedenza hai usato un array per memorizzare delle stringhe. Ma gli array possono contenere qualsiasi tipo di dati. Questa volta, il tuo array conterrà gli oggetti. Gli oggetti sono simili agli array, ma con alcune differenze. Una differenza è che gli oggetti utilizzano proprietà, o chiavi, per accedere ai dati e modificarli.
|
||||
|
||||
Gli oggetti sono indicati da parentesi graffe. Un oggetto vuoto ha questo aspetto `{}`. Aggiungi un oggetto vuoto all'array `locations`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il primo valore di `locations` dovrebbe essere un oggetto.
|
||||
|
||||
```js
|
||||
assert.isObject(locations[0]);
|
||||
```
|
||||
|
||||
Il primo valore di `locations` dovrebbe essere un oggetto vuoto.
|
||||
|
||||
```js
|
||||
assert.deepEqual(locations[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>
|
||||
</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>
|
||||
<script src="./script.js"></script>
|
||||
</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"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterName = document.querySelector("#monsterName");
|
||||
const monsterHealthText =document.querySelector("#monsterHealth");
|
||||
--fcc-editable-region--
|
||||
const locations = [];
|
||||
--fcc-editable-region--
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
+3
-3
@@ -38,7 +38,7 @@ print(certificates_earned)
|
||||
|
||||
## --answers--
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
@@ -48,7 +48,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
Beau 6
|
||||
@@ -58,7 +58,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@ dashedName: problem-148-exploring-pascals-triangle
|
||||
|
||||
パスカルの三角形の最初の 7 段には 7 で割り切れる要素がないことを、簡単に確認できます。
|
||||
|
||||
```
|
||||
```markup
|
||||
1
|
||||
1 1
|
||||
1 2 1
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@ n 日間、生徒ごとに、L (遅刻), O (出席), A (欠席) を使用して
|
||||
|
||||
4 日間では 81 通りの 3 進文字列が考えられ、受賞する文字列は次の 43 通りです。
|
||||
|
||||
```
|
||||
```markup
|
||||
OOOO OOOA OOOL OOAO OOAA OOAL OOLO OOLA OAOO OAOA
|
||||
OAOL OAAO OAAL OALO OALA OLOO OLOA OLAO OLAA AOOO
|
||||
AOOA AOOL AOAO AOAA AOAL AOLO AOLA AAOO AAOA AAOL
|
||||
|
||||
+4
-4
@@ -40,25 +40,25 @@ assert(typeof diophantineEquation(7) === 'number');
|
||||
|
||||
`diophantineEquation(7)` は `5` を返す必要があります。
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(7), 5);
|
||||
```
|
||||
|
||||
`diophantineEquation(100)` は `61` を返す必要があります。
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(100), 61);
|
||||
```
|
||||
|
||||
`diophantineEquation(409)` は `409` を返す必要があります。
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(409), 409);
|
||||
```
|
||||
|
||||
`diophantineEquation(500)` は `421` を返す必要があります。
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(500), 421);
|
||||
```
|
||||
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: step-47
|
||||
|
||||
0 から 9 までの十進法 (10 進数) の値については馴染みがあると思います。 16 進法 (16 進数) の値は、0 から 9 の後に、A から F が続きます。
|
||||
|
||||
```
|
||||
```js
|
||||
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
|
||||
```
|
||||
|
||||
|
||||
+223
@@ -0,0 +1,223 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98e9
|
||||
title: ステップ 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
コードを最適化しましょう。 `position` と `top` のプロパティと値を、`.foreground-buildings` から `.background-buildings` に移動してください。 次に `.background-buildings` と `.foreground-buildings` の両方を選択して、これらのスタイルを両方の要素に効率的に適用してください。 コンマ(`,`) を使用して、`selector1, selector2` のようにセレクターを区切ることができます。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.foreground-buildings` 宣言を削除しないでください。
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
|
||||
```
|
||||
|
||||
`.foreground-buildings` から `position` プロパティを削除する必要があります。
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
|
||||
```
|
||||
|
||||
`.foreground-buildings` から `top` プロパティを削除する必要があります。
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
|
||||
```
|
||||
|
||||
`.background-buildings, .foreground-buildings` に `absolute` の `position` プロパティを 追加する必要があります。
|
||||
|
||||
```js
|
||||
function eitherOr() {
|
||||
const a = new __helpers.CSSHelp(document)
|
||||
return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
|
||||
}
|
||||
assert.equal(eitherOr()?.position, 'absolute');
|
||||
```
|
||||
|
||||
`.background-buildings, .foreground-buildings` に `0` の `top` プロパティを 追加する必要があります。
|
||||
|
||||
```js
|
||||
function eitherOr() {
|
||||
const a = new __helpers.CSSHelp(document)
|
||||
return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
|
||||
}
|
||||
assert.equal(eitherOr()?.top, '0px');
|
||||
```
|
||||
|
||||
同じスタイル宣言で `.foreground-buildings` と `.background-buildings` の両方のセレクターを使用するには、コンマを使用する必要があります。
|
||||
|
||||
```js
|
||||
function eitherOr() {
|
||||
const a = new __helpers.CSSHelp(document)
|
||||
return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
|
||||
}
|
||||
assert.exists(eitherOr());
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+210
@@ -0,0 +1,210 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98f8
|
||||
title: ステップ 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`.bb2` の中に 2 つの新しい `div` 要素をネストし、`bb2a` クラスと `bb2b` クラスを設定してください。 これらは、このビルに使用する 2 つのセクションになります。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.bb2` に `div` 要素を 2 つ追加する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.bb2')?.children?.length, 2);
|
||||
```
|
||||
|
||||
1 つ目の `div` にクラス `bb2a` を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb2a'));
|
||||
```
|
||||
|
||||
2 つ目の `div` にクラス `bb2b` を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb2b'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb2"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+211
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98fa
|
||||
title: ステップ 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`:root` 内に `window-color2` という新しい変数を作成し、値を `#8cd9b3` に設定してください。 これは、このビルの二つめの色として使います。
|
||||
|
||||
# --hints--
|
||||
|
||||
`:root` 内に `window-color2` という新しい変数を作成する必要があります。
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2'));
|
||||
```
|
||||
|
||||
`window-color2` の値を `#8cd9b3` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+240
@@ -0,0 +1,240 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98fb
|
||||
title: ステップ 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
多くの場合、グラデーションの遷移は、ある色から別の色に徐々に変化します。 次のようにすると、変化をくっきりした線にできます:
|
||||
|
||||
```css
|
||||
linear-gradient(
|
||||
var(--first-color) 0%,
|
||||
var(--first-color) 40%,
|
||||
var(--second-color) 40%,
|
||||
var(--second-color) 80%
|
||||
);
|
||||
```
|
||||
|
||||
`linear-gradient` を `.bb2b` に追加して、`0%` から `6%` までは `--building-color2` を使用し、`6%` から `9%` までは `--window-color2` を使用するよう設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.bb2b` には `background` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background);
|
||||
```
|
||||
|
||||
`background` に `linear-gradient` を使用する必要があります。
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient");
|
||||
```
|
||||
|
||||
`0%` から `6%` まで `--building-color2` を使用する必要があります。
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/);
|
||||
```
|
||||
|
||||
`6%` から `9%` まで `--window-color2` を使用する必要があります。
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%");
|
||||
```
|
||||
|
||||
`.bb2b` の `linear-gradient` が、`0%` から `6%` までは `--building-color2`、`6%` から `9%` までは `--window-color2` と遷移する必要があります。
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+211
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98fc
|
||||
title: ステップ 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
セクション上部にくっきりした色の変化が作成できました。 このセクションのグラデーションの種類を `linear-gradient` から `repeating-linear-gradient` に変更してください。 これで、要素の下部に達するまでグラデーションの 4 色が繰り返され、たくさんの要素を追加することなく縞模様を表示できます。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.bb2b` の `background` プロパティについて、`linear-gradient` ではなく `repeating-linear-gradient` を使用するように変更する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+106
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 60f8618d191b940d62038513
|
||||
title: ステップ 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
それぞれ対応する `label` 要素内で、`input` 要素の直後にスペースを入れた後、以下のテキストを追加してください:
|
||||
|
||||
```md
|
||||
Personal Account
|
||||
Business Account
|
||||
I accept the terms and conditions
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
1 つ目の `label` にテキスト `Personal Account` を入れる必要があります。
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('fieldset:nth-child(2) > label')?.innerText, 'Personal Account');
|
||||
```
|
||||
|
||||
2 つ目の `label` にテキスト `Business Account` を入れる必要があります。
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText, 'Business Account');
|
||||
```
|
||||
|
||||
3 つ目の `label` にテキスト `I accept the terms and conditions` を入れる必要があります。
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText, 'I accept the terms and conditions');
|
||||
```
|
||||
|
||||
1 つ目の `label` のテキストの前にスペースを 1 つ入れる必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) > label')?.innerText?.[0], ' ');
|
||||
```
|
||||
|
||||
2 つ目の `label` のテキストの前にスペースを 1 つ入れる必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText?.[0], ' ');
|
||||
```
|
||||
|
||||
3 つ目の `label` のテキストの前にスペースを 1 つ入れる必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText?.[0], ' ');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
|
||||
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
|
||||
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
|
||||
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" /></label>
|
||||
<label><input type="radio" /></label>
|
||||
<label><input type="checkbox" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 60fab4a123ce4b04526b082b
|
||||
title: ステップ 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
一度に選択できるラジオボタンは 1 つだけにしたいですね。 ですが、このフォームはラジオボタンがお互いに関連していることを認識しません。
|
||||
|
||||
ラジオボタンを関連付けるため、`name` 属性に `account-type` という同じ値を設定してください。 これで両方のラジオボタンを同時に選択することができなくなりました。
|
||||
|
||||
# --hints--
|
||||
|
||||
1 つ目のラジオボタンの `name` 属性を `account-type` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type');
|
||||
```
|
||||
|
||||
2 つ目のラジオボタンの `name` 属性を `account-type` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type');
|
||||
```
|
||||
|
||||
`checkbox` には `name` 属性を設定しないでください。
|
||||
|
||||
```js
|
||||
assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input[type="checkbox"]')?.name);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
|
||||
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
|
||||
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
|
||||
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" /> Personal Account</label>
|
||||
<label><input type="radio" /> Business Account</label>
|
||||
<label><input type="checkbox" required /> I accept the terms and conditions</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
+145
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 60ffe4f4ec18cd04dc470c56
|
||||
title: ステップ 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`select` 要素の背景色は白のままにしておきたいですが、`min-height` が `input` 要素や `textarea` 要素と同じになっていませんね。
|
||||
|
||||
`min-height` プロパティと値を移動して、この 3 種類の要素が同じ `min-height` の値を持ち、かつ `select` 要素の背景色は白のままになるようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`min-height` プロパティと値を `input, textarea, select` セレクターに移動する必要があります。
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight);
|
||||
```
|
||||
|
||||
`input, textarea, select` セレクターの `min-height` を `2em` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight, '2em');
|
||||
```
|
||||
|
||||
`input, textarea` セレクターから `min-height` の宣言を削除する必要があります。
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minHeight);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
|
||||
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
|
||||
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
|
||||
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label for="terms-and-conditions" name="terms-and-conditions">
|
||||
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
|
||||
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
|
||||
<label for="referrer">How did you hear about us?
|
||||
<select id="referrer" name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label for="bio">Provide a bio:
|
||||
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
fieldset:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+146
@@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 60ffe947a868ec068f7850f6
|
||||
title: ステップ 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
送信ボタンをより際立たせるために、`background-color` を `#3b3b4f` に、`border-color` を `white` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
送信ボタンの `background-color` を `#3b3b4f` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.backgroundColor, 'rgb(59, 59, 79)');
|
||||
```
|
||||
|
||||
送信ボタンの `border-color` を `white` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.borderColor, 'white');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
|
||||
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
|
||||
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
|
||||
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label for="terms-and-conditions" name="terms-and-conditions">
|
||||
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
|
||||
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
|
||||
<label for="referrer">How did you hear about us?
|
||||
<select id="referrer" name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label for="bio">Provide a bio:
|
||||
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
fieldset:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
height: 2em;
|
||||
font-size: 1.1rem;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
---
|
||||
id: 60ffe9cb47809106eda2f2c9
|
||||
title: ステップ 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
最後に、送信ボタンについて、上にある `fieldset` と離し、幅が `300px` より小さくなることのないよう調整しましょう。
|
||||
|
||||
上下に `1em` が含まれるように `margin` プロパティを変更し、左右の余白は `auto` の設定のままにします。 そして、前述のように幅を設定します。
|
||||
|
||||
# --hints--
|
||||
|
||||
`width` プロパティは変更しないでください。 `min-width` プロパティを使用してください。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%');
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth);
|
||||
```
|
||||
|
||||
既存の `margin` プロパティに、上下のマージンの設定 `1em` を含めてください。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '1em auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
|
||||
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
|
||||
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
|
||||
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label for="terms-and-conditions" name="terms-and-conditions">
|
||||
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
|
||||
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
|
||||
<label for="referrer">How did you hear about us?
|
||||
<select id="referrer" name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label for="bio">Provide a bio:
|
||||
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
fieldset:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
height: 2em;
|
||||
font-size: 1.1rem;
|
||||
background-color: #3b3b4f;
|
||||
border-color: white;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
---
|
||||
id: 60ffecefac971607ae73c60f
|
||||
title: ステップ 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`padding` といえば、送信ボタンは `form` 要素の一番下に配置されていますね。 `form` の下側だけに、`2em` の `padding` を追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`padding-bottom` プロパティを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom);
|
||||
```
|
||||
|
||||
`padding-bottom` の値を `2em` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2em');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
|
||||
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
|
||||
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
|
||||
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label for="terms-and-conditions" name="terms-and-conditions">
|
||||
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
|
||||
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
|
||||
<label for="referrer">How did you hear about us?
|
||||
<select id="referrer" name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label for="bio">Provide a bio:
|
||||
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
fieldset:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 1em auto;
|
||||
height: 2em;
|
||||
font-size: 1.1rem;
|
||||
background-color: #3b3b4f;
|
||||
border-color: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
```
|
||||
+1
-1
@@ -11,7 +11,7 @@ dashedName: step-64
|
||||
|
||||
その `p` 要素に以下のテキストを設定してください:
|
||||
|
||||
```
|
||||
```markup
|
||||
* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
|
||||
```
|
||||
|
||||
|
||||
+3
-3
@@ -38,7 +38,7 @@ print(certificates_earned)
|
||||
|
||||
## --answers--
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
@@ -48,7 +48,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
Beau 6
|
||||
@@ -58,7 +58,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@ dashedName: problem-148-exploring-pascals-triangle
|
||||
|
||||
Podemos facilmente verificar que nenhuma das entradas das primeiras sete linhas do triângulo Pascal é divisível por 7:
|
||||
|
||||
```
|
||||
```markup
|
||||
1
|
||||
1 1
|
||||
1 2 1
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@ Durante um período de n-dias, uma string ternária é formada para cada crianç
|
||||
|
||||
Embora existam oitenta e uma strings ternárias para um período de 4 dias que possam ser formadas, exatamente quarenta e três strings levariam a um prêmio:
|
||||
|
||||
```
|
||||
```markup
|
||||
OOOO OOOA OOOL OOAO OOAA OOAL OOLO OOLA OAOO OAOA
|
||||
OAOL OAAO OAAL OALO OALA OLOO OLOA OLAO OLAA AOOO
|
||||
AOOA AOOL AOAO AOAA AOAL AOLO AOLA AAOO AAOA AAOL
|
||||
|
||||
+4
-4
@@ -40,25 +40,25 @@ assert(typeof diophantineEquation(7) === 'number');
|
||||
|
||||
`diophantineEquation(7)` deve retornar `5`.
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(7), 5);
|
||||
```
|
||||
|
||||
`diophantineEquation(100)` deve retornar `61`.
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(100), 61);
|
||||
```
|
||||
|
||||
`diophantineEquation(409)` deve retornar `409`.
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(409), 409);
|
||||
```
|
||||
|
||||
`diophantineEquation(500)` deve retornar `421`.
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(500), 421);
|
||||
```
|
||||
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: step-47
|
||||
|
||||
Você já pode estar familiarizado com valores decimais, ou base 10, que vão de 0 a 9. Valores hexadecimais ou de base 16 vão de 0 a 9 e, depois, de A a F:
|
||||
|
||||
```
|
||||
```js
|
||||
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
|
||||
```
|
||||
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ Operadores lógicos podem ser utilizados para construir media queries mais compl
|
||||
|
||||
Por exemplo, uma media query que visa uma largura de exibição entre 500px E 1000px seria:
|
||||
|
||||
```
|
||||
```css
|
||||
@media (min-width: 500px) and (max-width: 1000px){
|
||||
|
||||
}
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ Adicione um divisor médio após o elemento `.daily-value`. Abaixo do novo divis
|
||||
|
||||
Dê ao elemento `p` o seguinte texto:
|
||||
|
||||
```
|
||||
```markup
|
||||
* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
|
||||
```
|
||||
|
||||
|
||||
+3
-3
@@ -38,7 +38,7 @@ print(certificates_earned)
|
||||
|
||||
## --answers--
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
@@ -48,7 +48,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
Beau 6
|
||||
@@ -58,7 +58,7 @@ dtype: int64
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```markup
|
||||
Tom 8
|
||||
Kris 2
|
||||
Ahmad 5
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@ dashedName: problem-148-exploring-pascals-triangle
|
||||
|
||||
Ми можемо легко перевірити, що жоден елемент у перших семи рядах трикутника Паскаля не ділиться на 7:
|
||||
|
||||
```
|
||||
```markup
|
||||
1
|
||||
1 1
|
||||
1 2 1
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@ dashedName: problem-191-prize-strings
|
||||
|
||||
Хоча за 4 дні можна створити вісімдесят один тризначний рядок, рівно сорок три приведуть до призу:
|
||||
|
||||
```
|
||||
```markup
|
||||
OOOO OOOA OOOL OOAO OOAA OOAL OOLO OOLA OAOO OAOA
|
||||
OAOL OAAO OAAL OALO OALA OLOO OLOA OLAO OLAA AOOO
|
||||
AOOA AOOL AOAO AOAA AOAL AOLO AOLA AAOO AAOA AAOL
|
||||
|
||||
+4
-4
@@ -40,25 +40,25 @@ assert(typeof diophantineEquation(7) === 'number');
|
||||
|
||||
`diophantineEquation(7)` має повернути `5`.
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(7), 5);
|
||||
```
|
||||
|
||||
`diophantineEquation(100)` має повернути `61`.
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(100), 61);
|
||||
```
|
||||
|
||||
`diophantineEquation(409)` має повернути `409`.
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(409), 409);
|
||||
```
|
||||
|
||||
`diophantineEquation(500)` має повернути `421`.
|
||||
|
||||
```
|
||||
```js
|
||||
assert.strictEqual(diophantineEquation(500), 421);
|
||||
```
|
||||
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: step-47
|
||||
|
||||
Мабуть, ви вже знайомі з десятковими значеннями, або значеннями з основою 10, які йдуть від 0 до 9. Шістнадцяткові значення, або значення з основою 16, йдуть від 0 до 9, потім від A до F:
|
||||
|
||||
```
|
||||
```js
|
||||
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
|
||||
```
|
||||
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ dashedName: step-32
|
||||
|
||||
Приклад медіазапиту, націленого на ширину дисплею між 500px та 1000px:
|
||||
|
||||
```
|
||||
```css
|
||||
@media (min-width: 500px) and (max-width: 1000px){
|
||||
|
||||
}
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ dashedName: step-64
|
||||
|
||||
Надайте елементу `p` такий текст:
|
||||
|
||||
```
|
||||
```markup
|
||||
* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
|
||||
```
|
||||
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: step-7
|
||||
|
||||
Надайте своєму елементу `#text` такий текст:
|
||||
|
||||
```
|
||||
```markup
|
||||
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.
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user