mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-09 19:00:53 -04:00
chore(i18n,learn): processed translations (#47434)
This commit is contained in:
camperbot
@@ -14,40 +14,40 @@ dashedName: convert-celsius-to-fahrenheit
|
||||
|
||||
# --hints--
|
||||
|
||||
`convertToF(0)` 應返回一個數字。
|
||||
`convertCtoF(0)` 應該返回一個數字
|
||||
|
||||
```js
|
||||
assert(typeof convertToF(0) === 'number');
|
||||
assert(typeof convertCtoF(0) === 'number');
|
||||
```
|
||||
|
||||
`convertToF(-30)` 應返回 `-22`。
|
||||
`convertCtoF(-30)` 應該返回 `-22` 的值
|
||||
|
||||
```js
|
||||
assert(convertToF(-30) === -22);
|
||||
assert(convertCtoF(-30) === -22);
|
||||
```
|
||||
|
||||
`convertToF(-10)` 應返回 `14`。
|
||||
`convertCtoF(-10)` 應該返回 `14` 的值
|
||||
|
||||
```js
|
||||
assert(convertToF(-10) === 14);
|
||||
assert(convertCtoF(-10) === 14);
|
||||
```
|
||||
|
||||
`convertToF(0)` 應返回 `32`。
|
||||
`convertCtoF(0)` 應該返回 `32` 的值
|
||||
|
||||
```js
|
||||
assert(convertToF(0) === 32);
|
||||
assert(convertCtoF(0) === 32);
|
||||
```
|
||||
|
||||
`convertToF(20)` 應返回 `68`。
|
||||
`convertCtoF(20)` 應該返回 `68` 的值
|
||||
|
||||
```js
|
||||
assert(convertToF(20) === 68);
|
||||
assert(convertCtoF(20) === 68);
|
||||
```
|
||||
|
||||
`convertToF(30)` 應返回 `86`。
|
||||
`convertCtoF(30)` 應該返回 `86` 的值
|
||||
|
||||
```js
|
||||
assert(convertToF(30) === 86);
|
||||
assert(convertCtoF(30) === 86);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@@ -55,22 +55,21 @@ assert(convertToF(30) === 86);
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function convertToF(celsius) {
|
||||
function convertCtoF(celsius) {
|
||||
let fahrenheit;
|
||||
return fahrenheit;
|
||||
}
|
||||
|
||||
convertToF(30);
|
||||
convertCtoF(30);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function convertToF(celsius) {
|
||||
function convertCtoF(celsius) {
|
||||
let fahrenheit = celsius * 9/5 + 32;
|
||||
|
||||
return fahrenheit;
|
||||
}
|
||||
|
||||
convertToF(30);
|
||||
convertCtoF(30);
|
||||
```
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: generate-an-array-of-all-object-keys-with-object-keys
|
||||
|
||||
# --description--
|
||||
|
||||
我們可以給 `Object.keys()` 方法傳入一個對象作爲參數，來生成包含對象所有鍵的數組。 這會返回一個由對象中所有屬性（字符串）組成的數組。 需要注意的是，數組中元素的順序是不確定的。
|
||||
我們可以給 `Object.keys()` 方法傳入一個對象作爲參數，來生成包含對象所有鍵的數組。 這個方法將對象作爲參數並返回代表對象中每個屬性的字符串數組。 需要注意的是，數組中元素的順序是不確定的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ for (let user in users) {
|
||||
}
|
||||
```
|
||||
|
||||
這將在控制檯打印 `Alan`、`Jeff`、`Sarah` 和 `Ryan` - 每個值佔一行。
|
||||
這將記錄 `Alan`、`Jeff` 和 `Sarah` - 每個值都在自己的行中。
|
||||
|
||||
在上面的代碼中，我們定義了一個 `user` 變量。 可以觀察到，這個變量在遍歷對象的語句執行過程中會一直被重置並賦予新值，結果就是不同的用戶名打印到了 console 中。
|
||||
|
||||
|
||||
@@ -21,12 +21,12 @@ const arr = [
|
||||
[[10, 11, 12], 13, 14]
|
||||
];
|
||||
|
||||
arr[3];
|
||||
arr[3][0];
|
||||
arr[3][0][1];
|
||||
const subarray = arr[3];
|
||||
const nestedSubarray = arr[3][0];
|
||||
const element = arr[3][0][1];
|
||||
```
|
||||
|
||||
`arr[3]` 爲 `[[10, 11, 12], 13, 14]`，`arr[3][0]` 爲 `[10, 11, 12]`，並且 `arr[3][0][1]` 爲 `11`。
|
||||
在這個例子中，`subarray` 的值爲 `[[10, 11, 12], 13, 14]`， `nestedSubarray` 的值爲 `[10, 11, 12]`，`element` 的值爲 `11` 。
|
||||
|
||||
**注意：** 數組名與方括號之間不應該有任何空格，比如 `array [0][0]` 甚至是 `array [0] [0]` 都是不允許的。 儘管 JavaScript 能夠正確處理這種情況，但是當其他程序員閱讀你寫的代碼時，這可能讓他們感到困惑。
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: assignment-with-a-returned-value
|
||||
|
||||
# --description--
|
||||
|
||||
如果你還記得我們在[使用賦值運算符存儲值](/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator)中的討論的話，等號右側的所有操作都會在賦值之前完成。 這意味着我們可以獲取函數的返回值，並將其賦值給一個變量。
|
||||
如果你還記得我們在這一節<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank" rel="noopener noreferrer nofollow">使用賦值運算符存儲值</a>中的討論，賦值之前，先完成等號右邊的操作。 這意味着我們可以獲取函數的返回值，並將其賦值給一個變量。
|
||||
|
||||
假設我們有一個預先定義的函數 `sum` ，它將兩個數相加，然後：
|
||||
|
||||
|
||||
@@ -32,13 +32,19 @@ const ourStr = "I come first. " + "I come second.";
|
||||
|
||||
# --hints--
|
||||
|
||||
`myStr` 的值應該是 `This is the start. This is the end.`
|
||||
`myStr` 應該在兩個字符串之間有一個空格字符。
|
||||
|
||||
```js
|
||||
assert(/start\. This/.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` 的值應該是字符串 `This is the start. This is the end.`
|
||||
|
||||
```js
|
||||
assert(myStr === 'This is the start. This is the end.');
|
||||
```
|
||||
|
||||
應使用 `+` 操作符創建 `myStr`。
|
||||
應該使用 `+` 運算符來構建 `myStr`。
|
||||
|
||||
```js
|
||||
assert(code.match(/(["']).*\1\s*\+\s*(["']).*\2/g));
|
||||
@@ -50,7 +56,7 @@ assert(code.match(/(["']).*\1\s*\+\s*(["']).*\2/g));
|
||||
assert(/const\s+myStr/.test(code));
|
||||
```
|
||||
|
||||
應把結果賦值給 `myStr` 變量。
|
||||
應該將結果分配給 `myStr` 變量。
|
||||
|
||||
```js
|
||||
assert(/myStr\s*=/.test(code));
|
||||
|
||||
@@ -28,6 +28,12 @@ ourStr += "I come second.";
|
||||
|
||||
# --hints--
|
||||
|
||||
`myStr` 應該在兩個字符串之間有一個空格字符。
|
||||
|
||||
```js
|
||||
assert(/sentence\. This/.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` 的值應該是字符串 `This is the first sentence. This is the second sentence.`
|
||||
|
||||
```js
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: constructing-strings-with-variables
|
||||
|
||||
# --description--
|
||||
|
||||
有時候你需要創建一個類似 [Mad Libs](https://en.wikipedia.org/wiki/Mad_Libs)（填詞遊戲）風格的字符串。 通過使用連接運算符（`+`），你可以插入一個或多個變量來組成一個字符串。
|
||||
有時候你需要構建一個字符串。 通過使用連接運算符（`+`），你可以插入一個或多個變量來組成一個字符串。
|
||||
|
||||
例如：
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: counting-cards
|
||||
|
||||
# --description--
|
||||
|
||||
在賭場 21 點遊戲中，玩家可以通過計算牌桌上已經發放的卡牌的高低值來讓自己在遊戲中保持優勢。 這就叫 [21 點算法](https://en.wikipedia.org/wiki/Card_counting)。
|
||||
在 21 點遊戲中，玩家可以通過計算牌桌上已經發放的卡牌的高低值來讓自己在遊戲中保持優勢。 這被稱爲卡片計數。
|
||||
|
||||
牌桌上的大值的卡牌更多，對玩家有利。 根據下面的表格，每張卡牌都被分配了一個值。 如果卡牌的值大於 0，那麼玩家應該追加賭注。 如果卡牌的值爲 0 或負數，玩家應該追加少許賭注甚至不追加賭注。
|
||||
|
||||
@@ -25,6 +25,19 @@ dashedName: counting-cards
|
||||
|
||||
# --hints--
|
||||
|
||||
你的函數應返回計數值和文本（`Bet` 或 `Hold`），它們之間有一個空格字符。
|
||||
|
||||
```js
|
||||
assert(//
|
||||
(function () {
|
||||
count = 0;
|
||||
let out = cc(10);
|
||||
const hasSpace = /-?\d+ (Bet|Hold)/.test('' + out);
|
||||
return hasSpace;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
卡片序列 2、3、4、5、6 應返回字符串 `5 Bet`
|
||||
|
||||
```js
|
||||
@@ -44,7 +57,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
卡牌序列 7、8、9 應該返回 `0 Hold`
|
||||
卡片序列 7、8、9 應返回字符串 `0 Hold`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -61,7 +74,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
卡牌序列 10、J、Q、K、A 應該返回 `-5 Hold`
|
||||
卡片序列 10、J、Q、K、A 應返回字符串 `-5 Hold`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -80,7 +93,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
卡牌序列 3、7、Q、8、A 應該返回 `-1 Hold`
|
||||
卡片序列 3、7、Q、8、A 應返回字符串 `-1 Hold`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -99,7 +112,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
卡牌序列 2、J、9、2、7 應該返回 `1 Bet`
|
||||
卡片序列 2、J、9、2、7 應返回字符串 `1 Bet`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -118,7 +131,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
卡牌序列 2、2、10 應該返回 `1 Bet`
|
||||
卡片序列 2、2、10 應返回字符串 `1 Bet`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -135,7 +148,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
卡牌序列 3、2、A、10、K 應該返回 `-1 Hold`
|
||||
卡片序列 3、2、A、10、K 應返回字符串 `-1 Hold`
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: create-decimal-numbers-with-javascript
|
||||
|
||||
我們也可以把小數存儲到變量中。 小數有時候也被稱作<dfn>浮點數</dfn>或者 <dfn>floats</dfn>。
|
||||
|
||||
**提示：** 不是所有的實數都可以用浮點數（<dfn>floating point</dfn>）來表示。 因爲可能產生四捨五入的錯誤， [點擊這裏瞭解細節](https://en.wikipedia.org/wiki/Floating-point_arithmetic#Accuracy_problems)。
|
||||
**注意：** 當你計算數字時，它們是以有限的精確度計算的。 使用浮點數的運算可能產生不同於預期結果的結果。 如果你生成了一個非預期的結果，請在 <a href="https://forum.freecodecamp.org/" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp 論壇</a>上創建一個話題進行說明。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ FAV_PET = "Dogs";
|
||||
|
||||
# --instructions--
|
||||
|
||||
更改代碼，以便使用 `let` 或 `const` 聲明所有變量。 當你想要改變變量時使用 `let`，當你想要變量保持不變時使用 `const`。 此外，重命名使用 `const` 聲明的變量以符合慣例。
|
||||
更改代碼，以便使用 `let` 或 `const` 聲明所有變量。 當你想要改變變量時使用 `let`，當你想要變量保持不變時使用 `const`。 此外，重命名使用 `const` 聲明的變量以符合慣例。 請勿更改分配給變量的字符串。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -45,10 +45,15 @@ assert.notMatch(code, /(fCC)/);
|
||||
`FCC` 應該是一個用 `const` 聲明的常量。
|
||||
|
||||
```js
|
||||
assert.equal(FCC, 'freeCodeCamp');
|
||||
assert.match(code, /const\s+FCC/);
|
||||
```
|
||||
|
||||
分配給 `FCC` 的字符串不應更改。
|
||||
|
||||
```js
|
||||
assert.equal(FCC, 'freeCodeCamp');
|
||||
```
|
||||
|
||||
`fact` 應該用 `let` 聲明。
|
||||
|
||||
```js
|
||||
|
||||
@@ -39,7 +39,7 @@ I am a "double quoted" string inside "double quotes".
|
||||
assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2);
|
||||
```
|
||||
|
||||
變量 myStr 應該包含字符串 `I am a "double quoted" string inside "double quotes".`
|
||||
變量 `myStr` 應該包含字符串 `I am a "double quoted" string inside "double quotes".`
|
||||
|
||||
```js
|
||||
assert(/I am a "double quoted" string inside "double quotes(\."|"\.)$/.test(myStr));
|
||||
|
||||
@@ -13,7 +13,7 @@ dashedName: generate-random-fractions-with-javascript
|
||||
|
||||
在 JavaScript 中，可以用 `Math.random()` 生成一個在`0`（包括 0）到 `1`（不包括 1）之間的隨機小數。 因此 `Math.random()` 可能返回 `0`，但絕不會返回 `1`。
|
||||
|
||||
**提示：**[使用賦值運算符存儲值](/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator)這一節講過，所有函數調用將在 `return` 執行之前結束，因此我們可以 `return`（返回）`Math.random()` 函數的值。
|
||||
**提示：**<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank" rel="noopener noreferrer nofollow">使用賦值運算符存儲值</a>這一節講過，所有函數調用將在 `return` 執行之前結束，因此我們可以 `return`（返回）`Math.random()` 函數的值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ dashedName: global-scope-and-functions
|
||||
|
||||
使用 `let` 或 `const`，在任何函數之外聲明一個名爲 `myGlobal` 的全局變量。 並給它一個初始值 `10`。
|
||||
|
||||
在函數 `fun1` 中，***不要*** 使用 `let` 或 `const` 關鍵字，將 `5` 分配給 `oopsGlobal` 。
|
||||
在函數 `fun1`中，賦值 `5` 給 `oopsGlobal`，***不使用*** `var`、`let` 或 `const` 關鍵字。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: golf-code
|
||||
|
||||
# --description--
|
||||
|
||||
在[高爾夫](https://en.wikipedia.org/wiki/Golf)遊戲中，每個洞都有自己的標準桿數 `par`，代表着把球打進洞所揮杆的平均次數 `strokes`。 根據你把球打進洞所揮杆的次數 `strokes` 高於或低於 `par` 多少，有一個不同的暱稱（代表打高爾夫球的水平）。
|
||||
在高爾夫遊戲中，每個洞都有自己的標準桿數`par`，意思是一個高爾夫球員爲了把球打進洞裏完成比賽，預計要揮杆的平均次數 `strokes`。 根據你把球打進洞所揮杆的次數 `strokes` 高於或低於 `par` 多少，有一個不同的暱稱（代表打高爾夫球的水平）。
|
||||
|
||||
函數將會傳送兩個參數，`par` 和 `strokes`。 根據下表返回正確的字符串。下表列出不同揮杆次數（從高到低）對應的字符串。
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ do {
|
||||
} while (i < 5);
|
||||
```
|
||||
|
||||
上面的示例行爲類似於其他類型的循環，由此產生的數組將看起來像 `[0, 1, 2, 3, 4]`。 然而，`do...while` 不同於其他循環的地方，是第一次循環檢查失敗時的行爲。 讓我們看看代碼中的區別：這裏是一個常規的 `while` 循環，只要 `i < 5`，就會在循環中運行代碼：
|
||||
上面的示例行爲類似於其他類型的循環，由此產生的數組將看起來像 `[0, 1, 2, 3, 4]`。 然而，`do...while` 不同於其他循環的地方，是第一次循環檢查失敗時的行爲。 讓我們看看代碼示例。 這裏是一個常規的 `while` 循環，只要 `i < 5`，就會在循環中運行代碼：
|
||||
|
||||
```js
|
||||
const ourArray = [];
|
||||
|
||||
@@ -29,7 +29,7 @@ myFun();
|
||||
修改函數 `abTest` 當 `a` 或 `b` 小於 `0` 時，函數立即返回一個 `undefined` 並退出。
|
||||
|
||||
**提示**
|
||||
記住 [`undefined` 是一個關鍵字](https://chinese.freecodecamp.org/news/how-to-install-arch-linux/#how-to-install-arch-linux)，而不是一個字符串。
|
||||
記住 <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables" target="_blank" rel="noopener noreferrer nofollow"><code>undefined</code> 是關鍵字 </a>，不是字符串.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: returning-boolean-values-from-functions
|
||||
|
||||
# --description--
|
||||
|
||||
你應該還記得[相等運算符](/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator)這道挑戰題。 在那裏我們提到，所有比較操作符都會返回 boolean：要麼是 `true` 要麼是 `false`。
|
||||
你應該還記得 <a href="javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator" target="_blank" rel="noopener noreferrer nofollow">相等運算符</a> 這道挑戰題。在那裏我們提到，所有比較操作符都會返回布爾值：要麼是`true`，要麼是`false`。
|
||||
|
||||
有時人們通過 `if/else` 語句來做比較，像這樣。
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: use-recursion-to-create-a-countdown
|
||||
|
||||
# --description--
|
||||
|
||||
在上一個[挑戰](/learn/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion)，學習了怎樣用遞歸來代替 `for` 循環。 現在來學習一個更復雜的函數，函數返回一個從 `1` 到傳遞給函數的指定數字的連續數字數組。
|
||||
在上一個<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion" target="_blank" rel="noopener noreferrer nofollow">挑戰</a>中，你學習了怎樣用遞歸來代替 `for` 循環。 現在來學習一個更復雜的函數，函數返回一個從 `1` 到傳遞給函數的指定數字的連續數字數組。
|
||||
|
||||
正如上一個挑戰提到的，會有一個 <dfn>base case</dfn>。 base case 告訴遞歸函數什麼時候不再需要調用其自身。 這是簡單 情況，返回得到的值。 還有 <dfn>recursive call</dfn>，繼續用不同的參數調用自身。 如果函數無誤，一直執行直到 base case 爲止。
|
||||
|
||||
|
||||
@@ -25,14 +25,14 @@ const alpha = {
|
||||
26:"A"
|
||||
};
|
||||
|
||||
alpha[2];
|
||||
alpha[24];
|
||||
const thirdLetter = alpha[2];
|
||||
const lastLetter = alpha[24];
|
||||
|
||||
const value = 2;
|
||||
alpha[value];
|
||||
const valueLookup = alpha[value];
|
||||
```
|
||||
|
||||
`alpha[2]` 是字符串 `Y`，`alpha[24]` 是字符串 `C`，`alpha[value]` 是字符串 `Y`。
|
||||
`thirdLetter` 是字符串 `Y`，`lastLetter` 是字符串 `C`，`valueLookup` 是字符串 `Y`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,11 +9,9 @@ dashedName: word-blanks
|
||||
|
||||
# --description--
|
||||
|
||||
現在，我們來用字符串的相關知識實現一個 "[Mad Libs](https://en.wikipedia.org/wiki/Mad_Libs)" 類的文字遊戲，稱爲 "Word Blanks"。 你將創建一個（可選幽默的）“填空”樣式句子。
|
||||
給你一些不完整的句子，這些句子會缺少一些例如名詞、動詞、形容詞或者副詞之類的字詞。 然後你需要使用你選擇的詞語去填補這些缺失的地方，使得這個句子變得完整且有意義。
|
||||
|
||||
在 "Mad Libs" 遊戲中，提供一個缺少一些單詞的句子，缺少的單詞包括名詞、動詞、形容詞和副詞等。 然後，你選擇一些單詞填寫句子缺失的地方，使句子完整並且有意義。
|
||||
|
||||
思考一下這句話 - It was really **\_\_\_\_**, and we **\_\_\_\_** ourselves **\_\_\_\_**。 這句話有三個缺失的部分 - 形容詞、動詞和副詞，選擇合適單詞填入完成它。 然後將完成的句子賦值給變量，如下所示：
|
||||
思考一下這個句子：它真的非常**\_\_\_\_**，我們**\_\_\_\_**我們自己**\_\_\_\_**。 這個句子有三處缺失：一個形容詞、一個動詞和一個副詞。我們可以將選擇的詞語加進去完成它。 然後我們可以將完成的句子賦給一個變量，如下所示：
|
||||
|
||||
```js
|
||||
const sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselves " + "silly" + ".";
|
||||
@@ -21,21 +19,21 @@ const sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselve
|
||||
|
||||
# --instructions--
|
||||
|
||||
在這個挑戰中，我們爲你提供名詞、動詞、形容詞和副詞。 你需要使用合適單詞以及我們提供的單詞來形成完整的句子。
|
||||
在這個挑戰中，我們會提供給你一個名詞、一個動詞、一個形容詞和一個副詞。 你需要在我們提供的詞語中，選擇你要使用的詞語來使這個句子變得完整。
|
||||
|
||||
你需要使用字符串連接運算符 `+` 來拼接字符串變量：`myNoun`、`myAdjective`、`myVerb` 和 `myAdverb` 來構建一個新字符串。 然後，將新字符串賦給 `wordBlanks` 變量。 您不應該更改分配給變量的單詞。
|
||||
你需要使用字符串連接操作符 `+` 和提供的變量 `myNoun`、`myAdjective`、`myVerb` 和 `myAdverb` 來構建一個新的字符串。 然後，將這個改好的新字符串賦值給 `wordBlanks` 變量。 不要去更改已經賦值給這些變量的單詞。
|
||||
|
||||
你還需要考慮字符串中的空格，確保句子的所有單詞之間有空格。 結果應該是一個完整的句子。
|
||||
你還需要確認字符串裏的空格，以確保最後的句子裏的每個單詞之間都有空格。 最後的結果應該是一個完整的句子。
|
||||
|
||||
# --hints--
|
||||
|
||||
`wordBlanks` 應該返回一個字符串。
|
||||
`wordBlanks` 應該是一個字符串.
|
||||
|
||||
```js
|
||||
assert(typeof wordBlanks === 'string');
|
||||
```
|
||||
|
||||
不能改變 `myNoun`、`myVerb`、`myAdjective` 或者 `myAdverb` 的值。
|
||||
不要改變賦值給 `myNoun`, `myVerb`、`myAdjective` 或者`myAdverb` 這些變量的值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -46,7 +44,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
您不應該直接使用 `dog`、`ran`、`big` 或 `quickly` 來創建 `wordBlanks`。
|
||||
不要直接使用 `dog`、`ran`、`big` 或者 `quickly` 的值去創建 `wordBlanks`。
|
||||
|
||||
```js
|
||||
const newCode = removeAssignments(code);
|
||||
@@ -58,7 +56,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`wordBlanks` 應包含賦值給變量 `myNoun`、`myVerb`、`myAdjective` 和 `myAdverb` 的所有單詞，並用非單詞字符（以及 madlib 中的其它單詞）分隔。
|
||||
`wordBlanks` 應該包含分配給變量 `myNoun`、`myVerb`、`myAdjective` 和 `myAdverb` 的所有單詞，用非單詞字符（和你選擇的任何其他單詞）分隔。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: compare-scopes-of-the-var-and-let-keywords
|
||||
|
||||
# --description--
|
||||
|
||||
如果你不熟悉 `let`，請查看 [這個挑戰](/learn/javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords)。
|
||||
如果你不熟悉 `let`的話, 請查看 <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords" target="_blank" rel="noopener noreferrer nofollow">這個介紹 <code>let</code>和 <code>var</code> 關鍵字之間的差異的挑戰</a>
|
||||
|
||||
使用 `var` 關鍵字聲明變量時，它是全局聲明的，如果在函數內部聲明則是局部聲明的。
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ FCC 團隊需求有變更，現在想要兩種茶：綠茶（green tea）和紅
|
||||
|
||||
函數就像其他正常值一樣，可以賦值給變量、傳遞給另一個函數，或從其它函數返回，這種函數叫做頭等 <dfn>first class</dfn> 函數。 在 JavaScript 中，所有函數都是頭等函數。
|
||||
|
||||
將函數爲參數或返回值的函數叫做高階 ( <dfn>higher order</dfn>) 函數。
|
||||
將函數作爲參數或將函數作爲返回值返回的函數叫作<dfn>高階</dfn>函數。
|
||||
|
||||
當函數被傳遞給另一個函數或從另一個函數返回時，那些傳入或返回的函數可以叫做 <dfn>lambda</dfn>。
|
||||
|
||||
|
||||
@@ -1,22 +1,20 @@
|
||||
---
|
||||
id: afd15382cdfb22c9efe8b7de
|
||||
title: DNA 配對
|
||||
challengeType: 5
|
||||
challengeType: 1
|
||||
forumTopicId: 16009
|
||||
dashedName: dna-pairing
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
給出的 DNA 鏈上缺少配對元素。 請基於每個字符，獲取與其配對的元素，並將結果作爲二維數組返回。
|
||||
脫氧核糖核酸組由核酸對組成。 基本配對的字符是 <em>AT</em> and <em>CG</em>，這些字符形成了 DNA 雙螺旋的構件。
|
||||
|
||||
DNA 的[鹼基對](http://en.wikipedia.org/wiki/Base_pair) 有兩種形式：一種是 A 與 T，一種是 C 與 G。 請爲參數中給出的每個字符配對相應的鹼基。
|
||||
|
||||
注意，參數中給出的字符應作爲每個子數組中的第一個元素返回。
|
||||
DNA 鏈缺少配對元素。 寫一個函數來匹配缺失的 DNA 字符串。 對於提供的字符串中的每個字符，找出基本的配對字符。 返回二維數組的結果。
|
||||
|
||||
例如，傳入 `GCG` 時，應返回 `[["G", "C"], ["C","G"], ["G", "C"]]`。
|
||||
|
||||
字符和它的配對組成一個數組中，所有配對數組放在一個數組裏。
|
||||
字符和它的配對組成一個數組，所有配對數組放在一個數組裏。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -1,20 +1,27 @@
|
||||
---
|
||||
id: af4afb223120f7348cdfc9fd
|
||||
title: 計算軌道週期
|
||||
challengeType: 5
|
||||
challengeType: 1
|
||||
forumTopicId: 16021
|
||||
dashedName: map-the-debris
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在這道題目中，我們需要寫一個計算天體軌道週期（單位是秒）的函數。
|
||||
根據開普勒第三定律，在環狀或橢圓軌道上在軌兩個點質量的 $T$ 軌道期爲：
|
||||
|
||||
它接收一個對象數組參數 arr，對象中包含表示天體名稱的 name 屬性，及表示天體表面平均海拔的 avgAlt 屬性。 就像這樣：`{name: 'name', avgAlt: avgAlt}`。
|
||||
$$ T = 2 \pi \sqrt{\frac{a^{3}}{\mu}} $$
|
||||
|
||||
你可以在這條[維基百科](http://en.wikipedia.org/wiki/Orbital_period)的鏈接中找到軌道週期的計算公式：
|
||||
- $a$ 是軌道的半主軸
|
||||
- $μ = GM$ 是標準重力參數
|
||||
- $G$ 是引力常量
|
||||
- $M$ 是較大天體的質量
|
||||
|
||||
最終的計算結果應取整到最接近的整數。 在這裏計算地球的軌道週期。
|
||||
返回一個新數組，將元素的平均高度轉換爲軌道週期（以秒爲單位）。
|
||||
|
||||
數組將包含 `{name: 'name', avgAlt: avgAlt}` 格式的對象 。
|
||||
|
||||
最終的計算結果應取整到最接近的整數。 正在軌道上的物體是地球。
|
||||
|
||||
地球半徑爲 6367.4447 公里，地球的 GM 值爲 398600.4418 km <sup>3</sup> s <sup>-2</sup> 。
|
||||
|
||||
|
||||
@@ -10,7 +10,23 @@ dashedName: roman-numeral-converter
|
||||
|
||||
把傳入的數字轉爲羅馬數字。
|
||||
|
||||
轉換後的[羅馬數字](http://www.mathsisfun.com/roman-numerals.html)字母必須都是大寫。
|
||||
| 羅馬數字 | 阿拉伯數字 |
|
||||
| ---- | ----- |
|
||||
| M | 1000 |
|
||||
| CM | 900 |
|
||||
| D | 500 |
|
||||
| CD | 400 |
|
||||
| C | 100 |
|
||||
| XC | 90 |
|
||||
| L | 50 |
|
||||
| XL | 40 |
|
||||
| X | 10 |
|
||||
| IX | 9 |
|
||||
| V | 5 |
|
||||
| IV | 4 |
|
||||
| I | 1 |
|
||||
|
||||
所有羅馬數字答案都應該大寫。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: telephone-number-validator
|
||||
|
||||
只要是有效的美國電話號碼的格式，用戶可以按照他們的方式填寫表單中的電話號碼。 以下是一些正確的例子（其他格式變形請參考以下例子）：
|
||||
|
||||
<blockquote>555-555-5555 <br> (555)555-5555 <br> （555）555-5555 <br> 555 555 5555 <br> 5555555555 <br> 1 555 555 5555</blockquote>
|
||||
<blockquote>555-555-5555<br>(555)555-5555<br>(555) 555-5555<br>555 555 5555<br>5555555555<br>1 555 555 5555</blockquote>
|
||||
|
||||
在這個挑戰中，參數可能是 `800-692-7753` 或者 `8oo-six427676;laskdjf` 的號碼。 你的任務是根據上面不同的格式組合，判斷它是否爲有效的電話號碼。 其中，地區碼（電話號碼中的前三位）是必須的。 如果提供國家代碼，則國家代碼只能爲 `1`。 如果傳入的參數是有效的美國電話號碼就返回 `true`，否則返回 `false`。
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ testStr.match(ourRegex);
|
||||
|
||||
在這裏 `match` 將返回 `["Repeat"]`。
|
||||
|
||||
若要多次搜尋或提取模式匹配，可以使用 `g` 標誌。
|
||||
要多次搜索或提取模型，你可以使用全局搜索標誌： `g`。
|
||||
|
||||
```js
|
||||
let repeatRegex = /Repeat/g;
|
||||
|
||||
@@ -14,40 +14,40 @@ dashedName: convert-celsius-to-fahrenheit
|
||||
|
||||
# --hints--
|
||||
|
||||
`convertToF(0)` 应返回一个数字。
|
||||
`convertCtoF(0)` 应该返回一个数字
|
||||
|
||||
```js
|
||||
assert(typeof convertToF(0) === 'number');
|
||||
assert(typeof convertCtoF(0) === 'number');
|
||||
```
|
||||
|
||||
`convertToF(-30)` 应返回 `-22`。
|
||||
`convertCtoF(-30)` 应该返回 `-22` 的值
|
||||
|
||||
```js
|
||||
assert(convertToF(-30) === -22);
|
||||
assert(convertCtoF(-30) === -22);
|
||||
```
|
||||
|
||||
`convertToF(-10)` 应返回 `14`。
|
||||
`convertCtoF(-10)` 应该返回 `14` 的值
|
||||
|
||||
```js
|
||||
assert(convertToF(-10) === 14);
|
||||
assert(convertCtoF(-10) === 14);
|
||||
```
|
||||
|
||||
`convertToF(0)` 应返回 `32`。
|
||||
`convertCtoF(0)` 应该返回 `32` 的值
|
||||
|
||||
```js
|
||||
assert(convertToF(0) === 32);
|
||||
assert(convertCtoF(0) === 32);
|
||||
```
|
||||
|
||||
`convertToF(20)` 应返回 `68`。
|
||||
`convertCtoF(20)` 应该返回 `68` 的值
|
||||
|
||||
```js
|
||||
assert(convertToF(20) === 68);
|
||||
assert(convertCtoF(20) === 68);
|
||||
```
|
||||
|
||||
`convertToF(30)` 应返回 `86`。
|
||||
`convertCtoF(30)` 应该返回 `86` 的值
|
||||
|
||||
```js
|
||||
assert(convertToF(30) === 86);
|
||||
assert(convertCtoF(30) === 86);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@@ -55,22 +55,21 @@ assert(convertToF(30) === 86);
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function convertToF(celsius) {
|
||||
function convertCtoF(celsius) {
|
||||
let fahrenheit;
|
||||
return fahrenheit;
|
||||
}
|
||||
|
||||
convertToF(30);
|
||||
convertCtoF(30);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function convertToF(celsius) {
|
||||
function convertCtoF(celsius) {
|
||||
let fahrenheit = celsius * 9/5 + 32;
|
||||
|
||||
return fahrenheit;
|
||||
}
|
||||
|
||||
convertToF(30);
|
||||
convertCtoF(30);
|
||||
```
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: generate-an-array-of-all-object-keys-with-object-keys
|
||||
|
||||
# --description--
|
||||
|
||||
我们可以给 `Object.keys()` 方法传入一个对象作为参数，来生成包含对象所有键的数组。 这会返回一个由对象中所有属性（字符串）组成的数组。 需要注意的是，数组中元素的顺序是不确定的。
|
||||
我们可以给 `Object.keys()` 方法传入一个对象作为参数，来生成包含对象所有键的数组。 这个方法将对象作为参数并返回代表对象中每个属性的字符串数组。 需要注意的是，数组中元素的顺序是不确定的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ for (let user in users) {
|
||||
}
|
||||
```
|
||||
|
||||
这将在控制台打印 `Alan`、`Jeff`、`Sarah` 和 `Ryan` - 每个值占一行。
|
||||
这将记录 `Alan`、`Jeff` 和 `Sarah` - 每个值都在自己的行中。
|
||||
|
||||
在上面的代码中，我们定义了一个 `user` 变量。 可以观察到，这个变量在遍历对象的语句执行过程中会一直被重置并赋予新值，结果就是不同的用户名打印到了 console 中。
|
||||
|
||||
|
||||
@@ -21,12 +21,12 @@ const arr = [
|
||||
[[10, 11, 12], 13, 14]
|
||||
];
|
||||
|
||||
arr[3];
|
||||
arr[3][0];
|
||||
arr[3][0][1];
|
||||
const subarray = arr[3];
|
||||
const nestedSubarray = arr[3][0];
|
||||
const element = arr[3][0][1];
|
||||
```
|
||||
|
||||
`arr[3]` 为 `[[10, 11, 12], 13, 14]`，`arr[3][0]` 为 `[10, 11, 12]`，并且 `arr[3][0][1]` 为 `11`。
|
||||
在这个例子中，`subarray` 的值为 `[[10, 11, 12], 13, 14]`， `nestedSubarray` 的值为 `[10, 11, 12]`，`element` 的值为 `11` 。
|
||||
|
||||
**注意：** 数组名与方括号之间不应该有任何空格，比如 `array [0][0]` 甚至是 `array [0] [0]` 都是不允许的。 尽管 JavaScript 能够正确处理这种情况，但是当其他程序员阅读你写的代码时，这可能让他们感到困惑。
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: assignment-with-a-returned-value
|
||||
|
||||
# --description--
|
||||
|
||||
如果你还记得我们在[使用赋值运算符存储值](/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator)中的讨论的话，等号右侧的所有操作都会在赋值之前完成。 这意味着我们可以获取函数的返回值，并将其赋值给一个变量。
|
||||
如果你还记得我们在这一节<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank" rel="noopener noreferrer nofollow">使用赋值运算符存储值</a>中的讨论，赋值之前，先完成等号右边的操作。 这意味着我们可以获取函数的返回值，并将其赋值给一个变量。
|
||||
|
||||
假设我们有一个预先定义的函数 `sum` ，它将两个数相加，然后：
|
||||
|
||||
|
||||
@@ -32,13 +32,19 @@ const ourStr = "I come first. " + "I come second.";
|
||||
|
||||
# --hints--
|
||||
|
||||
`myStr` 的值应该是 `This is the start. This is the end.`
|
||||
`myStr` 应该在两个字符串之间有一个空格字符。
|
||||
|
||||
```js
|
||||
assert(/start\. This/.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` 的值应该是字符串 `This is the start. This is the end.`
|
||||
|
||||
```js
|
||||
assert(myStr === 'This is the start. This is the end.');
|
||||
```
|
||||
|
||||
应使用 `+` 操作符创建 `myStr`。
|
||||
应该使用 `+` 运算符来构建 `myStr`。
|
||||
|
||||
```js
|
||||
assert(code.match(/(["']).*\1\s*\+\s*(["']).*\2/g));
|
||||
@@ -50,7 +56,7 @@ assert(code.match(/(["']).*\1\s*\+\s*(["']).*\2/g));
|
||||
assert(/const\s+myStr/.test(code));
|
||||
```
|
||||
|
||||
应把结果赋值给 `myStr` 变量。
|
||||
应该将结果分配给 `myStr` 变量。
|
||||
|
||||
```js
|
||||
assert(/myStr\s*=/.test(code));
|
||||
|
||||
@@ -28,6 +28,12 @@ ourStr += "I come second.";
|
||||
|
||||
# --hints--
|
||||
|
||||
`myStr` 应该在两个字符串之间有一个空格字符。
|
||||
|
||||
```js
|
||||
assert(/sentence\. This/.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` 的值应该是字符串 `This is the first sentence. This is the second sentence.`
|
||||
|
||||
```js
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: constructing-strings-with-variables
|
||||
|
||||
# --description--
|
||||
|
||||
有时候你需要创建一个类似 [Mad Libs](https://en.wikipedia.org/wiki/Mad_Libs)（填词游戏）风格的字符串。 通过使用连接运算符（`+`），你可以插入一个或多个变量来组成一个字符串。
|
||||
有时候你需要构建一个字符串。 通过使用连接运算符（`+`），你可以插入一个或多个变量来组成一个字符串。
|
||||
|
||||
例如：
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: counting-cards
|
||||
|
||||
# --description--
|
||||
|
||||
在赌场 21 点游戏中，玩家可以通过计算牌桌上已经发放的卡牌的高低值来让自己在游戏中保持优势。 这就叫 [21 点算法](https://en.wikipedia.org/wiki/Card_counting)。
|
||||
在 21 点游戏中，玩家可以通过计算牌桌上已经发放的卡牌的高低值来让自己在游戏中保持优势。 这被称为卡片计数。
|
||||
|
||||
牌桌上的大值的卡牌更多，对玩家有利。 根据下面的表格，每张卡牌都被分配了一个值。 如果卡牌的值大于 0，那么玩家应该追加赌注。 如果卡牌的值为 0 或负数，玩家应该追加少许赌注甚至不追加赌注。
|
||||
|
||||
@@ -25,6 +25,19 @@ dashedName: counting-cards
|
||||
|
||||
# --hints--
|
||||
|
||||
你的函数应返回计数值和文本（`Bet` 或 `Hold`），它们之间有一个空格字符。
|
||||
|
||||
```js
|
||||
assert(//
|
||||
(function () {
|
||||
count = 0;
|
||||
let out = cc(10);
|
||||
const hasSpace = /-?\d+ (Bet|Hold)/.test('' + out);
|
||||
return hasSpace;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
卡片序列 2、3、4、5、6 应返回字符串 `5 Bet`
|
||||
|
||||
```js
|
||||
@@ -44,7 +57,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
卡牌序列 7、8、9 应该返回 `0 Hold`
|
||||
卡片序列 7、8、9 应返回字符串 `0 Hold`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -61,7 +74,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
卡牌序列 10、J、Q、K、A 应该返回 `-5 Hold`
|
||||
卡片序列 10、J、Q、K、A 应返回字符串 `-5 Hold`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -80,7 +93,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
卡牌序列 3、7、Q、8、A 应该返回 `-1 Hold`
|
||||
卡片序列 3、7、Q、8、A 应返回字符串 `-1 Hold`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -99,7 +112,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
卡牌序列 2、J、9、2、7 应该返回 `1 Bet`
|
||||
卡片序列 2、J、9、2、7 应返回字符串 `1 Bet`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -118,7 +131,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
卡牌序列 2、2、10 应该返回 `1 Bet`
|
||||
卡片序列 2、2、10 应返回字符串 `1 Bet`
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -135,7 +148,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
卡牌序列 3、2、A、10、K 应该返回 `-1 Hold`
|
||||
卡片序列 3、2、A、10、K 应返回字符串 `-1 Hold`
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: create-decimal-numbers-with-javascript
|
||||
|
||||
我们也可以把小数存储到变量中。 小数有时候也被称作<dfn>浮点数</dfn>或者 <dfn>floats</dfn>。
|
||||
|
||||
**提示：** 不是所有的实数都可以用浮点数（<dfn>floating point</dfn>）来表示。 因为可能产生四舍五入的错误， [点击这里了解细节](https://en.wikipedia.org/wiki/Floating-point_arithmetic#Accuracy_problems)。
|
||||
**注意：** 当你计算数字时，它们是以有限的精确度计算的。 使用浮点数的运算可能产生不同于预期结果的结果。 如果你生成了一个非预期的结果，请在 <a href="https://forum.freecodecamp.org/" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp 论坛</a>上创建一个话题进行说明。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ FAV_PET = "Dogs";
|
||||
|
||||
# --instructions--
|
||||
|
||||
更改代码，以便使用 `let` 或 `const` 声明所有变量。 当你想要改变变量时使用 `let`，当你想要变量保持不变时使用 `const`。 此外，重命名使用 `const` 声明的变量以符合惯例。
|
||||
更改代码，以便使用 `let` 或 `const` 声明所有变量。 当你想要改变变量时使用 `let`，当你想要变量保持不变时使用 `const`。 此外，重命名使用 `const` 声明的变量以符合惯例。 请勿更改分配给变量的字符串。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -45,10 +45,15 @@ assert.notMatch(code, /(fCC)/);
|
||||
`FCC` 应该是一个用 `const` 声明的常量。
|
||||
|
||||
```js
|
||||
assert.equal(FCC, 'freeCodeCamp');
|
||||
assert.match(code, /const\s+FCC/);
|
||||
```
|
||||
|
||||
分配给 `FCC` 的字符串不应更改。
|
||||
|
||||
```js
|
||||
assert.equal(FCC, 'freeCodeCamp');
|
||||
```
|
||||
|
||||
`fact` 应该用 `let` 声明。
|
||||
|
||||
```js
|
||||
|
||||
@@ -39,7 +39,7 @@ I am a "double quoted" string inside "double quotes".
|
||||
assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2);
|
||||
```
|
||||
|
||||
变量 myStr 应该包含字符串 `I am a "double quoted" string inside "double quotes".`
|
||||
变量 `myStr` 应该包含字符串 `I am a "double quoted" string inside "double quotes".`
|
||||
|
||||
```js
|
||||
assert(/I am a "double quoted" string inside "double quotes(\."|"\.)$/.test(myStr));
|
||||
|
||||
@@ -13,7 +13,7 @@ dashedName: generate-random-fractions-with-javascript
|
||||
|
||||
在 JavaScript 中，可以用 `Math.random()` 生成一个在`0`（包括 0）到 `1`（不包括 1）之间的随机小数。 因此 `Math.random()` 可能返回 `0`，但绝不会返回 `1`。
|
||||
|
||||
**提示：**[使用赋值运算符存储值](/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator)这一节讲过，所有函数调用将在 `return` 执行之前结束，因此我们可以 `return`（返回）`Math.random()` 函数的值。
|
||||
**提示：**<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank" rel="noopener noreferrer nofollow">使用赋值运算符存储值</a>这一节讲过，所有函数调用将在 `return` 执行之前结束，因此我们可以 `return`（返回）`Math.random()` 函数的值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ dashedName: global-scope-and-functions
|
||||
|
||||
使用 `let` 或 `const`，在任何函数之外声明一个名为 `myGlobal` 的全局变量。 并给它一个初始值 `10`。
|
||||
|
||||
在函数 `fun1` 中，***不要*** 使用 `let` 或 `const` 关键字，将 `5` 分配给 `oopsGlobal` 。
|
||||
在函数 `fun1`中，赋值 `5` 给 `oopsGlobal`，***不使用*** `var`、`let` 或 `const` 关键字。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: golf-code
|
||||
|
||||
# --description--
|
||||
|
||||
在[高尔夫](https://en.wikipedia.org/wiki/Golf)游戏中，每个洞都有自己的标准杆数 `par`，代表着把球打进洞所挥杆的平均次数 `strokes`。 根据你把球打进洞所挥杆的次数 `strokes` 高于或低于 `par` 多少，有一个不同的昵称（代表打高尔夫球的水平）。
|
||||
在高尔夫游戏中，每个洞都有自己的标准杆数`par`，意思是一个高尔夫球员为了把球打进洞里完成比赛，预计要挥杆的平均次数 `strokes`。 根据你把球打进洞所挥杆的次数 `strokes` 高于或低于 `par` 多少，有一个不同的昵称（代表打高尔夫球的水平）。
|
||||
|
||||
函数将会传送两个参数，`par` 和 `strokes`。 根据下表返回正确的字符串。下表列出不同挥杆次数（从高到低）对应的字符串。
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ do {
|
||||
} while (i < 5);
|
||||
```
|
||||
|
||||
上面的示例行为类似于其他类型的循环，由此产生的数组将看起来像 `[0, 1, 2, 3, 4]`。 然而，`do...while` 不同于其他循环的地方，是第一次循环检查失败时的行为。 让我们看看代码中的区别：这里是一个常规的 `while` 循环，只要 `i < 5`，就会在循环中运行代码：
|
||||
上面的示例行为类似于其他类型的循环，由此产生的数组将看起来像 `[0, 1, 2, 3, 4]`。 然而，`do...while` 不同于其他循环的地方，是第一次循环检查失败时的行为。 让我们看看代码示例。 这里是一个常规的 `while` 循环，只要 `i < 5`，就会在循环中运行代码：
|
||||
|
||||
```js
|
||||
const ourArray = [];
|
||||
|
||||
@@ -29,7 +29,7 @@ myFun();
|
||||
修改函数 `abTest` 当 `a` 或 `b` 小于 `0` 时，函数立即返回一个 `undefined` 并退出。
|
||||
|
||||
**提示**
|
||||
记住 [`undefined` 是一个关键字](https://chinese.freecodecamp.org/news/how-to-install-arch-linux/#how-to-install-arch-linux)，而不是一个字符串。
|
||||
记住 <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables" target="_blank" rel="noopener noreferrer nofollow"><code>undefined</code> 是关键字 </a>，不是字符串.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: returning-boolean-values-from-functions
|
||||
|
||||
# --description--
|
||||
|
||||
你应该还记得[相等运算符](/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator)这道挑战题。 在那里我们提到，所有比较操作符都会返回 boolean：要么是 `true` 要么是 `false`。
|
||||
你应该还记得 <a href="javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator" target="_blank" rel="noopener noreferrer nofollow">相等运算符</a> 这道挑战题。在那里我们提到，所有比较操作符都会返回布尔值：要么是`true`，要么是`false`。
|
||||
|
||||
有时人们通过 `if/else` 语句来做比较，像这样。
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: use-recursion-to-create-a-countdown
|
||||
|
||||
# --description--
|
||||
|
||||
在上一个[挑战](/learn/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion)，学习了怎样用递归来代替 `for` 循环。 现在来学习一个更复杂的函数，函数返回一个从 `1` 到传递给函数的指定数字的连续数字数组。
|
||||
在上一个<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion" target="_blank" rel="noopener noreferrer nofollow">挑战</a>中，你学习了怎样用递归来代替 `for` 循环。 现在来学习一个更复杂的函数，函数返回一个从 `1` 到传递给函数的指定数字的连续数字数组。
|
||||
|
||||
正如上一个挑战提到的，会有一个 <dfn>base case</dfn>。 base case 告诉递归函数什么时候不再需要调用其自身。 这是简单 情况，返回得到的值。 还有 <dfn>recursive call</dfn>，继续用不同的参数调用自身。 如果函数无误，一直执行直到 base case 为止。
|
||||
|
||||
|
||||
@@ -25,14 +25,14 @@ const alpha = {
|
||||
26:"A"
|
||||
};
|
||||
|
||||
alpha[2];
|
||||
alpha[24];
|
||||
const thirdLetter = alpha[2];
|
||||
const lastLetter = alpha[24];
|
||||
|
||||
const value = 2;
|
||||
alpha[value];
|
||||
const valueLookup = alpha[value];
|
||||
```
|
||||
|
||||
`alpha[2]` 是字符串 `Y`，`alpha[24]` 是字符串 `C`，`alpha[value]` 是字符串 `Y`。
|
||||
`thirdLetter` 是字符串 `Y`，`lastLetter` 是字符串 `C`，`valueLookup` 是字符串 `Y`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,11 +9,9 @@ dashedName: word-blanks
|
||||
|
||||
# --description--
|
||||
|
||||
现在，我们来用字符串的相关知识实现一个 "[Mad Libs](https://en.wikipedia.org/wiki/Mad_Libs)" 类的文字游戏，称为 "Word Blanks"。 你将创建一个（可选幽默的）“填空”样式句子。
|
||||
给你一些不完整的句子，这些句子会缺少一些例如名词、动词、形容词或者副词之类的字词。 然后你需要使用你选择的词语去填补这些缺失的地方，使得这个句子变得完整且有意义。
|
||||
|
||||
在 "Mad Libs" 游戏中，提供一个缺少一些单词的句子，缺少的单词包括名词、动词、形容词和副词等。 然后，你选择一些单词填写句子缺失的地方，使句子完整并且有意义。
|
||||
|
||||
思考一下这句话 - It was really **\_\_\_\_**, and we **\_\_\_\_** ourselves **\_\_\_\_**。 这句话有三个缺失的部分 - 形容词、动词和副词，选择合适单词填入完成它。 然后将完成的句子赋值给变量，如下所示：
|
||||
思考一下这个句子：它真的非常**\_\_\_\_**，我们**\_\_\_\_**我们自己**\_\_\_\_**。 这个句子有三处缺失：一个形容词、一个动词和一个副词。我们可以将选择的词语加进去完成它。 然后我们可以将完成的句子赋给一个变量，如下所示：
|
||||
|
||||
```js
|
||||
const sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselves " + "silly" + ".";
|
||||
@@ -21,21 +19,21 @@ const sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselve
|
||||
|
||||
# --instructions--
|
||||
|
||||
在这个挑战中，我们为你提供名词、动词、形容词和副词。 你需要使用合适单词以及我们提供的单词来形成完整的句子。
|
||||
在这个挑战中，我们会提供给你一个名词、一个动词、一个形容词和一个副词。 你需要在我们提供的词语中，选择你要使用的词语来使这个句子变得完整。
|
||||
|
||||
你需要使用字符串连接运算符 `+` 来拼接字符串变量：`myNoun`、`myAdjective`、`myVerb` 和 `myAdverb` 来构建一个新字符串。 然后，将新字符串赋给 `wordBlanks` 变量。 您不应该更改分配给变量的单词。
|
||||
你需要使用字符串连接操作符 `+` 和提供的变量 `myNoun`、`myAdjective`、`myVerb` 和 `myAdverb` 来构建一个新的字符串。 然后，将这个改好的新字符串赋值给 `wordBlanks` 变量。 不要去更改已经赋值给这些变量的单词。
|
||||
|
||||
你还需要考虑字符串中的空格，确保句子的所有单词之间有空格。 结果应该是一个完整的句子。
|
||||
你还需要确认字符串里的空格，以确保最后的句子里的每个单词之间都有空格。 最后的结果应该是一个完整的句子。
|
||||
|
||||
# --hints--
|
||||
|
||||
`wordBlanks` 应该返回一个字符串。
|
||||
`wordBlanks` 应该是一个字符串.
|
||||
|
||||
```js
|
||||
assert(typeof wordBlanks === 'string');
|
||||
```
|
||||
|
||||
不能改变 `myNoun`、`myVerb`、`myAdjective` 或者 `myAdverb` 的值。
|
||||
不要改变赋值给 `myNoun`, `myVerb`、`myAdjective` 或者`myAdverb` 这些变量的值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -46,7 +44,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
您不应该直接使用 `dog`、`ran`、`big` 或 `quickly` 来创建 `wordBlanks`。
|
||||
不要直接使用 `dog`、`ran`、`big` 或者 `quickly` 的值去创建 `wordBlanks`。
|
||||
|
||||
```js
|
||||
const newCode = removeAssignments(code);
|
||||
@@ -58,7 +56,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`wordBlanks` 应包含赋值给变量 `myNoun`、`myVerb`、`myAdjective` 和 `myAdverb` 的所有单词，并用非单词字符（以及 madlib 中的其它单词）分隔。
|
||||
`wordBlanks` 应该包含分配给变量 `myNoun`、`myVerb`、`myAdjective` 和 `myAdverb` 的所有单词，用非单词字符（和你选择的任何其他单词）分隔。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: compare-scopes-of-the-var-and-let-keywords
|
||||
|
||||
# --description--
|
||||
|
||||
如果你不熟悉 `let`，请查看 [这个挑战](/learn/javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords)。
|
||||
如果你不熟悉 `let`的话, 请查看 <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords" target="_blank" rel="noopener noreferrer nofollow">这个介绍 <code>let</code>和 <code>var</code> 关键字之间的差异的挑战</a>
|
||||
|
||||
使用 `var` 关键字声明变量时，它是全局声明的，如果在函数内部声明则是局部声明的。
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ FCC 团队需求有变更，现在想要两种茶：绿茶（green tea）和红
|
||||
|
||||
函数就像其他正常值一样，可以赋值给变量、传递给另一个函数，或从其它函数返回，这种函数叫做头等 <dfn>first class</dfn> 函数。 在 JavaScript 中，所有函数都是头等函数。
|
||||
|
||||
将函数为参数或返回值的函数叫做高阶 ( <dfn>higher order</dfn>) 函数。
|
||||
将函数作为参数或将函数作为返回值返回的函数叫作<dfn>高阶</dfn>函数。
|
||||
|
||||
当函数被传递给另一个函数或从另一个函数返回时，那些传入或返回的函数可以叫做 <dfn>lambda</dfn>。
|
||||
|
||||
|
||||
@@ -1,22 +1,20 @@
|
||||
---
|
||||
id: afd15382cdfb22c9efe8b7de
|
||||
title: DNA 配对
|
||||
challengeType: 5
|
||||
challengeType: 1
|
||||
forumTopicId: 16009
|
||||
dashedName: dna-pairing
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
给出的 DNA 链上缺少配对元素。 请基于每个字符，获取与其配对的元素，并将结果作为二维数组返回。
|
||||
脱氧核糖核酸组由核酸对组成。 基本配对的字符是 <em>AT</em> and <em>CG</em>，这些字符形成了 DNA 双螺旋的构件。
|
||||
|
||||
DNA 的[碱基对](http://en.wikipedia.org/wiki/Base_pair) 有两种形式：一种是 A 与 T，一种是 C 与 G。 请为参数中给出的每个字符配对相应的碱基。
|
||||
|
||||
注意，参数中给出的字符应作为每个子数组中的第一个元素返回。
|
||||
DNA 链缺少配对元素。 写一个函数来匹配缺失的 DNA 字符串。 对于提供的字符串中的每个字符，找出基本的配对字符。 返回二维数组的结果。
|
||||
|
||||
例如，传入 `GCG` 时，应返回 `[["G", "C"], ["C","G"], ["G", "C"]]`。
|
||||
|
||||
字符和它的配对组成一个数组中，所有配对数组放在一个数组里。
|
||||
字符和它的配对组成一个数组，所有配对数组放在一个数组里。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -1,20 +1,27 @@
|
||||
---
|
||||
id: af4afb223120f7348cdfc9fd
|
||||
title: 计算轨道周期
|
||||
challengeType: 5
|
||||
challengeType: 1
|
||||
forumTopicId: 16021
|
||||
dashedName: map-the-debris
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在这道题目中，我们需要写一个计算天体轨道周期（单位是秒）的函数。
|
||||
根据开普勒第三定律，在环状或椭圆轨道上在轨两个点质量的 $T$ 轨道期为：
|
||||
|
||||
它接收一个对象数组参数 arr，对象中包含表示天体名称的 name 属性，及表示天体表面平均海拔的 avgAlt 属性。 就像这样：`{name: 'name', avgAlt: avgAlt}`。
|
||||
$$ T = 2 \pi \sqrt{\frac{a^{3}}{\mu}} $$
|
||||
|
||||
你可以在这条[维基百科](http://en.wikipedia.org/wiki/Orbital_period)的链接中找到轨道周期的计算公式：
|
||||
- $a$ 是轨道的半主轴
|
||||
- $μ = GM$ 是标准重力参数
|
||||
- $G$ 是引力常量
|
||||
- $M$ 是较大天体的质量
|
||||
|
||||
最终的计算结果应取整到最接近的整数。 在这里计算地球的轨道周期。
|
||||
返回一个新数组，将元素的平均高度转换为轨道周期（以秒为单位）。
|
||||
|
||||
数组将包含 `{name: 'name', avgAlt: avgAlt}` 格式的对象 。
|
||||
|
||||
最终的计算结果应取整到最接近的整数。 正在轨道上的物体是地球。
|
||||
|
||||
地球半径为 6367.4447 公里，地球的 GM 值为 398600.4418 km <sup>3</sup> s <sup>-2</sup> 。
|
||||
|
||||
|
||||
@@ -10,7 +10,23 @@ dashedName: roman-numeral-converter
|
||||
|
||||
把传入的数字转为罗马数字。
|
||||
|
||||
转换后的[罗马数字](http://www.mathsisfun.com/roman-numerals.html)字母必须都是大写。
|
||||
| 罗马数字 | 阿拉伯数字 |
|
||||
| ---- | ----- |
|
||||
| M | 1000 |
|
||||
| CM | 900 |
|
||||
| D | 500 |
|
||||
| CD | 400 |
|
||||
| C | 100 |
|
||||
| XC | 90 |
|
||||
| L | 50 |
|
||||
| XL | 40 |
|
||||
| X | 10 |
|
||||
| IX | 9 |
|
||||
| V | 5 |
|
||||
| IV | 4 |
|
||||
| I | 1 |
|
||||
|
||||
所有罗马数字答案都应该大写。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: telephone-number-validator
|
||||
|
||||
只要是有效的美国电话号码的格式，用户可以按照他们的方式填写表单中的电话号码。 以下是一些正确的例子（其他格式变形请参考以下例子）：
|
||||
|
||||
<blockquote>555-555-5555 <br> (555)555-5555 <br> （555）555-5555 <br> 555 555 5555 <br> 5555555555 <br> 1 555 555 5555</blockquote>
|
||||
<blockquote>555-555-5555<br>(555)555-5555<br>(555) 555-5555<br>555 555 5555<br>5555555555<br>1 555 555 5555</blockquote>
|
||||
|
||||
在这个挑战中，参数可能是 `800-692-7753` 或者 `8oo-six427676;laskdjf` 的号码。 你的任务是根据上面不同的格式组合，判断它是否为有效的电话号码。 其中，地区码（电话号码中的前三位）是必须的。 如果提供国家代码，则国家代码只能为 `1`。 如果传入的参数是有效的美国电话号码就返回 `true`，否则返回 `false`。
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ testStr.match(ourRegex);
|
||||
|
||||
在这里 `match` 将返回 `["Repeat"]`。
|
||||
|
||||
若要多次搜寻或提取模式匹配，可以使用 `g` 标志。
|
||||
要多次搜索或提取模型，你可以使用全局搜索标志： `g`。
|
||||
|
||||
```js
|
||||
let repeatRegex = /Repeat/g;
|
||||
|
||||
@@ -19,7 +19,7 @@ Se suele pensar que **Hue** es el "color". Si imaginas un espectro de colores co
|
||||
|
||||
Aquí hay algunos ejemplos de `hsl()` con colores de iluminación normales y completamente saturados:
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Color</th><th>HSL</th></tr></thead><tbody><tr><td>rojo</td><td>hsl(0, 100 %, 50 %)</td></tr><tr><td>amarillo</td><td>hsl(60, 100 %, 50 %)</td></tr><tr><td>verde</td><td>hsl(120, 100 %, 50 %)</td></tr><tr><td>cian</td><td>hsl(180, 100 %, 50 %)</td></tr><tr><td>azul</td><td>hsl(240, 100 %, 50 %)</td></tr><tr><td>magenta</td><td>hsl(300, 100 %, 50 %)</td></tr></tbody></table>
|
||||
<table class='table table-striped'><thead><tr><th>Color</th><th>HSL</th></tr></thead><tbody><tr><td>rojo</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>amarillo</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>verde</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>cian</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>azul</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>magenta</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ Pero primero, cubramos alguna terminología de la programación funcional:
|
||||
|
||||
Las funciones que pueden ser asignadas a una variable, pasadas a otra función o devueltas desde otra función como cualquier otro valor normal, se llaman funciones de <dfn>primera clase</dfn>. En JavaScript, todas las funciones son funciones de primera clase.
|
||||
|
||||
Las funciones que toman una función como argumento o devuelven una función como valor de retorno se llaman <dfn>funciones de orden superior</dfn>.
|
||||
Las funciones que toman una función como argumento, o devuelven una función como valor de retorno, se denominan funciones <dfn>higher order</dfn>.
|
||||
|
||||
Cuando las funciones se pasan o se devuelven desde otra función, las funciones que se pasaron o devolvieron se pueden llamar <dfn>lambda</dfn>.
|
||||
|
||||
|
||||
@@ -97,6 +97,15 @@ assert.deepEqual(
|
||||
);
|
||||
```
|
||||
|
||||
`whatIsInAName([{"a": 1, "b": 2, "c": 3, "d": 9999}], {"a": 1, "b": 9999, "c": 3})` debe devolver `[]`
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
whatIsInAName([{ a: 1, b: 2, c: 3, d: 9999 }], { a: 1, b: 9999, c: 3 }),
|
||||
[]
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: build-a-javascript-calculator
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** Crear una aplicación que sea funcionalmente similar a <https://codepen.io/freeCodeCamp/full/wgGVVX>.
|
||||
**Objetivo:** Crea una aplicación que sea funcionalmente similar a esta: <a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/wgGVVX</a>.
|
||||
|
||||
Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo.
|
||||
|
||||
@@ -51,7 +51,7 @@ Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS
|
||||
- **Lógica de ejecución inmediata:** `11.5`
|
||||
- **Fórmula/Expresión lógica:** `32.5`
|
||||
|
||||
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Puedes construir tu proyecto utilizando <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio bolígrafo. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ dashedName: build-a-tribute-page
|
||||
1. Du solltest innerhalb des `#img-div`-Elements ein Element mit zugehöriger `id="img-caption"` sehen, der einen Text enthält, der das in `#img-div` angezeigte Bild beschreibt.
|
||||
1. Du solltest ein Element mit zugehöriger `id="tribute-info"` sehen, welches das Thema der Gedenkseite beschreibenden Textinhalt enthält
|
||||
1. Du solltest ein `a`-Element mit zugehöriger `id="tribute-link"` sehen, welches auf eine externe Seite verweist, die zusätzliche Informationen über das Thema der Gedenkseite enthält. TIPP: Du musst deinem Element ein Attribut von `target` zuweisen und es auf `_blank` setzen, damit der Link in einem neuen Tab geöffnet werden kann
|
||||
1. Dein `#image` sollte die `max-width` und `height` Eigenschaften verwenden, um die Größenänderung responsiv zu gestalten, daher relativ zur Breite des übergeordneten Elements, ohne dessen Originalgröße zu überschreiten
|
||||
1. Dein `#image` sollte die `max-width`- und `height`-Eigenschaften verwenden, um die Größenänderung responsiv zu gestalten, d. h. relativ zur Breite des Elternelements, ohne dessen Originalgröße zu überschreiten
|
||||
1. Dein `img`-Element sollte innerhalb des Elternelements zentriert werden
|
||||
|
||||
Erfülle die folgenden User Stories und bestehe alle Tests, um dieses Projekt abzuschließen. Gib dem Ganzen deinen persönlichen Stil. Viel Spaß beim Programmieren!
|
||||
|
||||
@@ -0,0 +1,518 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b03
|
||||
title: Erstelle ein Umfrageformular
|
||||
challengeType: 14
|
||||
forumTopicId: 301145
|
||||
dashedName: build-a-survey-form
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie <a href="https://survey-form.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://survey-form.freecodecamp.rocks</a> aufweist
|
||||
|
||||
**User Stories:**
|
||||
|
||||
1. Du solltest einen Seitentitel in einem `h1`-Element mit einer `id` von `title` haben
|
||||
1. Du solltest eine kurze Erklärung in einem `p`-Element mit einer `id` von `description` haben
|
||||
1. Du solltest ein `form`-Element mit einer `id` von `survey-form` haben
|
||||
1. Innerhalb des Formular-Elements **musst** du deinen Namen in ein `input`-Feld mit einer `id` von `name` und einem `type` von `text` eingeben
|
||||
1. Innerhalb des Formular-Elements **musst** du deine E-Mail in ein `input`-Feld mit einer `id` von `email` eingeben
|
||||
1. Wenn du eine falsch formatierte E-Mail angibst, wird dir ein HTML5-Validierungsfehler ausgegeben
|
||||
1. Innerhalb des Formulars kannst du eine Zahl in das `input`-Feld, das die `id` von `number` hat, eingeben
|
||||
1. Wenn du eine nicht-numerische Eingabe in das Nummern-Feld eingibst, wird dir ein HTML5-Validierungsfehler ausgegeben
|
||||
1. Wenn du eine Nummer eingibst, die außerhalb des Bereichs der Zahleneingabe liegt, wird dir ein HTML5-Validierungsfehler ausgegeben. Der genannte Bereich wird durch die `min`- und `max`-Attribute festgelegt
|
||||
1. Für die Namen-, E-Mail- und Nummern-Eingabefelder findest du zugehörige `label`-Elemente im Formular, welches den Nutzen jedes Felds der folgenden IDs beschreibt: `id="name-label"`, `id="email-label"`, und `id="number-label"`
|
||||
1. Für die Namen-, E-Mail- und Nummern-Eingabefelder findest du einen Platzhalter-Text, der eine Beschreibung oder Anweisung für jedes Feld enthält
|
||||
1. Innerhalb des Formular-Elements solltest du ein `select`-Dropdown-Element auffinden, welches sowohl über eine `id` von `dropdown` als auch über mindestens zwei Optionen zum Auswählen verfügt
|
||||
1. Innerhalb des Fomular-Elements kannst du aus einer Gruppe von mindestens zwei Radio-Buttons, die mit dem `name`-Attribut unterteilt wurden, auswählen
|
||||
1. Innerhalb des Formular-Elements kannst du mehrere Felder aus einer Reihe von Checkboxen auswählen, die alle über ein `value`-Attribut verfügen müssen
|
||||
1. Innerhalb des Formular-Elements findest du eine `textarea` mit zusätzlichen Kommentaren
|
||||
1. Innerhalb des Formular-Elements wird dir ein Button mit der `id` von `submit` angezeigt, um alle Eingaben abzuschicken
|
||||
|
||||
Erfülle die folgenden User Stories und bestehe alle Tests, um dieses Projekt abzuschließen. Gib dem Ganzen deinen persönlichen Stil. Viel Spaß beim Programmieren!
|
||||
|
||||
**Hinweis:** Füge unbedingt `<link rel="stylesheet" href="styles.css">` in dein HTML ein, um dein Stylesheet zu verlinken und dein CSS anzuwenden
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest ein `h1`-Element mit einer `id` von `title` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el && el.tagName === 'H1')
|
||||
```
|
||||
|
||||
Dein `#title` sollte nicht leer sein.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Du solltest ein `p`-Element mit einer `id` von `description` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('description')
|
||||
assert(!!el && el.tagName === 'P')
|
||||
```
|
||||
|
||||
Deine `#description` sollte nicht leer sein.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('description')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Du solltest ein `form`-Element mit einer `id` von `survey-form` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('survey-form')
|
||||
assert(!!el && el.tagName === 'FORM')
|
||||
```
|
||||
|
||||
Du solltest ein `input`-Element mit einer `id` von `name` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Dein `#name` sollte einen `type` von `text` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.type === 'text')
|
||||
```
|
||||
|
||||
Dein `#name` sollte eine Eingabe benötigen.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && el.required)
|
||||
```
|
||||
|
||||
Dein `#name` sollte ein Nachfahre von `#survey-form` sein.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #name')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Du solltest ein `input`-Element mit einer `id` von `email` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Deine `#email` sollte einen `type` von `email` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.type === 'email')
|
||||
```
|
||||
|
||||
Deine `#email` sollte eine Eingabe benötigen.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && el.required)
|
||||
```
|
||||
|
||||
Deine `#email` sollte ein Nachfahre von `#survey-form` sein
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #email')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Du solltest ein `input`-Element mit einer `id` von `number` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.tagName === 'INPUT')
|
||||
```
|
||||
|
||||
Deine `#number` sollte ein Nachfahre von `#survey-form` sein.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #number')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Deine `#number` sollte einen `type` von `number` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.type === 'number')
|
||||
```
|
||||
|
||||
Deine `#number` sollte ein `min`-Attribut mit einem numerischen Wert haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.min && isFinite(el.min))
|
||||
```
|
||||
|
||||
Deine `#number` sollte ein `max`-Attribut mit einem numerischen Wert haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && el.max && isFinite(el.max))
|
||||
```
|
||||
|
||||
Du solltest ein `label`-Element mit einer `id` von `name-label` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
Du solltest ein `label`-Element mit einer `id` von `email-label` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
Du solltest ein `label`-Element mit einer `id` von `number-label` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
Dein `#name-label` sollte Text enthalten, der die Eingabe beschreibt.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Dein `#email-label` sollte Text enthalten, der die Eingabe beschreibt.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Dein `#number-label` sollte Text enthalten, der die Eingabe beschreibt.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Dein `#name-label` sollte ein Nachfahre von `#survey-form` sein.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #name-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Dein `#email-label` sollte ein Nachfahre von `#survey-form` sein.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #email-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Dein `#number-label` sollte ein Nachfahre von `#survey-form` sein.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #number-label')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Dein `#name` sollte einen `placeholder`-Attribut und -Wert haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
Deine `#email` sollte einen `placeholder`-Attribut und -Wert haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
Deine `#number` sollte einen `placeholder`-Attribut und -Wert haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number')
|
||||
assert(!!el && !!el.placeholder && el.placeholder.length > 0)
|
||||
```
|
||||
|
||||
Du solltest ein `select`-Feld mit einer `id` von `dropdown` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('dropdown')
|
||||
assert(!!el && el.tagName === 'SELECT')
|
||||
```
|
||||
|
||||
Dein `#dropdown` sollte mindestens zwei auswählbare (nicht deaktivierte) `option`-Elemente haben.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#dropdown option:not([disabled])')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
Dein `#dropdown` sollte ein Nachfahre (descendant) von `#survey-form` sein.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #dropdown')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Du solltest mindestens zwei `input`-Elemente mit einem `type` von `radio` (Radio Buttons) haben.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('input[type="radio"]')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
Du solltest mindestens zwei Radio-Buttons haben, die Nachfahren (descendants) der `#survey-form` sind.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#survey-form input[type="radio"]')
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
All deine Radio-Buttons sollten ein `value`-Attribut und -Wert haben.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('input[type="radio"]')
|
||||
const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])')
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
All deine Radio-Buttons sollten ein `name`-Attribut und -Wert haben.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('input[type="radio"]')
|
||||
const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])')
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
Jede Gruppe der Radio-Buttons sollte mindestens 2 Radio-Buttons enthalten.
|
||||
|
||||
```js
|
||||
const radioButtons = document.querySelectorAll('input[type="radio"]');
|
||||
const groups = {}
|
||||
|
||||
if (radioButtons) {
|
||||
radioButtons.forEach(el => {
|
||||
if (!groups[el.name]) groups[el.name] = []
|
||||
groups[el.name].push(el)
|
||||
})
|
||||
}
|
||||
|
||||
const groupKeys = Object.keys(groups)
|
||||
|
||||
groupKeys.forEach(key => {
|
||||
if (groups[key].length < 2) assert(false)
|
||||
})
|
||||
|
||||
assert(groupKeys.length > 0)
|
||||
```
|
||||
|
||||
Du solltest mindestens zwei `input`-Elemente mit einem `type` von `checkbox` (Checkboxen) haben, die Nachfahren von `#survey-form` sind.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
|
||||
assert(els.length >= 2)
|
||||
```
|
||||
|
||||
All deine Checkboxen innerhalb von `#survey-form` sollten ein `value`-Attribut und -Wert haben.
|
||||
|
||||
```js
|
||||
const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
|
||||
const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])')
|
||||
assert(els1.length > 0 && els2.length === 0)
|
||||
```
|
||||
|
||||
Du solltest mindestens ein `textarea`-Element haben, das ein Nachfahre (descendant) der `#survey-form` ist.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form textarea')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Du solltest ein `input`- oder `button`-Element mit einer `id` von `submit` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
|
||||
```
|
||||
|
||||
Dein `#submit` sollte einen `type` von `submit` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('submit')
|
||||
assert(!!el && el.type === 'submit')
|
||||
```
|
||||
|
||||
Dein `#submit` sollte ein Nachfahre (descendant) von `#survey-form` sein.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#survey-form #submit')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Survey Form</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Survey Form</h1>
|
||||
<p>The card below was built as a sample survey form for freeCodeCamp.</p>
|
||||
<main id="main">
|
||||
<h1 id="title">Join the Togepi Fan Club!</h1>
|
||||
<p id="description">
|
||||
Enter your information here to receive updates about club activities,
|
||||
our monthly newsletter, and other email communications.
|
||||
</p>
|
||||
<form id="survey-form" action="#">
|
||||
<label for="name" id="name-label"
|
||||
><p>Name:</p>
|
||||
<input type="text" id="name" placeholder="e.g. John Smith" required />
|
||||
</label>
|
||||
<label for="email" id="email-label"
|
||||
><p>Email:</p>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
placeholder="e.g. john.smith@email.com"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label for="age" id="number-label"
|
||||
><p>Age<em>(optional)</em>:</p>
|
||||
<input
|
||||
type="number"
|
||||
id="number"
|
||||
placeholder="e.g. 19"
|
||||
min="18"
|
||||
max="99"
|
||||
/>
|
||||
</label>
|
||||
<label for="interest" id="interest-label"
|
||||
><p>What are you most interested in?</p>
|
||||
<select id="dropdown">
|
||||
<option selected disabled hidden></option>
|
||||
<option id="battles">Battling</option>
|
||||
<option id="breeding">Breeding</option>
|
||||
<option id="catching">Completing my Pokedex</option>
|
||||
<option id="exploring">Exploring new regions</option>
|
||||
</select>
|
||||
</label>
|
||||
<p>Who is your favourite Pokemon?</p>
|
||||
<label for="togepi">
|
||||
<input
|
||||
id="togepi"
|
||||
type="radio"
|
||||
name="favorite"
|
||||
value="togepi"
|
||||
/>Togepi!
|
||||
</label>
|
||||
<label for="pikachu">
|
||||
<input
|
||||
id="pikachu"
|
||||
type="radio"
|
||||
name="favorite"
|
||||
value="pikachu"
|
||||
/>Pikachu
|
||||
</label>
|
||||
<label for="other">
|
||||
<input id="other" type="radio" name="favorite" value="other" />Other
|
||||
</label>
|
||||
<p>Which communications do you want to receive?</p>
|
||||
<label for="newsletter">
|
||||
<input
|
||||
id="newsletter"
|
||||
type="checkbox"
|
||||
name="communications"
|
||||
value="newsletter"
|
||||
/>Newsletter
|
||||
</label>
|
||||
<label for="events">
|
||||
<input
|
||||
id="events"
|
||||
type="checkbox"
|
||||
name="communications"
|
||||
value="events"
|
||||
/>Event updates
|
||||
</label>
|
||||
<label for="updates">
|
||||
<input
|
||||
id="updates"
|
||||
type="checkbox"
|
||||
name="communications"
|
||||
value="updates"
|
||||
/>Club updates
|
||||
</label>
|
||||
<p>Any other information you would like to share?</p>
|
||||
<textarea id="additional-information" rows="4" cols="50">
|
||||
You can provide comments, suggestions, or feedback here.</textarea
|
||||
>
|
||||
<p>
|
||||
<em
|
||||
>Please note: This form is a proof of concept. Submitting the form
|
||||
will not actually transmit your data.</em
|
||||
>
|
||||
</p>
|
||||
<button type="Submit" id="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
<footer>
|
||||
<a href="../">Return to Project List</a> |
|
||||
<a href="https://www.nhcarrigan.com">Return to HomePage</a>
|
||||
</footer>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
main {
|
||||
text-align: center;
|
||||
background-color: #92869c;
|
||||
background-blend-mode: lighten;
|
||||
max-width: 500px;
|
||||
margin: 20px auto;
|
||||
border-radius: 50px;
|
||||
box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
|
||||
color: black;
|
||||
}
|
||||
body {
|
||||
text-align: center;
|
||||
background: #3a3240;
|
||||
color: white;
|
||||
}
|
||||
input, textarea, select, button {
|
||||
background: #3a3240;
|
||||
color: white;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,325 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd18
|
||||
title: Erstelle eine Gedenkseite
|
||||
challengeType: 14
|
||||
forumTopicId: 301147
|
||||
dashedName: build-a-tribute-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie <a href="https://tribute-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://tribute-page.freecodecamp.rocks</a> aufweist
|
||||
|
||||
**User Stories:**
|
||||
|
||||
1. Deine Gedenkseite sollte über ein `main`-Element mit einer zugehörigen `id` von `main` verfügen, die alle anderen Elemente enthält
|
||||
1. Du solltest ein Element mit einer `id` von `title` sehen, das einen String (d.h. Text) enthält, der das Thema der Gedenkseite beschreibt (z.B. „Dr. Norman Borlaug“)
|
||||
1. Du solltest entweder ein `figure`- oder ein `div`-Element mit einer `id` von `img-div` sehen
|
||||
1. Du solltest innerhalb des `#img-div`-Elements ein `img`-Element mit zugehöriger `id="image"` sehen
|
||||
1. Du solltest innerhalb des `#img-div`-Elements ein Element mit zugehöriger `id="img-caption"` sehen, der einen Text enthält, der das in `#img-div` angezeigte Bild beschreibt
|
||||
1. Du solltest ein Element mit zugehöriger `id="tribute-info"` sehen, welches das Thema der Gedenkseite beschreibenden Textinhalt enthält
|
||||
1. Du solltest ein `a`-Element mit zugehöriger `id="tribute-link"` sehen, welches auf eine externe Seite verweist, die zusätzliche Informationen über das Thema der Gedenkseite enthält. TIPP: Du musst deinem Element ein Attribut von `target` zuweisen und es auf `_blank` setzen, damit der Link in einem neuen Tab geöffnet werden kann
|
||||
1. Dein `#image` sollte die `max-width`- und `height`-Eigenschaften verwenden, um die Größenänderung responsiv zu gestalten, d. h. relativ zur Breite des Elternelements, ohne dessen Originalgröße zu überschreiten
|
||||
1. Dein `img`-Element sollte innerhalb des Elternelements zentriert werden
|
||||
|
||||
Erfülle die folgenden User Stories und bestehe alle Tests, um dieses Projekt abzuschließen. Gib dem Ganzen deinen persönlichen Stil. Viel Spaß beim Programmieren!
|
||||
|
||||
**Hinweis:** Füge unbedingt `<link rel="stylesheet" href="styles.css">` in dein HTML ein, um dein Stylesheet zu verlinken und dein CSS anzuwenden
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest ein `main`-Element mit einer `id` von `main` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('main')
|
||||
assert(!!el && el.tagName === 'MAIN')
|
||||
```
|
||||
|
||||
Dein `#img-div`, `#image`, `#img-caption`, `#tribute-info` und `#tribute-link` sollten alle Nachfahren (descendants) von `#main` sein.
|
||||
|
||||
```js
|
||||
const el1 = document.querySelector('#main #img-div')
|
||||
const el2 = document.querySelector('#main #image')
|
||||
const el3 = document.querySelector('#main #img-caption')
|
||||
const el4 = document.querySelector('#main #tribute-info')
|
||||
const el5 = document.querySelector('#main #tribute-link')
|
||||
assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5)
|
||||
```
|
||||
|
||||
Du solltest ein Element mit einer `id` von `title` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Dein `#title` sollte nicht leer sein.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('title')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
|
||||
```
|
||||
|
||||
Du solltest ein `figure`- oder `div`-Element mit einer `id` von `img-div` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('img-div')
|
||||
assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE'))
|
||||
```
|
||||
|
||||
Du solltest ein `img`-Element mit einer `id` von `image` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('image')
|
||||
assert(!!el && el.tagName === 'IMG')
|
||||
```
|
||||
|
||||
Dein `#image` sollte ein Nachfahre (descendant) von `#img-div` sein.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#img-div #image')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Du solltest ein `figcaption`- oder `div`-Element mit einer `id` von `img-caption` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('img-caption')
|
||||
assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION'))
|
||||
```
|
||||
|
||||
Dein `#img-caption` sollte ein Nachfahre (descendant) von `#img-div` sein.
|
||||
|
||||
```js
|
||||
const el = document.querySelector('#img-div #img-caption')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Dein `#img-caption` darf nicht leer sein.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('img-caption')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Du solltest ein Element mit einer `id` von `tribute-info` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-info')
|
||||
assert(!!el)
|
||||
```
|
||||
|
||||
Dein `#tribute-info` darf nicht leer sein.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-info')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
Du solltest ein `a`-Element mit einer `id` von `tribute-link` haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-link')
|
||||
assert(!!el && el.tagName === 'A')
|
||||
```
|
||||
|
||||
Dein `#tribute-link` sollte ein `href`-Attribut und -Wert haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-link')
|
||||
assert(!!el && !!el.href && el.href.length > 0)
|
||||
```
|
||||
|
||||
Dein `#tribute-link` sollte ein, auf `_blank` gesetztes, `target`-Attribut haben.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('tribute-link')
|
||||
assert(!!el && el.target === '_blank')
|
||||
```
|
||||
|
||||
Dein `img`-Element sollte ein `display` von `block` enthalten.
|
||||
|
||||
```js
|
||||
const img = document.getElementById('image');
|
||||
const imgStyle = window.getComputedStyle(img);
|
||||
const style = imgStyle?.getPropertyValue('display')
|
||||
assert(style === 'block')
|
||||
```
|
||||
|
||||
Dein `#image` sollte eine `max-width` von `100%` haben.
|
||||
|
||||
```js
|
||||
const img = document.getElementById('image');
|
||||
const imgStyle = window.getComputedStyle(img);
|
||||
const style = imgStyle?.getPropertyValue('max-width')
|
||||
assert(style === '100%')
|
||||
```
|
||||
|
||||
Dein `#image` sollte eine `height` von `auto` haben.
|
||||
|
||||
```js
|
||||
// taken from the testable-projects repo
|
||||
const img = document.getElementById('image');
|
||||
const imgStyle = window.getComputedStyle(img);
|
||||
const oldDisplayValue = imgStyle.getPropertyValue('display');
|
||||
const oldDisplayPriority = imgStyle.getPropertyPriority('display');
|
||||
img?.style.setProperty('display', 'none', 'important');
|
||||
const heightValue = imgStyle?.getPropertyValue('height')
|
||||
img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
|
||||
assert(heightValue === 'auto')
|
||||
```
|
||||
|
||||
Dein `#image` sollte innerhalb der Elternklasse zentriert sein.
|
||||
|
||||
```js
|
||||
// taken from the testable-projects repo
|
||||
const img = document.getElementById('image'),
|
||||
imgParent = img?.parentElement,
|
||||
imgLeft = img?.getBoundingClientRect().left,
|
||||
imgRight = img?.getBoundingClientRect().right,
|
||||
parentLeft = imgParent?.getBoundingClientRect().left,
|
||||
parentRight = imgParent?.getBoundingClientRect().right,
|
||||
leftMargin = imgLeft - parentLeft,
|
||||
rightMargin = parentRight - imgRight;
|
||||
assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Pacifico"
|
||||
rel="stylesheet"
|
||||
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Lobster"
|
||||
rel="stylesheet"
|
||||
|
||||
/>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
<title>Tribute Page</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Tribute Page</h1>
|
||||
<p>The below card was designed as a tribute page for freeCodeCamp.</p>
|
||||
<main id="main">
|
||||
<div id="img-div">
|
||||
<img
|
||||
id="image"
|
||||
class="border"
|
||||
src="https://upload.wikimedia.org/wikipedia/en/5/53/Pok%C3%A9mon_Togepi_art.png"
|
||||
alt="An image of Togepi"
|
||||
/>
|
||||
<figcaption id="img-caption">Togepi, happy as always.</figcaption>
|
||||
</div>
|
||||
<h2 id="title">Togepi</h2>
|
||||
<hr />
|
||||
<div id="tribute-info">
|
||||
<p>
|
||||
Togepi was first discovered in the Johto region, when Ash Ketchum
|
||||
discovered a mysterious egg. However, when the egg hatched, Togepi saw
|
||||
Ash's friend Misty first and imprinted on her. Like many other
|
||||
creatures, this imprinting process created a bond and Togepi views
|
||||
Misty as his mother.
|
||||
</p>
|
||||
<p>
|
||||
Togepi is a very childlike Pokemon, and is very emotionally
|
||||
expressive. He demonstrates extreme levels of joy and sadness.
|
||||
</p>
|
||||
<hr />
|
||||
<p><u>Battle Information</u></p>
|
||||
<ul style="list-style-type: none">
|
||||
<li>Type: Fairy</li>
|
||||
<li>Evolutions: Togepi -> Togetic -> Togekiss</li>
|
||||
<li>Moves: Growl, Pound, Sweet Kiss, Charm</li>
|
||||
<li>Weaknesses: Poison, Steel</li>
|
||||
<li>Resistances: Dragon</li>
|
||||
</ul>
|
||||
<p>
|
||||
Check out this
|
||||
<a
|
||||
id="tribute-link"
|
||||
href="https://bulbapedia.bulbagarden.net/wiki/Togepi_(Pok%C3%A9mon)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Bulbapedia article on Togepi</a
|
||||
>
|
||||
for more information on this great Pokemon.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<footer>
|
||||
<a href="../">Return to Project List</a> |
|
||||
<a href="https://www.nhcarrigan.com">Return to HomePage</a>
|
||||
</footer>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: #3a3240;
|
||||
color: white;
|
||||
}
|
||||
main {
|
||||
background-color: #92869c;
|
||||
font-family: Lobster;
|
||||
max-width: 500px;
|
||||
margin: 20px auto;
|
||||
color: black;
|
||||
border-radius: 50px;
|
||||
box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 20pt;
|
||||
font-family: Pacifico;
|
||||
}
|
||||
body {
|
||||
text-align: center;
|
||||
font-size: 12pt;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
font-size: 10pt;
|
||||
}
|
||||
.border {
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
#image {
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#img-caption {
|
||||
font-size: 10pt;
|
||||
}
|
||||
a:not(#tribute-link) {
|
||||
color: white;
|
||||
}
|
||||
hr {
|
||||
border-color: black;
|
||||
}
|
||||
```
|
||||
@@ -23,7 +23,7 @@ s[2] = 45;
|
||||
console.log(s);
|
||||
```
|
||||
|
||||
`s = [1, 2, 3]` comporterà un errore. Il comando `console.log` mostrerà il valore `[5, 6, 45]`.
|
||||
`s = [1, 2, 3]` comporterà un errore. Dopo aver trasformato la riga in un commento, il `console.log` mostrerà il valore `[5, 6, 45]`.
|
||||
|
||||
Come puoi vedere, puoi mutare l'oggetto `[5, 6, 7]` stesso e la variabile `s` punterà ancora all'array alterato `[5, 6, 45]`. Come tutti gli array, gli elementi in `s` sono mutabili, ma poiché è stata usata `const`, non è possibile utilizzare l'identificatore di variabile `s` per puntare ad un array diverso utilizzando l'operatore di assegnazione.
|
||||
|
||||
|
||||
@@ -28,9 +28,21 @@ Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React,
|
||||
|
||||
**User Story #7:** Quando un `.drum-pad` viene attivato, viene visualizzata una stringa che descrive la clip audio associata come testo interno dell'elemento `#display` (ogni stringa deve essere unica).
|
||||
|
||||
Ecco alcuni campioni audio che puoi usare per la tua batteria:
|
||||
|
||||
- [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3)
|
||||
- [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3)
|
||||
- [Heater 3](https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3)
|
||||
- [Heater 4](https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3)
|
||||
- [Clap](https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3)
|
||||
- [Open-HH](https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3)
|
||||
- [Kick-n'-Hat](https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3)
|
||||
- [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3)
|
||||
- [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3)
|
||||
|
||||
Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">usando questo modello CodePen</a> e facendo click su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test passati.
|
||||
Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test superati.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-17
|
||||
|
||||
Per seguire le buone pratiche di accessibilità, collega gli elementi `input` e gli elementi `label` usando l'attributo `for`.
|
||||
|
||||
Usa questi valori per i rispettivi attributi `id`: `first-name`, `last-name`, `email`, `new-password`
|
||||
Usa `first-name`, `last-name`, `email` e `new-password` come valori dei rispettivi attributi `id`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-28
|
||||
|
||||
Segui le buone pratiche di accessibilità collegando gli elementi `input` e gli elementi `label` nel secondo `fieldset`.
|
||||
|
||||
Usa questi valori per i rispettivi attributi `id`: `personal-account`, `business-account`, `terms-and-conditions`
|
||||
Usa `personal-account`, `business-account` e `terms-and-conditions` come valori dei rispettivi attributi `id`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-37
|
||||
|
||||
Collega gli elementi inviabili del modulo con il rispettivo elemento `label`.
|
||||
|
||||
Usa questi valori per i rispettivi attributi `id`: `profile-picture`, `age`, `referrer`, `bio`
|
||||
Usa `profile-picture`, `age`, `referrer` e `bio` come valori dei rispettivi attributi `id`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 5dc24614f86c76b9248c6ebd
|
||||
title: ステップ 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
アンカー (`a`) 要素を使うと、他のページにリンクすることができます。 例えば、`<a href='https://freecodecamp.org'></a>` と書くと `freecodecamp.org` にリンクします。
|
||||
|
||||
段落要素の後に、`https://freecatphotoapp.com` へとリンクするアンカー要素を追加してください。 この時点では、プレビューにリンクは表示されません。
|
||||
|
||||
# --hints--
|
||||
|
||||
アンカー (`a`) 要素には開始タグが必要です。 開始タグは `<elementName>` のような形式の構文です。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('a'));
|
||||
```
|
||||
|
||||
アンカー (`a`) 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/a\>/));
|
||||
```
|
||||
|
||||
アンカー (`a`) 要素は `p` 要素の下に置く必要があります。 順番が誤っているようです。
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('a, p')].map(
|
||||
(node) => node.nodeName
|
||||
);
|
||||
assert(collection.indexOf('P') < collection.indexOf('A'));
|
||||
```
|
||||
|
||||
アンカー (`a`) 要素に `href` 属性がありません。 開始タグのタグ名の後にスペースがあることと、すべての属性名の前にスペースがあることを確認してください。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('a').hasAttribute('href'));
|
||||
```
|
||||
|
||||
アンカー (`a`) 要素は `https://freecatphotoapp.com` にリンクされる必要があります。 URL が設定されていないか、誤字脱字があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('a').getAttribute('href') ===
|
||||
'https://freecatphotoapp.com'
|
||||
);
|
||||
```
|
||||
|
||||
アンカー ('a') 要素の `href` は正しいリンクに設定されていますが、属性の値は常に引用符 (") で囲むことが推奨されています。
|
||||
|
||||
```js
|
||||
assert(
|
||||
!/\<a\s+href\s*=\s*https:\/\/www.freecodecamp.org\/cat-photos/.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
--fcc-editable-region--
|
||||
<p>Click here to view more cat photos.</p>
|
||||
--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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 5ddbd81294d8ddc1510a8e56
|
||||
title: ステップ 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
リンクのテキストは、アンカー (`a`) 要素の開始タグと終了タグの間に配置します。 例えば `<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>` と書くと、`click here to go to freeCodeCamp.org` というテキストのリンクになります。
|
||||
|
||||
アンカー要素に、`cat photos` というアンカーテキストを追加してください。 これがリンクのテキストになります。
|
||||
|
||||
# --hints--
|
||||
|
||||
アンカー (`a`) 要素には開始タグが必要です。 開始タグは `<elementName>` のような形式の構文です。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('a'));
|
||||
```
|
||||
|
||||
アンカー (`a`) 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/a\>/));
|
||||
```
|
||||
|
||||
アンカー (`a`) 要素のテキストは `cat photos` でなければなりません。 リンクテキストがアンカー (`a`) 要素の開始タグと終了タグの間に置かれていることを確認してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
|
||||
'cat photos'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more cat photos.</p>
|
||||
--fcc-editable-region--
|
||||
<a href="https://freecatphotoapp.com"></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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 7cf9b03d81a65668421804c3
|
||||
title: ステップ 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`action` 属性で指定された場所でフォームのデータにアクセスできるようにするには、テキストフィールドに `name` 属性を追加し、送信されるデータを表す値を設定しなければなりません。 例えばメールアドレス用のテキストフィールドであれば、次のような構文を使用できます: `<input type="text" name="email">`
|
||||
|
||||
テキストフィールドに、`name` 属性と値 `catphotourl` を追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`input` 要素が削除されているか、構文が正しくありません。 属性値は引用符で囲む必要があります。
|
||||
|
||||
```js
|
||||
assert($('input').length);
|
||||
```
|
||||
|
||||
`form` には `input` 要素だけが含まれるようにしてください。 `form` 要素内の余分な HTML 要素やテキストは削除してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('form')[0].children.length === 1 &&
|
||||
$('form')[0].innerText.trim().length === 0
|
||||
);
|
||||
```
|
||||
|
||||
`input` 要素に `name` 属性がありません。 開始タグのタグ名の後にスペースがあることと、すべての属性名の前にスペースがあることを確認してください。
|
||||
|
||||
```js
|
||||
assert($('input')[0].hasAttribute('name'));
|
||||
```
|
||||
|
||||
`input` 要素に `name` 属性があり、値 `catphotourl` が設定されている必要があります。 値が設定されていないか、誤字脱字があります。 属性値は引用符で囲むことを忘れないでください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input')[0]
|
||||
.getAttribute('name')
|
||||
.match(/^catphotourl$/i)
|
||||
);
|
||||
```
|
||||
|
||||
`input` 要素の `name` 属性は `catphotourl` に設定されていますが、属性の値は常に引用符で囲むことが推奨されています。
|
||||
|
||||
```js
|
||||
assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<input type="text">
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 60f027c87bc98f050395c139
|
||||
title: ステップ 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
次に、`html` 要素内に `head` タグと `body` タグの開始タグおよび終了タグを追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`head` の開始タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
`head` の終了タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
`body` の開始タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
`body` の終了タグが 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
`head` 要素と `body` 要素は兄弟要素である必要があります。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling.localName === 'body');
|
||||
```
|
||||
|
||||
`head` 要素は `html` 要素の中にある必要があります。
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
`body` 要素は `html` 要素の中にある必要があります。
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 60f0286404aefb0562a4fdf9
|
||||
title: ステップ 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`head` 内に、`title` 要素と `meta` 要素を追加してください。 プロジェクトのタイトルは `Registration Form` とし、`meta` 要素には `charset` 属性と値 `UTF-8` を設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードには `title` 要素が 1 つ必要です。
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
`title` 要素は `head` 要素内にある必要があります。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('head > title'));
|
||||
```
|
||||
|
||||
プロジェクトには `Registration Form` というタイトルが必要です。
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title.text.toLowerCase(), 'registration form')
|
||||
```
|
||||
|
||||
タイトルについて、大文字小文字の区別とスペルに気をつけましょう。
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title.text, 'Registration Form');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 60f1922fcbd2410527b3bd89
|
||||
title: ステップ 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
プロジェクトの見た目を整えるために、CSS を追加しましょう。 まず、`body` の `width` を `100%` に、`height` を `100vh` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`body` 要素セレクターを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
`body` の `width` を `100%` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
`body` の `height` を `100vh` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
|
||||
```
|
||||
|
||||
# --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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 60f5c3e399ff1a05629964e4
|
||||
title: ステップ 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
タイトルから分かるように、ここではフォームを作成しています。 なので、`p` 要素の後に `form` を挿入して、`action` 属性の送信先を `https://register-demo.freecodecamp.org` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`p` 要素の直後に `form` 要素を追加する必要があります。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('p + form'));
|
||||
```
|
||||
|
||||
`form` には `action` 属性を追加する必要があります。
|
||||
|
||||
```js
|
||||
// Default action points to window location
|
||||
assert.notEqual(document.querySelector('form')?.action, window?.location?.href);
|
||||
```
|
||||
|
||||
`action` の値を `https://register-demo.freecodecamp.org` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
|
||||
```
|
||||
|
||||
# --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>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 60f5d2776c854e069560fbe6
|
||||
title: ステップ 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
1 つ目の `fieldset` には、名前、メールアドレス、パスワードを入れます。 まずは 1 つ目の `fieldset` に `label` 要素を 4 つ追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`label` 要素を 4 つ追加する必要があります。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label')?.length, 4);
|
||||
```
|
||||
|
||||
1 つ目の `fieldset` に `label` 要素を追加してください。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4);
|
||||
```
|
||||
|
||||
# --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>
|
||||
--fcc-editable-region--
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
|
||||
</fieldset>
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 60f5dc35c07ac1078f140916
|
||||
title: ステップ 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`label` 要素に以下のテキストを追加してください:
|
||||
|
||||
- `Enter Your First Name:`
|
||||
- `Enter Your Last Name:`
|
||||
- `Enter Your Email:`
|
||||
- `Create a New Password:`
|
||||
|
||||
# --hints--
|
||||
|
||||
1 つ目の `label` には、テキスト `Enter Your First Name:` が必要です。
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('label')?.innerHTML, /Enter Your First Name:/i);
|
||||
```
|
||||
|
||||
2 つ目の `label` には、テキスト `Enter Your Last Name:` が必要です。
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset > label:nth-child(2)')?.innerHTML, /Enter Your Last Name:/i);
|
||||
```
|
||||
|
||||
3 つ目の `label` には、テキスト `Enter Your Email:` が必要です。
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset > label:nth-child(3)')?.innerHTML, /Enter Your Email:/i);
|
||||
```
|
||||
|
||||
4 つ目の `label` には、テキスト `Create a New Password:` が必要です。
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset > label:nth-child(4)')?.innerHTML, /Create a New Password:/i);
|
||||
```
|
||||
|
||||
# --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'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label></label>
|
||||
<label></label>
|
||||
<label></label>
|
||||
<label></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
@@ -23,7 +23,7 @@ s[2] = 45;
|
||||
console.log(s);
|
||||
```
|
||||
|
||||
`s = [1, 2, 3]` resultará em um erro. `console.log` exibirá o valor `[5, 6, 45]`.
|
||||
`s = [1, 2, 3]` resultará em um erro. Depois de comentar essa linha, o `console.log` exibirá o valor `[5, 6, 45]`.
|
||||
|
||||
Como você pode ver, você pode alterar o objeto `[5, 6, 7]` e a variável `s` ainda apontará para o array alterado `[5, 6, 45]`. Assim como em qualquer outro array, os elementos dentro de `s` também são mutáveis. Mas como `const` foi usado, você não pode usar o identificador da variável `s` para apontar para uma matriz diferente (ou qualquer outro valor) usando o operador de atribuição.
|
||||
|
||||
|
||||
@@ -28,9 +28,21 @@ Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, Reac
|
||||
|
||||
**História de usuário nº 7:** quando um `.drum-pad` é acionado, uma string descrevendo o clipe de áudio associado é exibido como o texto interno do elemento `#display` (cada string precisa ser única).
|
||||
|
||||
Aqui estão algumas amostras de áudio que você pode usar para sua bateria eletrônica:
|
||||
|
||||
- [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3)
|
||||
- [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3)
|
||||
- [Heater 3](https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3)
|
||||
- [Heater 4](https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3)
|
||||
- [Clap](https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3)
|
||||
- [Open-HH](https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3)
|
||||
- [Kick-n'-Hat](https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3)
|
||||
- [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3)
|
||||
- [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3)
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.
|
||||
Quando você terminar, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-17
|
||||
|
||||
Seguindo as melhores práticas de acessibilidade, vincule os elementos `input` e `label` utilizando o atributo `for`.
|
||||
|
||||
Use estes valores para as respectivas propriedades de `id`: `first-name`, `last-name`, `email` e `new-password`
|
||||
Use `first-name`, `last-name`, `email` e `new-password` como valores para os respectivos atributos `id`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-28
|
||||
|
||||
Siga as melhores práticas de acessibilidade vinculando os elementos `input` e `label` no segundo `fieldset`.
|
||||
|
||||
Use estes valores para as respectivas propriedades de `id`: `personal-account`, `business-account` e `terms-and-conditions`
|
||||
Use `personal-account`, `business-account` e `terms-and-conditions` como valores para os respectivos atributos `id`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-37
|
||||
|
||||
Vincule os elementos de formulário aplicáveis e os elementos `label`.
|
||||
|
||||
Use estes valores para as respectivas propriedades de `id`: `profile-picture`, `age`, `referrer` e `bio`
|
||||
Use `profile-picture`, `age`, `referrer` e `bio` como valores para os respectivos atributos `id`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user